/* ============================================================================= song.com.im — one stylesheet, two editions ----------------------------------------------------------------------------- The previous build was a dark neon console: Tailwind from a CDN, Font Awesome from a second CDN, forty accent colours, glass, glow, cards 530px tall. This is its opposite, and takes its register from labs.llc — paper, one ink, air, and type doing the work colour used to do. Both editions live in this one file. The tokens are declared twice: once on :root for paper, once under [data-theme="dark"]. Nothing below the token block names a colour directly, so the entire dark edition is those fourteen values and about thirty lines of correction where --ink is used as a FILL rather than as text — a dark button on a dark page has to invert, and no token can work that out for itself. Why one file and a runtime toggle, where labs.llc ships two documents: labs has two editions of one page, this has two editions of six. Twelve documents that must stay in lockstep is a maintenance trap, and the toggle costs one attribute on written by four lines in the head before first paint. Contents 1 webfont 2 tokens — paper, then dark 3 reset and type 4 header, edition pill, era nav 5 hero 6 console — shuffle, search, chips 7 spotlight 8 track list 9 footer, utility ========================================================================== */ /* ------------------------------------------------------------------ 1 font DM Sans, self-hosted, variable across weight 200-700 — the whole four-weight range in 94 KB of woff2 rather than twelve static faces. Split on the same unicode ranges Google splits on, so an English page never fetches the accented block. Both are preloaded from the head: a font discovered only when the parser reaches this rule is a font requested one round trip late. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('../fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------------------------------------------------------------- 2 tokens */ :root { --ink: #1E262B; /* near-black with the blue left in, never #000 */ --ink-77: rgba(30, 38, 43, .77); --ink-55: rgba(30, 38, 43, .64); /* 4.7:1 on paper — the body-text floor */ --paper: #FFFFFF; --paper-soft: #FAFAF8; /* the ground a row sits on when it is not white */ --deep: #11161C; /* the dark band inside the light edition */ --line: rgba(30, 38, 43, .12); --line-soft: rgba(30, 38, 43, .07); --accent: #C2410C; /* hairlines and live marks only, never a fill */ --accent-bg: rgba(194, 65, 12, .09); --measure: 1240px; --gutter: clamp(18px, 4.5vw, 48px); --header-h: 64px; --radius: 10px; --ease: cubic-bezier(.22, .61, .36, 1); color-scheme: light; } /* The dark edition. Same names, different values — plus --paper and --deep swapping roles, because on a dark page the way to raise a surface is to lighten it, and --deep is the surface a card sits on. */ :root[data-theme="dark"] { --ink: #FFFFFF; --ink-77: rgba(255, 255, 255, .72); --ink-55: rgba(255, 255, 255, .58); --paper: #0C1116; --paper-soft: #10161C; --deep: #1A222C; --line: rgba(255, 255, 255, .16); --line-soft: rgba(255, 255, 255, .09); --accent: #F97316; /* #C2410C is 2.4:1 on #0C1116 and unreadable */ --accent-bg: rgba(249, 115, 22, .13); color-scheme: dark; } /* ------------------------------------------------------------- 3 reset/type */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-optical-sizing: auto; font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-77); background: var(--paper); /* The switch reads as a dimmer rather than a page swap. Every surface that resolves a token has to cross at this same .28s, or the page tears: alone used to fade while the header, the console and the cards snapped, so for a quarter of a second the hero sat at the midpoint grey between two editions that had both already arrived. */ transition: background-color .28s var(--ease), color .28s var(--ease); } /* The load-bearing rule of the whole sheet, lifted from labs: big text runs LIGHT and tight-tracked, small text runs HEAVY and positive-tracked. That inversion is what makes a large heading read as calm instead of loud. */ h1, h2, h3 { color: var(--ink); font-weight: 300; letter-spacing: -.03em; line-height: 1.06; margin: 0; } h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; } p { margin: 0 0 1em; } a { color: inherit; } .eyebrow { font-size: .69rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-55); } .wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } /* Focus is drawn once, here, and never removed anywhere below. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: .6rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: .8rem; font-weight: 600; text-decoration: none; transition: top .2s var(--ease); } .skip:focus { top: 12px; } /* ---------------------------------------------------------------- 4 header */ .hdr { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); transition: background-color .28s var(--ease), border-color .28s var(--ease); } /* color-mix is recent enough that a fallback matters: without it the header is transparent and the track list scrolls through the wordmark. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .hdr { background: var(--paper); } } .hdr__in { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); height: 100%; display: flex; align-items: center; gap: 1.1rem; } .mark { display: inline-flex; align-items: baseline; gap: .1rem; font-size: 1.12rem; font-weight: 600; letter-spacing: -.045em; color: var(--ink); text-decoration: none; flex: 0 0 auto; } .mark b { font-weight: 600; } .mark i { font-style: normal; color: var(--accent); } .mark span { color: var(--ink-55); font-weight: 500; } /* The era row. Scrolls sideways rather than wrapping, because a wrapped nav changes the header's height and the sticky offset stops being a constant. */ .eras { display: flex; align-items: center; gap: .1rem; margin-left: auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .eras::-webkit-scrollbar { display: none; } .eras a { flex: 0 0 auto; padding: .42rem .62rem; border-radius: 7px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-55); text-decoration: none; transition: color .2s var(--ease), background-color .2s var(--ease); } .eras a:hover { color: var(--ink); background: var(--line-soft); } .eras a[aria-current="page"] { color: var(--ink); background: var(--line-soft); } /* ------------------------------------------------- the edition switch A segmented control, not a checkbox and not another nav link: the two editions are alternatives to each other, and a segmented control is the one shape that says so without a word of explanation. Exactly one segment is lit; the thumb slides between them. A sun and a moon and nothing else — they need no legend, so the words live in aria-label and in .vh text. */ .pill { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--line-soft), transparent); box-shadow: inset 0 1px 2px var(--line-soft); transition: border-color .28s var(--ease); } .pill__thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 6px 18px rgba(0, 0, 0, .12); transition: transform .42s var(--ease), background-color .28s var(--ease); } :root[data-theme="dark"] .pill__thumb { transform: translateX(100%); } /* Hover previews the switch by sliding the thumb across early. :has is what lets the container answer for its children; where it is missing the pill simply does not preview, which costs nothing. */ .pill:has(.pill__seg[aria-pressed="false"]:hover) .pill__thumb { transform: translateX(100%); } :root[data-theme="dark"] .pill:has(.pill__seg[aria-pressed="false"]:hover) .pill__thumb { transform: none; } .pill__seg { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; /* Both halves hold the same width: the thumb is half the track, and an uneven split would leave it short of one end. */ min-width: 2.4rem; padding: .38rem .44rem; border: 0; border-radius: 999px; background: none; color: var(--ink-55); cursor: pointer; transition: color .32s var(--ease); } .pill__seg[aria-pressed="true"] { color: var(--paper); cursor: default; } .pill__seg[aria-pressed="false"]:hover { color: var(--ink); } /* While a segment is hovered the thumb sits under IT, so the lit colour has to follow the thumb rather than the pressed state. Equal specificity, later wins. */ .pill:has(.pill__seg:hover) .pill__seg[aria-pressed="true"] { color: var(--ink-55); } .pill:has(.pill__seg:hover) .pill__seg:hover { color: var(--paper); } /* 13px is written on the