/* ========================================================================== DVERIZOOM v3 — "Midnight projection room" (Frame.io-inspired system) Cosmic near-black canvas · one blue accent · oversized weight-400 display. Fonts: Jost (display) · Inter (body) · JetBrains Mono (eyebrow stamps) ========================================================================== */ :root { /* Colour + gradient tokens are theme-scoped in styles/themes.css (switch via ). Structural tokens below. */ /* type */ --display: "Jost", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* layout */ --container: 1280px; --pad: 24px; --section: clamp(76px, 10vw, 148px); /* radius */ --r-pill: 100px; --r-card: 10px; --r-feature: 24px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--obsidian); color: var(--carbon); font-family: var(--body); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p, dl, dd, figure { margin: 0; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input { font: inherit; color: inherit; } svg { display: block; } ::selection { background: var(--iris); color: var(--obsidian); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } main > section { padding-block: var(--section); position: relative; } .section-mid { background: var(--grad-mid); } /* ---------- typography ---------- */ .display { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 7.6vw, 88px); line-height: 0.98; letter-spacing: -0.045em; color: var(--carbon); } .h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -0.03em; color: var(--carbon); } .h3 { font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; } /* eyebrow stamp */ .eyebrow { display: inline-block; font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 0.9; letter-spacing: 0.14em; text-transform: uppercase; color: var(--iris); margin-bottom: 26px; } .eyebrow.is-dim { color: var(--smoke); } .lede { font-family: var(--body); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--smoke); max-width: 560px; } /* ---------- buttons (pills) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; border-radius: var(--r-pill); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.18s var(--ease); } .btn svg { flex-shrink: 0; transition: transform 0.3s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn-solid { background: var(--carbon); color: var(--obsidian); } .btn-solid:hover { background: var(--specter); } .btn-solid:active { transform: translateY(1px); } .btn-ghost { border: 1px solid rgba(252,252,252,0.5); color: var(--carbon); } .btn-ghost:hover { background: var(--carbon); color: var(--obsidian); border-color: var(--carbon); } .btn-lg { padding: 17px 34px; font-size: 15px; } /* city button — pill with accent affordance */ .btn-city { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; font-family: var(--body); font-size: 14px; font-weight: 500; border-radius: var(--r-pill); background: var(--carbon); color: var(--obsidian); transition: background-color 0.3s var(--ease), transform 0.18s var(--ease); } .btn-city:hover { background: var(--specter); } .btn-city svg { flex-shrink: 0; color: var(--iris); } .btn-city span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* media frame — 10px radius + violet halo */ .halo { border-radius: var(--r-card); border: 1px solid var(--twilight); box-shadow: inset 0 0 0 1px var(--halo-line), 0 0 70px var(--halo-glow); overflow: hidden; background: var(--graphite); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- utility ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } body.is-modal-open { overflow: hidden; } .logo { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--carbon); } .logo b { color: var(--iris); font-weight: 600; } @media (min-width: 900px) { .logo { font-size: 32px; } }