/* ───────────────────────────────────────────────────────────── 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 ── */ h2,.section-title{ font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(24px,3.4vw,32px); letter-spacing:-.6px; line-height:1.15; color:#fff; } /* ── card-h: card and row headings ── */ .ed-name,.card-title,.feat-title,.stage .t,.answer-name,.result-title{ font-family:'Syne',sans-serif; font-weight:800; 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)} /* ── button ── */ .btn,.btn-p,.btn-g,.login,.home,.read-btn,.aim-login{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; } .btn-p,.read-btn{background:var(--orange);color:#0A0F1C} .btn-p:hover,.read-btn:hover{filter:brightness(1.1)} .btn-g,.login,.home,.aim-login{border:1px solid var(--gold);color:var(--gold);background:none} .btn-g:hover,.login:hover,.home:hover,.aim-login:hover{background:var(--gold);color:var(--ground)} /* ── 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} /* Portal button: full label normally, shortened where the bar gets tight. At <=430px the nav links are already hidden, so only brand + this button share the row. */ .login-short{display:none} @media(max-width:430px){ .login-full{display:none} .login-short{display:inline} }