/* ============================================================ Zbaraschuk Innovations — shared stylesheet Design language: silver / black / white. Sleek. Tight. ============================================================ */ :root { /* Background tone — overridden by Tweaks (true / charcoal / light) */ --bg-0: #0a0a0c; --bg-1: #111114; --bg-2: #17181c; --bg-3: #1f2025; --line: rgba(216, 218, 223, 0.08); --line-strong: rgba(216, 218, 223, 0.18); /* Foreground */ --fg-0: #f4f5f7; --fg-1: #c8cad0; --fg-2: #8a8d95; --fg-3: #5a5d65; /* Accent (silver) — overridden by Tweaks */ --silver-1: #e6e8ec; /* highlight */ --silver-2: #b9bdc6; /* mid */ --silver-3: #6f7480; /* shadow */ /* Type */ --font-display: "Cormorant Garamond", "Bodoni Moda", "Times New Roman", serif; --font-sans: "Manrope", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* Rhythm */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --shell-max: 1320px; --gutter: clamp(20px, 4vw, 56px); --ease: cubic-bezier(.2, .7, .2, 1); } /* ----- Background-tone variants applied via [data-bg] on ----- */ html[data-bg="true"] { --bg-0: #050507; --bg-1: #0a0a0c; --bg-2: #101013; --bg-3: #191a1f; } html[data-bg="charcoal"] { --bg-0: #15161a; --bg-1: #1b1c20; --bg-2: #212329; --bg-3: #2a2c33; } html[data-bg="light"] { --bg-0: #ececea; --bg-1: #f1f1ee; --bg-2: #f6f5f1; --bg-3: #e2e2df; --fg-0: #0a0a0c; --fg-1: #15161a; --fg-2: #3d4047; --fg-3: #7a7d85; --line: rgba(15, 15, 20, 0.12); --line-strong: rgba(15, 15, 20, 0.28); } /* ----- Accent variants (dark bg) ----- */ html[data-accent="pure"] { --silver-1: #eef0f4; --silver-2: #c0c4cc; --silver-3: #7a7f8a; } html[data-accent="platinum"] { --silver-1: #ece6d6; --silver-2: #cabfa6; --silver-3: #857a64; } html[data-accent="steel"] { --silver-1: #d6dee8; --silver-2: #a3afbd; --silver-3: #5d6773; } /* ----- On light bg, silver vars must be inks (used for accent text + UI), not metallic highlights, or they vanish into the page ----- */ html[data-bg="light"][data-accent="pure"] { --silver-1: #15161a; --silver-2: #3a3d44; --silver-3: #6f7480; } html[data-bg="light"][data-accent="platinum"] { --silver-1: #2a230f; --silver-2: #5a4d2e; --silver-3: #857a64; } html[data-bg="light"][data-accent="steel"] { --silver-1: #0e1822; --silver-2: #324352; --silver-3: #5d6773; } /* On light bg, things that flip silver-1 (now dark) into a fill need their foreground inverted so text on the fill stays readable. */ html[data-bg="light"] .btn:hover { color: #f6f5f1; } html[data-bg="light"] .form .submit-btn { color: #f6f5f1; } html[data-bg="light"] .nav-links a[aria-current="page"]::after { background: var(--silver-1); } html[data-bg="light"] .hero-meta .dot { background: var(--silver-1); box-shadow: 0 0 12px rgba(15, 16, 26, 0.35); } html[data-bg="light"] .mini-map .pin { background: var(--silver-1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--silver-1) 22%, transparent), 0 0 18px rgba(15, 16, 26, 0.3); } /* ============================================================= Reset-ish ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg-0); color: var(--fg-0); -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; letter-spacing: 0.005em; background: var(--bg-0); color: var(--fg-0); min-height: 100vh; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ============================================================= Atoms ============================================================= */ .shell { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding-inline: var(--gutter); } .eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--silver-2); display: inline-flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--silver-2)); display: inline-block; } .h-display { font-family: var(--font-display); font-weight: 300; font-style: normal; letter-spacing: -0.012em; line-height: 1.02; margin: 0; color: var(--fg-0); } .h-section { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.05; font-size: clamp(40px, 5.6vw, 76px); margin: 0 0 24px; } .lead { font-family: var(--font-sans); font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--fg-1); letter-spacing: 0.005em; max-width: 60ch; text-wrap: pretty; } .body-text { font-size: 16.5px; line-height: 1.75; color: var(--fg-1); font-weight: 400; text-wrap: pretty; } .body-text p { margin: 0 0 1.1em; } .body-text p:last-child { margin-bottom: 0; } /* Silver shimmer text — used very sparingly for hero word */ .silver-text { background-image: linear-gradient(180deg, var(--silver-1) 0%, var(--silver-2) 38%, #4a4f59 52%, var(--silver-2) 64%, var(--silver-1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); } html[data-bg="light"] .silver-text { background-image: linear-gradient(180deg, #6e7682 0%, #2a2d34 50%, #6e7682 100%); filter: none; } /* Hairline divider */ .rule { height: 1px; background: var(--line-strong); border: 0; margin: 0; } /* ============================================================= Buttons ============================================================= */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 2px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg-0); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); position: relative; } .btn:hover { background: var(--silver-1); color: #0a0a0c; border-color: var(--silver-1); } .btn .arr { display: inline-block; transition: transform .35s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn-ghost { padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--fg-0); letter-spacing: 0.16em; font-size: 12px; } .btn-ghost:hover { background: transparent; color: var(--silver-1); border-color: var(--silver-1); } /* ============================================================= Nav ============================================================= */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: color-mix(in oklab, var(--bg-0) 78%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav-brand { display: inline-flex; align-items: center; gap: 14px; } .nav-brand .mark { width: 34px; height: 34px; border-radius: 2px; background-image: url("assets/logo-mark.png"); background-size: 150%; background-position: center; background-color: #000; filter: contrast(1.05); } .nav-brand .name { font-family: var(--font-display); font-size: 17px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-0); } .nav-brand .name em { font-style: normal; color: var(--silver-2); font-size: 11.5px; margin-left: 6px; letter-spacing: 0.28em; } .nav-links { display: inline-flex; align-items: center; gap: 36px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-1); padding: 6px 0; position: relative; transition: color .25s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--silver-1); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav-links a:hover { color: var(--fg-0); } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a[aria-current="page"] { color: var(--silver-1); } .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .nav-cta { display: inline-flex; align-items: center; gap: 10px; } .nav-cta .btn { white-space: nowrap; } .nav-toggle { display: none; background: none; border: 0; padding: 8px; margin: 0; cursor: pointer; width: 40px; height: 40px; position: relative; z-index: 2; } .nav-toggle span { display: block; width: 22px; height: 1.5px; margin: 5px auto; background: var(--fg-0); transition: transform .3s var(--ease), opacity .25s var(--ease); } .nav[data-nav-open] .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav[data-nav-open] .nav-toggle span:nth-child(2) { opacity: 0; } .nav[data-nav-open] .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 960px) { .nav-links { gap: 22px; } .nav-cta .btn { padding: 10px 14px; font-size: 10.5px; letter-spacing: 0.14em; gap: 8px; } } @media (max-width: 850px) { .nav-inner { height: 64px; } .nav-toggle { display: block; } .nav-cta { display: none; } .nav-brand .name em { display: none; } #primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: color-mix(in oklab, var(--bg-0) 96%, transparent); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--line-strong); max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .nav[data-nav-open] #primary-nav { max-height: 70vh; } .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; } .nav-links li { border-bottom: 1px solid var(--line); } .nav-links li:last-child { border-bottom: 0; } .nav-links a { display: block; padding: 18px 0; font-size: 13px; letter-spacing: 0.24em; } .nav-links a::after { display: none; } } /* ============================================================= Footer ============================================================= */ .footer { margin-top: clamp(80px, 10vw, 140px); border-top: 1px solid var(--line); padding-block: 56px 36px; color: var(--fg-2); font-size: 12.5px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; align-items: start; } .footer-brand .mark { width: 28px; height: 28px; background-image: url("assets/logo-mark.png"); background-size: 150%; background-position: center; background-color: #000; border-radius: 2px; margin-bottom: 16px; } .footer-brand .name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-0); margin-bottom: 8px; } .footer-brand p { margin: 0; max-width: 32ch; line-height: 1.6; } .footer-col h6 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 500; color: var(--silver-2); margin: 0 0 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--fg-1); transition: color .25s var(--ease); } .footer-col a:hover { color: var(--silver-1); } .footer-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; } } /* ============================================================= Reveal-on-scroll ============================================================= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--delay, 0ms); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================= Hero — three layout variants on
============================================================= */ .hero { position: relative; padding-block: clamp(80px, 12vw, 160px) clamp(80px, 10vw, 130px); overflow: hidden; } .hero::before { /* subtle ambient sheen */ content: ""; position: absolute; inset: -10%; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(ellipse 70% 50% at 80% 80%, rgba(255, 255, 255, 0.025), transparent 60%); pointer-events: none; z-index: 0; } html[data-bg="light"] .hero::before { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 0, 0, 0.04), transparent 60%); } .hero>* { position: relative; z-index: 1; } /* index meta numerals */ .hero-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: clamp(40px, 6vw, 72px); } .hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--silver-1); box-shadow: 0 0 12px var(--silver-1); display: inline-block; margin-right: 10px; vertical-align: middle; animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } /* ----- Variant A: editorial (default) ----- */ .hero-editorial { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-editorial .copy h1 { font-family: var(--font-display); font-size: clamp(48px, 7.6vw, 116px); line-height: 0.96; font-weight: 300; letter-spacing: -0.02em; margin: 0 0 28px; } .hero-editorial .copy h1 .it { font-style: italic; font-weight: 300; color: var(--silver-2); } .hero-editorial .copy p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; color: var(--fg-1); max-width: 46ch; margin: 0 0 36px; font-weight: 300; } .hero-editorial .copy .ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; } .hero-editorial .mark-stage { position: relative; aspect-ratio: 1 / 1.05; border: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, color-mix(in oklab, var(--silver-1) 22%, var(--bg-0)) 0%, color-mix(in oklab, var(--silver-1) 8%, var(--bg-0)) 22%, var(--bg-0) 55%, #000 100%); display: grid; place-items: center; overflow: hidden; } html[data-bg="light"] .hero-editorial .mark-stage { background: radial-gradient(ellipse 60% 55% at 50% 48%, #ffffff 0%, #f1f0ec 22%, #d4d2cc 60%, #b8b6b0 100%); } .hero-editorial .mark-stage::before, .hero-editorial .mark-stage::after { content: ""; position: absolute; pointer-events: none; } .hero-editorial .mark-stage::before { /* soft corona behind the Z — light source from behind */ inset: 6%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(216, 218, 223, 0.30) 14%, rgba(216, 218, 223, 0.12) 32%, transparent 60%); filter: blur(18px); z-index: 1; animation: backlightPulse 6s ease-in-out infinite; } html[data-bg="light"] .hero-editorial .mark-stage::before { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.18) 38%, transparent 65%); } .hero-editorial .mark-stage::after { /* faint vignette to deepen the periphery */ inset: 0; background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.55) 100%); z-index: 0; } html[data-bg="light"] .hero-editorial .mark-stage::after { background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.18) 100%); } @keyframes backlightPulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } .hero-editorial .mark-stage .big-z { position: relative; z-index: 2; display: block; /* height: clamp(320px, 40vw, 580px); */ width: auto; /* Solid near-black silhouette, with the corona reading as light spilling around the edges. */ fill: #030305; stroke: rgba(216, 218, 223, 0.55); stroke-width: 0.5; /* outward halo glow — light coming from behind */ filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 36px rgba(216, 218, 223, 0.30)) drop-shadow(0 0 90px rgba(216, 218, 223, 0.18)); animation: floaty 8s ease-in-out infinite; user-select: none; } html[data-bg="light"] .hero-editorial .mark-stage .big-z { fill: #050507; stroke: rgba(15, 16, 26, 0.45); filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 36px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 90px rgba(216, 218, 223, 0.35)); } /* The mark-stage is wider/landscape now to give the giant Z + cast shadow room */ @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-editorial .stage-tag { position: absolute; bottom: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; z-index: 3; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-2); } /* ----- Variant B: centered ----- */ .hero-centered { text-align: center; display: grid; justify-items: center; gap: 32px; } .hero-centered .wordmark { width: min(900px, 90%); margin: 16px auto 0; } .hero-centered .wordmark img { width: 100%; height: auto; } .hero-centered h1 { font-size: clamp(28px, 3.4vw, 48px); font-weight: 300; font-family: var(--font-display); line-height: 1.15; margin: 0; max-width: 22ch; letter-spacing: -0.005em; } .hero-centered p { font-size: clamp(15px, 1.3vw, 18px); color: var(--fg-1); max-width: 56ch; margin: 0; font-weight: 300; line-height: 1.65; } .hero-centered .ctas { display: inline-flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; justify-content: center; } /* ----- Variant C: full-bleed monolith ----- */ .hero-monolith { min-height: 78vh; display: grid; grid-template-rows: 1fr auto; align-items: center; position: relative; } .hero-monolith .giantZ { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .hero-monolith .giantZ span { font-family: var(--font-display); font-weight: 300; font-size: min(78vh, 88vw); line-height: 0.8; background-image: linear-gradient(180deg, var(--silver-1) 0%, var(--silver-2) 40%, #2a2d34 52%, var(--silver-2) 64%, var(--silver-1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.04em; } html[data-bg="light"] .hero-monolith .giantZ span { background-image: linear-gradient(180deg, #6e7682 0%, #15161a 50%, #6e7682 100%); } .hero-monolith .copy { position: relative; z-index: 2; text-align: center; padding-top: 8vh; } .hero-monolith .copy h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 2.6vw, 40px); margin: 0 0 16px; letter-spacing: -0.005em; } .hero-monolith .copy p { color: var(--fg-1); max-width: 52ch; margin: 0 auto; font-size: clamp(14px, 1.1vw, 16px); font-weight: 300; } .hero-monolith .scroll-cue { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-2); padding-bottom: 24px; } .hero-monolith .scroll-cue::before, .hero-monolith .scroll-cue::after { content: ""; height: 1px; width: 60px; background: var(--line-strong); } @media (max-width: 860px) { .hero-editorial { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hero-editorial .copy h1, .hero-editorial .copy p { margin-left: auto; margin-right: auto; } .hero-editorial .copy .ctas { justify-content: center; } .hero-editorial .mark-stage { aspect-ratio: 1.2/1; max-height: 360px; width: 100%; } .hero-editorial .mark-stage .big-z { position: absolute; inset: 0; width: 100%; height: 100%; } } /* ============================================================= Section: principles ============================================================= */ .principles { padding-block: clamp(60px, 9vw, 120px); border-top: 1px solid var(--line); } .principles-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(48px, 7vw, 88px); } .principles-head h2 { font-size: clamp(36px, 5vw, 64px); } .principles-head p { color: var(--fg-1); max-width: 46ch; font-weight: 300; line-height: 1.6; margin: 0; } .principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); } .principle { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 28px 44px; display: flex; flex-direction: column; gap: 18px; min-height: 320px; position: relative; transition: background .4s var(--ease); } .principle:nth-child(4n) { border-right: 1px solid var(--line-strong); } .principle:hover { background: color-mix(in oklab, var(--silver-1) 6%, transparent); } .principle .num { font-family: var(--font-mono); font-size: 10.5px; color: var(--silver-2); letter-spacing: 0.2em; } .principle h3 { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.05; letter-spacing: -0.005em; margin: 0; } .principle h3 .it { font-style: italic; color: var(--silver-2); } .principle p { font-size: 14px; line-height: 1.65; color: var(--fg-2); margin: 0; margin-top: auto; } @media (max-width: 1080px) { .principles-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .principles-head { grid-template-columns: 1fr; } .principles-grid { grid-template-columns: 1fr; } } /* ============================================================= CTA strip ============================================================= */ .cta-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(60px, 9vw, 120px); display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; } .cta-strip h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; } .cta-strip h2 .it { font-style: italic; color: var(--silver-2); } .cta-strip .right { display: flex; justify-content: flex-end; } @media (max-width: 760px) { .cta-strip { grid-template-columns: 1fr; } .cta-strip .right { justify-content: flex-start; } } /* ============================================================= Page header (interior pages) ============================================================= */ .page-header { padding-block: clamp(60px, 8vw, 110px) clamp(36px, 5vw, 72px); border-bottom: 1px solid var(--line); position: relative; } .page-header .crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 28px; } .page-header .crumbs span { color: var(--silver-2); } .page-header h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(56px, 9vw, 152px); line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .page-header h1 .it { font-style: italic; color: var(--silver-2); } .page-header .meta { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); flex-wrap: wrap; gap: 12px; } .page-header .meta .right { color: var(--silver-2); } /* ============================================================= Article (long-form text) ============================================================= */ .article { padding-block: clamp(60px, 9vw, 130px); display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 96px); align-items: start; } .article aside { position: sticky; top: 110px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); display: grid; gap: 6px; } .article aside .label { color: var(--silver-2); } .article aside .val { color: var(--fg-1); } .article aside hr { margin: 18px 0; } .article .body p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.75; margin: 0 0 1.3em; color: var(--fg-1); font-weight: 300; } .article .body p:first-child::first-letter { font-family: var(--font-display); font-weight: 300; font-size: 5em; float: left; line-height: 0.9; margin: 0.06em 0.12em 0 -0.04em; color: var(--silver-1); } .article .body .pullquote { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(28px, 3vw, 42px); line-height: 1.15; letter-spacing: -0.005em; color: var(--fg-0); margin: 1.2em 0 1.4em; padding: 24px 0 24px 28px; border-left: 1px solid var(--silver-2); max-width: 28ch; } @media (max-width: 900px) { .article { grid-template-columns: 1fr; } .article aside { position: static; } } /* ============================================================= Mission page — large statement ============================================================= */ .mission-statement { padding-block: clamp(60px, 10vw, 160px); position: relative; text-align: center; } .mission-statement .stmt { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 5vw, 76px); line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; margin: 0 auto; color: var(--fg-0); } .mission-statement .stmt .it { font-style: italic; color: var(--silver-2); } .mission-statement .stmt .silv { color: var(--silver-1); } .mission-pillars { margin-top: clamp(60px, 8vw, 110px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); } .mission-pillar { padding: 40px 32px; background: var(--bg-0); display: flex; flex-direction: column; gap: 16px; text-align: left; } .mission-pillar .num { font-family: var(--font-mono); color: var(--silver-2); font-size: 11px; letter-spacing: 0.2em; } .mission-pillar h3 { font-family: var(--font-display); font-weight: 300; font-size: 26px; margin: 0; letter-spacing: -0.005em; } .mission-pillar p { font-size: 14.5px; line-height: 1.65; color: var(--fg-2); margin: 0; } @media (max-width: 760px) { .mission-pillars { grid-template-columns: 1fr; } } /* ============================================================= Contact page ============================================================= */ .contact-grid { padding-block: clamp(60px, 9vw, 130px); display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: start; } .contact-info { display: grid; gap: 28px; } .contact-info .group { display: grid; gap: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .contact-info .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-2); } .contact-info .val { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; color: var(--fg-0); letter-spacing: -0.005em; } .contact-info a.val { color: var(--fg-0); transition: color .25s var(--ease); position: relative; display: inline-block; } .contact-info a.val:hover { color: var(--silver-1); } .contact-info .hint { color: var(--fg-2); font-size: 13px; margin-top: 4px; } .form { border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); padding: clamp(28px, 3.5vw, 48px); display: grid; gap: 22px; position: relative; } .form::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--silver-2), var(--silver-2)) top left / 14px 1px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) top left / 1px 14px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) top right / 14px 1px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) top right / 1px 14px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) bottom left / 14px 1px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) bottom left / 1px 14px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) bottom right / 14px 1px no-repeat, linear-gradient(var(--silver-2), var(--silver-2)) bottom right / 1px 14px no-repeat; pointer-events: none; } .form-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; gap: 10px; } .form-head h3 { font-family: var(--font-display); font-weight: 300; font-size: 28px; margin: 0; } .form-head .stamp { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-2); } .field { display: grid; gap: 8px; } .field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2); } .field input, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 0 14px; font: inherit; color: var(--fg-0); font-size: 16px; outline: none; font-family: var(--font-sans); transition: border-color .3s var(--ease); resize: vertical; } .field textarea { min-height: 130px; } .field input::placeholder, .field textarea::placeholder { color: var(--fg-3); } .field input:focus, .field textarea:focus { border-color: var(--silver-1); } .field.invalid input, .field.invalid textarea { border-color: #d97a7a; } .field .err { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #d97a7a; min-height: 14px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 16px; flex-wrap: wrap; } .form-actions .small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } .form .submit-btn { background: var(--silver-1); color: #0a0a0c; border: 1px solid var(--silver-1); padding: 16px 28px; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; display: inline-flex; gap: 12px; align-items: center; transition: transform .35s var(--ease), background .35s var(--ease); font-weight: 500; } .form .submit-btn:hover { transform: translateY(-1px); } .form .submit-btn[disabled] { opacity: 0.6; cursor: progress; } .form .success { display: none; } .form .success:not([hidden]) { border: 1px solid var(--silver-2); padding: 22px; display: grid; gap: 8px; background: color-mix(in oklab, var(--silver-1) 8%, transparent); } .form .success h4 { font-family: var(--font-display); font-weight: 300; font-size: 24px; margin: 0; } .form .success p { margin: 0; color: var(--fg-1); font-size: 14.5px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } } /* ============================================================= Mini map (decorative) ============================================================= */ .mini-map { margin-top: 28px; border: 1px solid var(--line); height: 220px; position: relative; overflow: hidden; background: radial-gradient(circle at 32% 64%, rgba(216, 218, 223, 0.15), transparent 40%), linear-gradient(180deg, var(--bg-1), var(--bg-2)); } .mini-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .mini-map .pin { position: absolute; left: 32%; top: 60%; width: 12px; height: 12px; border-radius: 50%; background: var(--silver-1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--silver-1) 25%, transparent), 0 0 18px var(--silver-1); animation: pulse 2.4s var(--ease) infinite; } .mini-map .label { position: absolute; left: calc(32% + 22px); top: calc(60% - 6px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-2); } /* ============================================================= Misc ============================================================= */ ::selection { background: var(--silver-2); color: #0a0a0c; } .kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--silver-2); }