/* ============================================================================ * tp-foundation.css — v1 (2026-07-25) * * ONE source of truth for tokens. Loaded LAST, after miniAll / modern-theme / * rankings-*, so it wins on source order and almost nothing here needs * !important. * * Why this exists: the site had THREE competing token namespaces — * css/variables.css --tp-* * css/modern-theme.css --bg-body / --accent / --text-primary * shared/navBar.php a third :root opened inside * each defining light theme differently (#b8860b vs #8b6914, #fff vs #fffaee). * Every value below already existed somewhere in the codebase; this is * consolidation, not a new palette. * * The bridge block at the bottom aliases the two legacy namespaces onto these, * so no existing rule has to be rewritten and the three sets can never * disagree again. * ========================================================================== */ :root{ /* ── Brand gold. #e8b84a is already hardcoded 13x across pages/. ── */ --tp-gold: #e8b84a; --tp-gold-hi: #f5c563; --tp-gold-lo: #d4a53f; --tp-gold-soft: rgba(232,184,74,.15); --tp-gold-line: rgba(232,184,74,.30); --tp-on-gold: #141018; /* ── Surfaces. #0a0a0f survives only as chrome (navbar/bottom nav/footer), which is what it always looked like. ── */ --tp-bg: #0d1117; --tp-surface: #161b22; --tp-surface-2: #1c2128; --tp-chrome: #0a0a0f; --tp-text: #e6edf3; --tp-text-2: #b6bec8; --tp-text-3: #98a2ae; --tp-link: #58a6ff; --tp-line: #30363d; --tp-line-soft: #21262d; /* ── Type scale. Every value bounded — no naked vw. ── */ --tp-h1: clamp(1.50rem, 1.10rem + 1.70vw, 2.25rem); --tp-h2: clamp(1.25rem, 1.09rem + 0.68vw, 1.60rem); --tp-h3: clamp(1.05rem, 0.99rem + 0.26vw, 1.20rem); --tp-body: 1rem; --tp-meta: 0.8125rem; --tp-micro:0.6875rem; --tp-lh: 1.55; --tp-lh-tight: 1.25; --tp-measure: 68ch; /* ── Spacing, 4px base ── */ --tp-1: 4px; --tp-2: 8px; --tp-3: 12px; --tp-4: 16px; --tp-5: 24px; --tp-6: 32px; --tp-7: 48px; --tp-8: 64px; /* ── Radius: 15 values collapse to 4. 12px is already the plurality. ── */ --tp-r-sm: 6px; --tp-r: 12px; --tp-r-btn: 8px; --tp-r-pill: 999px; --tp-sh: 0 1px 2px rgba(0,0,0,.30); --tp-sh-up: 0 8px 24px rgba(0,0,0,.40); /* ── Layout shell / fixed-element contract ── Four fixed things (navbar, bottom nav, back-to-top, consent) previously had no shared offset, which is how the cookie bar ended up covering the entire bottom nav. These are the single source for those offsets. */ --tp-shell: 1320px; --tp-gutter: clamp(16px, 3vw, 32px); --tp-navh: 60px; --tp-botnav: 72px; --tp-tap: 44px; --tp-t: .18s ease; } [data-theme="light"]{ --tp-gold: #8b6914; /* 4.9:1 on #fffaee — the navbar's value wins */ --tp-gold-hi: #6e5210; --tp-gold-lo: #6e5210; --tp-gold-soft: rgba(139,105,20,.10); --tp-gold-line: rgba(139,105,20,.28); --tp-on-gold: #fffaee; --tp-bg: #fffaee; --tp-surface: #ffffff; --tp-surface-2: #f5efde; --tp-chrome: #fffaee; --tp-text: #1c1a16; --tp-text-2: #4a4337; --tp-text-3: #6e6354; --tp-link: #0969da; --tp-line: #d6cdb2; --tp-line-soft: #e5dec5; --tp-sh: 0 1px 2px rgba(0,0,0,.06); --tp-sh-up: 0 8px 24px rgba(0,0,0,.12); } /* ── Bridge: alias the two legacy namespaces onto the tokens above. Nothing existing has to be rewritten, and the three sets can never drift apart. ── */ :root,[data-theme="light"]{ --bg-body:var(--tp-bg); --tp-bg-body:var(--tp-bg); --bg-card:var(--tp-surface); --tp-bg-card:var(--tp-surface); --bg-elevated:var(--tp-surface-2); --text-primary:var(--tp-text); --tp-text-primary:var(--tp-text); --text-secondary:var(--tp-text-2); --text-muted:var(--tp-text-3); --accent:var(--tp-gold); --tp-accent:var(--tp-gold); --accent-hover:var(--tp-gold-hi); --accent-soft:var(--tp-gold-soft); --border-color:var(--tp-line); --border:var(--tp-line); --border-light:var(--tp-line-soft); --link-color:var(--tp-link); --navbar-bg:var(--tp-chrome); } /* ============================================================================ * SPRINT 1 — targeted repairs. Each one is here rather than in the legacy * sheet it fixes, because this file loads last and miniAll.css is a 53KB * single-line file shared site-wide. * ========================================================================== */ /* ── H1 was being set by miniAll.css to `3.2vw !important` / `190% !important`, which made EVERY page's own heading size dead CSS and produced a 41px H1 on a phone and a tiny one on a large monitor. Capped here rather than deleting the miniAll rules outright — that is a staged change, and this gets the visible benefit with no risk to the 53KB legacy sheet. ── */ h1{ font-size: var(--tp-h1) !important; line-height: var(--tp-lh-tight); } /* miniAll.css also ships `h1{text-align:center}` as a bare element rule. A parent setting text-align:left cannot beat an explicit declaration on the child, so every migrated page still had a centred H1 sitting above left-aligned content. `inherit` hands the decision back to the container: blocks pinned centre (heroes, .tp-cta-section) still centre their H1; migrated page bodies get left. */ h1{ text-align: inherit; } /* ── Back-to-top sat under the phone bottom-nav and was a 40px target inside the notch safe area. One offset token now drives both it and the cookie bar, so they can never collide again. ── */ #tp-top{ bottom: calc(var(--tp-botnav) + env(safe-area-inset-bottom, 0px) + 12px) !important; right: 12px !important; width: var(--tp-tap) !important; height: var(--tp-tap) !important; } @media (min-width: 992px){ /* No bottom nav on desktop — sit it back down in the corner. */ #tp-top{ bottom: 24px !important; } } /* ── iOS zooms in on any field under 16px and never zooms back out. ── Applies to the public site only; /admin has its own stylesheet. */ @media (max-width: 768px){ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; } } /* ============================================================================ * LIGHT THEME NAVBAR * * In light mode the page went cream but the header stayed pure black with an * orange glow left over from the 2020 skin, and every nav link turned link-blue. * It read as a half-loaded page — and it was the first thing every light-mode * visitor saw, on every page. * * Two separate causes, and BOTH halves have to ship together. Shipping only the * link colour onto a still-black bar would give near-black text on black: * * 1. miniAll.css: `#navmain{background:#000!important; box-shadow:...orange}` * (0,1,0,0 + !important) beats `.tp-navbar{background:var(--navbar-bg)}` * (0,1,0), so --navbar-bg never rendered anywhere on the site. * Beaten here with `#navmain.tp-navbar` (0,1,1,0) + !important, loaded last. * * 2. navBar.php: `[data-theme="light"] a{color:#0969da}` was unscoped and * reached into the header. Confined to main/footer below. * * modern-theme.css:449-491 already held a full light-navbar treatment, but every * one of its 11 rules targets `#tp-navbar` — an id that appears NOWHERE in the * markup (the real id is `navmain`), so all 11 have always been dead. Rather * than retarget them verbatim (they use a GitHub-white #ffffff/#d1d9e0 palette * that would clash with this site's warm cream), the same repairs are expressed * here against the real tokens. * ========================================================================== */ #navmain.tp-navbar{ background: var(--tp-chrome) !important; box-shadow: none !important; font-weight: 400; /* was 700, inherited by every dropdown item */ border-bottom: 1px solid var(--tp-line); } /* The logo was pinned to 40px by `#logo` in miniAll, beating the intended 36px. */ .tp-navbar-brand img#logo{ height: 36px; } @media (max-width: 576px){ .tp-navbar-brand img#logo{ height: 30px; } } [data-theme="light"]{ /* Scope the blue link colour to real content so it cannot reach the chrome. */ } [data-theme="light"] main a, [data-theme="light"] footer a{ color: var(--tp-link); } /* Nav links follow the theme's text colour — except the gold "hot" item, which is (0,2,0) and would otherwise be flattened by this (0,2,1) rule. */ [data-theme="light"] #navmain a:not(.tp-nav-hot), [data-theme="light"] #navmain .tp-menu-link:not(.tp-nav-hot), [data-theme="light"] #navmain .tp-dropdown-link{ color: var(--tp-text); } [data-theme="light"] #navmain .tp-menu-link:hover, [data-theme="light"] #navmain .tp-dropdown-link:hover{ color: var(--tp-text); background: var(--tp-surface-2); } [data-theme="light"] #navmain .tp-dropdown{ background: var(--tp-surface); border: 1px solid var(--tp-line); box-shadow: var(--tp-sh-up); } [data-theme="light"] #navmain .tp-search{ background: var(--tp-surface-2); border-color: var(--tp-line); } [data-theme="light"] #navmain .tp-search input{ color: var(--tp-text); } [data-theme="light"] #navmain .tp-theme-btn, [data-theme="light"] #navmain .tp-hamburger{ background: var(--tp-surface-2); border-color: var(--tp-line); } [data-theme="light"] #navmain .tp-hamburger span{ background: var(--tp-text); } /* ── Dropdown alignment: section headers were centred while their links were left-aligned, so every menu looked mis-set. ── */ .tp-dropdown-header{ text-align: left; } .tp-dropdown-menu li a, .tp-dropdown-menu a{ text-align: left; } /* …but the Movies "By Year" pills match that selector and must stay centred. */ .tp-inline-years a, .tp-year-grid a{ text-align: center; } /* ============================================================================ * THE CENTRING MIGRATION * * miniAll.css asserted `text-align:center` at THREE levels — body, main AND * .container — which is why removing any one of them never changed anything, and * why ~50 defensive `text-align:left` rules accumulated across the codebase. * * Those three declarations are now gone. `.tp-legacy-center` reproduces them * exactly, and navBar.php puts it on
for every page that has not been * migrated yet. So this ships PIXEL-IDENTICAL; templates then opt out one at a * time via the $tpLeftAligned list in navBar.php. * ========================================================================== */ .tp-legacy-center, .tp-legacy-center .container{ text-align:center; } /* ── Centred BY DESIGN. These must stay centred no matter which template they appear in, so they are pinned here rather than relying on inheritance. ── */ /* Buttons and chips: inline-flex centres both axes and survives the migration. NEVER extend this list to titles — .ch-song / .wk-song / .song-card-title / .movie-title all rely on display:block for their text-overflow:ellipsis, and inline-flex silently kills it. */ .tp-cta-btn,.tab-btn,.sort-tab,.tp-chip,.year-chip,.ych-tab,.cbz-tab,.poll-btn, .ch-wk,.all-link,.trending-card-cta,.btn,.btn-primary,.btn-secondary{ display:inline-flex; align-items:center; justify-content:center; } /* Genuinely centred blocks: rank numerals, hero copy, empty states, pagination, the vote arena, the consent bar, bottom-nav items, year pills. */ .song-card-title,.song-card-artist,.song-card-views,.movie-title,.news-link, .hero,.hero-title,.hero-sub,.hero-subtitle, .tp-cta-section,.tp-cta-section h4,.tp-cta-section p, .tp-consent,.tp-consent-text, .tp-row__rank,.singer-rank,.rd-rank,.artist-rank,.celeb-item .rank, .ch-rank,.wk-rank, th,.leaderboard-table td.rank-cell, .contestant,.battle-arena,.vs-badge, .tp-bottom-item,.tp-year-grid a,.tp-inline-years a, .empty-state,.pagination,.tp-footer-bottom{ text-align:center; } /* ============================================================================ * DESKTOP * * The site was a phone layout with margins: every width cap was tuned for mobile * and never revisited. On a 1280 laptop the content column measured 1082px, and * between 1200-1399px nothing changed at all because Bootstrap's .container tops * out at 1320 (miniAll.css ships the full 540/720/960/1140/1320 ladder). * * Raising the shared shell to 1440 only affects pages that DON'T set their own * cap — /movies (1200), /leaderboards (1000), /charts (960) and /artists (1200) * keep theirs, so this cannot silently restyle them. Those are a separate, * deliberate decision. * ========================================================================== */ @media (min-width: 1400px){ .container{ max-width: 1440px; } } /* The homepage spent ~1320px of a desktop viewport on section padding alone and still showed no content above the fold. These are the desktop values only — the phone block earlier in this file already sets its own, and it comes later in source order for equal specificity, so phone is unaffected. */ @media (min-width: 769px){ .hero{ padding: 32px 24px 36px; } .section{ padding: clamp(40px, 5vw, 64px) 24px; } } /* Prose should not run to 94 characters. */ .tp-footer-about-content{ max-width: 66ch; } /* Ragged last row on the browse grid. */ .br-tile{ align-items: flex-start; } /* Movie titles reserved no height, so cards jumped by a line depending on title length and the grid never lined up. */ .movie-title{ min-height: 2.6em; } /* Numbers in a leaderboard belong right-aligned and tabular so the digits line up column-to-column; the rank stays centred. */ @media (min-width: 769px){ .leaderboard-table th:nth-child(n+3), .leaderboard-table td:nth-child(n+3){ text-align: right; font-variant-numeric: tabular-nums; } .leaderboard-table td.rank-cell{ text-align: center; } }