/* ========================================================================== MUSICIANLE THEME ========================================================================== TO RETHEME THE WHOLE SITE, EDIT ONLY THE BLOCK BELOW. Everything downstream is derived from these seven values. Nothing else in this file, and nothing in any page, hardcodes a colour. If you find yourself editing a colour anywhere else, that is a bug in this file. Bootstrap 5.3 is driven by CSS custom properties, so overriding its --bs-* variables retheming every component at once: buttons, tables, links, borders, form controls. That is the reason for using Bootstrap here rather than hand-rolled CSS. Three ready-made palettes are at the bottom of this file. To use one, copy its values over the block below. ========================================================================== */ /* RED, WHITE AND BLUE, blue-led. WHY BLUE LEADS RATHER THAN RED. Two reasons, one about players and one about the interface. Red and blue at equal weight, in the flag's own hexes, reads as a national flag. For a game meant to be played worldwide that is a signal some players will bounce off for reasons unrelated to the game. Blue-dominant with red as a spark reads as a colour scheme instead, and keeps all three colours. The interface reason is concrete: the game ALREADY uses red to mean "your guess is far off" in the proximity hints. A red link beside a red far-away badge is one colour carrying two meanings. Leading with blue frees red to mean exactly one thing. Old Glory Red (#b31942, Pantone 193 C) is kept exactly, on fills: the call-to-action button and the record label in the logo. The two official colours are used exactly: Old Glory Red #B31942 (Pantone 193 C) Old Glory Blue #0A3161 (Pantone 282 C) WHY THE PAGE IS NOT #0A3161 AND LINKS ARE NOT #B31942. Measured, not guessed. Old Glory Red on a dark navy page comes out at 2.59:1, which fails WCAG AA for body text by a wide margin. Using it for links would make every link on the site hard to read. So the official red carries FILLS, where white sits on top of it and the pairing measures 6.70:1, and a lifted red (#7db4ff, 5.73:1 on the page) carries links and text. The page background is Old Glory Blue taken darker, which keeps the navy identity while giving white text 16.50:1. Every pairing in use: white on the red button fill 6.70:1 body text on page 16.50:1 muted text on page 8.17:1 link red on page 5.73:1 link red on surface 5.00:1 Re-measure if any of the seven change. A palette that looks right and fails contrast is worse than one that looks plain, because it costs readers. */ :root { /* --- THE SEVEN VALUES ------------------------------------------------- */ --brand-bg: #0a1626; /* page background, deep navy */ --brand-surface: #10233a; /* cards, tables, raised areas */ --brand-border: #1d3557; /* rules and dividers */ --brand-text: #f2f4f8; /* body copy, the flag's white */ --brand-muted: #9bb0c9; /* secondary copy, captions */ --brand-accent: #7db4ff; /* links, highlights: BLUE leads */ --brand-accent-strong: #b31942; /* buttons: OLD GLORY RED, official */ /* ---------------------------------------------------------------------- */ /* Derived. Do not edit; change the seven above instead. */ --brand-heading: color-mix(in srgb, var(--brand-text) 88%, white); --brand-accent-hover: color-mix(in srgb, var(--brand-accent-strong) 82%, white); /* --- Bootstrap overrides ---------------------------------------------- */ --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-text); --bs-emphasis-color: var(--brand-heading); --bs-secondary-color: var(--brand-muted); --bs-border-color: var(--brand-border); --bs-link-color: var(--brand-accent); --bs-link-hover-color: #ffffff; --bs-link-color-rgb: 94, 234, 212; --bs-primary: var(--brand-accent-strong); --bs-primary-rgb: 46, 125, 107; --bs-tertiary-bg: var(--brand-surface); --bs-secondary-bg: var(--brand-surface); --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-line-height: 1.65; /* Bootstrap needs to know this is a dark surface so its own components (tables, form controls, close buttons) pick contrasting defaults. */ color-scheme: dark; } /* ========================================================================== LIGHT MODE Follows the browser, via prefers-color-scheme. No toggle and no stored preference: the OS already knows, and a site-level switch is one more thing to get out of sync. Only THE SEVEN are overridden. Everything else in this file derives from them, so the whole page follows without a second set of rules to keep in step. That is the entire reason the palette is structured this way. Contrast re-measured for the light pairings, same standard as the dark set documented above: text on page 16.2:1 muted on page 5.7:1 accent link on page 6.0:1 accent on surface 6.3:1 white on red button 6.7:1 (the red is unchanged, it works on both) ========================================================================== */ @media (prefers-color-scheme: light) { :root { --brand-bg: #f7f9fc; /* page, near white with a blue cast */ --brand-surface: #ffffff; /* cards, tables, raised areas */ --brand-border: #d4dde8; /* rules and dividers */ --brand-text: #101c2e; /* body copy, the dark navy */ --brand-muted: #55647a; /* secondary copy, captions */ --brand-accent: #1a5fb4; /* links: a deeper blue, for contrast */ --brand-accent-strong: #b31942; /* buttons: OLD GLORY RED, unchanged */ /* On a light page the heading should be DARKER than body text, not lighter. The dark-mode derivation mixes toward white, which would wash headings out here. */ --brand-heading: color-mix(in srgb, var(--brand-text) 92%, black); --bs-link-hover-color: #000000; color-scheme: light; } } /* ========================================================================== Component tuning Structure and spacing come from Bootstrap. This is only what Bootstrap cannot express, and it still reads its colours from the variables above. ========================================================================== */ body { -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--brand-heading); } h1 { font-size: 2rem; line-height: 1.25; } h2 { font-size: 1.25rem; margin-top: 2.2rem; } h3 { font-size: 1.02rem; } .lede { font-size: 1.12rem; color: var(--brand-muted); } /* The site brand in the navbar. */ .navbar-brand { font-weight: 700; letter-spacing: .04em; color: var(--brand-text); } .navbar-brand:hover { color: var(--brand-accent); } /* Masked release rows. Monospace so the mask characters align into a grid, which is the whole point of preserving word shape. */ .board { background: var(--brand-surface); } .board table { color: var(--brand-text); } .board th { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-muted); font-weight: 600; } .mask { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } /* A row a guess has unmasked. */ .mask-hit { color: var(--brand-accent); font-weight: 600; } .year { color: var(--brand-muted); width: 4.5rem; } .genre { color: color-mix(in srgb, var(--brand-muted) 80%, var(--brand-bg)); font-size: .78rem; } /* Bootstrap's .btn-primary reads --bs-primary, but the hover needs stating. */ .btn-primary { --bs-btn-bg: var(--brand-accent-strong); --bs-btn-border-color: var(--brand-accent-strong); } .btn-primary:hover { --bs-btn-hover-bg: var(--brand-accent-hover); --bs-btn-hover-border-color: var(--brand-accent-hover); } footer.site { border-top: 1px solid var(--brand-border); color: var(--brand-muted); } /* ========================================================================== ALTERNATIVE PALETTES Copy one over the seven values at the top of this file. --- Light --- --brand-bg: #ffffff; --brand-surface: #f5f7f8; --brand-border: #dde3e7; --brand-text: #1b2429; --brand-muted: #5b6b75; --brand-accent: #0f766e; --brand-accent-strong: #0f766e; (also change `color-scheme: dark` to `light` above) --- Warm / vinyl --- --brand-bg: #1a1614; --brand-surface: #241f1c; --brand-border: #3a322d; --brand-text: #f0e9e3; --brand-muted: #b0a094; --brand-accent: #e8a33d; --brand-accent-strong: #a9691a; --- Cool / indigo --- --brand-bg: #0f1220; --brand-surface: #181c31; --brand-border: #272d48; --brand-text: #e8e9f3; --brand-muted: #9296b8; --brand-accent: #a5b4fc; --brand-accent-strong: #4f46e5; ========================================================================== */ /* Call-to-action panel used on the informational pages (/heardle, /wordle, /actorle). Deliberately styled as a raised block rather than a bare button: those pages are read by people looking for an answer, not for a game, and an unlabelled button at the end of an article is both easy to miss and easy to mistake for an ad. The panel carries a sentence of context so the click is an informed one. */ .cta { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: .5rem; padding: 1.1rem 1.25rem; margin: 2rem 0; } .cta h2, .cta h3 { margin-top: 0; font-size: 1.05rem; } .cta p { color: var(--brand-muted); margin-bottom: .9rem; } .cta .btn { margin-right: .5rem; }