update logo + clean content
This commit is contained in:
6 files changed
+445
-105
No files matched your search
Binary file not shown.
|
Before Width: | Height: | Size: 527 KiB After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 961 KiB |
+58
-12
@@ -5,19 +5,60 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta
|
||||
name="description"
|
||||
content="Cedarline Digital is an independent software business in British Columbia, Canada, serving as a home for software projects, support resources, and policies."
|
||||
content="Cedarline Digital is an independent software business based in British Columbia, Canada, building software products, web tools, mobile apps, and infrastructure-backed systems."
|
||||
>
|
||||
<title>Cedarline Digital | Software Built From Strong Foundations</title>
|
||||
<title>Cedarline Digital | Independent Software Business in British Columbia</title>
|
||||
<link rel="canonical" href="https://cedarline.digital/">
|
||||
<meta property="og:title" content="Cedarline Digital | Independent Software Business in British Columbia">
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Cedarline Digital is an independent software business based in British Columbia, Canada, building software products, web tools, mobile apps, and infrastructure-backed systems."
|
||||
>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://cedarline.digital/">
|
||||
<meta property="og:site_name" content="Cedarline Digital">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="Cedarline Digital | Independent Software Business in British Columbia">
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Cedarline Digital is an independent software business based in British Columbia, Canada, building software products, web tools, mobile apps, and infrastructure-backed systems."
|
||||
>
|
||||
<link rel="icon" type="image/png" href="assets/images/logo-transparent-a.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Cedarline Digital",
|
||||
"url": "https://cedarline.digital/",
|
||||
"founder": {
|
||||
"@type": "Person",
|
||||
"name": "Braeden Sowinski"
|
||||
},
|
||||
"areaServed": {
|
||||
"@type": "Country",
|
||||
"name": "Canada"
|
||||
},
|
||||
"location": {
|
||||
"@type": "Place",
|
||||
"name": "British Columbia, Canada",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressRegion": "British Columbia",
|
||||
"addressCountry": "CA"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header" data-header>
|
||||
<a class="brand" href="#top" aria-label="Cedarline Digital home">
|
||||
<span class="brand-mark" aria-hidden="true">
|
||||
<img src="assets/images/logo-transparent.png" alt="">
|
||||
<span class="brand-mark">
|
||||
<img src="assets/images/logo-transparent.png" alt="Cedarline Digital tree and circuit logo">
|
||||
</span>
|
||||
<span class="brand-text">
|
||||
<strong>Cedarline</strong>
|
||||
@@ -35,7 +76,7 @@
|
||||
<a href="#about">About</a>
|
||||
<a href="#work">Work</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a class="nav-cta" href="mailto:hello@cedarline.digital">Email</a>
|
||||
<a class="nav-cta" href="mailto:hello@cedarline.digital" aria-label="Email Cedarline Digital">Email</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -47,7 +88,7 @@
|
||||
<em>Digital solutions.</em>
|
||||
</h1>
|
||||
<p class="hero-copy">
|
||||
Cedarline Digital is an independent software business based in Beautiful British Columbia, Canada.
|
||||
Cedarline Digital is an independent software business based in Beautiful British Columbia.
|
||||
</p>
|
||||
<div class="hero-actions" aria-label="Hero actions">
|
||||
<a class="button button-primary" href="#about">Learn more <span aria-hidden="true">›</span></a>
|
||||
@@ -59,7 +100,7 @@
|
||||
<section class="section about-section" id="about" aria-labelledby="about-title">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">About</p>
|
||||
<h2 id="about-title">Independent software, built with care.</h2>
|
||||
<h2 id="about-title">Independent software, rooted in reliability.</h2>
|
||||
</div>
|
||||
<div class="about-grid">
|
||||
<div class="section-copy">
|
||||
@@ -84,6 +125,10 @@
|
||||
<dt>Structure</dt>
|
||||
<dd>Independent / founder-led</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Operator</dt>
|
||||
<dd>Founder / operator: Braeden Sowinski</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Status</dt>
|
||||
<dd>Preparing public products and resources</dd>
|
||||
@@ -155,8 +200,9 @@
|
||||
<div class="contact-panel">
|
||||
<div class="contact-copy">
|
||||
<p class="eyebrow">Contact</p>
|
||||
<h2 id="contact-title" class="sr-only">Contact Cedarline Digital</h2>
|
||||
<p>
|
||||
For general contact, support, business inquiries, or future product questions, use the email below.
|
||||
Cedarline Digital is operated independently from British Columbia. For general contact, support, business inquiries, or future product questions, use the following email.
|
||||
</p>
|
||||
</div>
|
||||
<div class="contact-action">
|
||||
@@ -176,15 +222,15 @@
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
<a class="footer-logo" href="#top" aria-label="Cedarline Digital home">
|
||||
<span class="footer-mark" aria-hidden="true">
|
||||
<img src="assets/images/logo-transparent.png" alt="">
|
||||
<span class="footer-mark">
|
||||
<img src="assets/images/logo-transparent.png" alt="Cedarline Digital tree and circuit logo">
|
||||
</span>
|
||||
<span class="footer-wordmark">
|
||||
<strong>Cedarline</strong>
|
||||
<span>Digital</span>
|
||||
</span>
|
||||
</a>
|
||||
<p>An independent software business based in British Columbia.</p>
|
||||
<p>An independent software business. Operated by Braeden Sowinski.</p>
|
||||
<span class="footer-location">British Columbia, Canada</span>
|
||||
</div>
|
||||
|
||||
@@ -199,7 +245,7 @@
|
||||
<h2>Legal</h2>
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Terms</a>
|
||||
<a href="mailto:hello@cedarline.digital">Email</a>
|
||||
<a href="mailto:hello@cedarline.digital" aria-label="Email Cedarline Digital">Email</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
+387
-93
@@ -26,21 +26,60 @@ body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
color: var(--text);
|
||||
font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-family:
|
||||
Manrope,
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
line-height: 1.6;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 17, 17, 0.56), var(--bg) 760px),
|
||||
linear-gradient(90deg, rgba(15, 17, 17, 0.94), rgba(15, 17, 17, 0.72) 45%, rgba(15, 17, 17, 0.9)),
|
||||
radial-gradient(circle at 72% 6%, rgba(79, 138, 107, 0.18), transparent 34rem),
|
||||
radial-gradient(circle at 12% 18%, rgba(42, 94, 62, 0.18), transparent 30rem),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(15, 17, 17, 0.94),
|
||||
rgba(15, 17, 17, 0.72) 45%,
|
||||
rgba(15, 17, 17, 0.9)
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 72% 6%,
|
||||
rgba(79, 138, 107, 0.18),
|
||||
transparent 34rem
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 12% 18%,
|
||||
rgba(42, 94, 62, 0.18),
|
||||
transparent 30rem
|
||||
),
|
||||
linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
|
||||
url("assets/images/backdrop2.jpg"),
|
||||
var(--bg);
|
||||
background-attachment: scroll, scroll, scroll, scroll, scroll, scroll, fixed, scroll;
|
||||
background-position: center top, center top, center top, center top, center top, center top, center top, center top;
|
||||
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
|
||||
background-size: auto, auto, auto, auto, 88px 88px, 88px 88px, cover, auto;
|
||||
url("assets/images/backdrop.jpg"), var(--bg);
|
||||
background-attachment:
|
||||
scroll, scroll, scroll, scroll, scroll, scroll, fixed, scroll;
|
||||
background-position:
|
||||
center top,
|
||||
center top,
|
||||
center top,
|
||||
center top,
|
||||
center top,
|
||||
center top,
|
||||
center top,
|
||||
center top;
|
||||
background-repeat:
|
||||
no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat,
|
||||
no-repeat;
|
||||
background-size:
|
||||
auto,
|
||||
auto,
|
||||
auto,
|
||||
auto,
|
||||
88px 88px,
|
||||
88px 88px,
|
||||
cover,
|
||||
auto;
|
||||
}
|
||||
|
||||
body::before,
|
||||
@@ -54,16 +93,36 @@ body::after {
|
||||
|
||||
body::before {
|
||||
background:
|
||||
linear-gradient(135deg, transparent 0 56%, rgba(134, 179, 143, 0.035) 56% 56.4%, transparent 56.4%),
|
||||
linear-gradient(28deg, transparent 0 66%, rgba(79, 138, 107, 0.045) 66% 66.4%, transparent 66.4%);
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 0 56%,
|
||||
rgba(134, 179, 143, 0.035) 56% 56.4%,
|
||||
transparent 56.4%
|
||||
),
|
||||
linear-gradient(
|
||||
28deg,
|
||||
transparent 0 66%,
|
||||
rgba(79, 138, 107, 0.045) 66% 66.4%,
|
||||
transparent 66.4%
|
||||
);
|
||||
}
|
||||
|
||||
body::after {
|
||||
top: auto;
|
||||
height: 44vh;
|
||||
background:
|
||||
linear-gradient(155deg, transparent 0 36%, rgba(31, 41, 36, 0.82) 36% 37%, transparent 37%),
|
||||
linear-gradient(18deg, transparent 0 43%, rgba(23, 28, 26, 0.9) 43% 44%, transparent 44%),
|
||||
linear-gradient(
|
||||
155deg,
|
||||
transparent 0 36%,
|
||||
rgba(31, 41, 36, 0.82) 36% 37%,
|
||||
transparent 37%
|
||||
),
|
||||
linear-gradient(
|
||||
18deg,
|
||||
transparent 0 43%,
|
||||
rgba(23, 28, 26, 0.9) 43% 44%,
|
||||
transparent 44%
|
||||
),
|
||||
linear-gradient(0deg, rgba(15, 17, 17, 0.94), transparent);
|
||||
opacity: 0.46;
|
||||
}
|
||||
@@ -143,8 +202,14 @@ dl {
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
linear-gradient(150deg, rgba(31, 41, 36, 0.96), rgba(15, 17, 17, 0.82)),
|
||||
radial-gradient(circle at 50% 18%, rgba(134, 179, 143, 0.18), transparent 70%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 34px var(--shadow);
|
||||
radial-gradient(
|
||||
circle at 50% 18%,
|
||||
rgba(134, 179, 143, 0.18),
|
||||
transparent 70%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 16px 34px var(--shadow);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
@@ -178,7 +243,10 @@ dl {
|
||||
.site-nav a {
|
||||
padding: 10px 13px;
|
||||
border-radius: var(--radius);
|
||||
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
|
||||
transition:
|
||||
color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
border-color 160ms ease;
|
||||
}
|
||||
|
||||
.site-nav a:hover,
|
||||
@@ -192,13 +260,21 @@ dl {
|
||||
margin-left: 8px;
|
||||
border: 1px solid rgba(134, 179, 143, 0.28);
|
||||
color: #f5fff7;
|
||||
background: linear-gradient(180deg, rgba(79, 138, 107, 0.92), rgba(42, 94, 62, 0.92));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(79, 138, 107, 0.92),
|
||||
rgba(42, 94, 62, 0.92)
|
||||
);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.site-nav .nav-cta:hover,
|
||||
.site-nav .nav-cta:focus-visible {
|
||||
background: linear-gradient(180deg, rgba(89, 154, 119, 0.96), rgba(47, 106, 70, 0.96));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(89, 154, 119, 0.96),
|
||||
rgba(47, 106, 70, 0.96)
|
||||
);
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
@@ -298,7 +374,10 @@ h3 {
|
||||
padding: 0 18px;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 800;
|
||||
transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background-color 160ms ease;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
@@ -313,7 +392,11 @@ h3 {
|
||||
.contact-link {
|
||||
border: 1px solid rgba(134, 179, 143, 0.35);
|
||||
color: #f5fff7;
|
||||
background: linear-gradient(180deg, rgba(79, 138, 107, 0.95), rgba(42, 94, 62, 0.95));
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(79, 138, 107, 0.95),
|
||||
rgba(42, 94, 62, 0.95)
|
||||
);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
@@ -333,9 +416,24 @@ h3 {
|
||||
height: 240px;
|
||||
opacity: 0.44;
|
||||
background:
|
||||
linear-gradient(145deg, transparent 0 42%, rgba(79, 138, 107, 0.2) 42% 43%, transparent 43%),
|
||||
linear-gradient(28deg, transparent 0 49%, rgba(134, 179, 143, 0.18) 49% 50%, transparent 50%),
|
||||
linear-gradient(153deg, transparent 0 58%, rgba(31, 41, 36, 0.88) 58% 68%, transparent 68%);
|
||||
linear-gradient(
|
||||
145deg,
|
||||
transparent 0 42%,
|
||||
rgba(79, 138, 107, 0.2) 42% 43%,
|
||||
transparent 43%
|
||||
),
|
||||
linear-gradient(
|
||||
28deg,
|
||||
transparent 0 49%,
|
||||
rgba(134, 179, 143, 0.18) 49% 50%,
|
||||
transparent 50%
|
||||
),
|
||||
linear-gradient(
|
||||
153deg,
|
||||
transparent 0 58%,
|
||||
rgba(31, 41, 36, 0.88) 58% 68%,
|
||||
transparent 68%
|
||||
);
|
||||
filter: blur(0.2px);
|
||||
}
|
||||
|
||||
@@ -347,10 +445,20 @@ h3 {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
radial-gradient(circle at 64% 32%, rgba(79, 138, 107, 0.22), transparent 18rem),
|
||||
radial-gradient(
|
||||
circle at 64% 32%,
|
||||
rgba(79, 138, 107, 0.22),
|
||||
transparent 18rem
|
||||
),
|
||||
linear-gradient(160deg, rgba(31, 41, 36, 0.76), rgba(15, 17, 17, 0.86)),
|
||||
repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.018) 42px 43px);
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent 0 42px,
|
||||
rgba(255, 255, 255, 0.018) 42px 43px
|
||||
);
|
||||
box-shadow:
|
||||
0 28px 90px rgba(0, 0, 0, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
@@ -363,7 +471,11 @@ h3 {
|
||||
.hero-panel::before {
|
||||
inset: auto -26% -36% -26%;
|
||||
height: 320px;
|
||||
background: radial-gradient(circle, rgba(79, 138, 107, 0.36), transparent 70%);
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(79, 138, 107, 0.36),
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
|
||||
.hero-panel::after {
|
||||
@@ -373,9 +485,24 @@ h3 {
|
||||
height: 170px;
|
||||
opacity: 0.46;
|
||||
background:
|
||||
linear-gradient(143deg, transparent 0 41%, rgba(134, 179, 143, 0.16) 41% 42%, transparent 42%),
|
||||
linear-gradient(24deg, transparent 0 52%, rgba(42, 94, 62, 0.42) 52% 68%, transparent 68%),
|
||||
linear-gradient(156deg, transparent 0 48%, rgba(31, 41, 36, 0.9) 48% 65%, transparent 65%);
|
||||
linear-gradient(
|
||||
143deg,
|
||||
transparent 0 41%,
|
||||
rgba(134, 179, 143, 0.16) 41% 42%,
|
||||
transparent 42%
|
||||
),
|
||||
linear-gradient(
|
||||
24deg,
|
||||
transparent 0 52%,
|
||||
rgba(42, 94, 62, 0.42) 52% 68%,
|
||||
transparent 68%
|
||||
),
|
||||
linear-gradient(
|
||||
156deg,
|
||||
transparent 0 48%,
|
||||
rgba(31, 41, 36, 0.9) 48% 65%,
|
||||
transparent 65%
|
||||
);
|
||||
}
|
||||
|
||||
.panel-top {
|
||||
@@ -598,7 +725,11 @@ h3 {
|
||||
.principle-list article {
|
||||
min-height: 270px;
|
||||
padding: 24px;
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
border-color 180ms ease,
|
||||
background-color 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.service-card:hover,
|
||||
@@ -628,8 +759,17 @@ h3 {
|
||||
.software-icon,
|
||||
.foundation-icon {
|
||||
background-image:
|
||||
linear-gradient(90deg, transparent 10px, var(--soft) 10px 12px, transparent 12px),
|
||||
linear-gradient(transparent 10px, var(--accent) 10px 12px, transparent 12px);
|
||||
linear-gradient(
|
||||
90deg,
|
||||
transparent 10px,
|
||||
var(--soft) 10px 12px,
|
||||
transparent 12px
|
||||
),
|
||||
linear-gradient(
|
||||
transparent 10px,
|
||||
var(--accent) 10px 12px,
|
||||
transparent 12px
|
||||
);
|
||||
}
|
||||
|
||||
.web-icon,
|
||||
@@ -638,8 +778,14 @@ h3 {
|
||||
linear-gradient(var(--soft), var(--soft)),
|
||||
linear-gradient(var(--accent), var(--accent)),
|
||||
linear-gradient(var(--accent), var(--accent));
|
||||
background-size: 20px 2px, 14px 2px, 8px 2px;
|
||||
background-position: 9px 12px, 9px 19px, 9px 26px;
|
||||
background-size:
|
||||
20px 2px,
|
||||
14px 2px,
|
||||
8px 2px;
|
||||
background-position:
|
||||
9px 12px,
|
||||
9px 19px,
|
||||
9px 26px;
|
||||
}
|
||||
|
||||
.mobile-icon,
|
||||
@@ -647,8 +793,12 @@ h3 {
|
||||
background-image:
|
||||
linear-gradient(var(--soft), var(--soft)),
|
||||
linear-gradient(var(--accent), var(--accent));
|
||||
background-size: 14px 2px, 2px 18px;
|
||||
background-position: 11px 12px, 18px 13px;
|
||||
background-size:
|
||||
14px 2px,
|
||||
2px 18px;
|
||||
background-position:
|
||||
11px 12px,
|
||||
18px 13px;
|
||||
}
|
||||
|
||||
.backend-icon,
|
||||
@@ -657,8 +807,14 @@ h3 {
|
||||
radial-gradient(circle, var(--soft) 0 3px, transparent 4px),
|
||||
radial-gradient(circle, var(--accent) 0 3px, transparent 4px),
|
||||
linear-gradient(90deg, var(--accent), var(--accent));
|
||||
background-size: 100% 100%, 100% 100%, 18px 1px;
|
||||
background-position: -8px -7px, 8px 9px, 11px 19px;
|
||||
background-size:
|
||||
100% 100%,
|
||||
100% 100%,
|
||||
18px 1px;
|
||||
background-position:
|
||||
-8px -7px,
|
||||
8px 9px,
|
||||
11px 19px;
|
||||
}
|
||||
|
||||
.service-card p,
|
||||
@@ -679,9 +835,15 @@ h3 {
|
||||
overflow: hidden;
|
||||
padding: clamp(30px, 5vw, 58px);
|
||||
background:
|
||||
radial-gradient(circle at 88% 24%, rgba(79, 138, 107, 0.24), transparent 24rem),
|
||||
radial-gradient(
|
||||
circle at 88% 24%,
|
||||
rgba(79, 138, 107, 0.24),
|
||||
transparent 24rem
|
||||
),
|
||||
linear-gradient(135deg, rgba(31, 41, 36, 0.94), rgba(15, 17, 17, 0.9));
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
box-shadow:
|
||||
0 24px 70px rgba(0, 0, 0, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.contact-panel::after {
|
||||
@@ -909,8 +1071,13 @@ body::before {
|
||||
z-index: -3;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 17, 17, 0.34), #0f1111 86%),
|
||||
linear-gradient(90deg, rgba(15, 17, 17, 0.96), rgba(15, 17, 17, 0.56) 54%, rgba(15, 17, 17, 0.88)),
|
||||
url("assets/images/backdrop2.jpg") center top / cover no-repeat;
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(15, 17, 17, 0.96),
|
||||
rgba(15, 17, 17, 0.56) 54%,
|
||||
rgba(15, 17, 17, 0.88)
|
||||
),
|
||||
url("assets/images/backdrop.jpg") center top / cover no-repeat;
|
||||
}
|
||||
|
||||
body::after {
|
||||
@@ -918,11 +1085,23 @@ body::after {
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
background:
|
||||
radial-gradient(circle at 16% 20%, rgba(134, 179, 143, 0.09), transparent 28rem),
|
||||
radial-gradient(circle at 72% 34%, rgba(42, 94, 62, 0.18), transparent 34rem),
|
||||
radial-gradient(
|
||||
circle at 16% 20%,
|
||||
rgba(134, 179, 143, 0.09),
|
||||
transparent 28rem
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 72% 34%,
|
||||
rgba(42, 94, 62, 0.18),
|
||||
transparent 34rem
|
||||
),
|
||||
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
|
||||
background-size: auto, auto, 92px 92px, 92px 92px;
|
||||
background-size:
|
||||
auto,
|
||||
auto,
|
||||
92px 92px,
|
||||
92px 92px;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
@@ -1046,10 +1225,22 @@ body::after {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 0 0 28px 28px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 17, 17, 0.06), rgba(15, 17, 17, 0.38) 48%, rgba(15, 17, 17, 0.96) 100%),
|
||||
linear-gradient(90deg, rgba(15, 17, 17, 0.82), rgba(15, 17, 17, 0.36) 58%, rgba(15, 17, 17, 0.8)),
|
||||
url("assets/images/backdrop2.jpg") center top / cover no-repeat;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 90px rgba(0, 0, 0, 0.55);
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(15, 17, 17, 0.06),
|
||||
rgba(15, 17, 17, 0.38) 48%,
|
||||
rgba(15, 17, 17, 0.96) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(15, 17, 17, 0.82),
|
||||
rgba(15, 17, 17, 0.36) 58%,
|
||||
rgba(15, 17, 17, 0.8)
|
||||
),
|
||||
url("assets/images/backdrop.jpg") center top / cover no-repeat;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
|
||||
0 28px 90px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.hero::before,
|
||||
@@ -1062,8 +1253,16 @@ body::after {
|
||||
.hero::before {
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 23% 25%, rgba(230, 232, 230, 0.08), transparent 16rem),
|
||||
radial-gradient(circle at 72% 54%, rgba(42, 94, 62, 0.24), transparent 28rem);
|
||||
radial-gradient(
|
||||
circle at 23% 25%,
|
||||
rgba(230, 232, 230, 0.08),
|
||||
transparent 16rem
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 72% 54%,
|
||||
rgba(42, 94, 62, 0.24),
|
||||
transparent 28rem
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
@@ -1093,7 +1292,9 @@ h1 {
|
||||
line-height: 1.18;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 18px rgba(230, 232, 230, 0.22), 0 2px 18px rgba(0, 0, 0, 0.8);
|
||||
text-shadow:
|
||||
0 0 18px rgba(230, 232, 230, 0.22),
|
||||
0 2px 18px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
h1 span,
|
||||
@@ -1128,8 +1329,14 @@ h1 em {
|
||||
.button-primary,
|
||||
.contact-link {
|
||||
border: 1px solid rgba(134, 179, 143, 0.42);
|
||||
background: linear-gradient(180deg, rgba(79, 138, 107, 0.92), rgba(42, 94, 62, 0.88));
|
||||
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(79, 138, 107, 0.92),
|
||||
rgba(42, 94, 62, 0.88)
|
||||
);
|
||||
box-shadow:
|
||||
0 14px 30px rgba(0, 0, 0, 0.34),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.button span {
|
||||
@@ -1167,11 +1374,20 @@ h1 em {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, rgba(134, 179, 143, 0.08), transparent 12rem),
|
||||
radial-gradient(
|
||||
circle at 20% 10%,
|
||||
rgba(134, 179, 143, 0.08),
|
||||
transparent 12rem
|
||||
),
|
||||
rgba(15, 17, 17, 0.56);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 44px rgba(0, 0, 0, 0.28);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
||||
0 20px 44px rgba(0, 0, 0, 0.28);
|
||||
backdrop-filter: blur(12px);
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
border-color 180ms ease,
|
||||
background-color 180ms ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
@@ -1216,7 +1432,9 @@ h1 em {
|
||||
.phone-icon {
|
||||
border: 3px solid var(--accent);
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 0 0 1px rgba(134, 179, 143, 0.18), 0 0 22px rgba(79, 138, 107, 0.18);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(134, 179, 143, 0.18),
|
||||
0 0 22px rgba(79, 138, 107, 0.18);
|
||||
}
|
||||
|
||||
.phone-icon::before {
|
||||
@@ -1234,12 +1452,18 @@ h1 em {
|
||||
.server-icon {
|
||||
height: 58px;
|
||||
background:
|
||||
linear-gradient(var(--accent), var(--accent)) 16px 14px / 7px 3px no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 28px 14px / 13px 3px no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 16px 30px / 7px 3px no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 28px 30px / 13px 3px no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 16px 46px / 7px 3px no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 28px 46px / 13px 3px no-repeat;
|
||||
linear-gradient(var(--accent), var(--accent)) 16px 14px / 7px 3px
|
||||
no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 28px 14px / 13px 3px
|
||||
no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 16px 30px / 7px 3px
|
||||
no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 28px 30px / 13px 3px
|
||||
no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 16px 46px / 7px 3px
|
||||
no-repeat,
|
||||
linear-gradient(var(--accent), var(--accent)) 28px 46px / 13px 3px
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.server-icon::before {
|
||||
@@ -1250,14 +1474,21 @@ h1 em {
|
||||
height: 13px;
|
||||
border: 3px solid var(--accent);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 18px 0 0 rgba(79, 138, 107, 0.8), 0 36px 0 0 rgba(79, 138, 107, 0.8);
|
||||
box-shadow:
|
||||
0 18px 0 0 rgba(79, 138, 107, 0.8),
|
||||
0 36px 0 0 rgba(79, 138, 107, 0.8);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.code-icon {
|
||||
width: 74px;
|
||||
height: 60px;
|
||||
background: linear-gradient(105deg, transparent 41%, var(--accent) 42% 48%, transparent 49%);
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent 41%,
|
||||
var(--accent) 42% 48%,
|
||||
transparent 49%
|
||||
);
|
||||
}
|
||||
|
||||
.code-icon::before,
|
||||
@@ -1292,8 +1523,12 @@ h1 em {
|
||||
body::before {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 17, 17, 0.42), #0f1111 82%),
|
||||
linear-gradient(90deg, rgba(15, 17, 17, 0.92), rgba(15, 17, 17, 0.72)),
|
||||
url("assets/images/backdrop2.jpg") center top / cover no-repeat;
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(15, 17, 17, 0.92),
|
||||
rgba(15, 17, 17, 0.72)
|
||||
),
|
||||
url("assets/images/backdrop.jpg") center top / cover no-repeat;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
@@ -1356,11 +1591,19 @@ h1 em {
|
||||
/* Keep the supplied forest image scoped to the hero only. */
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 80% 12%, rgba(79, 138, 107, 0.12), transparent 30rem),
|
||||
radial-gradient(
|
||||
circle at 80% 12%,
|
||||
rgba(79, 138, 107, 0.12),
|
||||
transparent 30rem
|
||||
),
|
||||
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
|
||||
var(--bg);
|
||||
background-size: auto, 92px 92px, 92px 92px, auto;
|
||||
background-size:
|
||||
auto,
|
||||
92px 92px,
|
||||
92px 92px,
|
||||
auto;
|
||||
}
|
||||
|
||||
body::before {
|
||||
@@ -1369,7 +1612,11 @@ body::before {
|
||||
|
||||
body::after {
|
||||
background:
|
||||
radial-gradient(circle at 18% 22%, rgba(42, 94, 62, 0.14), transparent 26rem),
|
||||
radial-gradient(
|
||||
circle at 18% 22%,
|
||||
rgba(42, 94, 62, 0.14),
|
||||
transparent 26rem
|
||||
),
|
||||
linear-gradient(180deg, transparent, rgba(15, 17, 17, 0.8));
|
||||
}
|
||||
|
||||
@@ -1425,10 +1672,29 @@ main::before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0 18%, rgba(134, 179, 143, 0.08) 18% 18.08%, transparent 18.08% 100%),
|
||||
linear-gradient(90deg, transparent 0 66%, rgba(79, 138, 107, 0.07) 66% 66.08%, transparent 66.08% 100%),
|
||||
linear-gradient(180deg, transparent 0 22%, rgba(134, 179, 143, 0.06) 22% 22.08%, transparent 22.08% 100%),
|
||||
radial-gradient(circle at 84% 24%, rgba(79, 138, 107, 0.16), transparent 24rem);
|
||||
linear-gradient(
|
||||
90deg,
|
||||
transparent 0 18%,
|
||||
rgba(134, 179, 143, 0.08) 18% 18.08%,
|
||||
transparent 18.08% 100%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
transparent 0 66%,
|
||||
rgba(79, 138, 107, 0.07) 66% 66.08%,
|
||||
transparent 66.08% 100%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
transparent 0 22%,
|
||||
rgba(134, 179, 143, 0.06) 22% 22.08%,
|
||||
transparent 22.08% 100%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 84% 24%,
|
||||
rgba(79, 138, 107, 0.16),
|
||||
transparent 24rem
|
||||
);
|
||||
}
|
||||
|
||||
.about-section {
|
||||
@@ -1525,7 +1791,12 @@ main::before {
|
||||
right: 46px;
|
||||
left: 46px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(134, 179, 143, 0.22), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(134, 179, 143, 0.22),
|
||||
transparent
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
@@ -1605,7 +1876,9 @@ main::before {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(15, 17, 17, 0.52);
|
||||
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
box-shadow:
|
||||
0 18px 54px rgba(0, 0, 0, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
@@ -1658,7 +1931,12 @@ main::before {
|
||||
padding: 12px max(5vw, 22px);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: linear-gradient(180deg, rgba(15, 17, 17, 0.86), rgba(15, 17, 17, 0.5) 72%, transparent);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(15, 17, 17, 0.86),
|
||||
rgba(15, 17, 17, 0.5) 72%,
|
||||
transparent
|
||||
);
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
@@ -1735,7 +2013,12 @@ main::before {
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(134, 179, 143, 0.24), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(134, 179, 143, 0.24),
|
||||
transparent
|
||||
);
|
||||
content: "";
|
||||
}
|
||||
|
||||
@@ -1929,8 +2212,8 @@ main::before {
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 36px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
height: 64px;
|
||||
padding: 3px 2px;
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -1943,6 +2226,11 @@ main::before {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-mark img {
|
||||
transform: scale(1.22);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
gap: 12px;
|
||||
min-height: 58px;
|
||||
@@ -1950,7 +2238,9 @@ main::before {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: var(--radius);
|
||||
color: #f4f7f4;
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-family:
|
||||
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
|
||||
monospace;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
@@ -2069,14 +2359,14 @@ main::before {
|
||||
.footer-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.footer-mark {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 42px;
|
||||
width: 52px;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.footer-wordmark,
|
||||
@@ -2088,7 +2378,7 @@ main::before {
|
||||
|
||||
.footer-wordmark strong {
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-size: 1.12rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.34em;
|
||||
@@ -2096,7 +2386,7 @@ main::before {
|
||||
|
||||
.footer-wordmark span {
|
||||
color: var(--soft);
|
||||
font-size: 0.58rem;
|
||||
font-size: 0.66rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.54em;
|
||||
@@ -2110,7 +2400,9 @@ main::before {
|
||||
|
||||
.footer-location,
|
||||
.footer-bottom span {
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-family:
|
||||
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
|
||||
monospace;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
@@ -2166,7 +2458,9 @@ main::before {
|
||||
.footer-links h2 {
|
||||
margin: 0 0 12px;
|
||||
color: var(--text);
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-family:
|
||||
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
|
||||
monospace;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.34em;
|
||||
@@ -2220,8 +2514,8 @@ main::before {
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
|
||||
Reference in new issue
Block a user