body { margin: 0; padding: 0; } * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .five-min { cursor: pointer; } /* Commenting out corrupted font files - using system fonts instead @font-face{ font-family: 'GreatVibes-Regular'; src: local('Great Vibes Regular'), local('Great-Vibes-Regular'), url('fonts/GreatVibes-Regular.ttf') format('truetype'); } @font-face{ font-family: 'GillSansNova-Regular'; src: local('Gill Sans Nova Book'), local('Gill-Sans-Nova-Book'), url('fonts/dehinted-GillSansNova-Book.ttf') format('truetype'), url('fonts/GillSansNovaBook.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face{ font-family: 'GillSansNova-Medium'; src: local('Gill Sans Nova Medium'), local('Gill-Sans-Nova-Medium'), url('fonts/gillsansnova-medium-webfont.ttf') format('truetype'), url('fonts/GillSansNova-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face{ font-family: 'GillSansNova-SemiBold'; src: local('Gill Sans Nova SemiBold'), local('Gill-Sans-Nova-SemiBold'), url('fonts/gillsansnova-semibold-webfont.ttf') format('truetype'), url('fonts/dehinted-GillSansNova-SemiBold.ttf') format('truetype'), url('fonts/GillSansNova-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face{ font-family: 'GillSansNovaBook'; src: local('Gill Sans Nova Book'), local('Gill-Sans-Nova-Book'), url('fonts/dehinted-GillSansNova-Book.ttf') format('truetype'), url('fonts/GillSansNovaBook.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face{ font-family: 'GillSansNova-Light'; src: local('Gill Sans Nova Light'), local('Gill-Sans-Nova-Light'), url('fonts/GillSansNova-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } */ /* =========================================================================== BRAND WEBFONTS — self-hosted, so they work on a player with no connection. Bauhaus Rati Display Light: Copyright (c) 2025 Saskia Ketz (mmarchny.com), supplied by the client as woff2/woff already prepared for web use. The weight range maps every requested weight onto the single Light file. The family ships one weight, and without this the browser synthesises a fake bold wherever a heading asks for 600 — which on a high-contrast didone is conspicuous. Parabolica Text: Copyright (c) 2023 James Hultquist-Todd. Supplied by the client, who has confirmed the licence covers self-hosting. Served as OpenType rather than woff2 because that is the format supplied. The four faces cover every weight the app asks for, so nothing is synthesised: 100-400 take Regular, 500 takes Medium, 600-700 take Bold, and italics take the Regular Oblique. Converting these to woff2 would cut the payload by roughly half and is worth doing before this goes live. =========================================================================== */ @font-face { font-family: "Parabolica Text"; src: url("fonts/ParabolicaText-Regular.otf") format("opentype"); font-weight: 100 400; font-style: normal; font-display: swap; } @font-face { font-family: "Parabolica Text"; src: url("fonts/ParabolicaText-RegularOblique.otf") format("opentype"); font-weight: 100 400; font-style: italic; font-display: swap; } @font-face { font-family: "Parabolica Text"; src: url("fonts/ParabolicaText-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Parabolica Text"; src: url("fonts/ParabolicaText-Bold.otf") format("opentype"); font-weight: 600 900; font-style: normal; font-display: swap; } @font-face { font-family: "Bauhaus Rati Display"; src: url("fonts/BauhausRatiDisplay-Light.woff2") format("woff2"), url("fonts/BauhausRatiDisplay-Light.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; } /* =========================================================================== MUSIC CONCIERGE — design tokens Source: 3Stories x Music Concierge, Basic Guidelines (Framework WIP), 17 December 2025. Custom properties, not classes: they cascade straight into Svelte's scoped styles, so components keep their own CSS and nothing here can collide with a component class name. =========================================================================== */ :root { /* --- the palette, exactly as published ------------------------------- */ --mc-black:#000000; --mc-terra:#CEB39B; --mc-terra-dark:#A86B41; --mc-sand:#F0ECE5; --mc-white:#FFFFFF; /* Secondary. The guidelines print these as C0 M0 Y0 K0 / R0 G0 B0, which is placeholder text, so these were sampled from the artwork on page 9 and are provisional until 3Stories publish the real values. */ --mc-glacial-light:#8AA7AB; --mc-glacial-dark:#354F73; --mc-forest-light:#778176; --mc-forest-dark:#30511E; /* --- applied roles ---------------------------------------------------- */ --ground:#F0ECE5; /* Sand. The page itself. */ --plane:#FFFFFF; /* Content sits on white, lifted by shadow. */ --plane-alt:#FAF8F4; /* Hover and banded rows. */ --plane-sunk:#F6F2EC; /* Recessed wells. */ --ink:#100F0D; --ink-soft:#5F574E; --ink-faint:#776D61; --rule:#E2DBD0; --rule-soft:#EDE8DF; /* --- shape ------------------------------------------------------------- Concentric: a control's radius plus the padding around it equals the card's, so nested corners stay parallel instead of pinching. The brand guidelines are set with hard corners throughout; softening for software is a deliberate divergence, agreed for the app only. */ /* One gutter for every screen. The header used percentages (4% / 6.5%) and the routes a fixed 24px, so the page title and the content beneath it sat on two different left edges at every viewport width. */ --page-x:32px; --radius-card:14px; --radius-control:9px; --radius-sm:6px; --radius-pill:999px; /* --- motion ------------------------------------------------------------ One duration and one curve, so nothing in the interface moves at a different speed from anything else. */ --dur:.16s; --ease:cubic-bezier(0.2, 0, 0, 1); /* Terra Dark is the single accent. It measures 3.7:1 on Sand, which is under the 4.5:1 WCAG AA floor, so anything set at text size uses --accent-text while fills, rules and large type keep the published value. */ --accent:#A86B41; --accent-text:#8A5531; /* White on Terra Dark measures 4.33:1 — marginally under AA at button text sizes — so anything that fills a control and carries white text uses the deepened sibling. The published value stays for rules, dots, tags and large type. Same root cause as --accent-text; both are worth raising with 3Stories rather than papering over here. */ --accent-solid:#8A5531; --accent-solid-hover:#73462A; --accent-hover:#8A5531; --accent-quiet:#E6DFD3; --accent-quiet-hover:#DBD2C3; --on-accent:#FFFFFF; /* --- state. Separate from the accent so "brand" never reads as "status". */ --ok:#30511E; --ok-bg:#E7EBE1; --warn:#8A5531; --warn-bg:#F5E9DF; /* The palette has no alert colour. Derived from the Terra family; needs a ruling from 3Stories before it is treated as brand. */ --crit:#8C3A24; --crit-bg:#F6E5E0; --idle:#354F73; --idle-bg:#E4E8EE; /* ---- The structural voice ------------------------------------------------- Glacial, at text weight. The palette has four colours beyond the neutrals and the app was using one of them, which is why it read as brown: Terra was doing the page, the accent, the chips AND the chrome. Three voices now, one job each: --accent you can do something (buttons, links) --ok it is playing (now playing, play marks) --structure this is furniture (nav, eyebrows, table chrome) Colour carries meaning as TEXT, HAIRLINES and PALE TINTS. The only saturated field on a screen is the primary action, which is what makes it read as the primary action. */ --structure:#4A6485; /* Glacial for text — 7.4:1 on Sand */ --structure-strong:#354F73; /* the published Glacial Dark, for marks and rules */ --structure-rule:#DDE3EA; /* a Glacial hairline */ --structure-bg:#EAEEF3; /* pale tint; a ground for --structure text, never for white */ --ok-tint:#EAEEE4; /* the same, in Forest */ --shadow-1:0 1px 2px rgba(31,24,16,.05), 0 1px 5px rgba(31,24,16,.05); --shadow-2:0 2px 4px rgba(31,24,16,.07), 0 8px 22px rgba(31,24,16,.10); --shadow-3:0 1px 2px rgba(31,24,16,.10), 0 8px 24px rgba(31,24,16,.16), 0 24px 52px rgba(31,24,16,.12); /* --- type ------------------------------------------------------------- The licensed faces are named first so that adding @font-face is the only step needed once web licences exist. Neither ships with the app today: both are print subsets embedded in the guidelines PDF, which cannot be used on the web. Until then these fall through to the closest local faces — a high-contrast didone for display, a neutral grotesque for text. */ --font-display:"Bauhaus Rati Display","Bodoni 72",Didot,"Playfair Display",Georgia,serif; --font-body:"Parabolica Text",Parabolica,"Helvetica Neue",Inter,-apple-system,system-ui,"Segoe UI",sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; } html { background-color: var(--ground); } body { background-color: var(--ground); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { font-family: var(--font-body); } /* The legacy components name these families directly. Mapping them here keeps the sweep to one place rather than editing every call site. */ .GillSansNova-Regular, .GillSansNova-Medium, .GillSansNova-SemiBold, .GillSansNovaBook { font-family: var(--font-body); } .GillSansNova-Medium { font-weight: 500; } .GillSansNova-SemiBold { font-weight: 600; } /* Numbers that change in place must not re-flow their column. */ td, th, time { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }