/* Signature DISPLAY face — self-hosted Bricolage Grotesque (variable, latin subset). Used ONLY for big editorial type (h1/h2/.p-h/.logo); body/UI copy stays on --sans. WHY NOT Space Grotesk (the previous face): Anthropic's own design guidance names it, by name, as the typeface its models converge on — which made it the loudest remaining "an AI built this" tell on the page. Bricolage is a grotesque with actual quirk in the letterforms, it holds the two-line hero without wrapping, and no framework or model reaches for it by default. Owner picked it from a render of all four candidates on the real headline. swap = no invisible-text stall; the preload in lands it before first paint. */ @font-face{ font-family:"Bricolage Grotesque"; src:url('assets/fonts/bricolage.woff2') format('woff2'); font-weight:200 800;font-style:normal;font-display:swap; } :root{ --bg:#070a12; --text:#e8edf6; --muted:#8a93a8; --line:#1a2233; --violet:#8b5cf6; --gold:#ffcc6e; /* CYAN IS RETIRED. It was a third hue with no job — it owned the eyebrows, the links and the focus rings for no reason, and neon-cyan-on-dark is itself a named "AI-generated" tell. The palette now has exactly two accents with clear jobs: --accent (violet) = the BRAND and every action — CTAs, links, focus, the one headline word --gold = the LIGHT in the scene — the hero star, the hub nodes, the eyebrows The token name stays so the 32 downstream call-sites don't all have to churn. */ --cyan:#c79bff; --accent:#c79bff; --eyebrow:#d3ae72; /* the scene's light, dimmed for small type (7.4:1 on the near-black) */ /* ONE flat CTA colour for every primary action (was a violet→cyan gradient on each button — the single loudest "generated landing page" cue on the whole surface). Solid, one hue. PURPLE by owner's call, to match the galaxy. Deliberately NOT the stock #8b5cf6 (Tailwind's indigo/violet default, the most-flagged "AI-generated" hue): this is #966ef2, sampled from the galaxy's OWN arm violet, so the brand colour is taken from the scene instead of a framework. Dark ink on it clears 5.1:1 contrast (WCAG AA). */ --cta:#966ef2; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* display/text pairing: Bricolage headlines, system sans body. Fallback = --sans so the swap holds the same box (the metrics are close enough to skip size-adjust). */ --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* The one accent word in a headline. Solid (never a gradient) — a light violet lifted from the galaxy's arms, bright enough to read at display size on the near-black (8.6:1). */ .grad{color:#c79bff} /* Per-glyph spans for the hero's gravity well (src/gravitype.js). inline-block so a transform applies at all; will-change keeps the 15-odd glyphs on their own layer so bending the line never repaints the headline underneath it. */ .gt{display:inline-block;will-change:transform} .muted{color:var(--muted)} /* The 3D canvas sits fixed behind the scrolling copy. */ #scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block} /* "Become the light" ENTRY push-in — a whisper dolly on the RENDERED brain via a CSS scale on the canvas ONLY (the tuned camera rig is untouched; the #cursor-fx overlay + JS-positioned pills stay at true positions). The class is added/removed by main.js on a real settled hub arrival, and is never present when pinned/reduced-motion → the beat goldens are untouched. */ @keyframes sceneBecome{0%{transform:scale(1)}38%{transform:scale(1.016)}100%{transform:scale(1)}} body.becoming #scene{animation:sceneBecome 1.15s cubic-bezier(.22,.61,.36,1)} /* Violet "dark-matter" cursor — a full-viewport canvas drawing a drifting violet particle wisp + faint connection filaments to nearby service nodes (see main.js drawDarkMatter). */ #cursor-fx{ /* z-index sits ABOVE the recruit modal (.rc-scrim, 300): the canvas is pointer-events:none, and at 60 the dark-matter wisp was painted UNDER the scrim — so the cursor visibly died the moment the "Work with me" card opened. It now threads over the card like everywhere else. 1000000: the rlt-chat widget (2026-08-26) mounts at 999998/999999 and the page is cursor:none everywhere — under the owner's cursor law the creature must ride the widget too, or the visitor has no pointer over it. The canvas stays pointer-events:none, so clicks pass through. */ position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1000000; /* normal blend (not screen) so the dark-matter VOID CORE can actually darken the scene inside the purple ring; the canvas is otherwise transparent. */ mix-blend-mode:normal;opacity:0;transition:opacity .5s ease; } body.pointer-active #cursor-fx{opacity:1} /* T5 teleport-blink cover — the rare service→service transport: the view collapses into dark matter (fast fade IN), the camera cut + panel refill happen fully under it, then it lifts (slower fade OUT). Sits above the panel (7) and below the cursor-fx canvas (60) so the dark-matter blob visibly persists through its own blink. */ #blink{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0; background:radial-gradient(circle at 50% 50%,#0b0618 0%,#020108 72%); transition:opacity .3s ease} #blink.on{opacity:1;transition:opacity .16s ease} /* Scroll-progress hairline — a whisper-quiet "chapter mark" on the right edge. The rail is near-invisible; a warm-gold fill grows from the top to track journey progress (currentP, driven each frame in animate()). Fades out at the hub (opacity set in JS). Now a