/* ════════════════════════════════════════════════════════════════════════ PANOPTÈS · Tweak overlays Driven by --orn-* on :root and [data-voice] / [data-pulse] on . These rules sit on top of style.css; load order matters. ════════════════════════════════════════════════════════════════════════ */ :root { --orn: .72; --orn-meander: 1; --orn-flanc: 1; --orn-cross: 1; --orn-sat: 1; --orn-pulse-on: 1; } /* ─── ORNAMENT · meander strips fade out at low density ─────────────── */ .meander-strip, .meander-rail, .nav__keystrip, .hero__separator, .about-section-mark { opacity: var(--orn-meander); transition: opacity .35s ease; } /* ─── ORNAMENT · corner flancs ──────────────────────────────────────── */ .flanc { opacity: var(--orn-flanc); transition: opacity .35s ease; } /* ─── ORNAMENT · viewport crosshairs + dot grid ─────────────────────── */ .viewport::before { opacity: calc(var(--orn-cross) * .55); transition: opacity .35s ease; } .viewport::after { opacity: calc(var(--orn-cross) * .55); transition: opacity .35s ease; } .viewport { background-image: radial-gradient( circle at 1px 1px, rgba(26,18,8, calc(.10 * var(--orn-cross))) 1px, transparent 1px ); } /* ─── ORNAMENT · Argos satellite eyes (the hundred) ────────────────── */ .boot-eye__satellites { opacity: var(--orn-sat); transition: opacity .4s ease; } .boot-eye__ring { opacity: calc(.6 * var(--orn-meander)); } .boot-eye__ticks { opacity: calc(var(--orn-cross) * .9); } .boot-eye__tick { opacity: calc(var(--orn-cross) * .65); transition: opacity .35s ease; } /* ─── ORNAMENT · attention diagonal glow ───────────────────────────── */ .attn-cell--diag::after { opacity: calc(.4 + .6 * var(--orn)); } /* ─── ORNAMENT · about hero kicker rule ────────────────────────────── */ .about-hero__kicker::before { opacity: var(--orn-meander); } /* ─── PULSE TOGGLE · stop status dot pulse rings ───────────────────── */ html[data-pulse="off"] .dot::after, html[data-pulse="off"] .actionbar__pip, html[data-pulse="off"] .btn__dot--blink, html[data-pulse="off"] .hitl-toggle__dot { animation: none !important; } html[data-pulse="off"] .actionbar__pip { box-shadow: none; } /* ─── VESSEL · subtle palette-specific adjustments ─────────────────── */ /* Bucchero is cool/silver — desaturate amber-driven glows */ :root[style*="--am: #9A8E78"] .btn__dot, :root[style*="--am: #9A8E78"] .actionbar__pip { box-shadow: 0 0 8px rgba(154,142,120,.55); } /* Red-figure: dark page wants brighter type contrast */ :root[style*="--tc: #1F1610"] .hero__count, :root[style*="--tc: #1F1610"] .boot-identity__kicker { color: var(--cr); border-color: var(--cr); } :root[style*="--tc: #1F1610"] .hero__count--warn { background: var(--am); color: var(--fg); border-color: var(--am); } :root[style*="--tc: #1F1610"] .boot-identity__title, :root[style*="--tc: #1F1610"] .boot-identity__subtitle, :root[style*="--tc: #1F1610"] .hero__h, :root[style*="--tc: #1F1610"] .hero__sub, :root[style*="--tc: #1F1610"] .hero__eyebrow, :root[style*="--tc: #1F1610"] .about-hero__lede, :root[style*="--tc: #1F1610"] .about-hero__title, :root[style*="--tc: #1F1610"] .about-hero__kicker, :root[style*="--tc: #1F1610"] .about-hero__meta dt, :root[style*="--tc: #1F1610"] .about-hero__meta dd, :root[style*="--tc: #1F1610"] .about-section__head h2, :root[style*="--tc: #1F1610"] .about-section__head p, :root[style*="--tc: #1F1610"] .game, :root[style*="--tc: #1F1610"] .game__greek, :root[style*="--tc: #1F1610"] .game__caption, :root[style*="--tc: #1F1610"] .game__math, :root[style*="--tc: #1F1610"] .swatch__name, :root[style*="--tc: #1F1610"] .status-pill, :root[style*="--tc: #1F1610"] .boot-bar, :root[style*="--tc: #1F1610"] .about-nav__home, :root[style*="--tc: #1F1610"] .about-nav__links a { color: var(--cr); } :root[style*="--tc: #1F1610"] .game__math { border-color: var(--cr); color: var(--cr); } :root[style*="--tc: #1F1610"] .boot-progress { background: rgba(232,201,148,.18); } :root[style*="--tc: #1F1610"] .boot-progress__ticks { background-image: repeating-linear-gradient(90deg, transparent 0 19px, rgba(232,201,148,.25) 19px 20px); } :root[style*="--tc: #1F1610"] .about-nav { background: color-mix(in oklab, var(--tc), var(--cr) 4%); } :root[style*="--tc: #1F1610"] .about-nav__links a:hover, :root[style*="--tc: #1F1610"] .about-nav__home { color: var(--cr); } :root[style*="--tc: #1F1610"] .about-nav .btn { color: var(--cr); border-color: var(--cr); } :root[style*="--tc: #1F1610"] .about-nav .btn:hover { background: var(--cr); color: var(--fg); } :root[style*="--tc: #1F1610"] .status-pill { border-color: var(--cr); } /* Bucchero — same dark-page text inversion */ :root[style*="--tc: #3D3A38"] .hero__count, :root[style*="--tc: #3D3A38"] .boot-identity__kicker { color: var(--cr); border-color: var(--cr); } :root[style*="--tc: #3D3A38"] .boot-identity__title, :root[style*="--tc: #3D3A38"] .boot-identity__subtitle, :root[style*="--tc: #3D3A38"] .hero__h, :root[style*="--tc: #3D3A38"] .hero__sub, :root[style*="--tc: #3D3A38"] .hero__eyebrow, :root[style*="--tc: #3D3A38"] .about-hero__lede, :root[style*="--tc: #3D3A38"] .about-hero__title, :root[style*="--tc: #3D3A38"] .about-hero__kicker, :root[style*="--tc: #3D3A38"] .about-hero__meta dt, :root[style*="--tc: #3D3A38"] .about-hero__meta dd, :root[style*="--tc: #3D3A38"] .about-section__head h2, :root[style*="--tc: #3D3A38"] .about-section__head p, :root[style*="--tc: #3D3A38"] .game, :root[style*="--tc: #3D3A38"] .game__greek, :root[style*="--tc: #3D3A38"] .game__caption, :root[style*="--tc: #3D3A38"] .game__math, :root[style*="--tc: #3D3A38"] .swatch__name, :root[style*="--tc: #3D3A38"] .status-pill, :root[style*="--tc: #3D3A38"] .boot-bar, :root[style*="--tc: #3D3A38"] .about-nav__home, :root[style*="--tc: #3D3A38"] .about-nav__links a { color: var(--cr); } :root[style*="--tc: #3D3A38"] .game__math { border-color: var(--cr); } :root[style*="--tc: #3D3A38"] .about-nav .btn { color: var(--cr); border-color: var(--cr); } :root[style*="--tc: #3D3A38"] .about-nav .btn:hover { background: var(--cr); color: var(--fg); } :root[style*="--tc: #3D3A38"] .status-pill { border-color: var(--cr); } /* ════════════════════════════════════════════════════════════════════ VOICE · typographic register ════════════════════════════════════════════════════════════════════ */ /* EDITORIAL — the default, serif dominant, generous breathing room */ html[data-voice="editorial"] .hero__h, html[data-voice="editorial"] .about-hero__title, html[data-voice="editorial"] .boot-identity__title { font-family: var(--ff-serif); font-style: normal; } html[data-voice="editorial"] .hero__h--amber { font-style: italic; } /* OPERATIONS — mono everywhere, denser, NOC vibe */ html[data-voice="operations"] .boot-identity__title, html[data-voice="operations"] .hero__h, html[data-voice="operations"] .about-hero__title, html[data-voice="operations"] .about-section__head h2, html[data-voice="operations"] .card__service, html[data-voice="operations"] .swatch__name, html[data-voice="operations"] .arch__name, html[data-voice="operations"] .pipeline__step h3, html[data-voice="operations"] .attn-summary h4, html[data-voice="operations"] .hitl__head h3, html[data-voice="operations"] .hitl__item h4 { font-family: var(--ff-mono); font-weight: 500; letter-spacing: -.005em; text-transform: lowercase; font-style: normal !important; } html[data-voice="operations"] .boot-identity__title { font-size: clamp(48px, 7vw, 92px); } html[data-voice="operations"] .hero__h { font-size: clamp(40px, 5.4vw, 80px); } html[data-voice="operations"] .about-hero__title { font-size: clamp(64px, 11vw, 160px); } html[data-voice="operations"] .hero__h--amber { color: var(--am); padding-left: .4em; } html[data-voice="operations"] .hero__h--amber::before { content: "// "; opacity: .55; } html[data-voice="operations"] .boot-identity__title::after { content: " //"; opacity: .55; margin-left: .1em; } html[data-voice="operations"] .about-hero__title::after { content: " //"; color: var(--am); opacity: .65; } html[data-voice="operations"] .card__service::before { content: ""; } html[data-voice="operations"] .card__service::before { content: ">"; color: var(--am); margin-right: 6px; } html[data-voice="operations"] .hero__sub, html[data-voice="operations"] .about-hero__lede, html[data-voice="operations"] .about-section__head p, html[data-voice="operations"] .card__desc { font-family: var(--ff-mono); font-size: 13px; line-height: 1.5; } html[data-voice="operations"] .bento { gap: 12px; } html[data-voice="operations"] .card { padding: 14px; gap: 10px; } html[data-voice="operations"] .card__head { padding-bottom: 9px; } /* FRIEZE — dramatic serif, italicized, generously spaced like a pediment */ html[data-voice="frieze"] .boot-identity__title, html[data-voice="frieze"] .hero__h, html[data-voice="frieze"] .about-hero__title, html[data-voice="frieze"] .about-section__head h2, html[data-voice="frieze"] .pipeline__step h3, html[data-voice="frieze"] .attn-summary h4 { font-family: var(--ff-serif); font-style: italic; letter-spacing: -.005em; } html[data-voice="frieze"] .about-hero__title { font-size: clamp(96px, 16vw, 240px); letter-spacing: -.04em; line-height: .82; } html[data-voice="frieze"] .boot-identity__title { letter-spacing: -.025em; } html[data-voice="frieze"] .hero__h--amber { font-style: italic; text-decoration: underline; text-decoration-color: var(--am); text-decoration-thickness: 2px; text-underline-offset: 8px; } html[data-voice="frieze"] .boot-identity__kicker, html[data-voice="frieze"] .hero__eyebrow, html[data-voice="frieze"] .about-hero__kicker, html[data-voice="frieze"] .about-section__num { letter-spacing: .6em; } html[data-voice="frieze"] .card__greek { letter-spacing: .36em; } html[data-voice="frieze"] .card__service { font-style: italic; } html[data-voice="frieze"] .card__greek--cream { letter-spacing: .42em; } /* Decorative drop-cap on the about lede when voice is Frieze */ html[data-voice="frieze"] .about-hero__lede::first-letter { font-family: var(--ff-serif); font-size: 3.4em; font-style: italic; float: left; line-height: .85; padding: 6px 12px 0 0; color: var(--am); }