/* ============================================================================== AVAVA | Radio Station HTML Template Main stylesheet ============================================================================== TABLE OF CONTENTS 01. Design tokens (light theme + dark theme) 02. Base & reset 03. Typography helpers 04. Keyframes 05. Header (service bar + main row + dropdowns) 06. Hero (title, band scale, facts) 06b. Page intro (About, Stations) 07. Hero player (dial + now playing) 08. Tuner card (place in the header; the card itself is in tuner.css) 09. Section chrome (dividers, headings, common atoms) 10. Channels 11. Schedule 12. Shows (host wall) 13. Tracks (shape of tonight) 14. Podcasts (archive) 15. Requests (postcard + queue + chat) 16. Footer (broadcast log) 16b. HD desktops 1101–2000px (header + hero + tuner on one screen) 17. Responsive: ≤1100px 18. Responsive: ≤760px 19. Responsive: ≤420px ============================================================================== */ /* ============================================================================ 01. Design tokens ------------------------------------------------------------------------ The template is themed with `data-theme` on : "dark" or absent (= light). Every surface, rule and ink goes through these tokens, so each section is written once. `--i*` are ink opacities: black on light, white on dark. ========================================================================= */ :root { --tile: url("../img/tile-light.jpg"); --accent: #C9502A; /* ember — the only accent of the project */ --accent-ink: #fff; /* text on ember is always white */ --ink: #141110; --bone: #8A7F74; /* "after dark" on light */ --shell: #141110; --hero-bg: var(--tile) repeat 0 0 / 512px 512px #F2EFE9; --paper: var(--tile) repeat 0 0 / 512px 512px #FFFFFF; --card: var(--tile) repeat 0 0 / 512px 512px #FFFFFF; --panel: var(--tile) repeat 0 0 / 512px 512px #FFFFFF; --sheet: var(--tile) repeat 0 0 / 512px 512px #EBE6DC; --foot-bg: var(--tile) repeat 0 0 / 512px 512px #FFFFFF; --dd-bg: #F4F1EC; --dd-rule: rgba(0, 0, 0, .14); --dd-ink: #141110; --nav-ink: #141110; --nav-link: #141110; --nav-active: #141110; --theme-ring: rgba(20, 17, 16, .3); --pf-dot: #C9A27E; --hole: #928d86; --hover: rgba(0, 0, 0, .04); /* faint row / cell tint on hover */ --i10: rgba(0, 0, 0, .1); --i12: rgba(0, 0, 0, .12); --i14: rgba(0, 0, 0, .14); --i16: rgba(0, 0, 0, .16); --i18: rgba(0, 0, 0, .18); --i2: rgba(0, 0, 0, .2); --i22: rgba(0, 0, 0, .22); --i28: rgba(0, 0, 0, .28); --i35: rgba(0, 0, 0, .35); --i4: rgba(0, 0, 0, .4); --i42: rgba(0, 0, 0, .42); --i45: rgba(0, 0, 0, .45); --i5: rgba(0, 0, 0, .5); --i55: rgba(0, 0, 0, .55); --i6: rgba(0, 0, 0, .6); --i65: rgba(0, 0, 0, .65); --i68: rgba(0, 0, 0, .68); --i7: rgba(0, 0, 0, .7); --i75: rgba(0, 0, 0, .75); --i78: rgba(0, 0, 0, .78); --i82: rgba(0, 0, 0, .82); --i84: rgba(0, 0, 0, .84); /* hero-only inks (the hero sits on artwork, its rules differ from the page) */ --h-ink: #141110; --h-dim: rgba(20, 17, 16, .68); --h-dim5: rgba(20, 17, 16, .68); --h-dim6: rgba(20, 17, 16, .6); --h-now: rgba(20, 17, 16, .72); --h-next: rgba(20, 17, 16, .5); --h-slash: rgba(20, 17, 16, .68); --h-sep: rgba(20, 17, 16, .28); --h-dim55: rgba(20, 17, 16, .6); --h-dim45: rgba(20, 17, 16, .45); --h-dim3: rgba(20, 17, 16, .3); --h-hr: rgba(20, 17, 16, .28); --h-hr16: rgba(20, 17, 16, .2); --h-hr28: rgba(20, 17, 16, .3); --h-hr3: rgba(20, 17, 16, .28); --h-seam: rgba(20, 17, 16, .32); --h-sub: rgba(20, 17, 16, .66); --h-tick: rgba(20, 17, 16, .34); --h-tick-major: rgba(20, 17, 16, .5); --h-wave: rgba(20, 17, 16, .82); --h-wave-rest: rgba(20, 17, 16, .28); --h-dial-notch: rgba(20, 17, 16, .42); --h-dial-cross: rgba(20, 17, 16, .55); --h-dial-track: rgba(20, 17, 16, .1); --h-dial-vol: #141110; --h-dial-vol-rest: rgba(20, 17, 16, .12); --h-btn-bg: transparent; /* light: an outlined ring, no fill, no shadow */ --h-btn-shadow: inset 0 0 0 1px rgba(20, 17, 16, .5); --h-btn-ink: #141110; --h-line: rgba(20, 17, 16, .22); --h-sched-rule: rgba(20, 17, 16, .4); } :root[data-theme="dark"] { --tile: url("../img/tile-dark.jpg"); --ink: #f5f4f1; --bone: #E8DCC8; --shell: #0a0a0b; --hero-bg: var(--tile) repeat 0 0 / 512px 512px #0d0d0d; --paper: var(--tile) repeat 0 0 / 512px 512px #141416; --card: var(--tile) repeat 0 0 / 512px 512px #1b1b1e; --panel: var(--tile) repeat 0 0 / 512px 512px #0a0a0b; --sheet: var(--tile) repeat 0 0 / 512px 512px #141416; --foot-bg: var(--tile) repeat 0 0 / 512px 512px #0A0A0B; --dd-bg: #141110; --dd-rule: rgba(255, 255, 255, .12); --dd-ink: #fff; --nav-ink: #f5f4f1; --nav-link: #fff; --nav-active: #C9502A; --theme-ring: rgba(255, 255, 255, .35); --pf-dot: rgba(20, 17, 16, .22); --hole: #232326; --hover: rgba(255, 255, 255, .04); --i10: rgba(255, 255, 255, .1); --i12: rgba(255, 255, 255, .12); --i14: rgba(255, 255, 255, .14); --i16: rgba(255, 255, 255, .16); --i18: rgba(255, 255, 255, .18); --i2: rgba(255, 255, 255, .2); --i22: rgba(255, 255, 255, .22); --i28: rgba(255, 255, 255, .28); --i35: rgba(255, 255, 255, .35); --i4: rgba(255, 255, 255, .4); --i42: rgba(255, 255, 255, .42); --i45: rgba(255, 255, 255, .45); --i5: rgba(255, 255, 255, .5); --i55: rgba(255, 255, 255, .55); --i6: rgba(255, 255, 255, .6); --i65: rgba(255, 255, 255, .65); --i68: rgba(255, 255, 255, .68); --i7: rgba(255, 255, 255, .7); --i75: rgba(255, 255, 255, .75); --i78: rgba(255, 255, 255, .78); --i82: rgba(255, 255, 255, .82); --i84: rgba(255, 255, 255, .84); --h-ink: #fff; --h-dim: rgba(255, 255, 255, .55); --h-dim5: rgba(255, 255, 255, .5); --h-dim6: rgba(255, 255, 255, .6); --h-now: rgba(255, 255, 255, .8); --h-next: rgba(255, 255, 255, .55); --h-slash: rgba(255, 255, 255, .3); --h-sep: rgba(255, 255, 255, .3); --h-dim55: rgba(255, 255, 255, .7); --h-dim45: rgba(255, 255, 255, .45); --h-dim3: rgba(255, 255, 255, .3); --h-hr: rgba(255, 255, 255, .22); --h-hr16: rgba(255, 255, 255, .16); --h-hr28: rgba(255, 255, 255, .28); --h-hr3: rgba(255, 255, 255, .3); --h-seam: rgba(255, 255, 255, .35); --h-sub: rgba(255, 255, 255, .6); --h-tick: rgba(255, 255, 255, .28); --h-tick-major: rgba(255, 255, 255, .55); --h-wave: rgba(255, 255, 255, .75); --h-wave-rest: rgba(255, 255, 255, .28); --h-dial-notch: rgba(255, 255, 255, .4); --h-dial-cross: rgba(255, 255, 255, .6); --h-dial-track: rgba(255, 255, 255, .14); --h-dial-vol: #f5f4f1; --h-dial-vol-rest: rgba(255, 255, 255, .16); --h-btn-bg: #141110; --h-btn-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .14); --h-btn-ink: #C9502A; --h-line: rgba(255, 255, 255, .28); --h-sched-rule: rgba(255, 255, 255, .45); } /* ============================================================================ 02. Base & reset ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: calc(var(--hd-h, 148px) + 20px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--panel); color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input { font: inherit; color: inherit; } h1, h2, h3, p, figure, figcaption, address { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* theme-dependent elements: shown by the current theme only */ .only-dark { display: none; } .only-light { display: block; } :root[data-theme="dark"] .only-dark { display: block; } :root[data-theme="dark"] .only-light { display: none; } /* light theme: every ember button darkens to ink on hover (white on cream read as a hole in the page); the dark theme keeps its white hover */ :root:not([data-theme="dark"]) .btn-live:hover, :root:not([data-theme="dark"]) .btn-drop:hover, :root:not([data-theme="dark"]) .send:hover, :root:not([data-theme="dark"]) .le-copy:hover, :root:not([data-theme="dark"]) .tq-send:hover, :root:not([data-theme="dark"]) .tq-input .send:hover { background: #141110; color: #fff; } :root:not([data-theme="dark"]) .sheet-mail .send:hover { background: #fff; color: #141110; } /* the footer sheet is dark in both themes */ /* ============================================================================ 03. Typography helpers ------------------------------------------------------------------------ DM Mono 400 is the service face of the whole page; 12px is the minimum. ========================================================================= */ .mono { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 400; font-size: 12px; /* the prototypes leave the service face at the browser's normal line height (16px at 12px); .mono--1 is the tight variant for the few places that need it */ line-height: normal; letter-spacing: .16em; } .mono--1 { line-height: 1; } .mono--up { text-transform: uppercase; } .mono--0 { letter-spacing: 0; } .mono--4 { letter-spacing: .04em; } .mono--6 { letter-spacing: .06em; } .mono--8 { letter-spacing: .08em; } .mono--10 { letter-spacing: .1em; } .mono--12 { letter-spacing: .12em; } .mono--14 { letter-spacing: .14em; } .mono--16 { letter-spacing: .16em; } .mono--18 { letter-spacing: .18em; } .mono--20 { letter-spacing: .2em; } .mono--22 { letter-spacing: .22em; } .mono--24 { letter-spacing: .24em; } .mono--28 { letter-spacing: .28em; } .mono--lh { line-height: 1.4; } .ink { color: var(--ink); } .accent { color: var(--accent); } .dim { color: var(--i55); } .dim45 { color: var(--i45); } .dim4 { color: var(--i4); } .dim5 { color: var(--i5); } .dim35 { color: var(--i35); } .dim6 { color: var(--i6); } .dim42 { color: var(--i42); } .dim55 { color: var(--i55); } .dim65 { color: var(--i65); } .dim7 { color: var(--i7); } .dim78 { color: var(--i78); } .dim82 { color: var(--i82); } .push { margin-left: auto; } .nowrap { white-space: nowrap; } .clip { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .serif { font-family: 'Instrument Serif', serif; font-weight: 400; font-style: italic; } .grot { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; text-transform: uppercase; } .orb { font-family: Orbitron, sans-serif; font-weight: 800; } .h2 { font: 700 clamp(34px, 4.2vw, 76px) / .94 'Bricolage Grotesque', sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: var(--ink); } .h2--tight { letter-spacing: -.045em; } .link-u { color: var(--ink); border-bottom: 1px solid var(--i4); padding-bottom: 3px; } .link-u:hover { color: var(--accent); border-bottom-color: var(--accent); } .link-a { color: var(--accent); } .link-a:hover { color: var(--ink); } .link-d { color: var(--i45); } .link-d:hover { color: var(--accent); } /* live dot */ .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .dot--pulse { animation: avpulse 1.6s ease-in-out infinite; } .dot--glow { box-shadow: 0 0 8px rgba(201, 80, 42, .8); } .dot--halo { box-shadow: 0 0 0 4px rgba(201, 80, 42, .18); } .dot--s { width: 5px; height: 5px; } .dot--w { background: #fff; } /* equaliser bars */ .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; } .eq > span { display: block; width: 2px; background: currentColor; transform-origin: bottom; } .eq--live > span { animation: aveq var(--d, .7s) ease-in-out var(--dl, 0s) infinite; } .is-paused .eq--live > span, .is-paused .wave > span { animation-play-state: paused; } .is-tuner-quiet .ch.is-on .ch-freq .eq > span { animation-play-state: paused; } .eq--3 > span { width: 3px; } .eq--3 { gap: 3px; height: 18px; } .eq--10 { height: 10px; } /* striped placeholders */ .ph { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--i10) 0 7px, var(--i16) 7px 14px); color: var(--i35); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; flex: none; } .ph--sq { aspect-ratio: 1; } /* pill */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--accent); color: var(--accent-ink); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; } .pill--xs { padding: 2px 6px; letter-spacing: .12em; text-transform: none; } .pill--s { padding: 3px 7px; letter-spacing: .14em; text-transform: none; } /* ============================================================================ 03b. Preloader — the logo outline fills up while the page arrives ========================================================================= */ .pre { position: fixed; inset: 0; /* above everything, including the fixed top menu and the tuner card */ z-index: 100001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: var(--panel); /* a safety net: if the script never runs, the page is not held hostage */ animation: pre-out .5s ease 8s forwards; } .pre-mark { width: min(340px, 62vw); height: auto; } .pre-outline { fill: none; stroke: var(--i28); stroke-width: .7; } .pre-fill { fill: var(--accent); clip-path: inset(100% 0 0 0); animation: pre-fill 1.9s ease-in-out infinite; } .pre-line { width: min(340px, 62vw); height: 2px; background: var(--i12); overflow: hidden; } .pre-line::before { content: ""; display: block; width: 40%; height: 100%; background: var(--accent); animation: pre-run 1.9s ease-in-out infinite; } /* the page has been seen once: menu clicks swap the markup, the curtain stays away */ .is-booted .pre { display: none; } .pre.is-gone { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } @keyframes pre-fill { 0% { clip-path: inset(100% 0 0 0); } 55% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } } @keyframes pre-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } @keyframes pre-out { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .band-needle, .band-here { transition: none; } .pre-fill { animation: none; clip-path: none; } .pre-line::before { animation: none; width: 100%; } } /* ============================================================================ 04. Keyframes ========================================================================= */ @keyframes aveq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } } @keyframes avpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes avblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .eq--live > span, .dot--pulse, .hero-cursor { animation: none; } } /* ============================================================================ 05. Header ========================================================================= */ .hero-wrap { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: var(--hero-bg); } .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .shell { position: relative; min-height: 100vh; padding: 0 40px 28px; display: flex; flex-direction: column; } .hd { /* the top menu stays put while the page scrolls under it: the bar is fixed and the block it left behind is replaced by --hd-h (measured in main.js), so the hero art still runs behind it and nothing else moves. The backdrop appears only once the page has scrolled (is-stuck), so over the hero it stays clear. */ /* above the tuner card, which the fm-am-dark design ships at z-index 99999 */ position: fixed; top: 0; left: 0; right: 0; z-index: 100000; padding: 28px 40px 16px; /* the 16px below matches the 16px above the logo row */ display: flex; flex-direction: column; background: transparent; transition: background-color .18s ease, box-shadow .18s ease; } .hd.is-stuck { background: var(--panel); box-shadow: 0 1px 0 var(--i12), 0 18px 30px rgba(0, 0, 0, .18); } :root[data-theme="dark"] .hd.is-stuck { box-shadow: 0 1px 0 var(--i12), 0 18px 30px rgba(0, 0, 0, .45); } /* the space the fixed bar no longer takes in the flow */ .shell, .shell--page { padding-top: var(--hd-h, 148px); } .hd-top { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 28px); padding-bottom: 12px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--i55); } .hd-top > * { white-space: nowrap; } .hd-top .sep { color: var(--i28); } .hd-top a { color: var(--i55); } .hd-top a:hover { color: var(--accent); } .hd-rule { height: 1px; background: var(--i18); } .hd-main { display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); padding-top: 16px; } /* Logo: 241×60 is the exact 281×70 proportion — never change one side alone */ .logo { flex: none; } .logo img { height: 60px; width: 241px; } .nav-wrap { margin-left: auto; min-width: 0; } .nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 0; gap: clamp(8px, 1.25vw, 34px) clamp(10px, 1.6vw, 34px); font: 400 16px / 1 Archivo, sans-serif; /* 16px on wide screens, 15px from 2000px down */ letter-spacing: 1px; text-transform: uppercase; } .nav > li { position: relative; display: flex; align-items: center; } /* the top menu: 16px on wide screens, 15px from 2000px down (13px on phones) */ @media (max-width: 2000px) { .nav { font-size: 15px; } .nav .dd-panel a, .nav .dd-panel button { font-size: 15px; } /* beats the base rule further down the file */ } .nav a, .nav button { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid transparent; color: var(--nav-ink); white-space: nowrap; } .nav a:hover, .nav button:hover, .nav a.is-active, .nav button.is-active, .nav li.is-open > button, .nav li.is-open > a { color: var(--accent); border-bottom-color: var(--accent); } .nav > li > a { color: var(--nav-link); } .nav .caret { font-size: 12px; transform: translateY(1px); } /* dropdown — the 14px gap belongs to the positioned wrapper (hover bridge) */ .dd { position: absolute; left: -24px; top: 100%; padding-top: 14px; display: none; z-index: 40; } .dd--right { left: auto; right: -10px; } .is-open > .dd { display: block; } .dd-panel { min-width: 268px; padding: 22px 26px; background: var(--dd-bg); border: 1px solid var(--dd-rule); border-radius: 14px; box-shadow: 0 24px 54px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 16px; } .dd-panel--s { min-width: 212px; } .dd-panel--lang { min-width: 186px; padding: 16px 20px; gap: 14px; } .dd-panel a, .dd-panel button { display: flex; align-items: center; gap: 11px; padding: 0; border: 0; font: 400 16px / 1 Archivo, sans-serif; /* the dropdown reads like the top menu: 16px wide, 15px from 2000px down */ letter-spacing: 1px; text-transform: uppercase; color: var(--dd-ink); white-space: nowrap; } .dd-panel a:hover, .dd-panel button:hover, .dd-panel .is-on, .dd-panel a.is-active { color: var(--accent); } .dd-panel .code { margin-left: auto; font: 400 12px / normal 'DM Mono', ui-monospace, monospace; letter-spacing: .14em; opacity: .6; } /* language selector lives in the service bar, set in its 12px mono */ .lang { position: relative; display: flex; align-items: center; flex: none; margin-left: 0; } .lang > button { display: flex; align-items: center; gap: 7px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--nav-ink); } .lang > button .caret { font-size: 12px; transform: translateY(1px); } .lang.is-open > button { color: var(--nav-active); } .theme { flex: none; margin-left: clamp(6px, .8vw, 14px); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--theme-ring); display: grid; place-items: center; color: var(--nav-ink); } .theme:hover { border-color: var(--accent); color: var(--accent); } .theme .ic-sun { display: block; } .theme .ic-moon { display: none; } :root[data-theme="dark"] .theme .ic-sun { display: none; } :root[data-theme="dark"] .theme .ic-moon { display: block; } .btn-live { display: flex; align-items: center; gap: 12px; margin-left: clamp(8px, 1vw, 18px); padding: clamp(6px, .75vw, 15px) clamp(9px, 1.35vw, 32px); background: var(--accent); color: var(--accent-ink); font: 500 18px / 1 Archivo, sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .btn-live:hover { background: #fff; color: #141110; } /* inner pages: the same header on the plain textured background, no artwork */ .page-head { background: var(--panel); } .shell--page { min-height: auto; padding-bottom: 0; } .shell--page .crumbs { margin-top: 0; } /* the line under the top menu keeps the page's side margins, like everything else */ .hd--page::after { content: ""; position: absolute; left: 40px; right: 40px; bottom: 0; height: 1px; background: var(--i12); } .crumbs { display: flex; align-items: center; gap: 12px; padding: 10px 0 0; letter-spacing: .2em; text-transform: uppercase; color: var(--i5); } .crumbs a { color: var(--i5); } .crumbs a:hover { color: var(--accent); } .crumbs .sep { color: var(--i28); } .crumbs [aria-current] { color: var(--nav-ink); } .page { background: var(--panel); } .sec--page { padding-top: 60px; padding-bottom: 60px; } /* ============================================================================ 06. Hero ========================================================================= */ .hero { flex: 1; display: flex; align-items: center; padding: clamp(24px, 4vh, 60px) 0; color: var(--h-ink); } .hero-col { display: flex; flex-direction: column; gap: clamp(8px, 2.2vh, 44px); width: min(52%, 1150px); margin: auto 0; transform: translateY(25px); /* the column is centred by margin:auto, so the shift is a transform */ } .hero-air { display: flex; align-items: center; gap: 12px; min-width: 0; } .hero-air .on { display: flex; align-items: center; gap: 8px; flex: none; letter-spacing: .26em; color: var(--accent); } .hero-air .on .dot { box-shadow: 0 0 8px rgba(201, 80, 42, .9); } .hero-air .now { flex: none; letter-spacing: .2em; color: var(--h-dim); } .hero-air .hr { flex: 1; height: 1px; min-width: 20px; background: var(--h-hr); } .hero-air .meta { flex: none; color: var(--h-dim5); } .hero-title { display: flex; align-items: stretch; gap: clamp(16px, 2.2vw, 34px); color: var(--h-ink); } .hero-freq { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; } .hero-freq .num { font: 800 clamp(52px, min(10vw, 16.6vh), 196px) / .78 Archivo, sans-serif; letter-spacing: -.06em; color: var(--accent); } .hero-freq .unit { display: flex; align-items: center; gap: 9px; padding-left: 4px; color: var(--h-dim5); } .hero-freq .unit .hr { width: 34px; height: 1px; background: var(--h-hr3); } .hero-seam { flex: none; width: 1px; background: linear-gradient(180deg, transparent, var(--h-seam) 18%, var(--h-seam) 82%, transparent); } .hero-city { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; } .hero-city h1 { font: 700 clamp(28px, min(4.6vw, 7.6vh), 88px) / .9 'Bricolage Grotesque', sans-serif; text-transform: uppercase; letter-spacing: -.05em; } .hero-city .tag { display: flex; align-items: baseline; gap: 14px; } .hero-bone { font: 400 clamp(24px, min(3.6vw, 6vh), 70px) / 1 'Instrument Serif', serif; font-style: italic; color: var(--bone); } .hero-cursor { display: inline-block; width: clamp(9px, 1vw, 17px); height: clamp(20px, min(2.4vw, 4vh), 44px); background: var(--accent); align-self: center; animation: avblink 1.1s steps(1) infinite; } .hero-sub { font: 300 clamp(15px, min(1.6vw, 2.6vh), 26px) / 1.3 'Bricolage Grotesque', sans-serif; color: var(--h-sub); margin-top: clamp(6px, 1.2vh, 14px); max-width: 34ch; } /* band scale */ .hero-facts { padding-top: clamp(10px, 1.6vh, 18px); border-top: 1px solid var(--h-hr28); } .band { position: relative; height: 40px; } .band-ticks { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; } .band-ticks > span { width: 1px; height: 6px; background: var(--h-tick); flex: none; } .band-ticks > span:nth-child(4n+1) { height: 12px; background: var(--h-tick-major); } /* 33.5% is 94.7, the site's own wave; while the tuner plays the script writes left on the needle and on the caption (see main.js, 05b) */ .band-needle { position: absolute; left: 33.5%; top: -7px; transition: left .28s ease; width: 2px; height: 26px; background: var(--accent); box-shadow: 0 0 10px rgba(201, 80, 42, .8); } .band-here { position: absolute; left: 33.5%; top: 22px; transform: translateX(-50%); letter-spacing: .14em; color: var(--accent); white-space: nowrap; transition: left .28s ease; } /* parked against an end of the dial: the caption starts (or finishes) on the scale's own edge, and the 88 / 108 mark under it gives way */ .band.is-edge-l .band-lo, .band.is-edge-r .band-hi { opacity: 0; } .band-lo, .band-hi { transition: opacity .18s ease; } /* while the tuner is on, the mark glows a little harder than at rest */ .band.is-live .band-needle { box-shadow: 0 0 14px rgba(201, 80, 42, .95); } .band-lo, .band-hi { position: absolute; top: 18px; color: var(--h-dim45); letter-spacing: 0; } .band-lo { left: 0; } .band-hi { right: 0; } .hero-count { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid var(--h-hr16); letter-spacing: .18em; color: var(--h-dim); } .hero-count .slash { color: var(--h-slash); } /* ============================================================================ 06b. Page intro — title + the round player + today's FM scale (About, Stations) ========================================================================= */ /* the breadcrumbs end flush, the title starts flush, and this 20px is the whole gap between them — the same on every screen */ .sec.sec--intro { background: var(--panel); padding-top: 40px; padding-bottom: 0; } /* doubled class so the generic .sec shorthand below cannot reset these */ .pg-intro { display: flex; align-items: flex-start; flex-wrap: wrap; gap: clamp(24px, 3vw, 56px); } .pg-title { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 0; } /* the two title lines sit tight, on their own leading */ .pg-title h1 { font: 700 clamp(34px, 5.4vw, 96px) / .92 'Bricolage Grotesque', sans-serif; letter-spacing: -.045em; text-transform: uppercase; } .pg-title .tag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px; } .pg-title .serif { font-size: clamp(34px, 5.4vw, 96px); line-height: .96; color: var(--accent); } .pg-title h1 .serif { font-weight: 400; text-transform: none; } /* the italic half of a one-line title */ .pg-title .since { font: 300 clamp(22px, 2.4vw, 40px) / 1 'Bricolage Grotesque', sans-serif; color: var(--i6); } .pg-intro .pl { flex: 1 1 540px; min-width: 0; margin-top: 0; align-self: center; } /* the player sits on the middle line of the row */ /* and the whole block sits on the middle line between the rule under the top menu and the rule of the scale: the breadcrumbs eat 26px of the upper half, so the player is lifted by half of that */ @media (min-width: 761px) { .pg-intro .pl { position: relative; top: -13px; } } .pg-intro .pl-readout { display: none; } /* the About player has no hour / volume readout */ /* the player sits on the page texture, not on the artwork: page inks */ .pg-intro .pl-line .freq, .pg-intro .pl-line .count { color: var(--i7); } .pg-intro .pl-line .slash { color: var(--i28); } .pg-intro .pl-track { color: var(--ink); } .pg-intro .pl-foot { border-top-color: var(--i28); } .pg-intro .pl-foot .now { color: var(--i78); } .pg-intro .pl-foot .next { color: var(--i55); } .pg-intro .pl-foot .air { color: var(--i6); } .pg-intro .pl-foot .sched { color: var(--ink); border-bottom-color: var(--i45); } .pg-intro .pl-readout .sep { color: var(--i28); } .pg-intro .pl-readout .vol { color: var(--i7); } .pg-intro .pl-wave .t { color: var(--i45); } .pg-intro .wave > span { background: var(--i28); } .pg-intro .wave > span:nth-child(-n+20) { background: var(--i75); } .pg-intro .dial-notch { background: repeating-conic-gradient(var(--i4) 0deg .7deg, transparent .7deg 7.5deg); } .pg-intro .dial-cross { background: conic-gradient(var(--i6) 0 1.4deg, transparent 1.4deg 90deg, var(--i6) 90deg 91.4deg, transparent 91.4deg 180deg, var(--i6) 180deg 181.4deg, transparent 181.4deg 270deg, var(--i6) 270deg 271.4deg, transparent 271.4deg 360deg); } .pg-intro .dial-hour { background: conic-gradient(var(--accent) 0 var(--hour, 64%), var(--i14) var(--hour, 64%) 100%); } .pg-intro .dial-vol { background: conic-gradient(#f5f4f1 0 var(--vol, 72%), var(--i16) var(--vol, 72%) 100%); } :root[data-theme="dark"] .pg-intro .dial-btn { background: #141110; box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--i14); } /* the same 40px that sits above the intro, so the player block is centred between the breadcrumb line and the scale line */ .pg-scale { position: relative; height: 70px; margin-top: 40px; } .pg-scale .line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--i28); } .pg-scale .ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; } .pg-scale .ticks > span { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 0; } .pg-scale .ticks > span > i { display: block; width: 1px; height: 8px; background: var(--i28); } .pg-scale .ticks > span > b { font: 400 12px / normal 'DM Mono', ui-monospace, monospace; color: var(--i5); } .pg-scale .ticks > span.major > i { height: 14px; background: var(--i55); } .pg-scale .needle { position: absolute; top: -10px; left: 64%; height: 30px; width: 1px; background: var(--accent); } .pg-scale .needle::before { content: ""; position: absolute; left: -2.5px; top: -5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .pg-scale .needle .mono { position: absolute; left: -14px; top: -26px; color: var(--ink); } @media (max-width: 760px) { .pg-intro .pl { flex-basis: 100%; } } @media (min-width: 1101px) and (max-width: 2000px) { .pg-intro { gap: clamp(20px, 2.4vw, 40px); } .pg-title { gap: 0; } .pg-title h1 { font-size: clamp(34px, 3.9vw, 72px); } .pg-title .serif { font-size: clamp(34px, 3.9vw, 72px); } .pg-title .since { font-size: clamp(20px, 1.6vw, 30px); } /* below 2000px the player takes the larger share of the spare width, so the Schedule link stays on the same line as Now / Next / Save */ .pg-intro .pl { flex-basis: 480px; flex-grow: 2; } .pg-intro .pl-track { font-size: clamp(20px, 1.6vw, 28px); } .pg-intro .pl-main { gap: 9px; } .pg-scale { height: 60px; } /* room for the TODAY label above the line */ } /* ============================================================================ 07. Hero player ------------------------------------------------------------------------ The dial rings are cut with -webkit-mask only: every current browser (Chrome, Safari, Firefox, Edge) reads the prefixed form, and the W3C CSS validator rejects gradient values on the unprefixed `mask`. ========================================================================= */ .pl { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); margin-top: clamp(10px, 2.4vh, 40px); } .pl-dial-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; } .dial { position: relative; width: clamp(142px, 14vw, 196px); aspect-ratio: 1; } .dial > span { position: absolute; border-radius: 50%; } .dial-notch { inset: 0; background: repeating-conic-gradient(var(--h-dial-notch) 0deg .7deg, transparent .7deg 7.5deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); } .dial-cross { inset: 0; background: conic-gradient(var(--h-dial-cross) 0 1.4deg, transparent 1.4deg 90deg, var(--h-dial-cross) 90deg 91.4deg, transparent 91.4deg 180deg, var(--h-dial-cross) 180deg 181.4deg, transparent 181.4deg 270deg, var(--h-dial-cross) 270deg 271.4deg, transparent 271.4deg 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px)); } .dial-hour { inset: 15px; background: conic-gradient(var(--accent) 0 var(--hour, 64%), var(--h-dial-track) var(--hour, 64%) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)); } .dial-vol { inset: 19%; background: conic-gradient(var(--h-dial-vol) 0 var(--vol, 72%), var(--h-dial-vol-rest) var(--vol, 72%) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); } .dial-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 50%; background: var(--h-btn-bg); box-shadow: var(--h-btn-shadow); display: grid; place-items: center; font-family: 'DM Mono', ui-monospace, monospace; font-size: clamp(14px, 1.4vw, 18px); color: var(--h-btn-ink); transition: transform .18s ease; } .dial-btn:hover { transform: translate(-50%, -50%) scale(1.04); } /* the play triangle reads smaller than the two pause bars — give it a size up */ .is-paused .dial-btn > span { font-size: clamp(20px, 1.9vw, 26px); } /* The rings spin while the station is on air (as on AVAVA Radio Online): the moves are uneven and the durations differ, so the ember and the white keep drifting out of phase. Every cycle is exactly 360°, so the seam is invisible. */ @keyframes ring-drift-a { 0% { transform: rotate(0deg); } 28% { transform: rotate(84deg); } 52% { transform: rotate(150deg); } 76% { transform: rotate(276deg); } 100% { transform: rotate(360deg); } } @keyframes ring-drift-b { 0% { transform: rotate(0deg); } 32% { transform: rotate(-118deg); } 58% { transform: rotate(-172deg); } 81% { transform: rotate(-289deg); } 100% { transform: rotate(-360deg); } } @keyframes ring-wait { to { transform: rotate(360deg); } } .dial-hour { animation: ring-drift-a 19s linear infinite; } .dial-vol { animation: ring-drift-b 11s linear infinite; } .is-paused .dial-hour, .is-paused .dial-vol { animation-play-state: paused; } /* connecting to the stream: a thin ember arc runs around the button and the glyph is dimmed — the click is accepted but there is no sound yet */ .dial-btn::after { content: ""; position: absolute; inset: -7px; border: 2px solid transparent; border-top-color: var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; } .is-loading .dial-btn::after { opacity: 1; animation: ring-wait .8s linear infinite; } :root:not([data-theme="dark"]) .dial-btn::after { border-top-color: #141110; } .is-loading .dial-btn > span { opacity: .45; } .pl-track.is-wait { color: var(--h-dim); } @media (prefers-reduced-motion: reduce) { .dial-hour, .dial-vol { animation: none; } .is-loading .dial-btn::after { animation: none; opacity: .6; } } .dial-pointer { position: absolute; left: 50%; top: -3px; width: 2px; height: 13px; margin-left: -1px; background: var(--accent); } .pl-readout { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; letter-spacing: .18em; white-space: nowrap; } .pl-readout .sep { color: var(--h-sep); } .pl-readout .vol { color: var(--h-dim55); } .pl-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; } .pl-line { display: flex; align-items: center; gap: 10px; min-width: 0; } .pl-line > * { flex: none; white-space: nowrap; } .pl-line .live { letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .pl-line .slash { letter-spacing: .24em; color: var(--h-dim3); } .pl-line .freq { letter-spacing: .2em; color: var(--h-dim55); } .pl-line .count { margin-left: auto; color: var(--h-dim55); } .pl-track { display: block; min-width: 0; font: 600 clamp(20px, 2.6vw, 40px) / 1.08 Archivo, sans-serif; letter-spacing: -.03em; color: var(--h-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-wave { display: flex; align-items: center; gap: 12px; } .pl-wave .t { flex: none; letter-spacing: .14em; color: var(--h-dim45); } .wave { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; height: 30px; overflow: hidden; } .wave > span { width: 3px; flex: none; background: var(--h-wave-rest); transform-origin: bottom; animation: aveq var(--d, .7s) ease-in-out var(--dl, 0s) infinite; } .wave > span:nth-child(-n+20) { background: var(--h-wave); } .pl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 12px; border-top: 1px solid var(--h-line); } .pl-foot .now { color: var(--h-now); } .pl-foot .next { color: var(--h-next); } .pl-foot .save { margin-left: auto; color: var(--accent); letter-spacing: .16em; } .pl-foot .air { color: var(--h-dim6); } .pl-foot .air:hover { color: var(--accent); } .pl-foot .sched { color: var(--h-ink); border-bottom: 1px solid var(--h-sched-rule); padding-bottom: 3px; } .pl-foot .sched:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ============================================================================ 08. Tuner card — drawn by assets/css/tuner.css (fm-am-dark design of the HTML Radio Tuner plugin, as on AVAVA Radio Online); here only its place in the header. The instrument does not recolour between themes. ========================================================================= */ .tuner { width: 100%; background: none; border: 0; } /* photos in the card slots */ .thumb { display: block; flex: none; object-fit: cover; } .thumb--36 { width: 36px; height: 36px; } .thumb--40 { width: 40px; height: 40px; } .thumb--44 { width: 44px; height: 44px; } .thumb--52 { width: 52px; height: 52px; } .thumb--58 { width: 58px; height: 58px; } .thumb--72 { width: 72px; height: 72px; } .thumb--sc { width: clamp(120px, 13vw, 164px); height: clamp(120px, 13vw, 164px); } .thumb--np { width: clamp(92px, 10vw, 118px); height: clamp(92px, 10vw, 118px); } .thumb--pc { width: clamp(150px, 17vw, 200px); height: clamp(150px, 17vw, 200px); } .ch-art { flex: none; width: 68px; height: 68px; object-fit: cover; } /* ============================================================================ 09. Section chrome ========================================================================= */ .sec { padding: 0 40px; } .sec--channels { background: var(--panel); padding-top: 60px; } .sec--schedule { background: var(--paper); } .sec--shows { background: var(--card); } .sec--tracks { background: var(--panel); } .sec--podcasts { background: var(--paper); } .sec--requests { background: var(--sheet); padding-bottom: 60px; } .divider { margin: 60px 40px; height: 1px; background: var(--i12); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: clamp(24px, 3vw, 38px); } .sec-head--sched { margin-bottom: clamp(26px, 3.2vw, 40px); } .sec-head--tracks { margin-bottom: clamp(24px, 2.6vw, 34px); } .sec-head--req { margin-bottom: clamp(26px, 3vw, 36px); } .sec-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; } .sec-meta--8 { gap: 8px; } .sec-meta .tuned { display: flex; align-items: center; gap: 9px; color: var(--accent); } .vlabel { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--i45); padding: 4px 0; border-left: 1px solid var(--i18); } .play-btn { flex: none; border-radius: 50%; background: var(--shell); color: #fff; display: grid; place-items: center; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; } .play-btn:hover { background: var(--accent); color: #fff; } /* in the dark theme the shell the button is cut from is the page's own colour, so the circle disappears into it: there it wears the accent instead. The glyph on hover is set from --shell, not --paper: in the dark theme --paper is a whole background shorthand with a texture behind it, and a colour cannot be taken from that — the mark would fall back to white. */ :root[data-theme="dark"] .play-btn { background: var(--accent); } :root[data-theme="dark"] .play-btn:hover { background: var(--ink); color: var(--shell); } /* the glyph is the whole button, so it grows with the circle */ .play-btn--56 { width: 56px; height: 56px; font-size: 17px; } .play-btn--48 { width: 48px; height: 48px; font-size: 15px; } .play-btn--44 { width: 44px; height: 44px; font-size: 14px; } .ring-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--i28); display: grid; place-items: center; color: var(--ink); /* the glyph is the whole button — it carries no label, so it is set large enough to read inside the ring instead of sitting in it as a speck */ font-family: 'DM Mono', ui-monospace, monospace; font-size: 19px; line-height: 1; } .ring-btn:hover, .ring-btn.is-on { border-color: var(--accent); color: var(--accent); } .ring-btn--30 { width: 30px; height: 30px; color: var(--i75); font-size: 15px; } .ring-btn--46 { width: 46px; height: 46px; border-color: var(--i35); color: var(--i55); font-size: 24px; } .hbar { display: flex; align-items: center; gap: 14px; } .hbar .t { flex: none; letter-spacing: .14em; color: var(--i5); } .hbar .bar { position: relative; flex: 1; min-width: 0; height: 6px; background: var(--i12); } .hbar .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--hour, 64%); background: var(--accent); } .hbar .bar .mark { position: absolute; left: var(--hour, 64%); top: -6px; bottom: -6px; width: 2px; background: var(--ink); } .hbar--thin .bar { height: 4px; background: var(--i16); } .hbar--thin .bar .fill { position: static; display: block; height: 4px; } /* thin progress bars: a rail with a filled span (width via .js-w[data-pct]) */ .abar { display: block; height: 2px; background: var(--i12); min-width: 0; } .abar > span { display: block; height: 100%; background: var(--i28); } .abar--3 { height: 3px; } .abar--4 { height: 4px; } .abar--5 { height: 5px; } .abar--8 { height: 8px; } .is-on > .abar > span, .is-on .abar > span, .is-new .abar > span { background: var(--accent); } /* ember buttons: mono caps on the accent; light theme darkens to ink on hover */ .btn-ember { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; background: var(--accent); color: #fff; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .btn-ember--s { padding: 9px 14px; letter-spacing: .16em; } .btn-ember:hover { background: #E0663D; color: #fff; } :root:not([data-theme="dark"]) .btn-ember:hover { background: #141110; color: #fff; } /* chip rows */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--i16); color: var(--i55); white-space: nowrap; } .chip:hover { border-color: var(--accent); } .chip.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .chip--s { padding: 6px 10px; letter-spacing: .1em; text-transform: none; border-color: var(--i14); } .chip--s.is-on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* underline inputs */ .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field label { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; } .field input { width: 100%; border: 0; border-bottom: 1px solid var(--i35); background: none; padding: 7px 0; font: 400 16px / 1.2 Archivo, sans-serif; color: var(--ink); outline: none; border-radius: 0; } .field input:focus { border-bottom-color: var(--accent); } .rq { flex: 1; min-width: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--i5); background: none; border-radius: 0; font: 400 16px / 1.2 Archivo, sans-serif; color: var(--ink); } .rq::placeholder { color: var(--i6); } .rq:focus { outline: none; border-bottom-color: var(--accent); } .send { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; display: grid; place-items: center; } /* the same trap as on .play-btn: --paper is a background shorthand with a texture in it, so a colour cannot be taken from it — the label would fall back to the inherited one and vanish on the light fill */ .send:hover { background: var(--ink); color: var(--shell); } .send--36 { width: 36px; height: 36px; } /* ============================================================================ 10. Channels ========================================================================= */ .ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .ch { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 16px; border: 1px solid var(--i16); background: transparent; text-align: left; color: var(--ink); transition: transform .2s ease, border-color .2s ease; } .ch-grid--top .ch:hover { transform: translateY(-5px); border-color: var(--accent); } .ch-grid--bottom .ch:hover { transform: translateY(5px); border-color: var(--accent); } .ch { position: relative; } .hit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; border-radius: inherit; } .hit:focus-visible { outline-offset: -2px; } .ch-top { display: flex; gap: 12px; min-width: 0; } .ch-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .ch-freq { display: flex; align-items: baseline; gap: 8px; } .ch-freq .n { font: 800 22px / 1 Orbitron, sans-serif; } .ch-freq .fm { letter-spacing: .2em; color: var(--i45); } .ch-freq .eq { margin-left: auto; color: var(--i28); } .ch-name { display: block; min-width: 0; font: 700 21px / 1.02 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-host { display: block; min-width: 0; font: 400 15px / 1.2 'Instrument Serif', serif; font-style: italic; color: var(--i55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-now { display: flex; align-items: baseline; gap: 8px; padding-top: 9px; border-top: 1px solid var(--i14); } .ch-now .lbl { flex: none; color: var(--i45); } .ch-now .txt { display: block; min-width: 0; font: 400 14px / 1.35 Archivo, sans-serif; color: var(--i68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-foot { display: flex; align-items: baseline; gap: 8px; } .ch-foot .genre { min-width: 0; letter-spacing: .14em; color: var(--i45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-foot .lis { margin-left: auto; flex: none; letter-spacing: .12em; color: var(--i45); } .ch.is-on { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 18px 40px rgba(201, 80, 42, .26); } .ch.is-on .ph { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 7px, rgba(255, 255, 255, .22) 7px 14px); color: rgba(255, 255, 255, .62); } .ch.is-on .ch-freq .fm, .ch.is-on .ch-now .lbl, .ch.is-on .ch-foot .genre, .ch.is-on .ch-foot .lis { color: rgba(255, 255, 255, .72); } .ch.is-on .ch-freq .eq { color: rgba(255, 255, 255, .85); } .ch.is-on .ch-freq .eq > span { animation: aveq var(--d, .7s) ease-in-out var(--dl, 0s) infinite; } .ch.is-on .ch-host { color: rgba(255, 255, 255, .85); } .ch.is-on .ch-now { border-top-color: rgba(255, 255, 255, .35); } .ch.is-on .ch-now .txt { color: #fff; } .stems { position: relative; height: 26px; } .stems > span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--i2); } .stems > span.is-on { width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 12px rgba(201, 80, 42, .6); } /* card stems sit on the true frequency positions of the six channels */ .stems--top > span:nth-child(1) { left: 4.7%; } .stems--top > span:nth-child(2) { left: 38%; } .stems--top > span:nth-child(3) { left: 71.3%; } .stems--bottom > span:nth-child(1) { left: 28.7%; } .stems--bottom > span:nth-child(2) { left: 62%; } .stems--bottom > span:nth-child(3) { left: 95.3%; } .axis { position: relative; height: 66px; } .axis-line { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--i28); } .axis-ticks { position: absolute; left: 0; right: 0; top: calc(50% + 4px); display: flex; justify-content: space-between; align-items: flex-start; } .axis-ticks > span { width: 1px; height: 8px; background: rgba(255, 255, 255, .2); } .axis-ticks > span.major { height: 14px; background: rgba(255, 255, 255, .45); } :root:not([data-theme="dark"]) .axis-ticks > span { background: var(--i2); } :root:not([data-theme="dark"]) .axis-ticks > span.major { background: var(--i45); } .axis-labels { position: absolute; left: 0; right: 0; top: calc(50% + 22px); display: flex; justify-content: space-between; } .axis-labels > span { letter-spacing: .1em; color: var(--i4); } .axis-labels > span.is-on { color: var(--i75); } .axis-window { position: absolute; top: calc(50% - 26px); height: 52px; width: 56px; left: calc(var(--x, 38%) - 28px); border-left: 1px solid rgba(201, 80, 42, .55); border-right: 1px solid rgba(201, 80, 42, .55); background: linear-gradient(180deg, rgba(201, 80, 42, .2), rgba(201, 80, 42, .02)); transition: left .35s ease; } .axis-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; background: var(--panel); border: 1px solid var(--i45); } .axis-dot:nth-of-type(1) { left: 4.7%; } .axis-dot:nth-of-type(2) { left: 28.7%; } .axis-dot:nth-of-type(3) { left: 38%; } .axis-dot:nth-of-type(4) { left: 62%; } .axis-dot:nth-of-type(5) { left: 71.3%; } .axis-dot:nth-of-type(6) { left: 95.3%; } .axis-dot.is-on { width: 12px; height: 12px; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px rgba(201, 80, 42, .16); } .ch-signal { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--i16); } /* ============================================================================ 11. Schedule ========================================================================= */ .sc-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; } .sc-live { position: relative; overflow: hidden; padding-bottom: 24px; border-bottom: 2px solid var(--ink); height: 100%; } .sc-ghost { position: absolute; left: -46px; top: -18px; font: 800 clamp(140px, 17vw, 232px) / .8 Orbitron, sans-serif; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 24%, transparent); pointer-events: none; white-space: nowrap; } .sc-body { position: relative; display: flex; flex-direction: column; gap: 16px; } .sc-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .sc-show { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 26px); align-items: flex-start; } .sc-show .ph { width: clamp(120px, 13vw, 164px); background: repeating-linear-gradient(135deg, var(--i10) 0 8px, var(--i16) 8px 16px); color: var(--i4); } .sc-show-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; } .sc-show h3 { font: 700 clamp(40px, 6.2vw, 92px) / .9 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; text-transform: uppercase; } .sc-with { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; } .sc-with .serif { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; } .sc-hour { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; } .sc-ruler { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 44px; } .sc-ruler > span { width: 1px; height: 5px; background: var(--i2); } .sc-ruler > span:nth-child(6n+1) { height: 10px; background: var(--i45); } .sc-marks { display: flex; justify-content: space-between; margin: 0 30px; } .sc-marks > span { letter-spacing: .1em; color: var(--i4); } .sc-np { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 6px; } .sc-np .eq { color: var(--accent); } .sc-np-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sc-np-txt .name { display: block; min-width: 0; font: 600 17px / 1 Archivo, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-played { display: flex; flex-direction: column; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--i16); } .sc-played > .mono { padding-bottom: 8px; } .sc-played li { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--i10); } .sc-played li .t { flex: none; letter-spacing: .12em; color: var(--i45); } .sc-played li .n { display: block; min-width: 0; font: 400 15px / 1.3 Archivo, sans-serif; color: var(--i68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-played li.is-on .t { color: var(--accent); } .sc-played li.is-on .n { color: var(--ink); } .sc-played li button { margin-left: auto; flex: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; color: var(--i4); } .sc-played li button:hover, .sc-played li button.is-on { color: var(--accent); } .sc-day { display: flex; flex-direction: column; min-width: 0; height: 100%; } .sc-day-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .sc-list { position: relative; padding-left: 22px; flex: 1; display: flex; } .sc-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .sc-list::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--i18); } .sc-now-dot { position: absolute; left: 0; top: var(--y, 262px); width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); } .sc-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--i10); cursor: pointer; } .sc-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .sc-row .t { letter-spacing: .1em; color: var(--ink); } .sc-row .nm { display: flex; align-items: baseline; gap: 11px; min-width: 0; } .sc-row .nm b { flex: none; font: 600 17px / 1.2 Archivo, sans-serif; letter-spacing: -.01em; color: var(--ink); } .sc-row .nm span { min-width: 0; letter-spacing: .14em; text-transform: uppercase; color: var(--i68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-row .d { text-align: right; letter-spacing: .1em; color: var(--i4); } .sc-row.is-past .t { color: var(--i45); } .sc-row.is-past .nm b { color: var(--i5); text-decoration: line-through; } .sc-row.is-past .nm span { color: var(--i45); } .sc-row.is-live .t { color: var(--accent); } .sc-next { display: flex; align-items: stretch; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--i18); } .sc-next > .mono { flex: none; align-self: center; } .sc-next-card { flex: 1 1 276px; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--i16); cursor: pointer; } .sc-next-card:hover { border-color: var(--accent); } .sc-next-card .ph { width: 58px; color: var(--i4); letter-spacing: .12em; } .sc-next-card .body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .sc-next-card .nm { display: block; min-width: 0; font: 700 17px / 1.05 'Bricolage Grotesque', sans-serif; letter-spacing: -.025em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-next-card .host { min-width: 0; letter-spacing: .12em; color: var(--i45); } /* the host name wraps, never clips */ /* ============================================================================ 12. Shows (host wall) ========================================================================= */ .sh-wall { display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 30px); } .sh-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; gap: clamp(12px, 1.4vw, 22px); } .host { min-width: 0; margin-top: var(--top, 0); display: flex; flex-direction: column; transform: rotate(var(--rot, 0deg)); transition: transform .2s ease; cursor: pointer; text-align: left; color: #141110; } .host:hover { transform: rotate(0deg) translateY(-8px); } /* vertical offset restarts every four cards; rotation and tape angle per card */ .sh-grid > .host:nth-child(1) { --top: 26px; --rot: -2.2deg; --tape: -3deg; } .sh-grid > .host:nth-child(2) { --top: 0; --rot: 1.5deg; --tape: 2deg; } .sh-grid > .host:nth-child(3) { --top: 40px; --rot: -1.1deg; --tape: -1.5deg; } .sh-grid > .host:nth-child(5) { --top: 10px; --rot: 2deg; --tape: 3deg; } .sh-grid > .host:nth-child(6) { --top: 50px; --rot: -1.7deg; --tape: -2deg; } .sh-grid > .host:nth-child(7) { --top: 20px; --rot: 1deg; --tape: 1.5deg; } .host-card { position: relative; padding: 10px 10px 0; background: #F6F3EE; border: 1px solid var(--i14); box-shadow: 0 18px 40px var(--i28); } .host-tape { position: absolute; left: 50%; top: -11px; margin-left: -30px; width: 60px; height: 20px; background: rgba(246, 243, 238, .32); border: 1px solid var(--i2); transform: rotate(var(--tape, 0deg)); } .host-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, rgba(20, 17, 16, .08) 0 8px, rgba(20, 17, 16, .15) 8px 16px); display: grid; place-items: center; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; color: rgba(20, 17, 16, .32); } .host-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .host-no { position: absolute; left: 12px; top: 12px; padding: 5px 8px; background: #141110; color: #fff; letter-spacing: .16em; } .host-yrs { position: absolute; right: 12px; top: 12px; padding: 5px 8px; background: rgba(246, 243, 238, .85); color: rgba(20, 17, 16, .7); letter-spacing: .12em; } .host-live { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: var(--accent); color: #fff; } .host-live .eq { color: #fff; } .host-meta { display: flex; flex-direction: column; gap: 5px; padding: 12px 4px 14px; } .host-name { display: block; min-width: 0; font: 400 20px / 1 'Instrument Serif', serif; font-style: italic; color: #141110; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .host-show { display: block; min-width: 0; font: 700 17px / 1.05 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; color: #141110; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .host-slot { display: flex; align-items: baseline; gap: 8px; padding-top: 7px; border-top: 1px solid rgba(20, 17, 16, .14); } .host-slot .s { min-width: 0; letter-spacing: .12em; color: rgba(20, 17, 16, .5); } .host-slot .a { margin-left: auto; flex: none; letter-spacing: .14em; color: rgba(20, 17, 16, .35); } .host.is-live .host-card { border-color: var(--accent); box-shadow: 0 18px 40px var(--i28), 0 0 0 1px var(--accent); } .host.is-live .host-tape { background: color-mix(in srgb, var(--accent) 35%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .host.is-live .host-no { background: var(--accent); } .host.is-live .host-show, .host.is-live .host-slot .s { color: var(--accent); } .host:hover .host-card { border-color: var(--accent); } .host:hover .host-slot .s, .host:hover .host-show { color: var(--accent); } .note { min-width: 0; margin-top: 76px; transform: rotate(1.6deg); transition: transform .2s ease; } .note:hover { transform: rotate(0deg) translateY(-8px); } .note-card { position: relative; padding: 18px 16px; background: var(--accent); color: #fff; box-shadow: 0 18px 40px var(--i28); display: flex; flex-direction: column; gap: 10px; } .note-tape { position: absolute; left: 50%; top: -11px; margin-left: -26px; width: 52px; height: 20px; background: rgba(246, 243, 238, .3); border: 1px solid rgba(255, 255, 255, .22); transform: rotate(-2deg); } .note-card .lbl { letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .75); } .note-card p { font: 400 clamp(16px, 1.7vw, 21px) / 1.35 'Instrument Serif', serif; font-style: italic; color: #fff; text-wrap: pretty; } .note-card .date { letter-spacing: .14em; color: rgba(255, 255, 255, .7); padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .3); } .sh-air { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: clamp(28px, 3vw, 40px); padding-top: 20px; border-top: 2px solid var(--ink); } .sh-air .on { display: flex; align-items: center; gap: 9px; color: var(--accent); } .sh-air .show { font: 700 clamp(22px, 2.4vw, 30px) / 1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; } .sh-air .who { font: 400 clamp(18px, 2vw, 24px) / 1 'Instrument Serif', serif; font-style: italic; color: var(--i75); } .sh-air .hbar { min-width: 180px; flex: 1 1 180px; gap: 10px; } /* ============================================================================ 13. Tracks (shape of tonight) ========================================================================= */ .tr-wrap { display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 26px); } .tr-main { flex: 1; min-width: 0; } .tr-slots { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; } .tr-slot { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--i28); } /* the bands are as wide as their share of the night's tracks, but never narrower than the words they carry — otherwise a short shift wraps */ .tr-slot { min-width: fit-content; } .tr-slot > * { white-space: nowrap; } /* on the narrowest phones the band cannot hold all three pieces: there the host's name gives way rather than the band breaking into two lines */ @media (max-width: 400px) { .tr-slot { min-width: 0; } .tr-slot .h { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } .tr-slot--a { flex: 0 0 46%; } .tr-slot--b { flex: 1; border-bottom-color: var(--accent); } .tr-slot .t { letter-spacing: .14em; color: var(--i45); } .tr-slot--b .t { color: var(--accent); } .tr-slot .nm { font: 700 14px / 1 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: var(--i75); } .tr-slot--b .nm { color: var(--ink); } .tr-slot .h { margin-left: auto; letter-spacing: .14em; color: var(--i35); } .tr-slot--b .h { color: var(--i45); } .tr-shape { position: relative; padding-top: 47px; } /* 5px above the tallest bar, not the box edge */ .tr-now { position: absolute; right: 0; top: -3px; z-index: 2; width: clamp(210px, 22vw, 264px); padding: 12px 14px; border: 1px solid var(--accent); background: var(--panel); display: flex; flex-direction: column; gap: 6px; } .tr-now .row { display: flex; align-items: baseline; gap: 8px; } .tr-now .name { display: block; min-width: 0; font: 600 15px / 1.15 Archivo, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bars { display: flex; align-items: center; gap: 5px; height: 172px; } .bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; transition: opacity .15s ease; } .bar:hover { opacity: .72; } .bar .req { position: absolute; top: -16px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .85; } .bar .up { width: 100%; height: var(--up); align-self: flex-end; background: var(--i22); } .bar .ax { width: 100%; height: 1px; background: var(--i28); } .bar .dn { width: 100%; height: var(--dn); background: var(--i10); } .bar.is-on .up { background: var(--accent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); } .bar.is-on .ax { background: var(--accent); } .bar.is-on .dn { background: color-mix(in srgb, var(--accent) 50%, transparent); } .heat { display: flex; align-items: stretch; gap: 5px; height: 8px; margin-top: 10px; } .heat > span { flex: 1; min-width: 0; height: 100%; background: color-mix(in srgb, var(--ink) var(--h, 12%), transparent); } .heat > span.is-on { background: var(--accent); } .tr-tempo { display: flex; align-items: center; gap: 12px; padding-top: 8px; } .tr-tempo .hr { flex: 1; height: 1px; background: var(--i14); } .tr-ticks { display: flex; justify-content: space-between; padding-top: 12px; } .tr-ticks > span { letter-spacing: .14em; color: var(--i4); } .tr-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 14px; padding-top: 10px; } /* the legend also points at the request slip further down the page: the note keeps the left of the line, the way out takes the right */ .tr-req { margin-left: auto; } .tr-save { display: flex; flex-direction: column; align-items: center; gap: 6px; } .tr-chips { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 16px); margin-top: 26px; } .tr-chip { flex: 1 1 210px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--i14); background: color-mix(in srgb, var(--ink) 4%, transparent); cursor: pointer; } .tr-chip { position: relative; } .tr-chip:hover { border-color: var(--accent); } .tr-chip.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .tr-chip .ph { width: 40px; letter-spacing: 0; } .tr-chip .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .tr-chip .row { display: flex; align-items: baseline; gap: 8px; } .tr-chip .row .t { letter-spacing: .14em; color: var(--i45); } .tr-chip.is-on .row .t { color: var(--accent); } .tr-chip .artist { display: block; min-width: 0; font: 600 14px / 1.15 Archivo, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-chip .title { display: block; min-width: 0; font: 400 14px / 1.15 'Instrument Serif', serif; font-style: italic; color: var(--i55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-np { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; margin-top: 30px; padding-top: 24px; border-top: 2px solid var(--i35); } .tr-np-l { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); min-width: 0; } .tr-np-l .ph { width: clamp(92px, 10vw, 118px); } .tr-np-txt { display: flex; flex-direction: column; gap: 9px; min-width: 0; } .tr-np-txt .on { display: flex; align-items: center; gap: 9px; color: var(--accent); } .tr-np-txt .artist { display: block; min-width: 0; font: 700 clamp(28px, 3.4vw, 40px) / 1.05 'Bricolage Grotesque', sans-serif; letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-np-txt .title { font: 400 clamp(19px, 2vw, 24px) / 1.2 'Instrument Serif', serif; font-style: italic; color: var(--i75); } .tr-np-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .tr-time { display: flex; align-items: flex-end; justify-content: flex-end; gap: 20px; } .tr-time .num { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .tr-time .num b { font: 800 clamp(34px, 4vw, 46px) / 1 Orbitron, sans-serif; color: var(--accent); } .scrub { display: flex; align-items: flex-end; gap: 2px; height: 22px; cursor: pointer; } .scrub > span { flex: 1; height: var(--h); background: var(--i2); } .scrub > span:nth-child(-n+18) { background: var(--accent); } .tr-upnext { display: flex; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid var(--i16); } .tr-upnext .n { display: block; min-width: 0; font: 600 14px / 1.2 Archivo, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; } /* --- the shape, once it answers to the pointer ------------------------- */ /* the card above the shape moves onto the bar being read; while it is off the live track it drops the ember frame so the two states are told apart */ .tr-now { transition: left .12s ease; } .tr-now.is-held { border-color: var(--i35); } .tr-now.is-held .js-tn-when { color: var(--ink); } /* the bar being held keeps the pointer's highlight after the pointer leaves */ .bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .bar.is-held .up { background: var(--ink); } .bar.is-held .ax { background: var(--ink); } .bar.is-held .dn { background: var(--i35); } /* the panel at the foot, reading a track from earlier in the night */ .tr-np.is-held .tr-np-txt .on { color: var(--i55); } .tr-np.is-held .tr-np-txt .on .dot { animation: none; background: var(--i55); } .tr-np.is-held .tr-time .num b { color: var(--ink); } .js-tp-back { border: 0; background: none; letter-spacing: .14em; cursor: pointer; } /* ============================================================================ 14. Podcasts (archive) ========================================================================= */ .pc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--i18); margin-bottom: 22px; } .pc-filters { margin-bottom: 26px; } .pc-wrap { display: flex; gap: clamp(18px, 2.4vw, 40px); align-items: stretch; } .pc-side { flex: none; display: flex; gap: 14px; } .pc-word { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 clamp(30px, 3.4vw, 54px) / 1 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: var(--accent); } .pc-years { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 6px 0; border-right: 1px solid var(--i2); } .pc-years li { display: flex; align-items: center; gap: 8px; } .pc-years .y { letter-spacing: .12em; color: var(--i45); } .pc-years .c { letter-spacing: .1em; color: var(--i35); } .pc-years .b { display: block; width: var(--w); height: 2px; background: var(--i28); } /* a year the chosen series never reached: the row stays, dimmed, so the shape of the archive is still readable */ .pc-years li.is-off { opacity: .4; } .pc-years button { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; } .pc-years button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* the episode being read in the card above */ .ep.is-on .title { color: var(--accent); } /* the row that is sounding: its ring is filled, as the big button is */ .ep.is-playing .ring-btn { border-color: var(--accent); background: var(--accent); color: #fff; } .ring-btn.is-pause { font-size: 10px; letter-spacing: .06em; } .pc-empty { padding: 26px 0; font-size: 15px; line-height: 1.6; color: var(--i6); } /* the wave is the episode's position: the part already played is lit, and the whole strip takes a click or the arrow keys */ .pc-wave { cursor: pointer; } .pc-wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .pc-wave > span.is-done { background: var(--accent); } .pc-chapters .chip.is-on { border-color: var(--accent); color: var(--accent); } .pc-years li.is-on .y { color: var(--accent); } .pc-years li.is-on .b { height: 3px; background: var(--accent); } .pc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pc-feature { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 26px); padding-bottom: 26px; border-bottom: 2px solid var(--ink); } .pc-feature .ph { width: clamp(150px, 17vw, 200px); background: repeating-linear-gradient(135deg, var(--i10) 0 9px, var(--i16) 9px 18px); letter-spacing: .2em; } .pc-fb { display: flex; flex-direction: column; gap: 11px; min-width: 0; flex: 1; } .pc-fb .row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; } .pc-fb .no { font: 800 clamp(34px, 4vw, 48px) / 1 Orbitron, sans-serif; letter-spacing: -.03em; color: var(--accent); } .pc-fb h3 { font: 700 clamp(28px, 3.6vw, 42px) / .94 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; text-transform: uppercase; } .pc-fb .with { font: 400 clamp(18px, 1.9vw, 22px) / 1.15 'Instrument Serif', serif; font-style: italic; color: var(--i75); } .pc-fb p { max-width: 52ch; font: 400 14px / 1.55 Archivo, sans-serif; color: var(--i68); } .pc-play { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .pc-play-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .pc-wave { display: flex; align-items: flex-end; gap: 2px; height: 26px; cursor: pointer; } .pc-wave > span { flex: 1; height: var(--h); background: var(--i22); } /* the lit part used to be the first fourteen bars for the look of it; it is now the part actually played — see .is-done below */ .pc-play-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .pc-chapters { gap: 7px; margin-top: 6px; } .pc-month { display: flex; align-items: center; gap: 14px; padding: 22px 0 8px; } .pc-month .hr { flex: 1; height: 1px; background: var(--i16); } .ep { display: flex; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--i10); cursor: pointer; } .ep:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } .ep .no { flex: none; width: 44px; font: 800 15px / 1 Orbitron, sans-serif; color: var(--i4); } .ep .title { flex: none; font: 700 clamp(17px, 1.9vw, 26px) / 1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; } .ep .host { flex: none; font: 400 clamp(15px, 1.4vw, 19px) / 1.2 'Instrument Serif', serif; font-style: italic; color: var(--i7); white-space: nowrap; } .ep .w { flex: 1; min-width: 24px; display: flex; align-items: flex-end; gap: 2px; height: 14px; overflow: hidden; } .ep .w > span { width: 2px; flex: none; height: var(--h); background: var(--i12); } .ep .w > span.p { background: var(--i4); } .ep .len { flex: none; letter-spacing: .14em; color: var(--i5); } .pc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 20px; } /* ============================================================================ 15. Requests (postcard + queue + chat) ========================================================================= */ .rq-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 58px); align-items: start; } .rq-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; } /* the postcard is a fixed light surface: its ink stays dark in both themes */ .card { position: relative; background: #F4F1EC; border: 1px solid rgba(20, 17, 16, .16); box-shadow: 0 24px 54px var(--i28); transform: rotate(-1deg); color: #141110; } .card-perf { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px dashed rgba(20, 17, 16, .22); } .card-perf > span { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-dot); flex: none; } .card-body { position: relative; padding: clamp(22px, 2.6vw, 32px); } .card-corner { position: absolute; right: clamp(18px, 2vw, 26px); top: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; align-items: center; gap: 8px; } .card-stampw { width: 72px; height: 88px; border: 1px dashed rgba(20, 17, 16, .4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: rgba(20, 17, 16, .04); } .card-stampw .eq { height: 16px; color: rgba(20, 17, 16, .45); } .card-stampw .mono { letter-spacing: .14em; color: rgba(20, 17, 16, .55); } .card-seal { width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid var(--accent); display: grid; place-items: center; transform: rotate(-8deg); opacity: .9; } .card-seal > span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--accent); } .card-seal .mono { letter-spacing: .1em; color: var(--accent); } .card-seal .hr { width: 34px; height: 1px; background: var(--accent); } .card-form { display: flex; flex-direction: column; gap: 22px; padding-right: 110px; } .card-form .head { display: flex; flex-direction: column; gap: 8px; } .card-form .head .mono { color: rgba(20, 17, 16, .5); } .card-form h3 { font: 700 clamp(26px, 3.2vw, 38px) / .98 'Bricolage Grotesque', sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: #141110; } .card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; } .card-fields .field label { color: rgba(20, 17, 16, .5); } .card-fields .field input { border-bottom-color: rgba(20, 17, 16, .35); color: #141110; } .card-fields .field input::placeholder { color: rgba(20, 17, 16, .45); } .card-fields .field input:focus { border-bottom-color: var(--accent); } .card-fields .field--wide { grid-column: 1 / -1; } .card-act { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-top: 6px; border-top: 1px solid rgba(20, 17, 16, .18); } .card-act .mono { color: rgba(20, 17, 16, .5); letter-spacing: .14em; } .card-act .mono.faint { color: rgba(20, 17, 16, .4); } .btn-drop { padding: 16px 30px; background: var(--accent); color: #fff; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; } .btn-drop:hover { background: #141110; } .queue { display: flex; flex-direction: column; border: 1px solid var(--i14); } .queue-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--i14); } .queue li { display: flex; align-items: baseline; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--i10); } .queue li .no { flex: none; letter-spacing: .14em; color: var(--i4); } .queue li:first-child .no { color: var(--accent); } .queue li .tr { display: block; min-width: 0; font: 400 15px / 1.3 Archivo, sans-serif; color: var(--i75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .queue li .who { flex: none; margin-left: auto; letter-spacing: .12em; color: var(--i4); } .chat { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--i4); } .msg { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding-bottom: 13px; border-bottom: 1px solid var(--i14); } .msg .ava { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--i10); color: var(--i7); align-self: center; } .msg .body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .msg .nm { display: flex; align-items: baseline; gap: 9px; } .msg .nm .mono { letter-spacing: .14em; color: var(--i5); } .msg p { font: 400 15px / 1.45 Archivo, sans-serif; color: var(--i84); text-wrap: pretty; } .msg .time { color: var(--i45); letter-spacing: 0; } .msg.is-host .ava { background: var(--accent); color: #fff; } .msg.is-host .nm .mono { color: var(--accent); } .typing { display: flex; align-items: center; gap: 9px; } .typing .eq { color: var(--accent); } .chat-input { display: flex; align-items: center; gap: 12px; padding-top: 6px; } .chat-contacts { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-top: 14px; border-top: 1px solid var(--i16); } /* ============================================================================ 16. Footer — the broadcast-log sheet (footer handoff 32a) ------------------------------------------------------------------------ The field around the sheet is the page texture (var(--foot-bg)); the sheet itself stays dark in both themes, so inside it the inks are fixed white opacities. The bar under the sheet is on tokens — it must read in both. ========================================================================= */ .foot { background: var(--foot-bg); padding: 44px 40px; } .sheet { position: relative; background: #141416; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 22px 54px var(--i6); color: #f5f4f1; } .sheet .mono { color: rgba(255, 255, 255, .55); } .sheet .accent, .sheet .mono.accent { color: var(--accent); } .perf { display: flex; justify-content: space-between; padding: 12px 20px; border-bottom: 1px dashed rgba(255, 255, 255, .16); } .perf--b { border-bottom: 0; border-top: 1px dashed rgba(255, 255, 255, .16); } .perf > span { width: 12px; height: 12px; border-radius: 50%; /* a punched hole: through it the background behind the sheet shows (lighter in both themes because of the glow around the sheet); the paper's thickness throws a shadow into the top of the hole and the lower rim catches light */ background: radial-gradient(circle at 50% 45%, var(--hole) 0 40%, rgba(0, 0, 0, .7) 100%); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .95), inset 0 -1px 1px rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .05); } .sheet-in { padding: 26px 40px 34px; } .sheet-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 16px; border-bottom: 2px solid rgba(255, 255, 255, .5); } .sheet-brand { display: flex; align-items: flex-end; gap: 18px; } .sheet-brand img { height: clamp(34px, 3.4vw, 52px); width: auto; } .sheet-brand .mono { padding-bottom: 4px; } .sheet-date { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 22px; } .sheet-date > .mono { color: rgba(255, 255, 255, .6); } .sheet-onair { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(201, 80, 42, .55); color: var(--accent); } .sheet-onair .mono { color: var(--accent); } /* the log: flexible tracks — WHAT WENT OUT and HOST give way, the rest is content-sized */ .log-head, .log-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 110px) auto auto auto; gap: 12px; } .log-head { padding: 14px 0 8px; } .log-head .mono { letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .log-head .mono:nth-child(n+5) { text-align: right; } .log { display: flex; flex-direction: column; padding-bottom: 20px; } .log-row { position: relative; align-items: center; padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); transition: background .18s ease; } .log-row:hover { background: rgba(255, 255, 255, .04); } .log-row .t { letter-spacing: .08em; color: rgba(255, 255, 255, .6); } .log-row .what { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .log-row .nm { display: flex; align-items: center; gap: 12px; min-width: 0; } .log-row .nm b { display: block; min-width: 0; font: 600 15px / 1.3 Archivo, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log-row .nm .eq { color: var(--accent); } .log-row .bar { height: 2px; background: rgba(255, 255, 255, .12); } .log-row .bar > span { display: block; height: 2px; background: rgba(255, 255, 255, .35); } .log-row .h { letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log-row .g { letter-spacing: .06em; white-space: nowrap; } .log-row .p { letter-spacing: .1em; color: rgba(255, 255, 255, .5); white-space: nowrap; text-align: right; } .log-row .s { letter-spacing: .14em; color: rgba(255, 255, 255, .5); white-space: nowrap; text-align: right; } .log-row.is-live { padding-left: 12px; background: linear-gradient(90deg, rgba(201, 80, 42, .1), transparent 60%); } .log-row.is-live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); } .log-row.is-live .t, .log-row.is-live .nm b, .log-row.is-live .p { color: var(--accent); } .log-row.is-live .bar > span { background: var(--accent); } .log-row.is-live .s { color: #fff; background: var(--accent); padding: 4px 8px; text-align: center; } /* the shift 18:00—02:00 */ .shift { display: flex; flex-direction: column; gap: 9px; padding-bottom: 22px; } .shift .row { display: flex; align-items: baseline; gap: 14px; } .shift .band { position: relative; height: 26px; } .shift .blocks { position: absolute; inset: 0; display: flex; gap: 2px; } .shift .blk { height: 26px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; padding: 0 8px; min-width: 0; } /* a short programme gets a narrow block: its name is cut, not wrapped, so the band keeps one line of blocks whatever the night looks like */ .shift .blk .mono { letter-spacing: .04em; color: rgba(255, 255, 255, .6); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .shift .blk.is-on { background: var(--accent); } .shift .blk.is-on .mono { color: #fff; } .shift .needle { position: absolute; left: 53%; top: -6px; bottom: -6px; width: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .5); } .shift .ticks { display: flex; justify-content: space-between; } .shift .ticks > span { letter-spacing: .1em; color: rgba(255, 255, 255, .45); } /* the night in four numbers */ .tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); padding: 20px 0; border-top: 2px solid rgba(255, 255, 255, .5); border-bottom: 1px dashed rgba(255, 255, 255, .2); } .tally li { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .tally b { font: 800 clamp(24px, 2.6vw, 38px) / 1 Orbitron, sans-serif; color: #fff; } .tally b.accent { color: var(--accent); } .tally .lbl { letter-spacing: .2em; text-transform: uppercase; } .tally .bar { height: 3px; background: rgba(255, 255, 255, .12); } .tally .bar > span { display: block; height: 3px; background: rgba(255, 255, 255, .45); } .tally .bar > span.accent-bg { background: var(--accent); } .tally .of { letter-spacing: .14em; color: rgba(255, 255, 255, .5); text-wrap: pretty; } .sheet-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 2.6vw, 44px); padding-top: 24px; } .sheet-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .sheet-col h2 { font: 400 12px / normal 'DM Mono', monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } .sheet-col > a { font: 400 12px / normal 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .68); } .sheet-col > a:hover, .sheet-col address a:hover { color: var(--accent); } .sheet-col--studio { gap: 11px; } .sheet-col address { font: 400 12px / 1.5 'DM Mono', monospace; letter-spacing: .08em; color: rgba(255, 255, 255, .68); font-style: normal; display: flex; flex-direction: column; gap: 11px; overflow-wrap: anywhere; } .sheet-mail { display: flex; align-items: center; gap: 10px; padding-top: 8px; } .sheet-mail .rq { font-size: 14px; color: #fff; border-bottom-color: rgba(255, 255, 255, .5); } .sheet-mail .rq::placeholder { color: rgba(255, 255, 255, .62); } .sheet-social { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; } .sheet-social a { font: 400 12px / normal 'DM Mono', monospace; letter-spacing: .12em; color: rgba(255, 255, 255, .55); } .sheet-social a:hover { color: var(--accent); } .sheet-sign { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-top: 28px; } .sheet-sign .by { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sheet-sign .by .serif { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; color: #fff; } .stamp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; border: 2px solid var(--accent); color: var(--accent); transform: rotate(-4deg); } .stamp .mono { color: var(--accent); } .stamp .no { opacity: .75; } .teeth { display: flex; height: 12px; } .teeth > span { flex: 1; height: 12px; background: #141416; clip-path: polygon(0 0, 100% 0, 50% 100%); } .foot-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 18px; text-transform: uppercase; color: var(--i55); } .foot-bottom a { color: var(--i55); } .foot-bottom a:hover { color: var(--accent); } .foot-bottom .sep { letter-spacing: 0; color: var(--i28); } .foot-bottom .count { margin-left: auto; color: var(--accent); white-space: nowrap; } /* ============================================================================ 16b. HD desktops 1101–2000px — the header, hero and tuner fit one screen ------------------------------------------------------------------------ On a 1920×1080 monitor the vh-scaled hero pushed the tuner below the fold. Above 2000px nothing changes. ========================================================================= */ @media (min-width: 1101px) and (max-width: 2000px) { .btn-live { font-size: 17px; } .logo img { width: 201px; height: 50px; } /* same 281:70 proportion, smaller for HD screens */ .hero { padding: 14px 0 12px; } .hero-col { gap: 16px; transform: translateY(10px); } .hero-freq .num { font-size: clamp(52px, 7.6vw, 150px); } .hero-city h1 { font-size: clamp(28px, 3.6vw, 70px); } .hero-bone { font-size: clamp(24px, 2.9vw, 56px); } .hero-sub { font-size: clamp(15px, 1.15vw, 22px); margin-top: 6px; } .hero-facts { padding-top: 10px; } .hero-count { padding-top: 9px; } .pl { margin-top: 10px; gap: clamp(20px, 2.2vw, 36px); } .dial { width: clamp(120px, 8.2vw, 156px); } .pl-readout { margin-top: 6px; } .pl-main { gap: 9px; } .pl-track { font-size: clamp(20px, 1.8vw, 32px); } .wave { height: 24px; } .pl-foot { padding-top: 9px; } .shell:not(.shell--page) { padding-bottom: 22px; } /* the hero only; the breadcrumb strip stays flush */ } /* ============================================================================ 17. Responsive ≤1100px — the menu takes its own row ========================================================================= */ @media (max-width: 1100px) { .hd-top > .hide-m { display: none; } .hd-main { flex-wrap: wrap; row-gap: 14px; } .nav-wrap { order: 3; width: 100%; margin-left: 0; } .nav { justify-content: flex-start; } } /* ============================================================================ 18. Responsive ≤760px ========================================================================= */ /* ============================================================================ 19b. Ledger pieces shared by the inner pages (Archive, Podcasts) ------------------------------------------------------------------------ a section head with totals, group headings, row stripes, the round play button, the "show more" foot with its progress line ========================================================================= */ .ar-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 22px; margin-bottom: clamp(16px, 2vw, 26px); } .am-hl { display: flex; flex-direction: column; gap: 12px; } .ar-totals { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); } .ar-totals ul { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); } .ar-totals li { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ar-totals .mono { white-space: nowrap; } .ar-totals .orb { font-size: clamp(17px, 1.8vw, 26px); line-height: 1; white-space: nowrap; } .ar-csv { padding: 9px 13px; border: 1px solid var(--i28); color: var(--i7); white-space: nowrap; } .ar-csv:hover { border-color: var(--accent); color: var(--accent); } .ar-tag { padding: 3px 8px; background: var(--accent); color: #fff; flex: none; } .ar-gh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; padding: 14px 0 8px; } .ar-gh .rule { flex: 1; min-width: 20px; height: 1px; background: var(--i14); } .ar-st--accent { background: var(--accent); } .ar-st--i2 { background: var(--i2); } .ar-st--i28 { background: var(--i28); } .ar-st--i35 { background: var(--i35); } .ar-st--i42 { background: var(--i42); } .ar-st--i45 { background: var(--i45); } .ar-st--i55 { background: var(--i55); } .ar-btn { justify-self: end; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--i28); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; } .is-new .ar-btn, .is-on > .ar-btn { border-color: var(--accent); background: var(--accent); color: #fff; } .ar-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* the same ring when it is a link (to the archive): a link is inline, so the mark has to be centred the way a button centres its content */ a.ar-btn { display: grid; place-items: center; line-height: 1; text-decoration: none; } .ar-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: clamp(16px, 1.8vw, 24px); } .ar-more { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--accent); color: #fff; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; } .ar-more:hover { background: #E0663D; color: #fff; } :root:not([data-theme="dark"]) .ar-more:hover { background: #141110; } .ar-prog { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 6px; } .ar-prog .abar { height: 3px; background: var(--i14); } .ar-prog .abar > span { background: var(--accent); } /* ---- controls shared by the inner pages: a switch, a filter chip, a row head ---- */ .pa-h { font-size: clamp(24px, 3.2vw, 52px); line-height: .95; } .pe-rh { display: flex; align-items: baseline; gap: 12px; } .pe-new { display: flex; align-items: center; gap: 9px; margin-left: auto; } .pa-chip { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--i2); color: var(--i7); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; white-space: nowrap; } .pa-chip .c { opacity: .6; } .pa-chip.is-on { border-color: var(--accent); background: rgba(201, 80, 42, .14); color: var(--accent); } .pa-chip:hover { border-color: var(--accent); color: var(--accent); } .pa-switch { display: flex; align-items: center; gap: 9px; flex: none; cursor: pointer; } .pa-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pa-knob { position: relative; width: 34px; height: 18px; border-radius: 9px; background: var(--i2); flex: none; } .pa-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s ease; } .pa-switch input:checked + .pa-knob { background: var(--accent); } .pa-switch input:checked + .pa-knob::after { left: 18px; } .pa-switch input:focus-visible + .pa-knob { outline: 2px solid var(--accent); outline-offset: 3px; } .pa-switch--s .pa-knob { width: 32px; height: 17px; } .pa-switch--s .pa-knob::after { width: 13px; height: 13px; } .pa-switch--s input:checked + .pa-knob::after { left: 17px; } .ar-btn--32 { width: 32px; height: 32px; } .play-btn--46 { width: 46px; height: 46px; font-size: 15px; } .play-btn--52 { width: 52px; height: 52px; font-size: 16px; } /* ---- the application form shared by Shows and DJs (rules, stages, fields) ---- */ .bh-rules { display: flex; flex-direction: column; gap: 14px; flex: 1; } .bh-rules li { flex: 1; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-content: center; padding-bottom: 11px; border-bottom: 1px solid var(--i14); } .bh-rules p { font: 400 14px / 1.6 Archivo, sans-serif; color: var(--i84); text-wrap: pretty; } .bh-how { display: flex; flex-direction: column; gap: 11px; margin-top: auto; padding-top: 8px; } .bh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .bh-steps li { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; } .bh-steps i { display: block; height: 8px; background: var(--i2); } .bh-steps .mono { color: var(--i45); } .bh-steps .n { font: 600 13px / 1.25 Archivo, sans-serif; color: var(--ink); text-wrap: pretty; } .bh-steps li.is-on i { background: var(--accent); } .bh-steps li.is-on .mono, .bh-steps li.is-on .n { color: var(--accent); } .bh-fh { display: flex; align-items: baseline; gap: 12px; } .bh-fh .grot { font-size: clamp(18px, 1.9vw, 24px); line-height: 1; letter-spacing: -.035em; color: var(--ink); } .bh-form .field, .mx-form .field { gap: 7px; } .bh-form .field label, .mx-form .field label { letter-spacing: .24em; text-transform: uppercase; color: var(--i5); } .bh-form .field input, .mx-form .field input { padding: 6px 0; border-bottom-color: var(--i28); font-size: 16px; } .bh-form .lr, .mx-form .lr { display: flex; align-items: baseline; gap: 10px; } .bh-form .lr .mono:last-child, .mx-form .lr .mono:last-child { margin-left: auto; } .bh-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px); } .bh-row .field { flex: 1 1 160px; min-width: 0; } .bh-send { margin-top: 4px; justify-content: space-between; padding: 16px 22px; letter-spacing: .22em; } .bh-offer { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; border-top: 1px solid var(--i16); } .bh-offer li { display: flex; align-items: baseline; gap: 12px; } .bh-offer .v { margin-left: auto; white-space: nowrap; } /* ---- transport buttons shared by the inner pages ---- */ .pe-skip { flex: none; padding: 9px 11px; border: 1px solid var(--i28); color: var(--i75); text-transform: none; } .pe-skip:hover { border-color: var(--accent); color: var(--accent); } .play-btn--54 { width: 54px; height: 54px; font-size: 16px; } @media (max-width: 760px) { /* on a phone a fixed bar would eat a third of the screen, so the top menu rides with the page there and only sticks from tablet width up */ .hd { position: static; padding: 22px 18px 16px; } .hd--page::after { left: 18px; right: 18px; } .hd.is-stuck { background: transparent; box-shadow: none; } .shell, .shell--page { padding-top: 0; } .shell, .sec, .foot { padding-left: 18px; padding-right: 18px; } .divider { margin-left: 18px; margin-right: 18px; } .shell { min-height: auto; } .shell:not(.shell--page) { padding-bottom: 22px; } .hero-wrap { min-height: auto; } .hd { gap: 14px; } .hd-top > .hide-s { display: none; } .logo img { height: 42px; width: 169px; } .nav-wrap { overflow-x: auto; scrollbar-width: none; } .nav-wrap::-webkit-scrollbar { display: none; } .nav { flex-wrap: nowrap; gap: 18px; padding-bottom: 4px; font-size: 13px; } .nav .dd-panel a, .nav .dd-panel button { font-size: 13px; } /* the dropdown follows the menu on phones too */ .nav li.is-open > .dd { position: fixed; left: 18px; right: 18px; top: auto; padding-top: 0; } .btn-live { font-size: 13px; padding: 10px 14px; } .hero { padding-top: 24px; } .hero-col { width: 100%; transform: none; } .hero-air { flex-wrap: wrap; row-gap: 8px; } .hero-air .hr { flex-basis: 100%; order: 5; } .hero-air .meta { order: 6; } .chip { white-space: normal; text-align: left; } .pl { gap: 20px; } .dial { width: 200px; margin: 0 auto; } .pl-main { flex-basis: 100%; } .pl-line { flex-wrap: wrap; } .pl-line .count { margin-left: 0; } .ch-grid, .sc-grid, .tr-np, .rq-grid, .tally, .sheet-cols { grid-template-columns: minmax(0, 1fr); } .ch-grid--bottom { margin-top: 12px; } .stems, .axis { display: none; } .sc-live { height: auto; } .sc-ghost { display: none; } .sc-show h3 { font-size: clamp(34px, 11vw, 52px); } .sc-list { justify-content: flex-start; } .sh-wall .vlabel, .tr-wrap .vlabel { display: none; } .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .host, .note { --top: 0; margin-top: 12px; } .tr-slots { flex-wrap: wrap; gap: 8px; } .tr-slot { flex: 1 1 100%; } .tr-shape { padding-top: 110px; } .tr-now { left: 0; width: auto; } .bars { height: 120px; } .tr-time { justify-content: flex-start; } .pc-side { display: none; } .ep { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; grid-template-areas: "no title len play" "no host len play" "no wave wave wave"; } .ep .no { grid-area: no; width: auto; } .ep .title { grid-area: title; white-space: normal; } .ep .host { grid-area: host; white-space: normal; } .ep .pill { grid-area: host; justify-self: end; } .ep .w { grid-area: wave; } .ep .len { grid-area: len; } .ep .ring-btn { grid-area: play; } .card { transform: none; } .card-corner { position: static; flex-direction: row; justify-content: flex-end; margin-bottom: 18px; } .card-form { padding-right: 0; } .log-head { display: none; } .log-row { grid-template-columns: 62px minmax(0, 1fr); row-gap: 6px; } .log-row .h, .log-row .g, .log-row .p, .log-row .s { grid-column: 2; text-align: left; } .log-row.is-live .s { justify-self: start; } .shift .blk .mono { display: none; } .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet-sign .stamp { align-self: flex-start; } .pc-play { flex-wrap: wrap; } .pc-play-body { flex-basis: 100%; } } /* ============================================================================ 19. Responsive ≤420px ========================================================================= */ @media (max-width: 420px) { .hd-top { gap: 10px; } .hd-top > .push { margin-left: 0; } .hero-title { flex-direction: column; gap: 14px; } .hero-seam { display: none; } .hero-city .tag { gap: 10px; } .pl-foot { gap: 12px; } .pl-foot .save { margin-left: 0; } .sh-grid { gap: 12px; } .sc-next-card { flex-basis: 100%; } .sc-row { grid-template-columns: 52px minmax(0, 1fr) 30px; gap: 10px; } .sc-row .nm { flex-wrap: wrap; } .card-fields { grid-template-columns: minmax(0, 1fr); } .msg { grid-template-columns: 30px minmax(0, 1fr); } .msg .time { grid-column: 2; } .tally { grid-template-columns: minmax(0, 1fr); } .sheet-cols { gap: 24px; } }