/* =========================================================================== mijote — design system v1 The single stylesheet for every page. Sections follow the design document: 1 foundations · 2 components · 3 states · 4 page layouts · 5 paid messages · 6 identity. Three rules govern everything here: 1. The interface is greyscale, and accent is scoped by audience. On any surface a listener can reach the accent means "live" and nothing else; staff surfaces get --tool instead. See 1.1 and 4.6. 2. Hierarchy comes from weight and size, not colour. 3. Anything a machine produced is visibly offered until a person applies it — which is what the dashed border means, everywhere, without exception. See DESIGN_SYSTEM.md before adding to this file. =========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap"); /* --------------------------------------------------------------------------- 1.1 Colour — dark (default) --------------------------------------------------------------------------- */ :root { --bg: #08080a; --surface: #101012; --surface-2: #17171b; --surface-raised: #0d0d0f; /* a row lifted off the page, not off the card */ --line: #232327; --line-soft: #1c1c20; --line-input: #26262b; --line-strong: #3f3f46; --text: #fafafa; --text-body: #d4d4d8; --text-2: #a1a1aa; --text-3: #71717a; --text-4: #5c5c64; --text-past: #52525b; /* The station is audible right now — a programme or the rotation. Nothing else in the interface may use this colour. */ --live: #ff4f1f; --live-ink: #ff7a4f; --live-line: #4a2b1e; --live-wash: transparent; /* dark uses the animated radial, not a flat tint */ /* A flat live tint, for blocks that state "on air" without the wash — the wash belongs to programmes on listener surfaces, this covers rotation too. */ --live-tint: rgba(255, 79, 31, 0.09); --live-tint-line: rgba(255, 79, 31, 0.3); /* A different red from --live on purpose, and only ever text or border — a destructive control must never read as a live indicator at a glance. */ --danger: #f04438; --danger-line: #4a2320; /* The staff accent. Legal ONLY on surfaces no listener can reach — the pages carrying data-density="staff". The accent rule is scoped by audience, not by app: --live keeps its single meaning (on air now) everywhere, including here, and the two never trade jobs. Never a decorative fill, a chart colour, or a brand mark. See 4.6. */ --tool: #5b8def; --tool-text: #8fb4f5; /* --tool as text on dark */ --tool-strong: #5b8def; /* light mode darkens this; dark needs no shift */ --tool-on-strong: #08080a; /* ink on a solid --tool-strong fill */ --tool-tint: rgba(91, 141, 239, 0.12); --tool-line: rgba(91, 141, 239, 0.4); --tool-ring: rgba(91, 141, 239, 0.18); /* Primary buttons are white-on-black so they can't compete with the accent. */ --invert-bg: #fafafa; --invert-text: #08080a; --invert-bg-soft: #e4e4e7; /* 1.4 Space — 4pt */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* 1.4 Radius */ --r-control: 6px; --r-row: 10px; --r-card: 14px; --r-pill: 999px; /* 1.5 Motion — 120ms on hover/press, 200ms on panel open, never past 240ms */ --t-fast: 120ms ease-out; --t-panel: 200ms ease-out; --simmer-duration: 7s; --working-duration: 1.4s; /* 1.4 Density — reset per page by [data-density] below */ --pad-card: var(--s5); --row-h: 44px; color-scheme: dark; } /* --------------------------------------------------------------------------- 1.2 Colour — light. A full peer, not an afterthought. Opt in explicitly with , or hand the choice to the operating system with . Dark stays the default. --------------------------------------------------------------------------- */ :root[data-theme="light"], :root[data-theme="auto"] { color-scheme: light; } @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --bg: #f4f4f5; --surface: #fafafa; --surface-2: #efeff1; --surface-raised: #f0f0f2; --line: #dcdce0; --line-soft: #e6e6ea; --line-input: #d3d3d9; --line-strong: #b4b4bc; --text: #18181b; --text-body: #27272a; --text-2: #52525b; --text-3: #8b8b93; --text-4: #a1a1aa; /* Past can't dim downward here, so it dims upward. */ --text-past: #a1a1aa; --live: #ff4f1f; --live-ink: #d8380b; /* accent text darkens to clear 4.5:1 */ --live-line: #f5c4b3; --live-wash: #fff1ee; /* a flat tint in light — no gradient */ --live-tint: #fff1ee; --live-tint-line: #f5c4b3; --danger: #c92a1d; --danger-line: #edb9b4; /* #5B8DEF fails 4.5:1 for text and small fills on light, so text and solid fills darken to #2F6BD8 with white ink. The focus ring keeps #5B8DEF — it's a 3px halo, not a text or fill contrast surface. */ --tool: #5b8def; --tool-text: #2f6bd8; --tool-strong: #2f6bd8; --tool-on-strong: #fafafa; --tool-tint: rgba(47, 107, 216, 0.1); --tool-line: rgba(47, 107, 216, 0.35); --tool-ring: rgba(91, 141, 239, 0.28); --invert-bg: #18181b; --invert-text: #fafafa; --invert-bg-soft: #27272a; } } :root[data-theme="light"] { --bg: #f4f4f5; --surface: #fafafa; --surface-2: #efeff1; --surface-raised: #f0f0f2; --line: #dcdce0; --line-soft: #e6e6ea; --line-input: #d3d3d9; --line-strong: #b4b4bc; --text: #18181b; --text-body: #27272a; --text-2: #52525b; --text-3: #8b8b93; --text-4: #a1a1aa; --text-past: #a1a1aa; --live: #ff4f1f; --live-ink: #d8380b; --live-line: #f5c4b3; --live-wash: #fff1ee; --live-tint: #fff1ee; --live-tint-line: #f5c4b3; --danger: #c92a1d; --danger-line: #edb9b4; /* See the note in the auto block above. */ --tool: #5b8def; --tool-text: #2f6bd8; --tool-strong: #2f6bd8; --tool-on-strong: #fafafa; --tool-tint: rgba(47, 107, 216, 0.1); --tool-line: rgba(47, 107, 216, 0.35); --tool-ring: rgba(91, 141, 239, 0.28); --invert-bg: #18181b; --invert-text: #fafafa; --invert-bg-soft: #27272a; } /* --------------------------------------------------------------------------- 1.3 Type — Schibsted Grotesk variable, one family. Seven sizes, no more. Weights 400–800; never 900, it fills in at small sizes. --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text-body); font-family: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* display / 52 · 800 — countdowns and clocks only */ .t-display { font-size: 52px; font-weight: 800; letter-spacing: -0.055em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } /* title / 26 · 800 — one per screen */ .t-title { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); margin: 0; } /* heading / 17 · 700 — now playing, card headings, row titles */ .t-heading { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin: 0; } /* body / 14 · 400 — descriptions, chat, notes. Max 68ch. */ .t-body { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--text-body); max-width: 68ch; text-wrap: pretty; } /* ui / 13 · 600 — buttons, fields, table cells */ .t-ui { font-size: 13px; font-weight: 600; color: var(--text-body); } /* meta / 12 · 400 — attribution, timestamps, counts */ .t-meta { font-size: 12px; font-weight: 400; color: var(--text-3); } /* label / 11 · 700 caps — section labels and state words */ .t-label { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); } .t-label-quiet { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); } /* Every number in a schedule, count, duration or confidence. */ .num, .t-display, time, [data-num] { font-variant-numeric: tabular-nums; } .muted { color: var(--text-3); font-size: 12px; } .past { color: var(--text-past); } a { color: var(--text-body); text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color var(--t-fast), border-color var(--t-fast); } a:hover { color: var(--text); border-bottom-color: var(--text-3); } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--text-body); } /* --------------------------------------------------------------------------- 1.4 Density. Listener is generous; staff is compact. Same tokens, one step apart. Set on . --------------------------------------------------------------------------- */ [data-density="staff"] { --pad-card: var(--s4); --row-h: 32px; } /* --------------------------------------------------------------------------- 1.5 Motion — the simmer. One 7s loop with eleven uneven keyframes: two strong swells, several partial ones, never symmetric. Not a blink, not a sine pulse. This is the one ownable detail; don't restyle it per page. --------------------------------------------------------------------------- */ @keyframes simmerDot { 0% { opacity: 0.38; box-shadow: 0 0 0 0 rgba(255, 79, 31, 0); } 9% { opacity: 0.56; } 16% { opacity: 0.44; } 29% { opacity: 0.97; box-shadow: 0 0 18px 3px rgba(255, 79, 31, 0.34); } 36% { opacity: 0.64; } 44% { opacity: 0.52; } 54% { opacity: 1; box-shadow: 0 0 28px 6px rgba(255, 79, 31, 0.42); } 62% { opacity: 0.58; } 71% { opacity: 0.42; box-shadow: 0 0 0 0 rgba(255, 79, 31, 0); } 82% { opacity: 0.84; box-shadow: 0 0 14px 2px rgba(255, 79, 31, 0.24); } 91% { opacity: 0.46; } 100% { opacity: 0.38; box-shadow: 0 0 0 0 rgba(255, 79, 31, 0); } } @keyframes simmerWash { 0% { opacity: 0.10; } 11% { opacity: 0.22; } 19% { opacity: 0.13; } 30% { opacity: 0.46; } 39% { opacity: 0.24; } 52% { opacity: 0.58; } 61% { opacity: 0.27; } 73% { opacity: 0.15; } 84% { opacity: 0.38; } 93% { opacity: 0.18; } 100% { opacity: 0.10; } } @keyframes working { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } @media (prefers-reduced-motion: reduce) { [data-simmer] { animation: none !important; opacity: 0.92 !important; } [data-working] { animation: none !important; } * { transition-duration: 1ms !important; } } /* The ambient radial behind a live block. One per screen, maximum. */ .live-wash { position: absolute; inset: -20% -10% auto -10%; height: 46%; pointer-events: none; background: radial-gradient(50% 55% at 40% 45%, var(--live), transparent 72%); animation: simmerWash var(--simmer-duration) ease-in-out infinite; /* Behind its container's content, but inside the container's stacking context — a wash never escapes the block it belongs to. */ z-index: -1; } :root[data-theme="light"] .live-wash, :root[data-theme="auto"] .live-wash { background: var(--live-wash); animation: none; opacity: 1; } /* =========================================================================== 2. COMPONENTS =========================================================================== */ /* --- page chrome ---------------------------------------------------------- */ .app-header { display: flex; align-items: center; gap: var(--s5); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .wordmark { display: flex; align-items: baseline; gap: var(--s2); border: none; } .wordmark:hover { border: none; } .wordmark .mark { font-size: 20px; font-weight: 800; letter-spacing: -0.045em; color: var(--text); } .wordmark .dot { margin-bottom: 4px; } .page-name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); } .page-tag { font-size: 12px; color: var(--text-3); } /* Role-aware navigation: one component, two sets. Mark the staff set with .nav[data-set="staff"] so it's obvious in the markup which audience it's for. */ .nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; flex-wrap: wrap; } .nav a { font-size: 13px; font-weight: 600; color: var(--text-2); border: none; } .nav a:hover { color: var(--text); } .nav a[aria-current="page"] { color: var(--text); } .nav .who { font-size: 12px; color: var(--text-3); } main { /* `width` alongside `max-width` is doing real work, not belt-and-braces. On the listener pages main is a flex item in a column flex container, where the auto side margins suppress the default stretch and leave it shrink-to-fit — so its width came from whatever its widest child happened to want. A block child made that 720px by accident; a grid child asks for its min-content and the column collapses. Being explicit makes the measure the same on every page regardless of what is inside it. */ width: 100%; max-width: 720px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); } main.wide { max-width: 1100px; } main.mid { max-width: 940px; } /* --- card ----------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--pad-card); margin-bottom: var(--s5); } .card > .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } .card > .card-head + .t-body { margin-top: 0; } .stack { display: flex; flex-direction: column; gap: var(--s3); } .row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } .row-between { display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; } .rule { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s4) 0; } /* Inside a card that is only switches, the separator is holding two single lines apart and doesn't need a section's worth of air. */ .is-slim .rule { margin: var(--s3) 0; } /* --- 2.1 Buttons ---------------------------------------------------------- */ /* Primary is white-on-black, never accent — the accent is reserved for liveness, so a button can't compete with it. One primary per view. */ .btn { font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; color: var(--text-body); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 11px 14px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .btn:hover:not(:disabled) { border-color: var(--text-3); color: var(--text); } .btn:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; } .btn-primary { font-weight: 700; color: var(--invert-text); background: var(--invert-bg); border-color: var(--invert-bg); } .btn-primary:hover:not(:disabled) { background: var(--invert-bg-soft); border-color: var(--invert-bg-soft); color: var(--invert-text); } /* Destructive is text and border only — never a filled surface. */ .btn-danger { color: var(--danger); border-color: var(--danger-line); } .btn-danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); } .btn-ghost { border-color: transparent; color: var(--text-2); } .btn-sm { font-size: 12px; padding: 7px 11px; } .btn:disabled { color: var(--text-4); border-color: var(--line); background: transparent; cursor: default; } /* Listener pages are phones: 44px minimum target. */ [data-density="listener"] .btn { min-height: 44px; } /* --- 2.2 Fields ----------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--s1); margin-bottom: var(--s3); } .field > label, label.t-label { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); } .field-help { font-size: 12px; color: var(--text-3); } .field-error { font-size: 12px; color: var(--danger); } input, select, textarea { font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-input); border-radius: var(--r-control); padding: 11px 12px; width: 100%; transition: border-color var(--t-fast); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--line-strong); } input::placeholder, textarea::placeholder { color: var(--text-4); } textarea { line-height: 1.6; resize: vertical; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--text-2); } input[type="file"] { padding: 9px 12px; color: var(--text-2); } .field-invalid input, input.invalid, select.invalid { border-color: var(--danger-line); } /* A feature that isn't available: dashed, because nothing is written here. */ .field-unavailable { font-size: 13px; color: var(--text-4); background: var(--surface); border: 1px dashed var(--line-input); border-radius: var(--r-control); padding: 11px 12px; } .check { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-body); cursor: pointer; } /* --- 2.3 Pills & badges --------------------------------------------------- */ /* Rounded pill = status or role. Square-ish tag = item type. Live is the only coloured one, ever. */ .pill { display: inline-flex; align-items: center; gap: var(--s1); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--r-pill); padding: 5px 10px; white-space: nowrap; } .pill-live, .pill.live, .pill.airing { color: var(--live-ink); border: 1px solid var(--live-line); gap: 6px; } .pill-planned, .pill.planned, .pill.active, .pill.queued { color: var(--text-body); border: 1px solid var(--line-strong); } .pill-done, .pill.done, .pill.played { color: var(--text-3); border: 1px solid var(--line-input); } .pill-archived, .pill.archived, .pill.not_a_fit { color: var(--text-past); border: 1px dashed var(--line-input); } /* Role and membership: a filled grey chip, no border. */ .pill-role { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); background: var(--surface-2); } /* Item type — square-ish, so it can't be mistaken for a status. */ .tag-type { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-3); border: 1px solid var(--line-input); border-radius: 4px; padding: 3px 7px; white-space: nowrap; } /* --- 2.4 Chips — three variants ------------------------------------------- */ /* A chip that toggles something should be a