commit 52aefcd1720aac522ad6bc0c2d4ca5a6a8cda59c Author: SowinskiBraeden Date: Mon Jun 8 23:47:37 2026 -0700 initial commit diff --git a/assets/images/backdrop.jpg b/assets/images/backdrop.jpg new file mode 100644 index 0000000..57a9932 Binary files /dev/null and b/assets/images/backdrop.jpg differ diff --git a/assets/images/backdrop2.jpg b/assets/images/backdrop2.jpg new file mode 100644 index 0000000..3114eae Binary files /dev/null and b/assets/images/backdrop2.jpg differ diff --git a/assets/images/logo-transparent.png b/assets/images/logo-transparent.png new file mode 100644 index 0000000..608b8d9 Binary files /dev/null and b/assets/images/logo-transparent.png differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..291eb7f Binary files /dev/null and b/assets/images/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..44abe1b --- /dev/null +++ b/index.html @@ -0,0 +1,215 @@ + + + + + + + Cedarline Digital | Software Built From Strong Foundations + + + + + + +
+ + + + Cedarline + Digital + + + + + + +
+ +
+
+
+

+ Software. Infrastructure. + Digital solutions. +

+

+ Cedarline Digital is an independent software business based in Beautiful British Columbia, Canada. +

+
+ Learn more + Contact +
+
+
+ +
+
+

About

+

Independent software, built with care.

+
+
+
+

+ Cedarline Digital is a small software business based in British Columbia, Canada. It exists to build and support practical digital products, web tools, mobile apps, and backend systems. +

+

+ The focus is simple: reliable foundations, clean interfaces, and software that can be maintained over time. +

+
+ +
+
+ +
+
+

Work

+

What Cedarline Digital is for.

+
+
+
+ +

Software products

+

Independent apps, web tools, and SaaS projects developed under the Cedarline Digital name.

+
+
+ +

Support and policies

+

A central home for product support, privacy policies, terms, and related resources.

+
+
+ +

Selected client work

+

Freelance development may be offered for practical software projects where the technical fit is clear.

+
+
+ +

Web systems

+

Practical frontend, backend, API, dashboard, and infrastructure work.

+
+
+
+ +
+
+

Principles

+

How the work should feel.

+
+
+
+ +

Reliable foundations

+

Software should be built on clear, dependable technical choices.

+
+
+ +

Practical engineering

+

Tools and frameworks should serve the project, not complicate it.

+
+
+ +

Clear interfaces

+

Good software should feel calm, direct, and understandable.

+
+
+ +

Maintainable systems

+

Projects should leave room for updates, support, and future growth.

+
+
+
+ +
+
+
+

Contact

+

+ For general contact, support, business inquiries, or future product questions, use the email below. +

+
+
+ + + hello@cedarline.digital + +
+

+ Product pages, policies, and support resources will be added as they become available. +

