/* ============================================================================
BALLY DOES AI — PREMIUM SHARED DESIGN SYSTEM · premium-teal.css
----------------------------------------------------------------------------
The single reusable stylesheet for every premium page. Locked to the
Warm-Dark Teal system (TEAL-PALETTE-LOCKED.md · Set A default) with the
Editorial Cream + Teal system (Set B) available as a `.band--cream` context.
USAGE (per page):
Then compose from the components below. Nav + footer markup lives in
/assets/premium/_nav-footer.html (paste-in snippet).
RULES (do not fight these):
· Components read tokens only — never raw hex in page CSS.
· Deep teal fills large surfaces; --brand for CTAs/icons/keylines;
--glow ONLY for links, focus rings, glows, italic accents.
· Amber --accent is a spice (eyebrows, one keyline, badges) — max 10%.
· Never pure #000/#FFF anywhere.
· Light sections: add class="band--cream" — every token remaps to Set B.
============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap");
/* ----------------------------------------------------------------------------
1 · TOKENS — Set A "Warm-Dark Teal" (LOCKED DEFAULT)
--------------------------------------------------------------------------- */
:root {
/* neutrals (60%) — LIGHT-LED ground · Navy & Burgundy (LOCKED 2026-07-20) */
--paper: #F6F6F2; /* soft near-white canvas (default ground). NEVER #FFF fills */
--paper-2: #FCFCFA; /* tinted light panel */
--surface: #FFFFFF; /* crisp card */
--wash: #FCFCFA; /* elevated light surface (meaning inverted) */
--wash-deep: #EAEEF1; /* cool light field: behind media, quiet washes (was deep teal) */
--ink: #141A24; /* navy-black text. NEVER pure #000 */
--muted: #5A6270; /* secondary copy, captions */
--muted-2: #8A93A0; /* faint mono metadata (numbers, coords) — 2.87:1 on --paper, DECORATIVE ONLY */
--muted-aa: #5F6879; /* the same quiet grey that actually clears AA on BOTH light grounds:
5.18:1 on --paper, 4.83:1 on --glass over paper. Use this the
moment --muted-2 carries READABLE text (labels, categories,
breadcrumbs, meta). See sharedFileRequests. */
--black: #0E1116; /* deep neutral for rare max-contrast */
--line: rgba(20,26,36,0.12); /* hairlines, dividers on light */
--line-soft: rgba(20,26,36,0.06);
/* PRIMARY structural anchor — NAVY */
--navy: #16263F; /* dark sections, footer, hero guest, deep headings */
--navy-2: #1F3253; /* lifted navy panel */
--ink-inv: #F3F5F8; /* text on navy/dark */
/* PRIMARY rich accent — BURGUNDY */
--burgundy: #7C2D48; /* emphasis, one band, premium accent, keylines */
--burgundy-2: #98354F; /* hover / lifted burgundy */
/* SUPPORTING — TEAL */
--teal: #1C8B7C; /* links, secondary accents, icons */
--teal-deep: #146E62; /* small-text-safe teal (AA on light) */
--brand: #1C8B7C; /* alias: components read --brand = THE teal */
--glow: #1C8B7C; /* teal accents: links, focus, italics (no neon on paper) */
/* ATTENTION — GREEN (sparing: primary CTAs, live dots, demo HUD) */
--green: #5FD433; /* synergy green — where the eye MUST go */
--green-deep: #46B21F; /* green hover / green text on light (AA) */
/* accent RETIRED → aliased to burgundy so brass usages become burgundy, nothing breaks */
--accent: var(--burgundy);
--accent-body:var(--burgundy);
/* derived — keep derivations here, never in page CSS */
--brand-glow: color-mix(in oklab, var(--brand) 22%, transparent);
--brand-raise: color-mix(in oklab, var(--brand) 90%, #ffffff 10%); /* btn top-light */
--accent-dim: color-mix(in oklab, var(--accent) 12%, transparent);
/* HERO EYEBROW LEGIBILITY (added 2026-07-22 — foundation pass)
Nine pages hard-coded the mono hero eyebrow to rgba(243,245,248,0.7x).
The ALPHA is the real defect: every premium hero here is a diagonal scrim
that runs dark→light, so a 0.74-alpha near-white label dissolves the moment
the ground crosses ~rgb(110). Use SOLID tokens, never alpha, and pair each
with its halo — the halo is invisible on a flat ground and only earns its
keep over a gradient or photograph (Primland's atmospheric-depth logic at
glyph scale). Both colours clear 4.5:1 on their canonical ground; the halo
carries the worst-case gradient midpoint over the line too.
on-dark #EDF1F7 vs --navy #16263F = 13.9:1
on-light #414B5A vs --paper #F6F6F2 = 7.8:1
⚠ A page agent flipping a hero light↔dark MUST swap BOTH declarations. */
--eyebrow-on-dark: #EDF1F7;
--eyebrow-halo-dark: 0 0 2px rgba(11,17,27,0.55), 0 1px 12px rgba(11,17,27,0.42);
--eyebrow-on-light: #414B5A;
--eyebrow-halo-light: 0 0 2px rgba(246,246,242,0.62), 0 1px 12px rgba(246,246,242,0.5);
--glass: rgba(20,26,36,0.035); /* subtle dark film on the light ground */
--glass-line: rgba(20,26,36,0.10);
--scrim: 20,26,36; /* navy rgb for rgba() scrims / recessed islands */
--navy-grad: linear-gradient(135deg,#16263F,#28406A);
/* fluid type scale (minor-third → major-second blend) */
--step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
--step-0: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
--step-1: clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
--step-2: clamp(1.44rem, 1.28rem + 0.80vw, 2.00rem);
--step-3: clamp(1.73rem, 1.48rem + 1.25vw, 2.67rem);
--step-4: clamp(2.07rem, 1.70rem + 1.85vw, 3.55rem);
--step-5: clamp(2.49rem, 1.95rem + 2.70vw, 4.74rem);
--step-6: clamp(2.99rem, 2.20rem + 3.90vw, 6.31rem);
--step-7: clamp(3.58rem, 2.45rem + 5.65vw, 8.42rem);
--step-hero: clamp(2.85rem, 1.15rem + 7.4vw, 8.6rem);
--font-display: "Instrument Serif", Georgia, serif;
--font-body: "Geist", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* easing — never bare linear/ease-in-out on UI */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--dur-fast: 0.4s;
--dur-base: 0.7s;
--dur-slow: 1.1s;
/* layout rhythm */
--shell: 1360px;
--gutter: clamp(20px, 4vw, 52px);
--section-y: clamp(6.5rem, 10vw, 11rem);
--r-lg: 2rem;
--r-md: 1.25rem;
}
/* ----------------------------------------------------------------------------
2 · RESET / BASE
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--step-0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
::selection { background: rgba(28,139,124,0.20); color: var(--ink); }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
* { font-optical-sizing: auto; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, .display { text-wrap: balance; }
p, li { text-wrap: pretty; }
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
/* Two adjacent .section elements each apply the FULL --section-y (up to 176px)
on their own touching edge, so a plain section-to-section boundary stacks
to ~350px of pure background with nothing in it - the exact "falls off
after the hero" complaint, confirmed 2026-08-10 by screenshotting every
page's mid/bottom half rather than trusting a DOM element-presence check
(which had wrongly reported zero dead zones earlier). This is a single,
sitewide root cause, not a per-page content problem: shrink the INCOMING
section's top padding whenever it follows another .section directly, since
the outgoing section's bottom padding already did the work of separating
them. A section that follows something else (a full-bleed hero, a marquee)
is untouched, so hero->first-section spacing is unaffected. */
.section + .section { padding-top: calc(var(--section-y) * 0.18); }
/* The rule above only shrank the INCOMING half; the OUTGOING section's own
full bottom padding was still stacking underneath it and stayed the
dominant part of the gap (confirmed by screenshot, not assumed). Shrink
that side too, on any .section directly followed by another .section, so
the two halves split one section-y's worth of breathing room between them
instead of each contributing a full one. :has() has full modern-browser
support (Chrome 105+/Safari 15.4+/Firefox 121+, all well past this B2B
site's bar). A section followed by something that ISN'T .section (a
full-bleed CTA band, a footer) keeps its full bottom padding on purpose. */
.section:has(+ .section) { padding-bottom: calc(var(--section-y) * 0.35); }
.skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px;
}
.skip:focus { left: 16px; top: 16px; }
/* ----------------------------------------------------------------------------
3 · GRAIN — one fixed layer per page, paints once, kills teal banding
--------------------------------------------------------------------------- */
body::after {
content: "";
position: fixed; inset: 0; z-index: 90;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
mix-blend-mode: overlay;
}
/* ----------------------------------------------------------------------------
4 · TYPOGRAPHY HELPERS
--------------------------------------------------------------------------- */
.eyebrow {
font-family: var(--font-mono); font-weight: 500;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted);
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .tick { width: 20px; height: 1px; background: var(--accent); display: inline-block; } /* the amber spice */
.h-display {
font-family: var(--font-display); font-weight: 400;
font-size: var(--step-6); line-height: 1.02; letter-spacing: -0.015em;
color: var(--ink);
}
.h-display em { font-style: italic; color: var(--glow); letter-spacing: 0.005em; }
.lede { color: var(--muted); font-size: var(--step-1); line-height: 1.55; max-inline-size: 56ch; font-weight: 300; }
/* a NOTE is read, not decoration → --muted-aa (ground-aware), not --muted-2 */
.small-note { color: var(--muted-aa); font-size: var(--step--1); }
.link-plain {
font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); display: inline-flex; align-items: center; gap: 8px;
transition: color var(--dur-fast) var(--ease-out-quart);
}
.link-plain:hover { color: var(--glow); }
/* ----------------------------------------------------------------------------
5 · NAV — floating detached glass pill (markup in _nav-footer.html)
--------------------------------------------------------------------------- */
.nav {
position: fixed; top: clamp(14px, 2.2vh, 24px); left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
padding: 9px 10px 9px 20px;
border-radius: 999px;
border: 1px solid transparent;
transition: background var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-fast) var(--ease-out-quart);
white-space: nowrap;
}
/* Scrolled over the LIGHT page → light glass pill + dark ink text */
.nav.is-scrolled {
background: rgba(246, 246, 242, 0.93); /* light paper glass — 0.93 not 0.82 so headings don't bleed through mid-scroll */
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border-color: var(--line);
box-shadow: 0 18px 44px -18px rgba(20,26,36,0.22);
}
.nav__brand { display: inline-flex; align-items: baseline; gap: 9px; }
.nav__brand .nav__seal { display: block; flex: none; align-self: center; border-radius: 50%; }
.nav__brand .wm-serif {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 20px; line-height: 1; color: var(--ink); letter-spacing: 0.01em;
}
.nav__brand .wm-mono {
font-family: var(--font-mono); font-weight: 500; font-size: 9px;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
/* Stretching the whole chain — the