/* All Day — one app for the wire, Reddit, video, podcasts and Wikipedia. THEMING. Light is the base palette on :root, because a stylesheet whose only complete definition lives inside a media query breaks the moment someone toggles. Dark is redefined twice: once under prefers-color-scheme for phones set to dark, guarded so an explicit "light" choice still wins, and once under [data-theme="dark"] so the toggle wins in both directions. Never give a colour its only definition inside a media block. TYPE. Sized up from the first pass. Section headings are real headings — a 0.68rem uppercase mono label is a caption, not a title, and people with ordinary eyesight were squinting at them. COLOUR. Local items carry their own hue, so the thing that makes this a Burlington paper is visible while scrolling rather than only readable. Thumbnails are never desaturated: a greyed-out photo reads as broken. */ :root { color-scheme: light; --ground: #FBF9F5; --sunk: #F1EDE5; --panel: #FFFFFF; --panel-2: #F7F4EE; --panel-hover: #F1ECE2; --edge: rgba(26, 22, 14, .13); --edge-soft: rgba(26, 22, 14, .07); --ink: #16191D; --ink-soft: #4A5058; --ink-faint: #767D86; --accent: #9A5B00; /* passes on paper */ --accent-bright: #C87E12; --accent-soft: rgba(200, 126, 18, .13); --local: #16704E; --local-soft: rgba(22, 112, 78, .07); /* text that sits ON --local as a fill — flips with the theme, because dark mode's --local is a light mint and white on mint is unreadable */ --local-ink: #FFFFFF; --good: #16704E; --warn: #A33B2A; --t-local: #12704B; --t-news: #9A5B00; --t-politics: #A3372B; --t-business: #7A5A00; --t-tech: #1B5E93; --t-science: #5B3E9B; --t-sports: #9C4B14; --t-culture: #9C2F6B; --t-gaming: #6A3B9E; --t-newsletters: #106B6B; --rail-track: #DCDCD6; --rail-thumb: #9A9A92; --shadow-1: 0 1px 2px rgba(20, 16, 8, .06), 0 2px 8px rgba(20, 16, 8, .05); --shadow-2: 0 8px 30px rgba(20, 16, 8, .14); --scrim: rgba(28, 24, 16, .42); --dock-bg: rgba(255, 253, 249, .86); /* the tab bar is a control, not chrome — it gets its own, more solid set */ --tabbar-bg: rgba(255, 253, 249, .97); --tabbar-edge: rgba(20, 16, 8, .12); --tabbar-lip: rgba(255, 255, 255, .9); --tab-on-ink: #FFFFFF; --shadow-3: 0 10px 34px rgba(20, 16, 8, .20), 0 2px 8px rgba(20, 16, 8, .10); --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --pill: 999px; /* Instrument Serif read spindly on the wire's pick cards and Tonight's pick — hairline strokes with no middle weight. Lora is the serif the rest of the site already sets its headlines in, and it has real weights. */ --serif: "Lora", Georgia, serif; /* DM Sans read thin on a phone — headlines at 500 looked washed out against the serif display face. Archivo is a sturdier grotesque with real weight at small sizes, which is what a wire of two thousand headlines needs. */ --ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; --tabbar-h: 78px; /* measured: the nine-pill bar is 84-88px tall */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --mast-h: 56px; --nav-h: 0px; /* Where the app's own chrome may start. Added to the home screen the page runs edge to edge (viewport-fit=cover + black-translucent), so y=0 is BEHIND the iOS clock — the shared bar pads itself past the inset, and its measured height therefore already clears it. --nav-h is 0 until nav.js lands and stays 0 if it never does, so the inset has to be the floor or the masthead spends that first load under the status bar. */ --top-h: max(var(--nav-h), var(--safe-t)); } /* phones set to dark — unless the reader explicitly chose light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ground: #06080A; --sunk: #040608; --panel: rgba(255, 255, 255, .062); --panel-2: rgba(255, 255, 255, .038); --panel-hover: rgba(255, 255, 255, .11); --edge: rgba(255, 255, 255, .13); --edge-soft: rgba(255, 255, 255, .07); --ink: #F2F0EA; --ink-soft: rgba(242, 240, 234, .72); --ink-faint: rgba(242, 240, 234, .48); --accent: #E8A33D; --accent-bright: #F2B44F; --accent-soft: rgba(232, 163, 61, .17); --local: #6FD79E; --local-soft: rgba(111, 215, 158, .075); --local-ink: #06251A; --good: #6FD79E; --warn: #F08A72; --t-local: #6FD79E; --t-news: #E8A33D; --t-politics: #F08A72; --t-business: #E3BE5C; --t-tech: #6BB6E8; --t-science: #B79BEE; --t-sports: #F0A06A; --t-culture: #EE87BE; --t-gaming: #B79BEE; --t-newsletters: #6ED2CE; --t-local: #6FD79E; --t-news: #E8A33D; --t-politics: #F08A72; --t-business: #E3BE5C; --t-tech: #6BB6E8; --t-science: #B79BEE; --t-sports: #F0A06A; --t-culture: #EE87BE; --t-gaming: #B79BEE; --t-newsletters: #6ED2CE; --rail-track: #2C3134; --rail-thumb: #7E868A; --shadow-1: none; --shadow-2: 0 12px 40px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .66); --dock-bg: rgba(14, 17, 22, .88); --tabbar-bg: rgba(22, 26, 33, .98); --tabbar-edge: rgba(255, 255, 255, .14); --tabbar-lip: rgba(255, 255, 255, .07); --tab-on-ink: #0B0E13; --shadow-3: 0 12px 40px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .45); } } /* the toggle, which must beat the phone in both directions */ :root[data-theme="dark"] { color-scheme: dark; --ground: #06080A; --sunk: #040608; --panel: rgba(255, 255, 255, .062); --panel-2: rgba(255, 255, 255, .038); --panel-hover: rgba(255, 255, 255, .11); --edge: rgba(255, 255, 255, .13); --edge-soft: rgba(255, 255, 255, .07); --ink: #F2F0EA; --ink-soft: rgba(242, 240, 234, .72); --ink-faint: rgba(242, 240, 234, .48); --accent: #E8A33D; --accent-bright: #F2B44F; --accent-soft: rgba(232, 163, 61, .17); --local: #6FD79E; --local-soft: rgba(111, 215, 158, .075); --local-ink: #06251A; --good: #6FD79E; --warn: #F08A72; --rail-track: #2C3134; --rail-thumb: #7E868A; --shadow-1: none; --shadow-2: 0 12px 40px rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .66); --dock-bg: rgba(14, 17, 22, .88); --tabbar-bg: rgba(22, 26, 33, .98); --tabbar-edge: rgba(255, 255, 255, .14); --tabbar-lip: rgba(255, 255, 255, .07); --tab-on-ink: #0B0E13; --shadow-3: 0 12px 40px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .45); } * { box-sizing: border-box; margin: 0; padding: 0; } /* A class rule carrying an explicit `display` outranks the UA sheet's [hidden] { display: none }, which silently un-hides anything styled display:flex/grid. Settle it once, here. */ [hidden] { display: none !important; } /* 100dvh, not 100%. On iOS `height: 100%` resolves against the LARGE viewport — the one with Safari's toolbar collapsed — so with the toolbar showing, the bottom of the app sits below what you can see and the dock drifts as the toolbar animates in and out. dvh tracks the visible viewport. The vh line stays first as the fallback for anything that lacks dvh. */ html { height: 100vh; height: 100dvh; -webkit-text-size-adjust: 100%; } body { height: 100vh; height: 100dvh; overflow: hidden; background: var(--ground); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent-soft); } /* ============================================================ top chrome */ /* nav.js prepends the shared BTown bar in normal flow, which is right for a scrolling page and wrong for a fixed shell. Pinned here, it is the one thing that travels with you down the page — the way out to the rest of the network is always one tap away. --nav-h stays 0 if the bar never loads. */ .btnav { position: fixed; top: 0; left: 0; right: 0; z-index: 41; /* The status-bar strip belongs to the bar: it paints its own navy up behind the clock instead of being hidden under it. nav.js sets the same padding for every property that runs full-bleed; this repeats it so the app is right on its own the moment the CSS loads. */ padding-top: var(--safe-t); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } .mast { position: fixed; top: var(--top-h); left: 0; right: 0; z-index: 40; background: var(--dock-bg); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border-bottom: 1px solid var(--edge-soft); transition: transform .26s ease; } /* The masthead belongs to the page, not to the chrome: it goes up out of the way as you read and comes back the moment you scroll up. -100% is exactly its own height, which puts its bottom edge level with the bottom of the shared bar — and the bar paints above it (z 41 > 40), so it is fully hidden without needing to know how tall the bar is. */ body.chrome-away .mast { transform: translateY(-100%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mast, .dock-inner { background: var(--ground); } } .mast-in { display: flex; align-items: center; gap: 10px; max-width: 880px; margin: 0 auto; padding: 9px 14px 10px; } .brand { min-width: 0; flex: 1; } .wordmark { display: block; font-family: var(--serif); font-size: 1.62rem; line-height: 1.05; letter-spacing: .005em; } .tagline { display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mast-acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } /* a 44px hit target with a 22px glyph — the old 18px star was unreadable */ .iconbtn { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); position: relative; transition: background .15s ease, color .15s ease; } .iconbtn:hover { background: var(--panel-hover); color: var(--ink); } .iconbtn svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .iconbtn.on { color: var(--accent); } /* the old top-right control read as a record button. It is a link to the full-screen headline board, so it says so. */ .boardlink { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 9px; border-radius: var(--pill); border: 1px solid var(--accent-soft); background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } .boardlink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } .stale { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); padding: 6px 14px; text-align: center; } .stale[hidden] { display: none; } /* how far down the wire you are — pulse.html has this and it is missed */ .readbar { height: 2px; background: transparent; } .readbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; } /* ============================================================ panels */ .app { position: absolute; inset: 0; } .panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 0 14px calc(var(--tabbar-h) + 34px + var(--safe-b)); } /* The room the fixed masthead needs is a flow spacer, not top padding. A sticky child measures its offset from the scroll container's PADDING box, so top padding here silently added itself to every sticky `top` — the control band came to rest 150px down the screen with headlines scrolling above it. As a spacer it costs the same pixels and leaves sticky offsets meaning what they say. */ .panel::before { content: ""; display: block; height: calc(var(--top-h) + var(--mast-h) + 16px); } body.has-player .panel { padding-bottom: calc(var(--tabbar-h) + 92px + var(--safe-b)); } .panel[hidden] { display: none; } @media (min-width: 760px) { .panel { padding-left: max(16px, calc((100% - 880px) / 2)); padding-right: max(16px, calc((100% - 880px) / 2)); } } /* ============================================================ headings */ /* A section heading is a heading. The mono line above it is the caption. */ .eyebrow { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .h-sec { margin: 4px 0 12px; } .h-sec h2 { font-family: var(--serif); font-size: 1.72rem; line-height: 1.12; font-weight: 400; letter-spacing: .003em; margin-top: 1px; } .h-sec .sub { font-size: .875rem; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; } .h-sec .count { color: var(--ink-faint); } .h-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } .empty { color: var(--ink-faint); text-align: center; padding: 46px 12px; font-size: 1rem; } .loading { color: var(--ink-faint); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 38px 12px; } .errbox { background: color-mix(in srgb, var(--warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--radius); padding: 18px; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; } .errbox b { color: var(--ink); } /* ============================================================ chips */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* the same grey bar a rail gets, for chip rows and the Wander trail — a row that runs off the edge with no sign of it reads as a row that ends there */ .hint-bar { position: relative; height: 4px; border-radius: 3px; margin: 0 0 14px; background: var(--rail-track); overflow: hidden; opacity: 0; transition: opacity .3s ease; } .hint-bar.is-live { opacity: 1; } .hint-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--rail-thumb); transition: left .12s linear, width .12s linear; } @media (hover: hover) and (pointer: fine) { .hint-bar { cursor: pointer; height: 6px; } .hint-bar:hover i { background: var(--ink-soft); } /* a mouse has no other way to move a chip row, so keep it reachable */ .hint-bar:hover, .chips:hover + .hint-bar, .trail:hover + .hint-bar { opacity: 1; } } .trail { padding-bottom: 8px; } .trail + .hint-bar { margin-bottom: 16px; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--edge); border-radius: var(--pill); padding: 8px 15px; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { background: var(--panel-hover); } .chip.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; font-weight: 600; } .chip .n { font-family: var(--mono); font-size: .72rem; opacity: .75; } /* the local switch is a real action, not a state label — people read the wire as already-local and never pressed it */ .chip.local-switch { border-color: color-mix(in srgb, var(--local) 40%, transparent); color: var(--local); } .chip.local-switch.on { background: var(--local-soft); color: var(--local); border-color: transparent; } /* ============================================================ carousel */ /* Nobody swipes a rail they cannot tell is a rail. Every horizontal strip gets dots (one per PAGE, not per card) and a live progress bar. */ .rail-wrap { position: relative; margin-bottom: 8px; } .rail { display: grid; grid-auto-flow: column; gap: 11px; /* NO grid-auto-columns here: each card type sets its own width, and a blanket column width makes wider cards overlap each other. */ overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-left: 0; } .rail::-webkit-scrollbar { display: none; } .rail > * { scroll-snap-align: start; } /* The affordance under every rail: a full-width track with a grey thumb that is ALWAYS drawn, then page dots centred beneath it. Always-drawn matters — a bar that only appears once you already know to scroll teaches nobody. On a rail short enough to fit, the thumb simply fills the track, which is a true statement rather than a hidden control. */ /* a mouse gets a grab cursor and a usable scrollbar; a finger needs neither */ @media (hover: hover) and (pointer: fine) { .rail { cursor: grab; } .rail.is-panning { cursor: grabbing; scroll-behavior: auto; } .rail.is-panning * { pointer-events: none; } .rail-bar { cursor: pointer; height: 7px; } .rail-bar:hover i { background: var(--ink-soft); } } .rail-nav { display: flex; flex-direction: column; gap: 7px; padding: 2px 0; } .rail-expand { align-self: center; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--edge); border-radius: var(--pill); padding: 5px 12px; background: var(--panel); min-height: 30px; } .rail-expand:hover { color: var(--accent); border-color: var(--accent-soft); } /* the same control at the top, so a tall list can be closed from where you opened it */ .rail-collapse-top { display: block; margin: 0 auto 10px; font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--edge); border-radius: var(--pill); padding: 5px 12px; background: var(--panel); min-height: 30px; } .rail-collapse-top:hover { color: var(--accent); border-color: var(--accent-soft); } .rail-collapse-top[hidden] { display: none; } /* Opened out: the same cards, stacked, no sideways anything. */ .rail.is-open { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow-x: visible; scroll-snap-type: none; gap: 10px; cursor: default; } .rail.is-open > * { width: auto !important; } .rail.is-open .v img, .rail.is-open .doorcard img { aspect-ratio: 16/9; } /* One strip carries both: the track spans it, the dots sit on top. The track only shows while the rail is moving and fades a moment after it stops, the way an overlay scrollbar does — the dots are the part that stays, and they are what tells you there is more. */ .rail-strip { position: relative; height: 14px; display: flex; align-items: center; justify-content: center; } .rail-bar { position: absolute; left: 0; right: 0; top: 50%; margin-top: -2px; height: 4px; border-radius: 3px; background: var(--rail-track); overflow: hidden; opacity: 0; transition: opacity .3s ease; } .rail-bar.is-live { opacity: 1; } .rail-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--rail-thumb); transition: left .12s linear, width .12s linear; } .rail-dots { position: relative; display: flex; gap: 6px; align-items: center; padding: 0 9px; background: var(--ground); border-radius: var(--pill); } .rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rail-track); transition: background .2s ease, width .2s ease; } .rail-dots i.on { background: var(--accent); width: 15px; border-radius: var(--pill); } .rail-strip.is-idle .rail-dots { display: none; } .card .rail-dots { background: var(--panel); } /* opened out, there is nothing sideways left to indicate */ .rail-wrap.is-open .rail-bar { display: none; } /* ============================================================ feed rows */ /* The wire and Reddit read as a page of headlines, not a stack of cards in a box: no outer panel, just hairlines between rows. The picks carousel keeps its cards — those ARE buttons, not a feed. */ .feed { overflow: hidden; } .feed .fi { background: var(--ground); } .feed .fi:first-child { border-top: 1px solid var(--edge-soft); } .feed .fi { padding-left: 2px; padding-right: 2px; } .fi { position: relative; display: grid; /* Title, then ONE meta line carrying outlet, age and the upvote. The star lives in its own column on the right, the way the old app had it — a dedicated row for two controls was a line of height for nothing. */ grid-template-columns: 1fr auto auto; grid-template-areas: "body star thumb" "foot star thumb"; gap: 1px 10px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--edge-soft); background: var(--panel); transform: translateX(var(--swipe, 0)); touch-action: pan-y; } .fi-body { grid-area: body; } .fi-foot { grid-area: foot; display: flex; align-items: center; gap: 9px; margin-top: 3px; min-width: 0; } .fi-foot .spacer { flex: 1 1 auto; min-width: 4px; } .fi > .act { grid-area: star; align-self: center; } .fi-foot .spacer { flex: 1; } .fi-thumb { grid-area: thumb; align-self: center; } .fi:last-child { border-bottom: 0; } .fi.is-swiping { transition: none; } .fi:not(.is-swiping) { transition: transform .18s cubic-bezier(.2, .8, .3, 1); } .fi-body { min-width: 0; display: block; } .fi-title { display: block; font-size: .97rem; line-height: 1.34; font-weight: 600; letter-spacing: -.006em; color: var(--ink); } .fi-meta { display: flex; align-items: center; gap: 6px; min-width: 0; flex-shrink: 1; overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .fi-meta > * { flex: 0 0 auto; } .fi-src { color: var(--ink-soft); font-weight: 600; letter-spacing: .09em; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } .fi-src.t-local { color: var(--t-local); } .fi-src.t-news { color: var(--t-news); } .fi-src.t-politics { color: var(--t-politics); } .fi-src.t-business { color: var(--t-business); } .fi-src.t-tech { color: var(--t-tech); } .fi-src.t-science { color: var(--t-science); } .fi-src.t-sports { color: var(--t-sports); } .fi-src.t-culture { color: var(--t-culture); } .fi-src.t-gaming { color: var(--t-gaming); } .fi-src.t-newsletters { color: var(--t-newsletters); } .fi-thumb { width: 70px; height: 70px; object-fit: cover; border-radius: 9px; background: var(--panel-2); flex: 0 0 auto; } .fi.is-read { opacity: .55; } /* scrolled off the top while you were looking at it — same shade Pulse uses */ .fi.passed .fi-title { color: var(--ink-faint); font-weight: 500; } .fi.passed .fi-thumb { opacity: .6; } .fi.is-read .fi-title { font-weight: 500; } /* local is the whole point of the paper — make it visible while scrolling */ .fi.is-local { background: linear-gradient(90deg, var(--local-soft), transparent 38%); } .fi.is-local::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--local); opacity: .8; } /* the rule needs room of its own, or it sits against the first letter */ .feed .fi.is-local { padding-left: 13px; } .tag-local { color: var(--local); font-weight: 600; background: var(--local-soft); border-radius: 4px; padding: 1px 5px; letter-spacing: .08em; } .tag-new { color: var(--good); font-weight: 600; } /* the swipe label sits under the row and does not travel with it */ .fi-hint { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; transform: translateX(calc(var(--swipe, 0) * -1)); } .fi-hint[data-side="left"] { left: 16px; color: var(--good); } .fi-hint[data-side="right"] { right: 16px; color: var(--warn); } .fi.will-commit .fi-hint { font-size: .74rem; } /* ============================================================ actions */ .act { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); flex: 0 0 auto; transition: color .14s ease, background .14s ease, transform .14s ease; } .act:hover { background: var(--panel-hover); color: var(--ink-soft); } .act:active { transform: scale(.9); } .act svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .act.on { color: var(--accent); } .act.on svg { fill: currentColor; stroke: currentColor; } /* upvote — a count that reads as a count */ .vote { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; border-radius: var(--pill); border: 1px solid var(--edge); color: var(--ink-faint); font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .02em; flex: 0 0 auto; transition: all .14s ease; } .vote svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .vote:hover { background: var(--panel-hover); color: var(--ink-soft); } .vote.on { color: var(--accent); border-color: transparent; background: var(--accent-soft); } .vote.on svg { fill: currentColor; } .vote:active { transform: scale(.93); } .vote .n { min-width: 8px; text-align: left; } .vote.is-zero .n { opacity: .5; } .more { width: 100%; padding: 16px; margin-top: 14px; text-align: center; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel); } .more:hover { background: var(--panel-hover); } .caught { text-align: center; color: var(--good); padding: 22px 12px; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; } /* ============================================================ picks */ .pick { display: flex; flex-direction: column; width: min(300px, 78vw); height: 100%; border-radius: var(--radius); border: 1px solid var(--edge); background: var(--panel); box-shadow: var(--shadow-1); } .pick-hit { display: block; padding: 15px 15px 12px; flex: 1 1 auto; } .pick-foot { display: flex; align-items: center; gap: 8px; padding: 0 11px 9px; } .pick-title { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.16; margin: 8px 0 7px; } .pick-why { display: block; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); } .pick.is-local { border-color: color-mix(in srgb, var(--local) 38%, transparent); } .picks-when { display: flex; gap: 8px; align-items: center; } /* ============================================================ video */ .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; } .rail .v { width: 168px; } /* A column, so the card's spare height goes to the TEXT and the buttons stay on the floor. Cards in a rail stretch to the tallest one; without this the slack opened up as a band of nothing between the reason and the buttons, which is what "a lot of the room taken up by empty white space" was. */ .v { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--edge); background: var(--panel); box-shadow: var(--shadow-1); display: flex; flex-direction: column; } .v-hit { display: block; width: 100%; flex: 1 1 auto; } .v-shot { position: relative; } .v img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--panel-2); } .v-dur { position: absolute; right: 7px; bottom: 7px; font-family: var(--mono); font-size: .62rem; font-weight: 600; background: rgba(0, 0, 0, .78); color: #fff; padding: 2px 6px; border-radius: 5px; letter-spacing: .02em; } .v-live { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; background: #C8321E; color: #fff; padding: 3px 7px; border-radius: 5px; } .v-live i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: blink 1.6s ease infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .v-body { padding: 7px 9px 7px; } .v-title { font-size: .88rem; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .v-meta { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; } .v-why { font-size: .8rem; line-height: 1.38; color: var(--ink-soft); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The reason IS the product — "around fifty videos, each with a reason". Hiding it on the shelves left a wall of thumbnails like every other video app. Two lines then cut it in the middle of the sentence: the reasons run 57 to 87 characters and a 168px card fits about 25 to a line, so two lines lost a third of every one of them. Four shows all of them whole, and the space it takes was already there and empty. */ .rail .v-why { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: .75rem; line-height: 1.36; margin-top: 5px; } .vgrid .v-why { -webkit-line-clamp: 4; } .hero-body .v-why { display: -webkit-box; -webkit-line-clamp: 4; } .v-acts { display: flex; align-items: center; gap: 1px; padding: 2px 4px 4px; flex: 0 0 auto; border-top: 1px solid var(--edge-soft); margin-top: 6px; } .v-acts .act { width: 29px; height: 29px; } .v-acts .act svg { width: 18px; height: 18px; } .v-acts .vote { height: 28px; padding: 0 7px 0 5px; font-size: .68rem; } .v-acts .spacer { flex: 1; } .v.is-seen { opacity: .5; } /* the hero: tonight's one pick, and it says who chose it */ .hero-card { margin-bottom: 16px; } .hero { display: block; width: 100%; text-align: left; } .hero img { width: 100%; aspect-ratio: 16/9; max-height: 140px; object-fit: cover; } .hero-body { display: block; padding: 10px 13px 12px; } .hero-title { display: block; font-family: var(--serif); font-size: 1.26rem; font-weight: 500; line-height: 1.1; margin: 3px 0 4px; } /* A shelf label is a label. Legible — far bigger than the .68rem caption it replaces — but a serif headline block per shelf costs a whole video row every time, and this tab is for browsing video, not reading titles. */ .shelf-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 2px 0 9px; } .shelf-head.has-more { flex-wrap: nowrap; } /* the title keeps its line and the subtitle gives way — a two-line shelf name beside a button reads as a wrap, not a heading */ .shelf-head.has-more .t { white-space: nowrap; flex: 0 0 auto; } .shelf-head.has-more .s { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shelf-more { flex: 0 0 auto; align-self: center; font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .01em; color: var(--local); background: color-mix(in srgb, var(--local) 12%, transparent); border: 1px solid color-mix(in srgb, var(--local) 30%, transparent); border-radius: 999px; padding: 4px 10px; cursor: pointer; } .shelf-more:hover { background: color-mix(in srgb, var(--local) 20%, transparent); } /* the bench reveal sits under its shelf's rail, not in the shelf head */ .bench-more { display: block; margin: -4px 0 16px; } /* a bench video that stepped in for one the reader hid says so */ .v-next { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--local); margin-bottom: 3px; } .shelf-head .t { font-size: 1.06rem; font-weight: 600; letter-spacing: -.004em; } .shelf-head .s { font-size: .84rem; color: var(--ink-faint); } /* Live cams are ambient. A lake at night is not competing with a documentary for attention: small enough to skim past, big enough to actually see, and no action row — you do not rate a webcam. */ .livestrip { margin-bottom: 18px; } .livestrip .rail { gap: 7px; } .livestrip .rail .v { width: 96px; border-radius: 9px; } .livestrip .v-body { padding: 4px 6px 6px; } .livestrip .v-title { font-size: .66rem; line-height: 1.2; -webkit-line-clamp: 2; } .livestrip .v-meta, .livestrip .v-acts, .livestrip .v-dur, .livestrip .v-why { display: none; } .livestrip .v-live { left: 4px; top: 4px; font-size: .48rem; padding: 1px 4px; gap: 3px; } .livestrip .v-live i { width: 4px; height: 4px; } .livestrip .shelf-head { margin-bottom: 6px; } .livestrip .shelf-head .t { font-size: .92rem; } .livestrip .shelf-head .s { font-size: .76rem; } /* ============================================================ listen */ /* The Brief's own show still leads, but as a banner rather than a page. It cost 352px, and the Spotify embed another 352, which put the first actual podcast a full screen below the fold. */ .feature { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 11px; margin-bottom: 10px; } .feature img { border-radius: 9px; align-self: start; } .feature h2 { font-family: var(--serif); font-size: 1.18rem; line-height: 1.1; margin: 2px 0 3px; font-weight: 400; } .feature p { font-size: .83rem; line-height: 1.42; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .btns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .feature .btn { padding: 7px 13px; font-size: .82rem; min-height: 36px; } /* Browsing every episode is a deliberate act, not the default view. */ .embed-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; margin-bottom: 12px; font-size: .92rem; font-weight: 500; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-1); } .embed-toggle .chev { display: inline-flex; color: var(--ink-faint); transition: transform .2s ease; } .embed-toggle .chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .embed-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } /* the embed plays the newest episode; the back catalogue lives behind this */ .embed-all { display: block; text-align: center; margin: -6px 0 16px; font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 5px; } .embed { width: 100%; height: 352px; border: 0; border-radius: var(--radius); margin-bottom: 14px; background: var(--panel); } .shows { display: grid; gap: 10px; } /* A show is a card with its newest episodes already in it. The accordion put every episode behind a tap, so a tab full of podcasts showed no podcasts. */ .show { overflow: hidden; } .show-head { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 11px; padding: 10px 12px 10px 10px; width: 100%; border-bottom: 1px solid var(--edge-soft); } .show-out { color: var(--ink-faint); font-size: 1rem; padding: 6px 4px; } .show-out:hover { color: var(--accent); } .show .eps { margin: 0; } /* One line per episode: play, title, age, save. The generic feed row put the buttons on a line of their own, which made every episode 135px tall. */ .ep { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--edge-soft); } .ep:last-child { border-bottom: 0; } .ep-go { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--edge); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--panel-2); } .ep-go svg { width: 15px; height: 15px; margin-left: 1px; } .ep-go:hover { border-color: var(--accent); color: var(--accent); } .ep.is-playing .ep-go { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .ep-meta { min-width: 0; } .ep-title { display: block; font-size: .93rem; line-height: 1.32; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ep-age { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; } .ep .vote { height: 28px; padding: 0 7px 0 5px; font-size: .68rem; } .ep .act { width: 32px; height: 32px; } .ep .act svg { width: 19px; height: 19px; } .show-more { width: 100%; padding: 11px; text-align: center; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-top: 1px solid var(--edge-soft); } .show-more:hover { background: var(--panel-hover); } .show-head img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; } .noart { width: 46px; height: 46px; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.15rem; } .show-meta { min-width: 0; } .show-name { display: block; font-size: .95rem; font-weight: 600; line-height: 1.25; } .eps { margin-top: 8px; } .ep-play { width: 100%; } .ep-bar { height: 3px; border-radius: 2px; background: var(--edge); margin-top: 8px; overflow: hidden; } .ep-bar i { display: block; height: 100%; background: var(--accent); } /* ============================================================ wander */ .door { text-align: center; padding: 4px 4px 2px; } .door h1 { font-family: var(--serif); font-size: 2rem; line-height: 1.05; font-weight: 400; margin-bottom: 6px; } .door p { color: var(--ink-soft); font-size: .92rem; line-height: 1.45; max-width: 30rem; margin: 0 auto 12px; } .search { position: relative; max-width: 30rem; margin: 0 auto 12px; } .search input { width: 100%; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--pill); padding: 13px 18px 13px 44px; color: var(--ink); font: inherit; font-size: 1rem; box-shadow: var(--shadow-1); } .search input::placeholder { color: var(--ink-faint); } .search .mag { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--ink-faint); fill: none; stroke: currentColor; stroke-width: 2; } .suggest { position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 20; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; text-align: left; box-shadow: var(--shadow-2); } .suggest[hidden] { display: none; } .suggest button { display: block; width: 100%; padding: 11px 16px; font-size: .96rem; border-bottom: 1px solid var(--edge-soft); } .suggest button:last-child { border-bottom: 0; } .suggest button:hover { background: var(--panel-hover); } .suggest .d { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; border-radius: var(--pill); padding: 11px 20px; font-size: .95rem; font-weight: 600; min-height: 44px; } .btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .btn-big { font-size: 1.06rem; padding: 15px 30px; } .btn-quiet { background: var(--panel); color: var(--ink-soft); border-color: var(--edge); font-weight: 500; } .door-out { display: inline-flex; margin-top: 10px; font-size: .88rem; padding: 9px 17px; min-height: 40px; } /* the shuffle glyph read as something else entirely — use the word */ .pool-shuffle { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--edge); border-radius: var(--pill); padding: 6px 11px; white-space: nowrap; } .pool-shuffle:hover { color: var(--accent); border-color: var(--accent-soft); } .btn-quiet:hover { background: var(--panel-hover); } /* a pool door opens in place — it does not throw you somewhere */ .pool { margin-bottom: 4px; } .pool-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 2px 8px; width: 100%; min-width: 0; } .pool-head > * { min-width: 0; } .pool-emoji { font-size: 1.25rem; text-align: center; } .pool-name { display: block; font-size: 1.02rem; font-weight: 600; } .pool-sub { display: block; font-size: .8rem; color: var(--ink-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pool-body { padding: 0 0 4px; } .doorbox { display: flex; flex-direction: column; width: min(250px, 72vw); height: 100%; border-radius: var(--radius-sm); border: 1px solid var(--edge); background: var(--panel-2); } .doorcard { display: block; width: 100%; flex: 1 1 auto; padding: 11px 12px 8px; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; } .door-foot { display: flex; align-items: center; gap: 8px; padding: 0 9px 8px; } .pool-body .rail .doorbox, .rail .doorbox { flex: 0 0 auto; } .doorcard .d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .doorcard .t { display: block; font-size: .93rem; font-weight: 600; line-height: 1.28; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .doorcard .d { font-size: .82rem; line-height: 1.4; color: var(--ink-soft); margin-top: 4px; } /* a handful of articles genuinely have no short description on Wikipedia — the card should close up rather than reserve a line for nothing */ .doorcard .d:empty { display: none; } .doorcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; margin-bottom: 9px; } .trail { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; } .trail::-webkit-scrollbar { display: none; } .tchip { flex: 0 0 auto; font-size: .78rem; color: var(--ink-soft); border: 1px solid var(--edge); border-radius: var(--pill); padding: 7px 13px; background: var(--panel); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 36px; } .tchip.here { color: var(--accent); border-color: transparent; background: var(--accent-soft); font-weight: 600; } /* ============================================================ reader */ .reader { line-height: 1.75; font-size: 1.09rem; color: var(--ink-soft); } .reader h1, .reader h2, .reader h3, .reader h4 { font-family: var(--serif); color: var(--ink); line-height: 1.16; margin: 1.5em 0 .4em; font-weight: 400; } .reader h1 { font-size: 2.1rem; margin-top: .1em; } .reader h2 { font-size: 1.5rem; } .reader h3 { font-size: 1.22rem; } .reader p { margin: .95em 0; } .reader ul, .reader ol { margin: .95em 0 .95em 1.35em; } .reader li { margin: .4em 0; } .reader a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; } .reader .plain-link { color: var(--ink-soft); } .reader img { border-radius: var(--radius-sm); margin: 1.1em auto; height: auto; } .reader figcaption { font-size: .84rem; color: var(--ink-faint); margin-top: 7px; } .reader .table-wrap { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--edge); border-radius: var(--radius-sm); } .reader table { border-collapse: collapse; font-size: .88rem; min-width: 100%; } .reader th, .reader td { padding: 8px 11px; border-bottom: 1px solid var(--edge-soft); text-align: left; vertical-align: top; } .reader th { color: var(--ink); font-weight: 600; white-space: nowrap; } .reader .wikinote { font-size: .64em; color: var(--ink-faint); vertical-align: super; } .reader blockquote { margin: 1.2em 0; padding-left: 16px; border-left: 3px solid var(--accent-soft); } .reader-hero { width: 100%; max-height: 46vh; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; } @media (min-width: 760px) { .reader-hero { max-height: 38vh; } } .reader-acts { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 30px; } .srcline { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 0 4px; } .srcline a { color: var(--accent); } /* ============================================================ peek */ /* press and hold anything and read it right there — his favourite gesture */ .peek { position: fixed; z-index: 95; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); max-width: 560px; margin: 0 auto; max-height: 62vh; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; animation: peekin .18s cubic-bezier(.2, .9, .3, 1); } @keyframes peekin { from { transform: translateY(14px); opacity: 0; } } .peek-head { display: flex; align-items: center; gap: 10px; padding: 13px 8px 11px 15px; border-bottom: 1px solid var(--edge-soft); } .peek-head .t { flex: 1; min-width: 0; font-size: .96rem; font-weight: 600; line-height: 1.3; } .peek-body { overflow-y: auto; padding: 14px 15px 16px; font-size: 1rem; line-height: 1.62; color: var(--ink-soft); -webkit-overflow-scrolling: touch; } .peek-body img { border-radius: var(--radius-sm); margin: 0 0 12px; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .peek-foot { display: flex; gap: 8px; padding: 0 15px 15px; } /* ============================================================ sheet */ .sheet { position: fixed; inset: 0; z-index: 90; } .sheet[hidden] { display: none; } .sheet-scrim { position: absolute; inset: 0; background: var(--scrim); } .sheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; background: var(--ground); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); border-top: 1px solid var(--edge); display: flex; flex-direction: column; animation: sheetin .22s cubic-bezier(.2, .9, .3, 1); } @keyframes sheetin { from { transform: translateY(24px); opacity: .4; } } @media (min-width: 620px) { .sheet-card { left: 50%; right: auto; transform: translateX(-50%); width: 520px; bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } } .sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 10px 13px 18px; border-bottom: 1px solid var(--edge-soft); } .sheet-head h2 { flex: 1; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; } .sheet-body { overflow-y: auto; padding: 12px 14px calc(24px + var(--safe-b)); } .sheet-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--edge-soft); } .sheet-row:last-child { border-bottom: 0; } .sheet-row .t { font-size: 1rem; font-weight: 500; } .sheet-row .d { font-size: .83rem; color: var(--ink-faint); margin-top: 2px; } /* iOS-style switch, because a checkbox reads as a form */ .sw { width: 50px; height: 30px; border-radius: var(--pill); background: var(--edge); position: relative; flex: 0 0 auto; transition: background .18s ease; } .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; } .sw.on { background: var(--good); } .sw.on::after { transform: translateX(20px); } .seg { display: flex; gap: 3px; padding: 3px; background: var(--panel-2); border: 1px solid var(--edge); border-radius: var(--pill); } .seg button { flex: 1; text-align: center; padding: 9px 10px; border-radius: var(--pill); font-size: .84rem; font-weight: 600; color: var(--ink-faint); min-height: 40px; /* three labels on a 390px phone: one line each, or the control doubles in height and the first video leaves the screen */ white-space: nowrap; } @media (max-width: 400px) { .seg button { font-size: .8rem; padding: 9px 7px; } } .seg button.on { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-1); } /* ============================================================ dock */ /* fixed, not absolute: it must be anchored to the viewport, not to a container whose height iOS recalculates while you scroll. */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 0 10px calc(var(--safe-b) + 8px); pointer-events: none; } .dock > * { pointer-events: auto; } .tabbar { display: grid; /* Eight equal columns and one that sizes to its own label: the centre button keeps the words "What Now" on ONE line while the other eight share what is left. Nine equal columns forced it to wrap, which made the centrepiece look like a mistake rather than a choice. */ grid-template-columns: repeat(4, 1fr) auto repeat(4, 1fr); gap: 2px; max-width: 470px; margin: 0 auto; padding: 6px; background: var(--dock-bg); border: 1px solid var(--edge); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); } .tabbar button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 7px 1px 6px; border-radius: 14px; min-height: 48px; color: var(--ink-faint); font-size: .6rem; font-weight: 600; letter-spacing: .005em; line-height: 1.2; transition: color .16s ease, background .16s ease; } .tabbar button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .tabbar button:hover { color: var(--ink-soft); } .tabbar button > span { white-space: nowrap; } .tabbar button.on { color: var(--accent); background: var(--accent-soft); } .tabbar button.on svg { stroke-width: 2.1; } .tabdot { position: absolute; top: 6px; right: 50%; margin-right: -16px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ============================================================ player */ .player { max-width: 470px; margin: 0 auto 8px; display: flex; align-items: center; gap: 8px; background: var(--dock-bg); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 14px 8px 9px; position: relative; overflow: hidden; backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); } .player[hidden] { display: none; } /* four transport controls and a title on a 320px phone: the shell default of 42px would leave the title 25px of room, so the player runs its own size */ .player .iconbtn { width: 36px; height: 36px; border-radius: 11px; } .player .iconbtn svg { width: 21px; height: 21px; } .p-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; } .p-art { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; } .p-meta { flex: 1; min-width: 0; } .p-title { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-sub { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; } .p-show { font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .p-time { flex: 0 0 auto; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; } @media (max-width: 360px) { .player { gap: 6px; } .player .iconbtn { width: 34px; height: 34px; } /* the row cannot hold five controls this narrow. Close moves into the Now playing sheet, where there is room to label it. */ #p-close { display: none; } } /* The bar was two pixels of decoration. It is the seek control now: a 16px strip of hit area across the top of the player drawing a 3px line. An hour of live radio is unusable without one. */ .p-bar { position: absolute; left: 0; right: 0; top: 0; height: 16px; z-index: 2; cursor: pointer; touch-action: none; } .p-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--edge); } .p-bar i { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--accent); } .p-bar i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .15s ease; } .p-bar:hover i::after, .p-bar.scrubbing i::after, .p-bar:focus-visible i::after { opacity: 1; } .p-bar.scrubbing::before, .p-bar.scrubbing i { height: 4px; } /* A sheet is z 90 and the dock is z 45, so pressing play on an artist put the player behind the sheet you pressed it in — which read as "it did not play". Raising the PLAYER is not enough: .dock is positioned with a z-index, so it opens a stacking context and any z-index on a child is resolved inside it. The dock itself has to come up. The tab bar comes with it, so it is hidden for as long as the sheet is open — it was already behind the sheet card and unreachable through the scrim, so nothing is lost and the player keeps the position it always has, above where the bar was. */ body.sheet-open .dock { z-index: 91; } /* display, not visibility: the bar has to leave the layout so the player drops to the bottom edge, which is both where a mini player belongs and the only position the sheet's own bottom padding can be sized against. */ body.sheet-open .tabbar { display: none; } body.sheet-open.has-player .sheet-body { padding-bottom: calc(92px + var(--safe-b)); } /* ======================================================= now playing sheet */ .np-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .np-art { width: 76px; height: 76px; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; } .np-meta { min-width: 0; } .np-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .np-show { font-family: var(--mono); font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; } .np-bar { position: relative; height: 22px; cursor: pointer; touch-action: none; } .np-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--edge); } .np-bar i { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 2px; width: 0; background: var(--accent); } .np-bar i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-1); } .np-times { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin: 2px 0 18px; } .np-transport { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 18px; } .np-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--ink); border-radius: var(--pill); } .np-skip { position: relative; width: 52px; height: 52px; } .np-skip svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .np-skip span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--mono); font-size: .55rem; color: var(--ink-faint); } .np-flip svg { transform: scaleX(-1); } /* the app never fills with accent — but a transport button must read as THE button. --ground inverts with the theme, so the glyph is near-white on the brown and near-black on the amber; an invented token would only fail in one. */ .np-big { width: 68px; height: 68px; background: var(--accent); color: var(--ground); box-shadow: var(--shadow-2); } /* fill:none + a stroke, the same way .iconbtn does it: ICON.play carries its own inline fill and wins, ICON.pause is two stroked lines and would render as an empty circle under a fill-only rule. It did. */ .np-big svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; } .np-big:active { transform: scale(.95); } .np-foot { display: flex; gap: 10px; align-items: center; } .np-foot .np-btn { flex: 1; min-height: 44px; border: 1px solid var(--edge); background: var(--panel-2); font-size: .86rem; font-weight: 600; } .np-stop { flex: 0 0 46px !important; color: var(--ink-faint); } .np-stop svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } .np-rate { font-variant-numeric: tabular-nums; } .np-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* a play button anywhere in the app turns into a pause while it is the thing playing — including inside a sheet, where the dock cannot be seen */ [data-pk].is-playing { color: var(--accent); } /* ============================================================ video modal */ .vbox { position: fixed; inset: 0; z-index: 92; display: flex; align-items: center; justify-content: center; background: var(--scrim); padding: 16px; } .vbox[hidden] { display: none; } .vbox-card { width: 100%; max-width: 660px; background: var(--ground); border: 1px solid var(--edge); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-2); } .vbox-head { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; } .vbox-head .t { flex: 1; min-width: 0; font-size: .96rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vbox-frame { aspect-ratio: 16/9; background: #000; } .vbox-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .vbox-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px 14px; } .vbox-hint { font-size: .8rem; color: var(--ink-faint); } /* ============================================================ toast */ /* ------------------------------------------------------------- welcome */ .welcome { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center; padding: 22px; background: var(--scrim); backdrop-filter: blur(3px); } .welcome-card { width: 100%; max-width: 360px; background: var(--ground); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 24px 22px 20px; box-shadow: var(--shadow-2); animation: sheetin .24s cubic-bezier(.2,.9,.3,1); } .welcome-card h2 { font-family: var(--serif); font-size: 1.62rem; font-weight: 400; line-height: 1.1; margin: 4px 0 16px; } .welcome-list { list-style: none; display: grid; gap: 11px; margin: 0 0 16px; padding: 0; } .welcome-list li { display: grid; grid-template-columns: 88px 1fr; align-items: baseline; gap: 10px; } .welcome-list b { font-size: .95rem; font-weight: 600; color: var(--accent); } .welcome-list span { font-size: .88rem; line-height: 1.4; color: var(--ink-soft); } .welcome-local { display: flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--ink-soft); padding: 10px 0 18px; border-top: 1px solid var(--edge-soft); } .welcome-local i { width: 10px; height: 10px; border-radius: 3px; background: var(--local); flex: 0 0 auto; } .welcome .btn { width: 100%; } .toast { position: fixed; bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px); left: 50%; transform: translateX(-50%); z-index: 96; background: var(--ink); color: var(--ground); border-radius: var(--pill); padding: 11px 20px; font-size: .9rem; font-weight: 500; box-shadow: var(--shadow-2); max-width: 88vw; text-align: center; } .toast[hidden] { display: none; } .confirm { position: fixed; inset: 0; z-index: 97; display: grid; place-items: center; padding: 20px; background: var(--scrim); } .confirm[hidden] { display: none; } .confirm-card { width: 100%; max-width: 340px; background: var(--ground); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-2); text-align: center; } .confirm-card h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin-bottom: 7px; } .confirm-card p { font-size: .93rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 18px; } .confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } body.chrome-away .fresh { top: calc(var(--top-h) + 12px); } .fresh { position: fixed; top: calc(var(--top-h) + var(--mast-h) + 12px); left: 50%; transform: translateX(-50%); z-index: 44; transition: top .26s ease; background: var(--accent); color: #fff; border-radius: var(--pill); padding: 9px 18px; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--shadow-2); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } .sheet-note { font-size: .82rem; color: var(--ink-faint); margin: -2px 0 12px; } /* ================================================ wire header controls */ /* Search is a chip now, not a band. It is the one chip with a colour of its own so it reads as a verb among nouns. */ .chip.search-chip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); font-weight: 600; } .chip.search-chip.on { background: var(--accent-soft); border-color: transparent; } .chip.search-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: 0 0 auto; } /* Outlets: locals on the first line, the wire on the second. Smaller than a topic chip — there are forty of them and they are a second-order control. */ .chips.srcbar { gap: 6px; padding-top: 0; padding-bottom: 6px; } .chips.srcbar .chip { font-size: .74rem; padding: 5px 11px; min-height: 30px; border-radius: var(--pill); font-weight: 500; } .chips.srcbar .chip.on { font-weight: 600; } .chips.srcbar + .hint-bar { margin-bottom: 8px; } .srcbar.is-local .chip { border-color: color-mix(in srgb, var(--local) 26%, var(--edge)); } .srcchip.c-local { color: var(--t-local); } .srcchip.c-news { color: var(--t-news); } .srcchip.c-politics { color: var(--t-politics); } .srcchip.c-business { color: var(--t-business); } .srcchip.c-tech { color: var(--t-tech); } .srcchip.c-science { color: var(--t-science); } .srcchip.c-sports { color: var(--t-sports); } .srcchip.c-culture { color: var(--t-culture); } .srcchip.c-gaming { color: var(--t-gaming); } .srcchip.c-newsletters { color: var(--t-newsletters); } /* Layout switch and Focus, out where they can be found. Focus used to live three taps deep in Settings, which is the same as not existing. */ .toolrow { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; } .toolseg { display: inline-flex; border: 1px solid var(--edge); border-radius: var(--pill); overflow: hidden; background: var(--panel); } .toolbtn { font: inherit; font-size: .76rem; font-weight: 500; color: var(--ink-soft); background: none; border: 0; padding: 7px 13px; min-height: 32px; cursor: pointer; transition: background .15s ease, color .15s ease; } .toolseg .toolbtn + .toolbtn { border-left: 1px solid var(--edge); } .toolbtn:hover { background: var(--panel-hover); } .toolbtn.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; } /* a toolbtn that is an , not a