/* ========================================================================== BrainTrivia site chrome — sticky header + footer. Replicates braintrivia.net's chrome: 61px translucent sticky header with blur(10px), 1px #ececea hairline, flat cards, Space Grotesk wordmark. Loads BEFORE quiz.css so the engine still wins on any overlap. ========================================================================== */ /* Box model. quiz.css and listing.css each carry this reset, but the homepage and browse page load neither — they pull bt-chrome, bt-theme, bt-listing, mascot and bt-mascot only, so everything on them was sizing in content-box. It caused two visible bugs: the rail's mascot card (which sets width:100%) overhung its column by its own 30px of padding+border, and the footer's max-width container came out 1228px against the page's 1180px measure. bt-chrome.css is the one stylesheet every page loads, so the reset lives here. On quiz pages quiz.css sets the same thing, so nothing changes there. */ *,*::before,*::after{box-sizing:border-box} .bt-header{ position:sticky; top:0; z-index:60; height:61px; display:flex; align-items:center; background:var(--navbg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--glassbrd); } /* Three-track grid, not a flex row with auto margins. The flex version had THREE competing auto margins — .bt-nav{margin:0 auto} contributes one on each side and .bt-actions{margin-left:auto} adds a third. Free space then splits three ways instead of two, so the nav landed 238px left of the viewport centre on a wide screen: not centred between the logo and the actions either, just adrift. A 1fr/auto/1fr grid centres the middle track on the page regardless of how wide the logo or the actions are. */ .bt-header-in{ position:relative; /* positioning context for the mobile nav panel */ width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:0 24px; } .bt-header-in > .bt-logo{justify-self:start} .bt-header-in > .bt-nav, .bt-header-in > .bt-catbtn{justify-self:center; min-width:0} .bt-header-in > .bt-actions{justify-self:end} .bt-logo{display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto} /* 35px is the logo's NATURAL size — the artwork is authored at 130x35 and that is exactly how braintrivia.net renders it. We were forcing height:30px, i.e. 86%, which is why it read as smaller and softer: the wordmark's thin strokes land on fractional pixels once scaled off their designed grid, so nothing snaps and the whole mark goes slightly fuzzy. Don't scale it; the 61px header has room for 35 with 13px of breathing space either side. */ .bt-logo svg{display:block; height:35px; width:auto} /* wordmark glyphs are black in the source SVG — drive them from the theme */ .bt-logo .bt-word{fill:var(--ink)} .bt-nav{ display:flex; align-items:center; gap:4px; margin:0; /* centring is the grid's job now */ max-width:100%; overflow-x:auto; scrollbar-width:none; } .bt-nav::-webkit-scrollbar{display:none} .bt-nav a{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:10px; font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap; transition:background .15s ease,color .15s ease; } .bt-nav a svg{width:16px; height:16px; flex:0 0 auto} /* Each category keeps its own colour here, matching the section headers and the rail chips, so a tag reads the same everywhere on the site. The label stays --ink: colouring both would make the bar shout, and the icon alone is enough to carry the association. Values are the --cfg halves of the .c-* pairs in bt-listing.css. */ .bt-nav a[data-tag="Personality"] svg{color:#0c7297} .bt-nav a[data-tag="Nostalgia"] svg{color:#965d08} .bt-nav a[data-tag="Faith"] svg{color:#1b4bbb} .bt-nav a[data-tag="Music"] svg{color:#b1255f} .bt-nav a[data-tag="Words"] svg{color:#402bab} .bt-nav a[data-tag="Sports"] svg{color:#af490e} .bt-nav a[data-tag=""] svg{color:var(--primary)} /* lifted for dark — the light values sit at ~40% lightness and disappear against a charcoal bar (same hues as the .c-* dark pairs in bt-listing.css) */ :root[data-theme="dark"] .bt-nav a[data-tag="Personality"] svg{color:#69b7d3} :root[data-theme="dark"] .bt-nav a[data-tag="Nostalgia"] svg{color:#ddab5f} :root[data-theme="dark"] .bt-nav a[data-tag="Faith"] svg{color:#6389e3} :root[data-theme="dark"] .bt-nav a[data-tag="Music"] svg{color:#dd5f94} :root[data-theme="dark"] .bt-nav a[data-tag="Words"] svg{color:#8d7cde} :root[data-theme="dark"] .bt-nav a[data-tag="Sports"] svg{color:#e28c5a} .bt-nav a:hover{background:var(--pillbg)} .bt-nav a.is-active{background:var(--primtint); color:var(--primaryd)} /* on the active pill the tint already carries the category — let the icon join the label so the chip reads as one solid unit */ .bt-nav a.is-active svg{color:var(--primaryd)} /* mobile category button — hidden on desktop, where the strip fits */ .bt-catbtn{ display:none; align-items:center; gap:6px; flex:0 0 auto; padding:7px 10px 7px 9px; border-radius:10px; cursor:pointer; background:var(--pillbg); border:1px solid var(--glassbrd); color:var(--ink); font-family:inherit; font-size:13px; font-weight:600; letter-spacing:-.01em; } .bt-catbtn svg{width:16px; height:16px; flex:0 0 auto} .bt-catbtn .bt-caret{width:14px; height:14px; transition:transform .18s ease; opacity:.7} .bt-catbtn[aria-expanded="true"] .bt-caret{transform:rotate(180deg)} .bt-catbtn-t{max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .bt-actions{display:flex; align-items:center; gap:8px} /* theme toggle ------------------------------------------------------------- A two-segment pill, not a single cycling button. With one button you have to work out whether the icon shows the current state or the one you'd switch to — a genuine coin-flip for users. Two segments make the current theme a selected state, which needs no interpretation. */ .thm{ display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; padding:2px; border-radius:99px; background:var(--pillbg); border:1px solid var(--glassbrd); } .thm-seg{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:26px; padding:0; border:0; border-radius:99px; cursor:pointer; background:none; color:var(--muted); line-height:0; transition:background .15s ease, color .15s ease; } .thm-seg svg{width:16px; height:16px; display:block} .thm-seg:hover{color:var(--ink)} .thm-seg.on{background:var(--card); color:var(--primaryd); box-shadow:0 1px 3px rgba(20,16,40,.12)} .thm-seg:focus-visible{outline:2px solid var(--logo); outline-offset:2px} :root[data-theme="dark"] .thm-seg.on{box-shadow:none} /* footer -------------------------------------------------------------------- Centred, and constrained to the same 1180px measure as .bt-shell. It was previously full-bleed and left-aligned, so on a wide screen the logo sat hard against the viewport edge while every other element on the page started at the 1180px gutter — the footer read as belonging to a different layout. --------------------------------------------------------------------------- */ /* Measured off the live braintrivia.net footer, which is NOT centre-aligned text — it is a centred *container* holding left-aligned content: