/* Musally — shared site styles. Same-origin stylesheet (no CDN, no external fonts). Navy ink on white, Georgia wordmark, hairline rules. DARK MODE is gated on `data-theme="dark"`, which assets/theme.js stamps on before the first paint. It used to fire straight off prefers-color-scheme, which meant a visitor whose browser reported the wrong preference had no way out of it — and Firefox resolves that query from its own theme setting rather than from Windows, so it regularly disagreed with every other browser on the same machine. theme.js resolves the question once (a saved choice if there is one, otherwise the browser preference) and this file only ever asks "is this document dark". With scripting off nothing sets the attribute and the site stays light. That is the deliberate trade: light is the designed default. */ :root { --ink: #00177a; --text: #1c2026; --muted: #5b6773; --hairline: #dfe4ec; --page: #ffffff; --panel: #f6f8fc; --logo-filter: none; } :root[data-theme="dark"] { --ink: #ffffff; --text: #f2f5f9; --muted: #a8b4c2; --hairline: #24344d; --page: #0d1826; --panel: #12203440; /* The mark is a single navy ink on transparency, so flattening it to white keeps the line weight identical rather than shipping a second file. */ --logo-filter: brightness(0) invert(1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--page); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } /* ---- Header / nav ---- PORTED FROM THE TIMETABLE'S SHARED HEADER, 5 Aug 2026. The menu bar was one width here and a different one on /times. This bar capped at 60rem (960px) while /times sizes its bar from a responsive scale reaching 1500px, so the header physically jumped - different width, different height, different type size, a different appearance control - every time a visitor crossed between musally.co.uk and musally.co.uk/times. Nine items also stopped fitting in 960px, which is why the Appearance control had wrapped onto a second line. Everything below mirrors includes/public-header.php: the same --wrap-max scale, the same 56px bar, the same 0.875rem links, the same 1080px collapse to a drawer, the same appearance menu. Change one, change both. The one deliberate difference is the appearance icon. /times draws it with Font Awesome; this site loads no external CSS or fonts by design, so it is an inline SVG here. Same shape, no CDN. ---- */ /* Mirrors base.css so the wordmark, the first column of the page and the footer all start on the same vertical line at every width. */ :root { --wrap-max: 820px; } @media (min-width: 1024px) { :root { --wrap-max: 1080px; } } @media (min-width: 1440px) { :root { --wrap-max: 1320px; } } @media (min-width: 1800px) { :root { --wrap-max: 1500px; } } .site-header { border-bottom: 1px solid var(--hairline); background: var(--page); position: sticky; top: 0; z-index: 100; } .nav { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; /* 56px, the same figure /times uses. Not taste - it is what makes the two bars the same object. */ height: 56px; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); white-space: nowrap; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 1.2rem; letter-spacing: 0.02em; } .brand img { width: 26px; height: 26px; display: block; flex-shrink: 0; filter: var(--logo-filter); } .brand span { font: inherit; letter-spacing: inherit; } /* The right-hand group: links, appearance, hamburger. Wrapped so they stay together on the right instead of being strung across the bar. */ .nav-right { display: flex; align-items: center; gap: 1rem; } .nav-links { display: flex; align-items: center; gap: 1rem; } .nav-links a { text-decoration: none; color: var(--muted); font-size: 0.875rem; /* Stated so an and the