/* ───────────────────────────────────────────────────────────── Turning Point AI — brand.css The single source of truth for type and text colour. Pages own layout only: grids, the game board, arc rows, panels. They must not declare font-family, font-size, font-weight, letter-spacing or color for any role below. If a new element needs text styling, give it the nearest role's selector — do not invent a size. ───────────────────────────────────────────────────────────── */ :root{ /* surfaces */ --ground:#0A0F1C; --panel:#141A28; --panel2:#1C212C; /* brand */ --gold:#D9A441; --gold-dim:rgba(217,164,65,.22); --orange:#E8612C; --metal:linear-gradient(125deg,#8A6418 0%,#D9A441 18%,#F7E290 36%,#C99A2E 52%,#9C7320 70%,#F2D26E 100%); /* text — exactly three greys. Nothing else. */ --ink:#EDEFF3; /* emphasis, strong, pull-text */ --soft:#B9C0CC; /* ledes, primary body, nav */ --muted:#78808F; /* secondary body, meta, labels */ /* functional state — game feedback only, never decoration */ --green:#34d399; --red:#f87171; } /* ── base ── */ body{ background:var(--ground); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} /* ── sticky header ────────────────────────────────────────── The bar must be full-bleed or the translucent background renders as a floating strip. The pages previously centred the header with max-width:900px + margin:0 auto; that constraint now lives in the padding instead, so the bar spans the viewport while its content stays centred at the same 840px. Requires

to be a direct child of and no overflow container above it — true on every page that has one. ───────────────────────────────────────────────────────── */ header{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px max(30px,calc((100% - 840px) / 2)); background:rgba(10,15,28,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.06); } /* Anything anchor-linked must clear the bar (~66px) plus breathing room. */ [id]{scroll-margin-top:90px} /* ── display: the page title. Metallic, once per page. ── */ h1,.page-title,.code{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(38px,7.5vw,66px); letter-spacing:-1.6px; line-height:1; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ── h2: section heading ── */ /* Section headings are DM Sans. Syne is reserved for the display role only. */ h2,.section-title{ font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:26px; letter-spacing:-.3px; line-height:1.2; color:#fff; } /* ── card-h: card and row headings. DM Sans, NOT Syne — Syne is the display role only (the hero and the .brand-tx wordmark), estate-wide. ── */ .ed-name,.card-title,.feat-title,.answer-name,.result-title{ font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:18px; letter-spacing:-.2px; line-height:1.3; color:#fff; } /* Arc / trace row names. Deliberately NOT in the card-h group above: those are Syne, and Syne is reserved for the display role. The arc rows and the worked example's trace rows share one grammar, so they share one rule. */ .stage .t{ font-family:'DM Sans',system-ui,sans-serif; font-weight:600; font-size:18px; letter-spacing:-.2px; line-height:1.3; color:#fff; } /* ── eyebrow: mono gold label above a heading ── */ .eyebrow,.slabel,.row-label,.meta .lab,.game-eyebrow{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); } /* ── body: ledes and primary body ── */ .lede,.section-sub,.tagline,.row-sub{ font-family:'DM Sans',system-ui,sans-serif; font-weight:400; font-size:15.5px; letter-spacing:normal; color:var(--soft); } /* ── body-2: secondary and descriptive body ── */ .sub,.step p,.card-excerpt,.feat-excerpt,.context-body p,.stage .d,.clue,.ed-role,.ed-q,.closing{ font-family:'DM Sans',system-ui,sans-serif; font-weight:400; font-size:14.5px; letter-spacing:normal; color:var(--muted); } /* ── meta: mono small print, counters, badges, dates ── */ .legal, .fnote,.ed-n,.card-date,.card-type,.card-platform,.feat-type,.feat-meta,.feat-tag, .platform-pill,.stat-label,.series-badge,.meta .cnt,.clue.locked,.step .n,.stage .n, .wip-bar-labels,.card-link,.stat-val{ font-family:'JetBrains Mono',monospace; font-weight:400; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); } /* ── nav: header and footer links ── */ .hnav a,.flinks a,.links a{ font-family:'DM Sans',system-ui,sans-serif; font-weight:400; font-size:13px; letter-spacing:normal; text-transform:none; color:var(--soft); } .hnav a:hover,.flinks a:hover,.links a:hover{color:var(--gold)} /* ── buttons: ONE gold system, two variants. No orange on any button. ── PRIMARY .btn-p : solid gold, ink text. One per view. SECONDARY .btn-g / .read-btn / .login / .home / .aim-login : gold outline, gold text. Orange is retired from every button on this estate. */ .btn,.btn-p,.btn-g,.login,.home,.read-btn,.aim-login{ font-family:'DM Sans',system-ui,sans-serif; font-weight:500; font-size:13px; letter-spacing:normal; text-transform:none; cursor:pointer; } /* primary — solid gold */ .btn-p{background:var(--gold);color:var(--ground);border:1px solid var(--gold);padding:12px 20px;border-radius:8px;display:inline-block} .btn-p:hover{background:#E2B45A;border-color:#E2B45A} /* secondary — gold outline (the Fi Client Portal treatment is the model) */ .btn-g,.read-btn{background:none;border:1px solid var(--gold);color:var(--gold);padding:12px 20px;border-radius:8px;display:inline-block} .btn-g:hover,.read-btn:hover{background:var(--gold);color:var(--ground)} /* compact secondaries keep their own header/nav padding, gold colours only */ .login,.home,.aim-login{border:1px solid var(--gold);color:var(--gold);background:none} .login:hover,.home:hover,.aim-login:hover{background:var(--gold);color:var(--ground)} /* ── floating WhatsApp bubble ────────────────────────────── Public pages only (not 404, not the portal). In the gold system: navy ground, gold outline + gold glyph; hover fills gold, glyph -> ink, 2px lift. Still — no pulse, no badge. .15s to match the estate's snappy feel (the buttons themselves are instant; the lift needs motion). */ .wa-bubble{ position:fixed;right:24px;bottom:24px;z-index:60; width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--ground);border:1px solid var(--gold);color:var(--gold); box-shadow:0 6px 20px rgba(0,0,0,.45); transition:background .15s, color .15s, transform .15s; } .wa-bubble svg{width:28px;height:28px;display:block;fill:currentColor} .wa-bubble:hover{background:var(--gold);color:var(--ground);transform:translateY(-2px)} @media(max-width:430px){ .wa-bubble{width:52px;height:52px;right:16px;bottom:16px} .wa-bubble svg{width:26px;height:26px} /* The bubble floats over the bottom-right at scroll-end; without clearance the centred footer legal line slides under it. `body footer` (0-0-2) outranks each page's local `footer` (0-0-1), so this wins without touching 4 files. 84px = 52 bubble + 16 inset + 16 margin. 404 has no footer, so it is spared. */ body footer{padding-bottom:84px} } /* ── the gold rule device ── */ .rule{width:52px;height:1px;background:var(--gold);opacity:.5;margin:26px auto} /* ── brand wordmark ── */ .brand-tx{ font-family:'Syne',sans-serif; font-weight:800; font-size:14px; letter-spacing:-.2px; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; } /* registered company details — quiet second line under the footer note */ .legal{display:inline-block;margin-top:6px;opacity:.85} .legal-404{margin-top:26px} /* The portal button carries its full label at EVERY width. If the bar gets tight the nav links give way (they already hide at <=660px); the button text never does — so it must not wrap or shrink. */ .login{white-space:nowrap;flex-shrink:0} /* Below 430px the nav links are already gone, so the only thing left to give is the bar's own padding. Measured: at 360px the default 30px gutters pushed the button past the header edge. The button never shrinks; the gutter does. */ @media(max-width:430px){ header{padding-left:16px;padding-right:16px} }