/* amfmradio.ai — one design system across the station, the request line and the plan. * * The look is a receiver faceplate: brushed aluminium in light, graphite in dark, * and exactly one saturated colour — the tally red — spent only on things that are * genuinely live: the ON AIR lamp, the dial needle, a playing transport, a vote you * have cast. Everything else is ink on metal. * * Mobile first throughout. Every rule here is written for a phone held in one hand; * the two media queries at the bottom are the only places a wider screen is assumed. */ /* One committed look, night only. The station used to follow the system theme and * came out brushed aluminium in daylight; it now paints its own dark and never * asks the OS. Three neons carry meaning and are never swapped around: * * pink — the thing you press, and the thing that is playing * blue — where you are and where you can go: links, the live tab, progress * green — it is on / it is good: the ON AIR lamp, verified, queued */ :root { color-scheme: dark; --ground: #070912; --panel: #0E1224; --panel-2: #121732; --ink: #EDF1FF; --ink-soft: #B7C2E4; --dim: #7A87AE; --rule: rgba(130,165,255,.16); --rule-strong: rgba(130,165,255,.34); --tally: #FF3FB4; /* neon pink — action */ --tally-ink: #0A0616; --tally-glow: rgba(255,63,180,.38); --blue: #47B8FF; /* neon blue — navigation */ --blue-glow: rgba(71,184,255,.36); --meter: #2BE08F; /* neon green — live, good */ --meter-glow: rgba(43,224,143,.34); /* Depth is one recipe everywhere: a lit top edge, a soft ambient drop, and a long dark shadow that keeps the panel off the background. */ --shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.45), 0 22px 48px -28px rgba(0,0,0,.95); --glass: rgba(9,12,26,.74); --r: 16px; /* panels */ --r-sm: 11px; /* controls, inputs, small chips */ --r-lg: 24px; /* the cover, the big surfaces */ --tap: 2.75rem; /* nothing tappable is ever smaller than this */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Newsreader", Georgia, "Songti SC", serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } .sans { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; } /* Language switch: both languages ship in the markup and the root attribute decides which one is spoken. No round trip, no flash of the wrong language. */ :root[data-lang="en"] [lang="zh"] { display: none; } :root[data-lang="zh"] [lang="en"] { display: none; } [lang="zh"] { font-family: "Newsreader", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; } .wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1.15rem; } /* ---------------------------------------------------------------- chrome */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--rule); } .topbar-in { display: flex; align-items: center; gap: .75rem; min-height: 3rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; } .wordmark { color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; } .topbar .spacer { flex: 1 1 auto; } .tally { display: inline-flex; align-items: center; gap: .4rem; color: var(--tally); white-space: nowrap; } .lamp { width: .45rem; height: .45rem; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 3px var(--tally-glow); } @media (prefers-reduced-motion: no-preference) { .lamp { animation: lamp 3.2s ease-in-out infinite; } @keyframes lamp { 0%,100% { opacity: 1 } 50% { opacity: .4 } } } .langbtn { appearance: none; background: none; border: 1px solid var(--rule-strong); color: var(--dim); border-radius: 2px; padding: .3rem .5rem; cursor: pointer; font: inherit; letter-spacing: .1em; min-height: 1.9rem; } .langbtn:hover { color: var(--ink); border-color: var(--ink); } .langbtn:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; } /* horizontal, thumb-scrollable nav — a phone should never need a hamburger for five links */ .nav { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); background: var(--panel); padding: 0 1.15rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; } .nav::-webkit-scrollbar { display: none; } .nav a { color: var(--dim); text-decoration: none; white-space: nowrap; padding: .8rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tally); } /* ------------------------------------------------------------------ dial */ .dial { position: relative; height: 2.6rem; margin: 1.1rem 0 .25rem; } .dial-scale { position: absolute; inset: auto 0 .9rem; height: .85rem; background-image: repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 100%), repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 20%); background-size: 20% 100%, 4% 55%; background-position: bottom left; background-repeat: repeat-x; border-bottom: 1px solid var(--rule-strong); } .dial-marks { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .58rem; letter-spacing: .1em; color: var(--dim); } .needle { position: absolute; top: .9rem; bottom: .7rem; width: 2px; background: var(--tally); box-shadow: 0 0 6px var(--tally-glow); transform: translateX(-1px); transition: left .12s linear; } .needle::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--tally); } /* ------------------------------------------------------------- typography */ h1 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 8vw, 2.9rem); line-height: 1.07; letter-spacing: -.022em; text-wrap: balance; margin: .9rem 0 .4rem; } h2 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: clamp(1.25rem, 5vw, 1.6rem); line-height: 1.18; letter-spacing: -.014em; text-wrap: balance; margin: 0 0 .5rem; } h3 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 1rem; margin: 0 0 .2rem; } p { margin: 0 0 .95rem; } p:last-child { margin-bottom: 0; } .lede { font-size: 1.06rem; color: var(--ink-soft); } a { color: var(--ink); text-underline-offset: .18em; text-decoration-color: var(--rule-strong); } a:hover { text-decoration-color: var(--tally); } .eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; } .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); } section { padding: 1.9rem 0; border-top: 1px solid var(--rule); } section.first { border-top: none; } /* ----------------------------------------------------------------- cards */ .card { background: var(--panel-2); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); padding: .95rem 1rem 1.05rem; } .card + .card { margin-top: .8rem; } .metaline { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: .3rem; } .subline { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .66rem; color: var(--dim); margin: 0 0 .75rem; } /* ------------------------------------------------------------- transport */ .transport { display: flex; align-items: center; gap: .8rem; } .play { flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--panel); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s, color .15s; } .play:hover { border-color: var(--tally); color: var(--tally); } .play:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; } .play svg { width: 1rem; height: 1rem; fill: currentColor; } .card[data-playing="true"] { border-color: var(--tally); } .card[data-playing="true"] .play { background: var(--tally); border-color: var(--tally); color: var(--tally-ink); } .track { flex: 1 1 auto; min-width: 0; } .scrub { position: relative; height: 3px; background: var(--rule); border-radius: 2px; cursor: pointer; margin: .1rem 0 .4rem; } .scrub::before { content: ""; position: absolute; inset: -12px 0; } /* fat thumb target */ .scrub-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tally); border-radius: 2px; } .scrub:focus-visible { outline: 2px solid var(--tally); outline-offset: 6px; } .readout { display: flex; justify-content: space-between; gap: .5rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .66rem; color: var(--dim); font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- forms */ label.field { display: block; margin: 0 0 .85rem; } label.field > span { display: block; margin-bottom: .3rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } input[type="tel"], input[type="text"], textarea { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--rule-strong); border-radius: 3px; padding: .7rem .75rem; min-height: var(--tap); } input[inputmode="numeric"] { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .5em; font-size: 1.35rem; text-align: center; } textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; } input:focus, textarea:focus { outline: 2px solid var(--tally); outline-offset: 1px; border-color: var(--tally); } .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: var(--tap); padding: .7rem 1rem; cursor: pointer; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: .95rem; font-weight: 600; background: var(--ink); color: var(--ground); border: 1px solid var(--ink); border-radius: 3px; transition: opacity .15s; } .btn:hover { opacity: .88; } .btn:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; } .btn[disabled] { opacity: .45; cursor: default; } .btn.ghost { background: none; color: var(--ink); border-color: var(--rule-strong); font-weight: 500; } .btn.tally { background: var(--tally); border-color: var(--tally); color: var(--tally-ink); } .btn.link { background: none; border: none; color: var(--dim); width: auto; min-height: 2rem; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; } .note { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; color: var(--dim); margin: .55rem 0 0; line-height: 1.5; } .msg { margin: .7rem 0 0; font-size: .95rem; } .msg.bad { color: var(--tally); } .msg.good { color: var(--meter); } .demo { margin: .8rem 0 0; padding: .7rem .8rem; border: 1px dashed var(--tally); border-radius: 3px; background: var(--tally-glow); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem; line-height: 1.55; } .demo b { font-size: 1.15rem; letter-spacing: .18em; } /* ------------------------------------------------------------- the board */ .counts { display: flex; gap: 1.4rem; flex-wrap: wrap; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .06em; color: var(--dim); margin: 0 0 1rem; } .counts b { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; } .req { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 0; border-top: 1px solid var(--rule); } .req:first-child { border-top: none; } .vote { flex: none; width: 3.1rem; min-height: 3.1rem; border-radius: 3px; cursor: pointer; border: 1px solid var(--rule-strong); background: var(--panel); display: grid; place-items: center; gap: 0; padding: .3rem 0; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); } .vote .n { font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .vote .cap { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .vote[aria-pressed="true"] { background: var(--tally); border-color: var(--tally); color: var(--tally-ink); } .vote[aria-pressed="true"] .cap { color: var(--tally-ink); opacity: .8; } .vote:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; } .req-body { flex: 1 1 auto; min-width: 0; } .req-cat { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 1.02rem; } .req-detail { font-size: .95rem; color: var(--ink-soft); margin: .15rem 0 0; } .req-who { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .64rem; letter-spacing: .08em; color: var(--dim); margin: .35rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .pill { display: inline-block; padding: .1rem .4rem; border-radius: 2px; border: 1px solid var(--rule-strong); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; } .pill.mine { border-color: var(--tally); color: var(--tally); } .pill.queued { border-color: var(--meter); color: var(--meter); } .pill.aired { border-color: var(--rule-strong); color: var(--dim); } .empty { color: var(--dim); font-size: .95rem; padding: 1.2rem 0; } /* ------------------------------------------------------------------ misc */ .rail { display: grid; } .rail-row { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .75rem 0; border-top: 1px solid var(--rule); } .rail-row:last-child { border-bottom: 1px solid var(--rule); } .rail-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .rail-v { font-size: .98rem; } blockquote { margin: 1rem 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--tally); font-size: 1.02rem; } blockquote cite { display: block; margin-top: .4rem; font-style: normal; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .status { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .status li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: baseline; font-size: .98rem; } .status .mk { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem; } .status .on .mk { color: var(--meter); } .status .off .mk { color: var(--dim); } .status .off { color: var(--ink-soft); } .callout { background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--tally); border-radius: 2px; padding: .9rem 1rem; margin: 1.1rem 0 0; font-size: .96rem; } .callout .lbl { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tally); margin-bottom: .35rem; } .chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: .6rem 0 0; } .chip { appearance: none; cursor: pointer; background: var(--panel); color: var(--ink-soft); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .4rem .7rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; min-height: 2rem; } .chip:hover { border-color: var(--tally); color: var(--tally); } .chip:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; } .grid2 { display: grid; gap: .8rem; } footer { border-top: 1px solid var(--rule); margin-top: 1.2rem; padding: 1.4rem 0 2.6rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: grid; gap: .4rem; } footer a { color: inherit; } @media (min-width: 34rem) { body { font-size: 18px; } .grid2 { grid-template-columns: 1fr 1fr; } .rail-row { grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; } } @media (min-width: 48rem) { .wrap { padding: 0 1.5rem; } .dial { height: 3.8rem; } } /* ------------------------------------------------------------- installed app * * The station is a website that can be kept. These rules cover the two states a * browser tab never has: the install offer, and life with no browser chrome — * where the page has to paint its own status-bar strip and respect the gesture * bar. In a normal tab the standalone block below does nothing at all. */ .installbtn { appearance: none; cursor: pointer; font: inherit; display: none; /* shown by station.js only when installable */ align-items: center; gap: .35rem; background: none; border: 1px solid var(--tally); color: var(--tally); border-radius: 2px; padding: .3rem .5rem; min-height: 1.9rem; letter-spacing: .1em; } .installbtn[data-on] { display: inline-flex; } .installbtn:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; } /* iOS has no install API — Safari only offers it from the share sheet, so all we can do is point at it. One line, dismissible, never shown twice. */ .a2hs { position: fixed; left: .7rem; right: .7rem; z-index: 40; bottom: calc(.7rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .6rem; background: var(--panel-2); border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: var(--shadow); padding: .7rem .8rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; line-height: 1.5; color: var(--ink-soft); } .a2hs .mark { color: var(--tally); } .a2hs button { appearance: none; background: none; border: none; cursor: pointer; color: var(--dim); font: inherit; padding: .3rem .2rem; margin-left: auto; } /* A new deploy landed while the shell was open. Never reload underneath the reader — offer it, and let a tap take it. */ .sw-toast { position: fixed; left: .7rem; right: .7rem; z-index: 41; bottom: calc(.7rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .7rem; background: var(--ink); color: var(--ground); border-radius: 4px; box-shadow: var(--shadow); padding: .65rem .8rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; } .sw-toast button { appearance: none; cursor: pointer; font: inherit; margin-left: auto; background: var(--tally); color: var(--tally-ink); border: none; border-radius: 2px; padding: .35rem .6rem; letter-spacing: .08em; } @media (min-width: 34rem) { .a2hs, .sw-toast { left: auto; right: 1rem; max-width: 26rem; } } @media (display-mode: standalone), (display-mode: minimal-ui) { /* No URL bar above us any more: the topbar owns the notch. The top strip is gone here — the tab bar at the bottom is the navigation in an app window. */ .topbar { padding-top: env(safe-area-inset-top); } .wrap { padding-left: max(1.15rem, env(safe-area-inset-left)); padding-right: max(1.15rem, env(safe-area-inset-right)); } .installbtn, .a2hs { display: none !important; } /* already kept */ /* Nothing to select on the frame of an app. Body copy stays selectable. */ .topbar, .nav, .dial { -webkit-user-select: none; user-select: none; } } /* ================================================================ the deck * * One transport for the whole station, docked at the bottom, with the tab bar * under it. Together they are the app frame: the parts that stay put while the * pages change behind them. */ :root { --tabh: 0rem; --deckh: 3.5rem; } .deck { position: fixed; left: 0; right: 0; z-index: 29; bottom: calc(var(--tabh) + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .7rem; min-height: var(--deckh); padding: .45rem .9rem; background: var(--panel); border-top: 1px solid var(--rule); box-shadow: 0 -10px 30px -22px rgba(0,0,0,.7); } .deck[hidden] { display: none; } .deck-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rule); } .deck-line i { display: block; height: 100%; width: 0; background: var(--tally); transition: width .2s linear; } .deck-art { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 2px; overflow: hidden; border: 1px solid var(--rule); } .deck-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .deck-meta { flex: 1 1 auto; min-width: 0; display: block; text-decoration: none; color: inherit; } .deck-meta strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deck-meta span { display: block; margin-top: .1rem; color: var(--dim); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deck-play { flex: none; appearance: none; cursor: pointer; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--tally); border: none; color: var(--tally-ink); display: grid; place-items: center; } .deck-play svg { width: .85rem; height: .85rem; fill: currentColor; } .deck-play:focus-visible { outline: 2px solid var(--tally); outline-offset: 3px; } body.has-deck { padding-bottom: calc(var(--tabh) + var(--deckh) + env(safe-area-inset-bottom)); } /* ------------------------------------------------------------- the tab bar */ .tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: repeat(5, 1fr); background: var(--panel); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; min-height: 3.4rem; padding: .4rem 0 .35rem; color: var(--dim); text-decoration: none; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; } .tabbar svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tabbar a[aria-current="page"] { color: var(--tally); } .tabbar a:focus-visible { outline: 2px solid var(--tally); outline-offset: -3px; } /* On a phone the bottom bar replaces the top strip; a wide screen keeps the strip and never sees the tab bar at all. */ @media (max-width: 33.99rem) { :root { --tabh: 3.4rem; } .tabbar { display: grid; } .nav { display: none; } body { padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom)); } } @media (display-mode: standalone), (display-mode: minimal-ui) { :root { --tabh: 3.4rem; } .tabbar { display: grid; } .nav { display: none; } body { padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom)); } } /* Both floating notices have to clear the frame. */ .a2hs, .sw-toast { bottom: calc(var(--tabh) + .7rem + env(safe-area-inset-bottom)); } body.has-deck .a2hs, body.has-deck .sw-toast { bottom: calc(var(--tabh) + var(--deckh) + .7rem + env(safe-area-inset-bottom)); } /* ============================================================ now playing * * The listen page: cover, transport, and what is queued behind it. This is the * screen a radio app opens to, so it is the one screen that is all controls. */ .np { text-align: center; padding-top: .4rem; } .np-art { width: min(74vw, 19rem); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow); background: #0c0c0e; } .np-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .np-kicker { margin-top: 1rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tally); display: flex; align-items: center; justify-content: center; gap: .45rem; } .np h1 { font-size: 1.3rem; line-height: 1.3; margin: .5rem 0 .25rem; } .np-sub { color: var(--dim); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .66rem; letter-spacing: .06em; } .np-scrub { margin: 1.1rem 0 .3rem; cursor: pointer; padding: .5rem 0; } .np-scrub .bed { height: 3px; background: var(--rule); border-radius: 2px; } .np-scrub .fill { height: 100%; width: 0; background: var(--tally); border-radius: 2px; } .np-times { display: flex; justify-content: space-between; color: var(--dim); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .62rem; } .np-controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: .7rem; } .np-controls button { appearance: none; cursor: pointer; border: none; background: none; color: var(--ink); font: inherit; } .np-controls .skip { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--rule-strong); display: grid; place-items: center; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .58rem; color: var(--ink-soft); } .np-controls .big { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--tally); color: var(--tally-ink); display: grid; place-items: center; } .np-controls .big svg { width: 1.3rem; height: 1.3rem; fill: currentColor; } .np-controls button:focus-visible { outline: 2px solid var(--tally); outline-offset: 3px; } /* Five bars that move only while sound is actually coming out. */ .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .7rem; } .eq i { width: 2px; height: 30%; background: var(--tally); } body[data-onair="true"] .eq i { animation: eq .9s ease-in-out infinite; } body[data-onair="true"] .eq i:nth-child(2) { animation-delay: .15s; } body[data-onair="true"] .eq i:nth-child(3) { animation-delay: .3s; } body[data-onair="true"] .eq i:nth-child(4) { animation-delay: .45s; } body[data-onair="true"] .eq i:nth-child(5) { animation-delay: .6s; } @keyframes eq { 0%, 100% { height: 25% } 50% { height: 100% } } @media (prefers-reduced-motion: reduce) { body[data-onair="true"] .eq i { animation: none; height: 60%; } } /* The queue under the player: every row is a tap that loads the deck. */ .row { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem 0; border: none; border-top: 1px solid var(--rule); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; } .row:first-child { border-top: none; } .row .rowart { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 2px; overflow: hidden; border: 1px solid var(--rule); background: #0c0c0e; } .row .rowart img { width: 100%; height: 100%; object-fit: cover; display: block; } .row .rowmeta { min-width: 0; flex: 1 1 auto; } .row .rowmeta strong { display: block; font-size: .92rem; font-weight: 600; line-height: 1.3; } .row .rowmeta span { display: block; margin-top: .15rem; color: var(--dim); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .06em; } .row .rowplay { flex: none; color: var(--tally); } .row .rowplay svg { width: .8rem; height: .8rem; fill: currentColor; } .row[data-on="true"] .rowmeta strong { color: var(--tally); } /* =========================================================== the neon skin * * Everything above is structure; this is the surface. Rules here deliberately * come last so they win without touching the layout that was already agreed: * same boxes, same order, new material — rounded, lit from above, and glowing * where the station is actually doing something. */ /* ------------------------------------------------------------- the ground */ body { background: radial-gradient(1100px 720px at 10% -10%, rgba(71,184,255,.20), transparent 62%), radial-gradient(900px 640px at 102% 4%, rgba(255,63,180,.18), transparent 64%), radial-gradient(820px 700px at 46% 112%, rgba(43,224,143,.14), transparent 62%), var(--ground); background-attachment: fixed; } /* A faint engineering grid, fading out before it reaches the reading column. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(140,175,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(140,175,255,.05) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%); } ::selection { background: var(--tally-glow); color: var(--ink); } a { color: var(--blue); text-decoration-color: rgba(71,184,255,.45); } a:hover { text-decoration-color: var(--blue); } h1, h2 { letter-spacing: -.01em; } .eyebrow { color: var(--blue); } .eyebrow::after { background: linear-gradient(90deg, var(--blue-glow), rgba(255,63,180,.18) 55%, transparent); height: 1px; } section { border-top-color: var(--rule); } /* ------------------------------------------------- the bars: frosted glass */ .topbar, .nav, .tabbar, .deck { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-color: var(--rule); } .topbar { box-shadow: 0 12px 30px -26px #000; } .nav a { color: var(--dim); } .nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); text-shadow: 0 0 18px var(--blue-glow); } /* The lamp is the one green thing on most screens: it means sound is possible. */ .lamp { background: var(--meter); box-shadow: 0 0 0 3px var(--meter-glow), 0 0 14px var(--meter); } .tally { color: var(--tally); } .wordmark { letter-spacing: .06em; } .langbtn, .installbtn { border-radius: 999px; border-color: var(--rule-strong); color: var(--ink-soft); background: rgba(255,255,255,.03); } .langbtn:hover { color: var(--blue); border-color: var(--blue); box-shadow: 0 0 16px -4px var(--blue-glow); } .installbtn { border-color: var(--tally); color: var(--tally); box-shadow: 0 0 18px -6px var(--tally-glow); } /* ------------------------------------------------------ the tab bar, lit up */ .tabbar { border-top: 1px solid var(--rule); } .tabbar a { position: relative; color: var(--dim); } .tabbar a[aria-current="page"] { color: var(--blue); } .tabbar a[aria-current="page"] svg { filter: drop-shadow(0 0 8px var(--blue-glow)); } /* the lit rail over the active tab */ .tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--blue), transparent); box-shadow: 0 0 12px var(--blue); } /* --------------------------------------------------- panels: round and lit */ .card, .tile, .callout, .demo, .np-art, .a2hs, .sw-toast, .vote, .deck-art, .rowart { border-radius: var(--r); } .card, .tile, .callout, .demo { background: linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 42%, rgba(255,255,255,0) 78%), var(--panel-2); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover, .tile:hover { transform: translateY(-2px); border-color: var(--rule-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 4px 10px rgba(0,0,0,.5), 0 30px 60px -30px rgba(71,184,255,.35); } .card[data-playing="true"] { border-color: var(--tally); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px var(--tally-glow), 0 26px 60px -30px var(--tally-glow); } /* The channel grid rotates through the three neons so the page reads as a board of stations rather than five identical boxes. */ .tile { --accent: var(--blue); position: relative; overflow: hidden; } .tile:nth-child(3n+2) { --accent: var(--tally); } .tile:nth-child(3n+3) { --accent: var(--meter); } .tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .85; } .tile .emoji { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--rule), 0 0 22px -8px var(--accent); } .tile strong { color: var(--ink); } .callout { border-left: 2px solid var(--tally); } .callout .lbl { color: var(--tally); } .demo b { color: var(--meter); text-shadow: 0 0 20px var(--meter-glow); } /* --------------------------------------------------------- the transports */ .play, .deck-play, .np-controls .big, .np-controls .skip { border-radius: 999px; } .play { background: rgba(255,255,255,.05); border-color: var(--rule-strong); color: var(--ink); } .play:hover { border-color: var(--tally); color: var(--tally); box-shadow: 0 0 22px -6px var(--tally-glow); } .card[data-playing="true"] .play, .deck-play, .np-controls .big { background: linear-gradient(150deg, #FF6BC7, var(--tally) 55%, #C81E8C); border: none; color: #14061A; box-shadow: 0 8px 22px -10px var(--tally-glow), 0 0 26px -6px var(--tally-glow), inset 0 1px 0 rgba(255,255,255,.35); } .np-controls .big { box-shadow: 0 14px 34px -14px var(--tally-glow), 0 0 44px -10px var(--tally-glow), inset 0 1px 0 rgba(255,255,255,.35); } .np-controls .skip { border-color: var(--rule-strong); color: var(--ink-soft); background: rgba(255,255,255,.04); } .np-controls .skip:hover { color: var(--blue); border-color: var(--blue); box-shadow: 0 0 20px -6px var(--blue-glow); } /* Progress is always blue → pink: it starts as navigation and ends as the thing that is playing. */ .scrub, .np-scrub .bed, .deck-line { background: rgba(140,175,255,.14); border-radius: 999px; } .scrub-fill, .np-scrub .fill, .deck-line i { background: linear-gradient(90deg, var(--blue), var(--tally)); border-radius: 999px; box-shadow: 0 0 12px -2px var(--tally-glow); } .np-scrub .bed { height: 4px; } .row { border-top-color: var(--rule); } .row:hover .rowmeta strong { color: var(--blue); } .row[data-on="true"] .rowmeta strong { color: var(--tally); text-shadow: 0 0 20px var(--tally-glow); } .row[data-on="true"] .rowart { box-shadow: 0 0 0 1px var(--tally), 0 0 24px -8px var(--tally-glow); } .rowart, .deck-art { border-color: var(--rule); } /* -------------------------------------------------------------- controls */ .btn { border-radius: 999px; } .btn { background: linear-gradient(135deg, var(--blue), #7C5CFF 48%, var(--tally)); color: #060A18; border: none; box-shadow: 0 10px 26px -14px var(--blue-glow), 0 0 30px -12px var(--tally-glow), inset 0 1px 0 rgba(255,255,255,.35); } .btn:hover { opacity: 1; filter: brightness(1.08); } .btn.tally { background: linear-gradient(135deg, #FF6BC7, var(--tally) 60%, #B81880); color: #14061A; border: none; } .btn.ghost { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: none; } .btn.ghost:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 22px -8px var(--blue-glow); } .btn.link { background: none; box-shadow: none; color: var(--blue); } input[type="tel"], input[type="text"], input[inputmode="numeric"], textarea { border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid var(--rule-strong); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } input::placeholder, textarea::placeholder { color: var(--dim); } input:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(71,184,255,.22), inset 0 1px 0 rgba(255,255,255,.06); } .chip, .pill { border-radius: 999px; } .chip { background: rgba(255,255,255,.04); border-color: var(--rule-strong); color: var(--ink-soft); } .chip:hover { color: var(--blue); border-color: var(--blue); box-shadow: 0 0 20px -8px var(--blue-glow); } .pill { padding: .14rem .5rem; border-color: var(--rule-strong); color: var(--dim); } .pill.mine { border-color: var(--tally); color: var(--tally); box-shadow: 0 0 16px -8px var(--tally-glow); } .pill.queued { border-color: var(--meter); color: var(--meter); box-shadow: 0 0 16px -8px var(--meter-glow); } .vote { background: rgba(255,255,255,.04); border-color: var(--rule-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .vote:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 24px -10px var(--blue-glow); } .vote[aria-pressed="true"] { background: linear-gradient(150deg, #FF6BC7, var(--tally) 60%, #C81E8C); border-color: transparent; color: #14061A; box-shadow: 0 0 26px -8px var(--tally-glow), inset 0 1px 0 rgba(255,255,255,.35); } .req { border-top-color: var(--rule); } /* ------------------------------------------------------- the listen screen */ .np-art { border-radius: var(--r-lg); border: 1px solid var(--rule); box-shadow: 0 0 0 1px rgba(71,184,255,.18), 0 30px 70px -34px var(--blue-glow), 0 20px 60px -30px var(--tally-glow), inset 0 1px 0 rgba(255,255,255,.10); } body[data-onair="true"] .np-art { box-shadow: 0 0 0 1px var(--tally-glow), 0 34px 80px -30px var(--tally-glow), 0 20px 60px -30px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.12); } .np-kicker { color: var(--tally); text-shadow: 0 0 22px var(--tally-glow); } body[data-onair="true"] .np-kicker { color: var(--meter); text-shadow: 0 0 22px var(--meter-glow); } .np h1 { text-shadow: 0 2px 30px rgba(0,0,0,.6); } /* The bars run blue → pink across the five, so the meter itself is the palette. */ .eq i:nth-child(1) { background: var(--blue); box-shadow: 0 0 8px var(--blue); } .eq i:nth-child(2) { background: #7C5CFF; box-shadow: 0 0 8px #7C5CFF; } .eq i:nth-child(3) { background: var(--tally); box-shadow: 0 0 8px var(--tally); } .eq i:nth-child(4) { background: #FF7BD0; box-shadow: 0 0 8px #FF7BD0; } .eq i:nth-child(5) { background: var(--meter); box-shadow: 0 0 8px var(--meter); } body[data-onair="true"] .np-kicker .eq i { opacity: 1; } /* ---------------------------------------------------------------- the dial */ .dial-scale { background-image: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 8px); opacity: .8; } .needle { background: var(--blue); box-shadow: 0 0 14px var(--blue); } .needle::after { background: var(--tally); box-shadow: 0 0 14px var(--tally); } .dial-marks { color: var(--dim); } /* ----------------------------------------------------------------- floats */ .a2hs, .sw-toast { border-radius: var(--r); } .a2hs { background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); } .a2hs .mark { color: var(--meter); text-shadow: 0 0 12px var(--meter-glow); } .sw-toast { background: linear-gradient(140deg, #141A33, #0C1024); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); } .sw-toast button { border-radius: 999px; background: linear-gradient(135deg, var(--blue), var(--tally)); color: #060A18; } /* ------------------------------------------------------------------- misc */ blockquote { border-left-color: var(--tally); } .msg.bad { color: var(--tally); } .msg.good { color: var(--meter); } .status .on .mk { color: var(--meter); text-shadow: 0 0 12px var(--meter-glow); } .rail-row, .rail-row:last-child { border-color: var(--rule); } footer { border-top-color: var(--rule); } .empty { color: var(--dim); } /* Depth costs motion; a reader who asked for less gets the colour without it. */ @media (prefers-reduced-motion: reduce) { .card, .tile { transition: none; } .card:hover, .tile:hover { transform: none; } } /* ============================================================ the spectrum * * Two canvases, one signal (see spectrum.js). The dial keeps its printed scale * underneath: when the station is quiet you see a tuner, when it plays you see * the band light up over it. */ /* width:100% is not decoration — a is a replaced element, so left/right alone leave it at its intrinsic size instead of stretching across the dial. */ .dial { height: 3.4rem; } /* room for the bars under the band labels */ .dial-spectrum { position: absolute; left: 0; bottom: .75rem; width: 100%; height: 1.5rem; display: block; pointer-events: none; z-index: 1; } .needle { z-index: 2; } .np-spectrum { display: block; width: 100%; height: 4.6rem; margin: .9rem 0 -.3rem; pointer-events: none; } /* The five bars beside "now playing" are driven by the analyser once it exists; the CSS loop is only there for the moment before the first play. */ body.eq-live .eq i { animation: none !important; transition: height .08s linear; } /* ====================================================== page transitions * * Cross-document view transitions: the frame (top bar, tab bar, deck) is named * so the browser carries it across instead of cross-fading it, and only the * page body moves. Browsers without the API simply navigate, as before. */ @view-transition { navigation: auto; } .topbar { view-transition-name: frame-top; } .tabbar { view-transition-name: frame-tabs; } .deck { view-transition-name: frame-deck; } main { view-transition-name: page; } ::view-transition-group(*) { animation-duration: .3s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } ::view-transition-old(page) { animation: pageOut .17s ease both; } ::view-transition-new(page) { animation: pageIn .32s cubic-bezier(.2, .7, .2, 1) both; } @keyframes pageOut { to { opacity: 0; transform: translateY(-8px) scale(.994); filter: blur(3px); } } @keyframes pageIn { from { opacity: 0; transform: translateY(12px) scale(.994); filter: blur(4px); } } /* ------------------------------------------------------------ small physics */ .tabbar a svg { transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), filter .18s; } .tabbar a[aria-current="page"] svg { transform: translateY(-2px) scale(1.08); } .tabbar a:active svg { transform: scale(.92); } .np-controls .big, .deck-play, .play, .btn, .vote, .row { transition: transform .12s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, color .18s ease; } .np-controls .big:active, .deck-play:active, .play:active, .btn:active, .vote:active { transform: scale(.94); } .row:active { transform: scale(.995); } /* The cover breathes only while there is sound coming out of it. */ @keyframes artPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--tally-glow), 0 30px 74px -32px var(--tally-glow), 0 20px 60px -30px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.12); } 50% { box-shadow: 0 0 0 1px rgba(255,63,180,.55), 0 40px 92px -28px rgba(255,63,180,.55), 0 26px 70px -28px rgba(71,184,255,.45), inset 0 1px 0 rgba(255,255,255,.16); } } body[data-onair="true"] .np-art { animation: artPulse 3.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body[data-onair="true"] .np-art { animation: none; } .tabbar a svg, .np-controls .big, .deck-play, .play, .btn, .vote, .row { transition: none; } ::view-transition-group(*) { animation-duration: .001s; } ::view-transition-old(page), ::view-transition-new(page) { animation: none; } } /* --------------------------------------------------------------- 歌词 * * The station cut carries its words with it. Folded away by default — this is a * radio site, not a lyrics site — and opened by anyone who wants to read along. */ details.lyrics { margin-top: .9rem; border: 1px solid var(--rule); border-radius: var(--r); background: linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 55%); padding: .2rem .95rem; } details.lyrics summary { cursor: pointer; list-style: none; padding: .7rem 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); } details.lyrics summary::-webkit-details-marker { display: none; } details.lyrics summary::after { content: " +"; } details.lyrics[open] summary::after { content: " –"; } details.lyrics p { font-size: .97rem; line-height: 1.85; margin: 0 0 1rem; } details.lyrics .hook { color: var(--tally); text-shadow: 0 0 26px var(--tally-glow); border-left: 2px solid var(--tally); padding-left: .8rem; } details.lyrics .verse { color: var(--ink-soft); } details.lyrics .note { font-size: .8rem; } /* ------------------------------------------------------------- 唱片架 * * 歌是看封面挑的，节目是看标题挑的 —— 所以原创音乐用封面墙，节目用列表。 */ .shelf { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (min-width: 34rem) { .shelf { grid-template-columns: repeat(3, 1fr); } } .disc { appearance: none; cursor: pointer; text-align: left; font: inherit; color: inherit; background: none; border: none; padding: 0; display: block; } .disc-art { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .disc-art img { width: 100%; height: 100%; object-fit: cover; display: block; } .disc:hover .disc-art { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 26px 50px -26px var(--blue-glow); } .disc:active .disc-art { transform: scale(.985); } .disc-play { position: absolute; right: .5rem; bottom: .5rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, #FF6BC7, var(--tally) 55%, #C81E8C); color: #14061A; box-shadow: 0 6px 16px -8px var(--tally-glow), inset 0 1px 0 rgba(255,255,255,.35); opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; } .disc-play svg { width: .72rem; height: .72rem; fill: currentColor; } .disc:hover .disc-play, .disc[data-on="true"] .disc-play { opacity: 1; transform: none; } .disc strong { display: block; margin: .5rem 0 .1rem; font-size: .92rem; font-weight: 600; line-height: 1.3; } .disc > span { display: block; color: var(--dim); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .58rem; letter-spacing: .06em; } .disc[data-on="true"] strong { color: var(--tally); text-shadow: 0 0 20px var(--tally-glow); } .disc[data-on="true"] .disc-art { border-color: var(--tally); box-shadow: 0 0 0 1px var(--tally-glow), 0 26px 55px -28px var(--tally-glow); } /* 正在播的那张，封面自己在呼吸 */ @keyframes discPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--tally-glow), 0 26px 55px -28px var(--tally-glow); } 50% { box-shadow: 0 0 0 1px rgba(255,63,180,.6), 0 30px 70px -24px rgba(255,63,180,.55); } } .disc[data-playing="true"] .disc-art { animation: discPulse 3.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .disc-art, .disc-play { transition: none; } .disc[data-playing="true"] .disc-art { animation: none; } } /* 频道格里的"原创音乐"那一张：占满整行，右边露出几张封面当引子。 写成 .tile.tile-music 是有意的 —— listen.html 里的内联