+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..217e4db --- /dev/null +++ b/script.js @@ -0,0 +1,31 @@ +const header = document.querySelector("[data-header]"); +const nav = document.querySelector("[data-nav]"); +const navToggle = document.querySelector("[data-nav-toggle]"); +const year = document.querySelector("[data-year]"); + +if (year) { + year.textContent = new Date().getFullYear(); +} + +if (header) { + const updateHeader = () => { + header.classList.toggle("is-scrolled", window.scrollY > 16); + }; + + updateHeader(); + window.addEventListener("scroll", updateHeader, { passive: true }); +} + +if (nav && navToggle) { + navToggle.addEventListener("click", () => { + const isOpen = nav.classList.toggle("is-open"); + navToggle.setAttribute("aria-expanded", String(isOpen)); + }); + + nav.addEventListener("click", (event) => { + if (event.target instanceof HTMLAnchorElement) { + nav.classList.remove("is-open"); + navToggle.setAttribute("aria-expanded", "false"); + } + }); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0254ca4 --- /dev/null +++ b/styles.css @@ -0,0 +1,2275 @@ +:root { + --bg: #0f1111; + --surface: #171c1a; + --surface-light: #1f2924; + --evergreen: #2a5e3e; + --accent: #4f8a6b; + --soft: #86b38f; + --text: #e6e8e6; + --muted: #9ca3a0; + --border: rgba(255, 255, 255, 0.08); + --border-strong: rgba(134, 179, 143, 0.22); + --shadow: rgba(0, 0, 0, 0.4); + --max-width: 1240px; + --radius: 8px; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +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; + 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(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; +} + +body::before, +body::after { + position: fixed; + inset: 0; + z-index: -2; + pointer-events: none; + content: ""; +} + +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%); +} + +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(0deg, rgba(15, 17, 17, 0.94), transparent); + opacity: 0.46; +} + +a { + color: inherit; + text-decoration: none; +} + +p, +h1, +h2, +h3, +dl { + margin-top: 0; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.site-header { + position: sticky; + top: 16px; + z-index: 20; + display: flex; + align-items: center; + justify-content: space-between; + width: min(100% - 32px, var(--max-width)); + min-height: 68px; + margin: 0 auto; + padding: 10px 12px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.68); + box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24); + backdrop-filter: blur(22px); +} + +.site-header.is-scrolled { + background: rgba(15, 17, 17, 0.86); + border-color: rgba(255, 255, 255, 0.12); +} + +.brand, +.site-nav, +.hero-actions, +.panel-top, +.panel-metrics, +.site-footer, +.site-footer div, +.site-footer nav { + display: flex; + align-items: center; +} + +.brand { + gap: 12px; + padding-right: 10px; + font-weight: 800; + letter-spacing: 0; +} + +.brand-mark, +.panel-mark { + display: grid; + place-items: center; + border: 1px solid var(--border-strong); + 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); +} + +.brand-mark { + width: 42px; + height: 42px; +} + +.brand-mark svg { + width: 28px; + height: 28px; +} + +.mark-tree { + fill: rgba(134, 179, 143, 0.94); +} + +.mark-root { + fill: none; + stroke: var(--accent); + stroke-linecap: round; + stroke-width: 2.2; +} + +.site-nav { + gap: 4px; + color: var(--muted); + font-size: 0.92rem; + font-weight: 800; +} + +.site-nav a { + padding: 10px 13px; + border-radius: var(--radius); + transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; +} + +.site-nav a:hover, +.site-nav a:focus-visible { + color: var(--text); + background: rgba(255, 255, 255, 0.045); + outline: none; +} + +.site-nav .nav-cta { + 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)); + 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)); +} + +.nav-toggle { + display: none; + width: 44px; + height: 44px; + padding: 0; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(23, 28, 26, 0.9); + color: var(--text); +} + +.nav-toggle span:not(.sr-only) { + display: block; + width: 18px; + height: 2px; + margin: 5px auto; + background: currentColor; +} + +.section { + width: min(100% - 40px, var(--max-width)); + margin: 0 auto; + padding: 104px 0; +} + +.hero { + display: grid; + grid-template-columns: minmax(0, 0.98fr) minmax(390px, 0.82fr); + gap: clamp(36px, 5vw, 76px); + align-items: center; + min-height: calc(100vh - 92px); + padding-top: 86px; + padding-bottom: 74px; +} + +.hero-content { + max-width: 760px; +} + +.eyebrow { + margin-bottom: 14px; + color: var(--soft); + font-size: 0.76rem; + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +h1, +h2, +h3 { + line-height: 1.08; + letter-spacing: 0; +} + +h1 { + max-width: 760px; + margin-bottom: 22px; + font-size: clamp(2.8rem, 5.2vw, 5.05rem); +} + +h2 { + margin-bottom: 18px; + font-size: clamp(2rem, 3.4vw, 3.1rem); +} + +h3 { + margin-bottom: 12px; + font-size: 1.07rem; +} + +.hero-copy, +.section-copy, +.contact-panel p { + color: var(--muted); + font-size: 1.07rem; +} + +.hero-copy { + max-width: 620px; + margin-bottom: 32px; +} + +.hero-actions { + flex-wrap: wrap; + gap: 14px; +} + +.button, +.contact-link { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 48px; + padding: 0 18px; + border-radius: var(--radius); + font-weight: 800; + transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease; +} + +.button:hover, +.button:focus-visible, +.contact-link:hover, +.contact-link:focus-visible { + transform: translateY(-2px); + outline: none; +} + +.button-primary, +.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)); +} + +.button-secondary { + border: 1px solid var(--border); + color: var(--text); + background: rgba(255, 255, 255, 0.035); +} + +.hero-visual { + position: relative; + min-height: 540px; +} + +.mountain-field { + position: absolute; + inset: 34px -18px auto; + 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%); + filter: blur(0.2px); +} + +.hero-panel { + position: relative; + min-height: 510px; + overflow: hidden; + padding: 26px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: + 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); + backdrop-filter: blur(18px); +} + +.hero-panel::before, +.hero-panel::after { + position: absolute; + content: ""; +} + +.hero-panel::before { + inset: auto -26% -36% -26%; + height: 320px; + background: radial-gradient(circle, rgba(79, 138, 107, 0.36), transparent 70%); +} + +.hero-panel::after { + right: 34px; + bottom: 118px; + left: 34px; + 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%); +} + +.panel-top { + position: relative; + z-index: 2; + gap: 16px; +} + +.panel-mark { + width: 78px; + height: 78px; +} + +.panel-mark svg { + width: 52px; + height: 52px; +} + +.panel-top p { + margin: 0 0 3px; + font-size: 1.05rem; + font-weight: 800; +} + +.panel-top span { + color: var(--muted); + font-size: 0.9rem; +} + +.circuit-board { + position: absolute; + inset: 142px 42px 132px; + z-index: 2; +} + +.circuit-board span { + position: absolute; + display: block; + border-color: rgba(134, 179, 143, 0.28); +} + +.circuit-board span:nth-child(1) { + top: 10px; + left: 8%; + width: 72%; + height: 1px; + border-top: 1px solid; +} + +.circuit-board span:nth-child(2) { + top: 10px; + left: 8%; + width: 1px; + height: 78%; + border-left: 1px solid; +} + +.circuit-board span:nth-child(3) { + right: 12%; + bottom: 16%; + left: 8%; + height: 1px; + border-top: 1px solid; +} + +.circuit-board span:nth-child(4) { + right: 12%; + bottom: 16%; + width: 1px; + height: 48%; + border-left: 1px solid; +} + +.circuit-board span:nth-child(5), +.circuit-board span:nth-child(6) { + width: 10px; + height: 10px; + border: 1px solid rgba(134, 179, 143, 0.5); + border-radius: 50%; + background: var(--surface-light); + box-shadow: 0 0 22px rgba(134, 179, 143, 0.42); +} + +.circuit-board span:nth-child(5) { + top: 5px; + left: calc(8% - 5px); +} + +.circuit-board span:nth-child(6) { + right: calc(12% - 5px); + bottom: calc(16% - 5px); +} + +.panel-metrics { + position: absolute; + right: 24px; + bottom: 24px; + left: 24px; + z-index: 3; + gap: 10px; +} + +.panel-metrics div { + flex: 1; + min-height: 86px; + padding: 14px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.62); + backdrop-filter: blur(12px); +} + +.panel-metrics span { + display: block; + margin-bottom: 10px; + color: var(--soft); + font-size: 0.74rem; + font-weight: 800; +} + +.panel-metrics strong { + display: block; + font-size: 0.92rem; +} + +.section-heading { + max-width: 780px; + margin-bottom: 34px; +} + +.section-heading.centered { + max-width: 760px; + margin-right: auto; + margin-left: auto; + text-align: center; +} + +.about-section, +.brand-section { + border-top: 1px solid var(--border); +} + +.about-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(320px, 0.62fr); + gap: 28px; + align-items: start; +} + +.section-copy { + max-width: 760px; +} + +.section-copy p:last-child, +.contact-panel p:last-of-type, +.service-card p, +.principle-list p, +.site-footer p { + margin-bottom: 0; +} + +.studio-panel, +.service-card, +.principle-list article, +.contact-panel { + border: 1px solid var(--border); + border-radius: var(--radius); + background: + linear-gradient(180deg, rgba(31, 41, 36, 0.72), rgba(23, 28, 26, 0.78)), + rgba(23, 28, 26, 0.8); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); +} + +.studio-panel { + padding: 22px; +} + +.studio-panel dl { + margin-bottom: 0; +} + +.studio-panel div { + display: grid; + grid-template-columns: 92px minmax(0, 1fr); + gap: 18px; + padding: 15px 0; + border-bottom: 1px solid var(--border); +} + +.studio-panel div:first-child { + padding-top: 0; +} + +.studio-panel div:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +.studio-panel dt { + color: var(--soft); + font-size: 0.78rem; + font-weight: 800; + text-transform: uppercase; +} + +.studio-panel dd { + margin: 0; + color: var(--text); + font-weight: 700; +} + +.card-grid, +.principle-list { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; +} + +.service-card, +.principle-list article { + min-height: 270px; + padding: 24px; + transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; +} + +.service-card:hover, +.principle-list article:hover { + transform: translateY(-5px); + border-color: rgba(134, 179, 143, 0.28); + background: + linear-gradient(180deg, rgba(31, 41, 36, 0.94), rgba(23, 28, 26, 0.86)), + rgba(23, 28, 26, 0.88); + box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2); +} + +.card-icon, +.line-icon { + display: block; + width: 38px; + height: 38px; + margin-bottom: 24px; + border: 1px solid rgba(134, 179, 143, 0.28); + border-radius: var(--radius); + background-color: rgba(42, 94, 62, 0.2); + background-repeat: no-repeat; + background-position: center; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.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); +} + +.web-icon, +.experience-icon { + background-image: + 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; +} + +.mobile-icon, +.maintain-icon { + 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; +} + +.backend-icon, +.engineering-icon { + background-image: + 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; +} + +.service-card p, +.principle-list p { + color: var(--muted); +} + +.brand-section { + padding-top: 92px; +} + +.contact-section { + padding-top: 74px; +} + +.contact-panel { + position: relative; + overflow: hidden; + padding: clamp(30px, 5vw, 58px); + background: + 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); +} + +.contact-panel::after { + position: absolute; + right: -100px; + bottom: -140px; + width: 340px; + height: 340px; + border: 1px solid rgba(134, 179, 143, 0.14); + border-radius: 50%; + content: ""; +} + +.contact-panel h2, +.contact-panel p, +.contact-panel .eyebrow, +.contact-link { + position: relative; + z-index: 1; +} + +.contact-panel h2 { + max-width: 850px; +} + +.contact-panel p { + max-width: 700px; +} + +.contact-link { + margin-top: 22px; +} + +.contact-note { + margin-top: 24px; + font-size: 0.96rem; +} + +.site-footer { + justify-content: space-between; + gap: 22px; + width: min(100% - 40px, var(--max-width)); + margin: 0 auto; + padding: 30px 0 42px; + border-top: 1px solid var(--border); + color: var(--muted); + font-size: 0.9rem; +} + +.site-footer div { + flex-direction: column; + align-items: flex-start; + gap: 2px; +} + +.site-footer strong { + color: var(--text); +} + +.site-footer nav { + gap: 14px; +} + +.site-footer a:hover, +.site-footer a:focus-visible { + color: var(--text); + outline: none; +} + +@media (max-width: 1040px) { + .hero, + .about-grid { + grid-template-columns: 1fr; + } + + .hero { + gap: 40px; + min-height: auto; + } + + .hero-visual { + min-height: 460px; + } + + .hero-panel { + min-height: 460px; + } + + .card-grid, + .principle-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 720px) { + .site-header { + top: 10px; + width: min(100% - 24px, var(--max-width)); + } + + .nav-toggle { + display: block; + } + + .site-nav { + position: absolute; + top: calc(100% + 8px); + right: 0; + left: 0; + display: none; + flex-direction: column; + align-items: stretch; + padding: 12px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: rgba(15, 17, 17, 0.96); + box-shadow: 0 20px 42px var(--shadow); + } + + .site-nav.is-open { + display: flex; + } + + .site-nav a { + width: 100%; + } + + .site-nav .nav-cta { + margin-left: 0; + text-align: center; + } + + .section { + width: min(100% - 24px, var(--max-width)); + padding: 68px 0; + } + + .hero { + padding-top: 54px; + } + + h1 { + font-size: clamp(2.35rem, 11vw, 3.55rem); + } + + h2 { + font-size: clamp(1.9rem, 8vw, 2.55rem); + } + + .hero-copy, + .section-copy, + .contact-panel p { + font-size: 1rem; + } + + .hero-visual, + .hero-panel { + min-height: 390px; + } + + .hero-panel { + padding: 18px; + } + + .panel-mark { + width: 64px; + height: 64px; + } + + .panel-mark svg { + width: 44px; + height: 44px; + } + + .circuit-board { + inset: 120px 24px 122px; + } + + .panel-metrics { + right: 16px; + bottom: 16px; + left: 16px; + display: grid; + grid-template-columns: 1fr; + } + + .panel-metrics div { + min-height: auto; + padding: 11px 12px; + } + + .panel-metrics span { + margin-bottom: 4px; + } + + .card-grid, + .principle-list, + .site-footer { + grid-template-columns: 1fr; + } + + .service-card, + .principle-list article { + min-height: auto; + } + + .studio-panel div { + grid-template-columns: 1fr; + gap: 3px; + } + + .site-footer { + display: grid; + justify-items: start; + width: min(100% - 24px, var(--max-width)); + } +} + +/* Prototype direction: cinematic forest landing page. */ +body { + background: var(--bg); +} + +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; +} + +body::after { + z-index: -2; + 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), + 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; +} + +.site-header { + position: fixed; + top: 28px; + right: 5vw; + left: 5vw; + width: min(90vw, var(--max-width)); + min-height: auto; + padding: 0; + border: 0; + background: transparent; + box-shadow: none; + backdrop-filter: none; +} + +.site-header.is-scrolled { + border-color: transparent; + background: transparent; +} + +.brand { + gap: 14px; +} + +.brand-mark { + width: 56px; + height: 56px; + border: 0; + background: transparent; + box-shadow: none; +} + +.brand-mark svg { + width: 54px; + height: 54px; +} + +.mark-branch { + fill: none; + stroke: var(--accent); + stroke-linejoin: round; + stroke-width: 1.8; +} + +.mark-trunk, +.mark-root { + fill: none; + stroke: var(--soft); + stroke-linecap: round; + stroke-width: 1.7; +} + +.brand-text { + display: grid; + gap: 2px; + text-transform: uppercase; +} + +.brand-text strong { + color: var(--text); + font-size: clamp(1.25rem, 2.2vw, 2rem); + font-weight: 800; + line-height: 1; + letter-spacing: 0.16em; + text-shadow: 0 0 12px rgba(230, 232, 230, 0.22); +} + +.brand-text span { + color: var(--soft); + font-size: clamp(0.74rem, 1.2vw, 1.03rem); + font-weight: 800; + line-height: 1; + letter-spacing: 0.42em; +} + +.site-nav { + gap: clamp(18px, 3vw, 44px); + color: var(--text); + font-size: 0.86rem; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.site-nav a { + padding: 10px 0; + text-shadow: 0 0 12px rgba(230, 232, 230, 0.18); +} + +.site-nav a:hover, +.site-nav a:focus-visible { + color: var(--soft); + background: transparent; +} + +.site-nav .nav-cta { + padding: 10px 18px; + border: 1px solid rgba(134, 179, 143, 0.32); + border-radius: var(--radius); + color: var(--soft); + background: rgba(15, 17, 17, 0.28); + box-shadow: inset 0 0 18px rgba(134, 179, 143, 0.06); +} + +.site-nav .nav-cta:hover, +.site-nav .nav-cta:focus-visible { + border-color: rgba(134, 179, 143, 0.5); + background: rgba(42, 94, 62, 0.18); +} + +.hero { + position: relative; + display: block; + width: auto; + max-width: none; + min-height: 100vh; + overflow: hidden; + margin: 0; + padding: 160px max(5vw, 24px) 44px; + 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); +} + +.hero::before, +.hero::after { + position: absolute; + pointer-events: none; + content: ""; +} + +.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); + mix-blend-mode: screen; +} + +.hero::after { + inset: 0; + border-radius: inherit; + box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.78); +} + +.hero-content, +.products-preview { + position: relative; + z-index: 2; + width: min(100%, var(--max-width)); + margin: 0 auto; +} + +.hero-content { + max-width: var(--max-width); +} + +h1 { + max-width: 620px; + margin-bottom: 24px; + font-size: clamp(2.4rem, 4.3vw, 4.1rem); + font-weight: 500; + 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); +} + +h1 span, +h1 em { + display: block; +} + +h1 em { + color: var(--accent); + font-style: normal; + font-weight: 800; + letter-spacing: 0.08em; +} + +.hero-copy { + max-width: 510px; + margin-bottom: 34px; + color: rgba(230, 232, 230, 0.78); + font-size: clamp(1.02rem, 1.8vw, 1.22rem); + font-weight: 500; + text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); +} + +.button, +.contact-link { + min-height: 50px; + padding: 0 22px; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.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); +} + +.button span { + margin-left: 12px; + font-size: 1.45rem; + line-height: 1; +} + +.products-preview { + margin-top: clamp(72px, 12vh, 132px); +} + +.section-kicker { + margin-bottom: 24px; + color: var(--soft); + font-size: 0.9rem; + font-weight: 800; + letter-spacing: 0.12em; + text-align: center; + text-transform: uppercase; +} + +.product-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.product-card { + display: grid; + grid-template-columns: 82px minmax(0, 1fr); + gap: 20px; + min-height: 198px; + padding: 34px 32px; + 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), + 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); + backdrop-filter: blur(12px); + transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; +} + +.product-card:hover { + transform: translateY(-5px); + border-color: rgba(134, 179, 143, 0.3); + background-color: rgba(23, 28, 26, 0.7); +} + +.product-card h2 { + margin-bottom: 14px; + color: var(--text); + font-size: 1.1rem; + font-weight: 800; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.product-card p { + margin-bottom: 24px; + color: rgba(230, 232, 230, 0.7); + font-weight: 600; +} + +.product-card a { + color: var(--soft); + font-size: 0.84rem; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.product-icon { + position: relative; + display: block; + width: 58px; + height: 68px; + opacity: 0.9; + background-repeat: no-repeat; + background-position: center; +} + +.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); +} + +.phone-icon::before { + position: absolute; + top: 8px; + left: 50%; + width: 22px; + height: 3px; + border-radius: 999px; + background: var(--accent); + content: ""; + transform: translateX(-50%); +} + +.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; +} + +.server-icon::before { + position: absolute; + top: 4px; + left: 0; + width: 58px; + 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); + content: ""; +} + +.code-icon { + width: 74px; + height: 60px; + background: linear-gradient(105deg, transparent 41%, var(--accent) 42% 48%, transparent 49%); +} + +.code-icon::before, +.code-icon::after { + position: absolute; + top: 11px; + width: 24px; + height: 24px; + border-color: var(--accent); + border-style: solid; + content: ""; + transform: rotate(45deg); +} + +.code-icon::before { + left: 4px; + border-width: 0 0 4px 4px; +} + +.code-icon::after { + right: 4px; + border-width: 4px 4px 0 0; +} + +@media (max-width: 1040px) { + .product-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 760px) { + 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; + } + + .site-header { + top: 16px; + right: 16px; + left: 16px; + width: auto; + } + + .brand-mark { + width: 46px; + height: 46px; + } + + .brand-mark svg { + width: 44px; + height: 44px; + } + + .brand-text strong { + font-size: 1.1rem; + } + + .brand-text span { + font-size: 0.66rem; + } + + .site-nav { + background: rgba(15, 17, 17, 0.94); + backdrop-filter: blur(16px); + } + + .site-nav a, + .site-nav .nav-cta { + width: 100%; + margin-left: 0; + padding: 11px 12px; + text-align: left; + } + + .hero { + padding: 132px 20px 36px; + border-radius: 0 0 20px 20px; + } + + h1 { + font-size: clamp(2.2rem, 10vw, 3.4rem); + } + + .products-preview { + margin-top: 58px; + } + + .product-card { + grid-template-columns: 58px minmax(0, 1fr); + padding: 24px 20px; + } +} + +/* 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), + 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; +} + +body::before { + background: none; +} + +body::after { + background: + radial-gradient(circle at 18% 22%, rgba(42, 94, 62, 0.14), transparent 26rem), + linear-gradient(180deg, transparent, rgba(15, 17, 17, 0.8)); +} + +.hero { + min-height: 100vh; + padding-bottom: clamp(96px, 16vh, 170px); +} + +.hero-content { + padding-top: clamp(24px, 5vh, 72px); +} + +.hero-content, +.products-preview { + width: min(100%, var(--max-width)); +} + +.products-preview, +.product-grid, +.product-card, +.product-icon { + display: none; +} + +.about-section { + margin-top: 0; +} + +@media (max-width: 760px) { + body::before { + background: none; + } + + .hero { + min-height: 100vh; + padding-bottom: 84px; + } +} + +/* Add quiet visual variety below the hero. */ +main { + position: relative; + overflow: hidden; +} + +main::before { + position: absolute; + top: 100vh; + right: 0; + left: 0; + z-index: -1; + height: calc(100% - 100vh); + 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); +} + +.about-section { + position: relative; +} + +.about-section::after { + position: absolute; + right: max(20px, calc((100vw - var(--max-width)) / 2)); + bottom: 42px; + width: 180px; + height: 180px; + border: 1px solid rgba(134, 179, 143, 0.12); + border-radius: 50%; + pointer-events: none; + content: ""; +} + +#work { + position: relative; + padding-top: 72px; + padding-bottom: 112px; +} + +#work .section-heading { + max-width: 540px; + margin-bottom: 28px; +} + +#work .card-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; +} + +#work .service-card { + position: relative; + display: grid; + grid-template-columns: 48px minmax(0, 1fr); + gap: 18px; + min-height: 172px; + padding: 24px; + overflow: hidden; + background: + linear-gradient(135deg, rgba(31, 41, 36, 0.82), rgba(15, 17, 17, 0.72)), + rgba(23, 28, 26, 0.8); +} + +#work .service-card:nth-child(even) { + transform: translateY(28px); +} + +#work .service-card:hover { + transform: translateY(-3px); +} + +#work .service-card:nth-child(even):hover { + transform: translateY(23px); +} + +#work .service-card::after { + position: absolute; + right: -40px; + bottom: -40px; + width: 130px; + height: 130px; + border: 1px solid rgba(134, 179, 143, 0.12); + border-radius: 50%; + content: ""; +} + +#work .card-icon { + margin-bottom: 0; +} + +#work .service-card h3 { + margin-bottom: 8px; +} + +.brand-section { + position: relative; + width: min(100% - 40px, var(--max-width)); + padding: 46px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: + linear-gradient(180deg, rgba(23, 28, 26, 0.78), rgba(15, 17, 17, 0.82)), + rgba(15, 17, 17, 0.72); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); +} + +.brand-section::before { + position: absolute; + top: 50%; + right: 46px; + left: 46px; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(134, 179, 143, 0.22), transparent); + content: ""; +} + +.brand-section .section-heading { + max-width: 620px; + margin-right: 0; + margin-left: 0; + text-align: left; +} + +.principle-list { + position: relative; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.principle-list article { + min-height: 210px; + padding: 22px; + background: rgba(15, 17, 17, 0.58); + backdrop-filter: blur(10px); +} + +.principle-list article:nth-child(2), +.principle-list article:nth-child(4) { + margin-top: 34px; +} + +.principle-list article:hover { + transform: translateY(-3px); +} + +@media (max-width: 1040px) { + #work .card-grid, + .principle-list { + grid-template-columns: 1fr 1fr; + } + + #work .service-card:nth-child(even), + #work .service-card:nth-child(even):hover, + .principle-list article:nth-child(2), + .principle-list article:nth-child(4) { + margin-top: 0; + transform: none; + } + + .brand-section::before { + display: none; + } +} + +@media (max-width: 760px) { + #work .card-grid, + .principle-list { + grid-template-columns: 1fr; + } + + #work .service-card { + grid-template-columns: 1fr; + } + + .brand-section { + width: min(100% - 24px, var(--max-width)); + padding: 28px 20px; + } +} + +/* Fixed header with supplied logo asset. */ +.site-header { + position: fixed; + top: 22px; + right: 5vw; + left: 5vw; + width: min(90vw, var(--max-width)); + min-height: 70px; + padding: 10px 14px; + 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); + backdrop-filter: blur(18px); +} + +.site-header.is-scrolled { + border-color: rgba(134, 179, 143, 0.18); + background: rgba(15, 17, 17, 0.82); +} + +.brand-mark { + width: 50px; + height: 50px; + overflow: hidden; + border: 0; + border-radius: 6px; + background: transparent; + box-shadow: none; +} + +.brand-mark img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +@media (max-width: 760px) { + .site-header { + top: 14px; + right: 12px; + left: 12px; + width: auto; + min-height: 64px; + padding: 9px 10px; + } + + .brand-mark { + width: 44px; + height: 44px; + } +} + +/* Final header and below-hero polish. */ +.site-header { + position: fixed; + top: 0; + right: 0; + left: 0; + width: 100%; + min-height: 82px; + 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); + box-shadow: none; + backdrop-filter: blur(14px); +} + +.site-header.is-scrolled { + border: 0; + background: rgba(15, 17, 17, 0.9); +} + +.site-nav .nav-cta { + border: 0; + background: rgba(42, 94, 62, 0.28); +} + +.brand-mark { + width: 64px; + height: 64px; + overflow: visible; +} + +.brand-mark img { + transform: none; + transform-origin: center; +} + +.hero { + padding-top: 176px; +} + +.section { + position: relative; +} + +.about-section { + display: grid; + grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); + gap: clamp(34px, 6vw, 86px); + align-items: start; + padding-top: 118px; +} + +.about-section .section-heading { + position: sticky; + top: 112px; + margin-bottom: 0; +} + +.about-grid { + grid-template-columns: 1fr; + gap: 24px; +} + +.section-copy { + max-width: 760px; + padding: 30px; + border-left: 1px solid rgba(134, 179, 143, 0.28); + background: + linear-gradient(90deg, rgba(42, 94, 62, 0.08), transparent 42%), + rgba(15, 17, 17, 0.18); +} + +.studio-panel { + max-width: 760px; + background: rgba(15, 17, 17, 0.42); +} + +#work { + padding-top: 92px; +} + +#work::before { + position: absolute; + top: 52px; + right: 0; + left: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(134, 179, 143, 0.24), transparent); + content: ""; +} + +#work .section-heading { + display: grid; + grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); + gap: 28px; + max-width: none; + align-items: end; +} + +#work .section-heading .eyebrow { + text-align: left; +} + +#work .section-heading h2 { + max-width: 520px; + margin-bottom: 0; +} + +#work .card-grid { + display: grid; + grid-template-columns: 1fr; + gap: 0; + border-top: 1px solid var(--border); +} + +#work .service-card { + display: grid; + grid-template-columns: 56px minmax(220px, 0.42fr) minmax(0, 1fr); + gap: 22px; + min-height: auto; + padding: 26px 0; + border: 0; + border-bottom: 1px solid var(--border); + border-radius: 0; + background: transparent; + box-shadow: none; +} + +#work .service-card:nth-child(even), +#work .service-card:nth-child(even):hover, +#work .service-card:hover { + transform: none; +} + +#work .service-card::after { + display: none; +} + +#work .service-card h3 { + margin: 5px 0 0; + font-size: 1.15rem; +} + +#work .service-card p { + max-width: 620px; +} + +.brand-section { + display: grid; + grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); + gap: clamp(28px, 5vw, 64px); + align-items: start; + padding: 54px; +} + +.brand-section .section-heading { + margin-bottom: 0; +} + +.brand-section .section-heading h2 { + font-size: clamp(1.8rem, 2.4vw, 2.5rem); +} + +.brand-section::before { + top: auto; + right: 54px; + bottom: 54px; + left: 54px; +} + +.principle-list { + grid-template-columns: 1fr 1fr; +} + +.principle-list article, +.principle-list article:nth-child(2), +.principle-list article:nth-child(4) { + min-height: 190px; + margin-top: 0; +} + +.contact-panel { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(290px, auto); + gap: clamp(28px, 6vw, 84px); + align-items: start; +} + +.contact-copy { + max-width: 650px; +} + +.contact-action { + display: flex; + justify-content: flex-end; + align-self: center; +} + +.contact-note { + grid-column: 1 / -1; + max-width: none; + margin-top: 8px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +@media (max-width: 920px) { + .about-section, + #work .section-heading, + .brand-section, + .contact-panel { + grid-template-columns: 1fr; + } + + .about-section .section-heading { + position: static; + } + + #work .service-card { + grid-template-columns: 48px minmax(0, 1fr); + } + + #work .service-card p { + grid-column: 2; + } + + .contact-action { + justify-self: start; + justify-content: flex-start; + } +} + +@media (max-width: 760px) { + .site-header { + top: 0; + right: 0; + left: 0; + width: 100%; + min-height: 72px; + padding: 9px 14px; + } + + .brand-mark { + width: 54px; + height: 54px; + } + + .hero { + padding-top: 142px; + } + + .section-copy, + .brand-section { + padding: 24px 18px; + } + + #work .service-card { + grid-template-columns: 1fr; + } + + #work .service-card p { + grid-column: auto; + } + + .principle-list { + grid-template-columns: 1fr; + } +} + +/* Footer refresh and compact logo sizing. */ +.site-header { + min-height: 74px; + padding-top: 10px; + padding-bottom: 10px; +} + +.brand { + gap: 12px; +} + +.brand-mark { + width: 36px; + height: 48px; + padding: 3px 2px; + overflow: visible; +} + +.brand-mark img, +.footer-mark img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.contact-link { + gap: 12px; + min-height: 58px; + padding: 0 26px; + 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-size: 0.96rem; + font-weight: 700; + letter-spacing: 0; + text-transform: lowercase; + background: rgba(15, 17, 17, 0.34); + box-shadow: none; +} + +.contact-panel { + grid-template-columns: minmax(0, 1fr) minmax(290px, auto); + align-items: start; + padding: clamp(34px, 5vw, 62px); +} + +.contact-copy, +.contact-action, +.contact-note { + position: relative; + z-index: 1; +} + +.contact-copy .eyebrow { + margin-bottom: 18px; +} + +.contact-copy h2 { + max-width: 560px; + margin-bottom: 22px; + font-size: clamp(2.4rem, 4vw, 4rem); +} + +.contact-copy p { + max-width: 650px; +} + +.contact-action { + justify-self: end; + padding-top: 72px; +} + +.contact-panel .contact-note { + grid-column: 1 / -1; + max-width: none; + margin: 8px 0 0; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + font-size: 0.96rem; +} + +.contact-link:hover, +.contact-link:focus-visible { + border-color: rgba(134, 179, 143, 0.34); + background: rgba(15, 17, 17, 0.54); +} + +.email-icon { + position: relative; + width: 16px; + height: 12px; + border: 1.5px solid var(--accent); + border-radius: 2px; + flex: 0 0 auto; +} + +.email-icon::before, +.email-icon::after { + position: absolute; + top: 2px; + width: 8px; + height: 1.5px; + background: var(--accent); + content: ""; +} + +.email-icon::before { + left: 1px; + transform: rotate(35deg); + transform-origin: left center; +} + +.email-icon::after { + right: 1px; + transform: rotate(-35deg); + transform-origin: right center; +} + +.site-footer { + display: block; + width: 100%; + margin: 44px 0 0; + padding: 56px max(2.5vw, 18px) 40px; + border-top: 1px solid rgba(255, 255, 255, 0.08); + color: var(--muted); + background: rgba(10, 12, 12, 0.44); + font-size: 0.9rem; +} + +.site-footer .footer-inner, +.site-footer .footer-bottom { + width: min(100%, 1320px); + margin: 0 auto; +} + +.site-footer .footer-inner { + display: grid; + grid-template-columns: minmax(300px, 1fr) auto; + gap: clamp(72px, 18vw, 260px); + align-items: start; +} + +.site-footer .footer-brand { + display: block; + max-width: 330px; +} + +.footer-logo { + display: inline-flex; + align-items: center; + gap: 14px; + margin-bottom: 24px; +} + +.footer-mark { + display: block; + width: 32px; + height: 42px; +} + +.footer-wordmark, +.brand-text { + display: grid; + gap: 2px; + text-transform: uppercase; +} + +.footer-wordmark strong { + color: var(--text); + font-size: 1rem; + font-weight: 800; + line-height: 1; + letter-spacing: 0.34em; +} + +.footer-wordmark span { + color: var(--soft); + font-size: 0.58rem; + font-weight: 800; + line-height: 1; + letter-spacing: 0.54em; +} + +.footer-brand p { + margin-bottom: 18px; + color: rgba(230, 232, 230, 0.7); + line-height: 1.7; +} + +.footer-location, +.footer-bottom span { + font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + letter-spacing: 0.08em; +} + +.footer-location { + position: relative; + display: inline-block; + padding-left: 18px; + color: rgba(230, 232, 230, 0.76); + font-size: 0.82rem; + font-weight: 600; +} + +.footer-location::before { + position: absolute; + top: 0.55em; + left: 0; + width: 7px; + height: 7px; + border: 1px solid var(--muted); + border-radius: 50% 50% 50% 0; + content: ""; + transform: translateY(-50%) rotate(-45deg); +} + +.footer-location::after { + position: absolute; + top: 0.55em; + left: 3px; + width: 2px; + height: 2px; + border-radius: 50%; + background: var(--muted); + content: ""; + transform: translateY(-50%); +} + +.site-footer .footer-links { + display: grid; + grid-template-columns: repeat(2, minmax(90px, 1fr)); + gap: clamp(44px, 6vw, 84px); + justify-self: end; + min-width: min(100%, 440px); + justify-items: end; + text-align: right; +} + +.site-footer .footer-links div { + display: grid; + gap: 14px; + justify-items: end; +} + +.footer-links h2 { + margin: 0 0 12px; + color: var(--text); + font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.68rem; + font-weight: 700; + letter-spacing: 0.34em; + line-height: 1; + text-transform: uppercase; +} + +.footer-links a { + color: rgba(230, 232, 230, 0.74); + font-size: 0.9rem; +} + +.footer-links a:hover, +.footer-links a:focus-visible { + color: var(--text); + outline: none; +} + +.site-footer .footer-bottom { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 24px; + margin-top: 50px; + padding-top: 26px; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.footer-bottom p, +.footer-bottom span { + margin: 0; + color: rgba(230, 232, 230, 0.68); + font-size: 0.78rem; +} + +@media (max-width: 920px) { + .contact-panel { + grid-template-columns: 1fr; + } + + .contact-action { + justify-self: start; + padding-top: 0; + } +} + +@media (max-width: 760px) { + .site-header { + min-height: 66px; + } + + .brand-mark { + width: 30px; + height: 40px; + } + + .contact-link { + justify-self: start; + width: auto; + max-width: 100%; + min-height: 52px; + padding: 0 18px; + font-size: clamp(0.78rem, 3.4vw, 0.94rem); + } + + .contact-panel { + grid-template-columns: 1fr; + } + + .contact-action { + justify-self: start; + padding-top: 0; + } + + .site-footer { + padding: 46px 24px 36px; + } + + .site-footer .footer-inner, + .site-footer .footer-bottom { + width: 100%; + } + + .site-footer .footer-inner, + .site-footer .footer-links, + .site-footer .footer-bottom { + grid-template-columns: 1fr; + } + + .site-footer .footer-inner { + gap: 42px; + } + + .site-footer .footer-links, + .site-footer .footer-links div { + justify-items: start; + min-width: 0; + text-align: left; + } + + .site-footer .footer-bottom { + display: grid; + gap: 16px; + } +}