/* ============================================================================ footprint-lab.com — V2 Design System ("Cobalt" direction) ---------------------------------------------------------------------------- Dark zinc base, gradient-clipped headings, glass cards on 1px white rings, radial hero glow, aurora blooms, glowing cyan hairlines, pill buttons. Visual language modeled on joincobalt.com; brand tokens (accent blue, buy/sell/signal colors, mono details) carry over from v1. Same class taxonomy as v1 — pages keep their HTML skeleton; the entire redesign lives in this file. Everything inherits from the tokens in :root. ========================================================================== */ /* Fonts are loaded via a in each page's (prototype) and enqueued from functions.php (live theme). No @import here — it would render-block CSS parsing and double-load the families that the /enqueue already fetch. */ /* ---------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Surfaces — zinc scale, Cobalt-style near-black */ --bg: #09090b; /* page base (zinc-950) */ --surface: #0d0d11; /* alternating section backgrounds */ --card: rgba(24, 24, 27, .55); /* glass card (zinc-900/55) */ --card-solid: #131316; /* opaque card where translucency would stack */ --card-2: rgba(39, 39, 42, .55); /* nested / hover surface */ /* Lines — Cobalt ring-white/10 */ --border: rgba(244, 244, 245, .09); --border-hover: rgba(244, 244, 245, .20); /* Text — zinc scale */ --text: #f4f4f5; /* headings, key text (zinc-100) */ --text-2: #a1a1aa; /* body (zinc-400) */ --text-3: #86868f; /* captions, meta, footer — WCAG AA (5.2:1) */ /* Accent — brand electric blue, pushed toward Cobalt sky/cyan */ --accent: #1f8fe6; /* fills (buttons) */ --accent-2: #38bdf8; /* sky-400 — gradient partner */ --cyan: #22d3ee; /* hairlines, dots, waterline */ --accent-text: #5cb6f7; /* links / inline accents */ --accent-weak: rgba(56, 189, 248, .10); --accent-line: rgba(56, 189, 248, .32); --violet: #9089fc; /* aurora partner */ /* Signal — the indicator's OUTPUT marker (amber) */ --signal: #e8b04b; --signal-weak: rgba(232, 176, 75, .10); --signal-line: rgba(232, 176, 75, .38); /* Footprint raw data — reserved for bid/ask only */ --sell: #e2574c; --sell-text: #f0a6a0; --buy: #46b17b; --buy-text: #86d3a8; --sell-weak: rgba(226, 87, 76, .14); --buy-weak: rgba(70, 177, 123, .14); /* Type */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; /* Radius — Cobalt rounds everything up */ --r-sm: 10px; --r: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px; /* Layout — max-w-7xl feel */ --container: 1216px; --gutter: 24px; --header-h: 64px; /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------------------------------------------------------------------------- 2. Reset / base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* NOTE: do NOT put overflow-x here — it turns into a scroll container and breaks the sticky header (esp. under WP's template-part
wrapper). */ } /* Contain the .reveal--left/right slide-in overflow on the CONTENT element, not . The sticky header sits OUTSIDE
, so clipping here can't affect it; `clip` (unlike hidden) creates no scroll container. */ main { overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } /* Images now carry native width/height attributes (reserves space → no layout shift / better CLS). height:auto keeps content images undistorted when width is constrained; object-fit-framed images set both dims explicitly and win. */ img { height: auto; } a { color: var(--accent-text); text-decoration: none; transition: color .15s var(--ease); } a:hover { color: var(--text); } button { font-family: inherit; } ::selection { background: #67e8f9; color: #155e75; } /* cyan-300 / cyan-800 */ /* Keyboard focus — one consistent, on-brand ring across every control. */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Skip-to-content — visually hidden until focused (first tab stop). */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; transition: top .18s var(--ease); } .skip-link:focus { top: 12px; color: #fff; } /* Screen-reader-only utility (headings that keep the outline complete). */ .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; } /* ---------------------------------------------------------------------------- 3. Typography — gradient-clipped display headings (the Cobalt signature) -------------------------------------------------------------------------- */ h1, h2 { font-weight: 700; line-height: 1.07; letter-spacing: -0.03em; color: var(--text); /* fallback */ background: linear-gradient(135deg, #ffffff 30%, #9d9da6 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } h2 { background: linear-gradient(135deg, #f4f4f5 25%, #7a7a84 120%); -webkit-background-clip: text; background-clip: text; } h3, h4 { color: var(--text); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); } h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); } h3 { font-size: 1.125rem; } p { color: var(--text-2); } /* Payoff phrase — blue→cyan gradient inside the gradient heading */ .accent, h1 .accent, h2 .accent { background: linear-gradient(92deg, #6cc0ff 0%, #3ddad0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Standalone .accent outside headings (rare) keeps link-blue */ p .accent, span.accent { color: var(--accent-text); } p .accent { background: none; -webkit-text-fill-color: currentColor; } .lead { font-size: 1.15rem; line-height: 1.65; color: var(--text-2); max-width: 52ch; } /* ---------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 120px); } .section--surface { background: var(--surface); border-top: 1px solid rgba(244, 244, 245, .05); border-bottom: 1px solid rgba(244, 244, 245, .05); } .section--tight { padding-block: clamp(36px, 5vw, 64px); } .eyebrow-group { margin-bottom: 20px; } .section-head { max-width: 56ch; margin-bottom: 44px; } .section-head p { margin-top: 12px; } .grid { display: grid; gap: 20px; } .center { text-align: center; margin-inline: auto; } /* Aurora — blurred gradient blooms (add