/* WJRH 104.9 FM — listener app Design tokens are taken verbatim from the handoff README. Shape rules: no border radius anywhere, 3px heavy rules / 1px light rules, hard shadows with no blur, press states translate and shrink the shadow. */ :root { --ink: #111111; --disabled: #6b6b66; --web-bg: #e9e7e1; /* Section palette — set on and animated. */ --acc: #00e0a4; --dark: #00b586; --paper: #efece4; --press: #e2ded4; } body[data-section="now"] { --acc:#00e0a4; --dark:#00b586; --paper:#efece4; --press:#e2ded4; } body[data-section="schedule"] { --acc:#7b61ff; --dark:#5b42e0; --paper:#ece9f3; --press:#ddd8ee; } body[data-section="about"] { --acc:#ff5a1f; --dark:#d9430f; --paper:#f3e8dc; --press:#ecdccb; } * { box-sizing: border-box; } html { background: var(--web-bg); } body { margin: 0; background: var(--web-bg); color: var(--ink); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } /* The phone column. On desktop it centres on the web background. */ #shell { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; background: var(--paper); transition: background .25s ease; overflow: hidden; } #scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Just a breathing buffer. The spec's 200px assumed a player floating over the content; here #dock is a flex sibling below #scroll, so nothing is ever hidden and anything more than this is just dead scroll. */ padding-bottom: 24px; padding-top: env(safe-area-inset-top); } #scroll::-webkit-scrollbar { display: none; } /* ---------- type ---------- */ .syne { font-family: 'Syne', 'Manrope', sans-serif; font-weight: 800; text-transform: uppercase; } .label { font-size: 10px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; } .label-11 { font-size: 11px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; } /* ---------- rules ---------- */ .rule-3 { border-bottom: 3px solid var(--ink); } .rule-1 { border-top: 1px solid var(--ink); } /* ---------- generic rows ---------- */ .row { display: flex; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--ink); align-items: baseline; cursor: pointer; background: transparent; transition: background .12s; width: 100%; text-align: left; font: inherit; color: inherit; border-left: 0; border-right: 0; border-bottom: 0; } .row:active, .row.pressed { background: var(--press); } .row-time { font-size: 11px; font-weight: 500; width: 62px; flex-shrink: 0; white-space: nowrap; } .row-body { min-width: 0; flex: 1; } .row-title { font-size: 14px; font-weight: 700; text-transform: uppercase; } .row-sub { font-size: 12px; margin-top: 2px; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- header ---------- */ .hdr { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-bottom: 3px solid var(--ink); gap: 12px; /* Pinned while the section scrolls beneath it. Needs its own background — without one the scrolling content shows straight through. */ position: sticky; top: 0; z-index: 10; background: var(--paper); transition: background .25s ease; } .wordmark { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.01em; } /* "SCHEDULE" in Syne 800 is 284px at 30px — one pixel more than a 375px phone has room for, which pushed "ET" onto a second line and doubled the header height. Scale it with the viewport and never let it wrap. */ .sched-title { font-size: clamp(23px, 7.2vw, 30px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; min-width: 0; } .freq { font-size: 11px; letter-spacing: .1em; font-weight: 700; display: flex; gap: 6px; align-items: center; } .dot { width: 8px; height: 8px; background: var(--dark); flex-shrink: 0; } .dot.pulsing { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } /* 32px visual, padded to a 44px hit target */ .ibtn { width: 44px; height: 44px; margin: -6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; padding: 0; color: inherit; } .ibtn span { width: 32px; height: 32px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; } .ibtn:active span { background: var(--ink); color: var(--paper); } /* A real 44px control, not a pseudo-element overlay: the header sits flush against the top of the scroll container, which clips anything extending above it. The -6px block margin keeps the layout footprint at 32px so the header height matches the one with the round "i" button. */ .backbtn { font-size: 12px; font-weight: 700; letter-spacing: .1em; cursor: pointer; background: none; border: 0; color: inherit; font-family: inherit; display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: -6px 0; } /* ---------- now ---------- */ .showcard { padding: 18px; border-bottom: 3px solid var(--ink); cursor: pointer; display: block; width: 100%; text-align: left; background: transparent; border-left:0; border-right:0; border-top:0; font: inherit; color: inherit; } .showcard:active { background: var(--press); } .showcard-meta { font-size: 10px; letter-spacing: .14em; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; } .showcard-name { margin-top: 8px; font-size: clamp(26px, 8vw, 34px); line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; } .showcard-sub { margin-top: 6px; font-size: 13px; } .trackcard { padding: 16px 18px; border-bottom: 3px solid var(--ink); display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; background: transparent; border-left:0; border-right:0; border-top:0; font: inherit; color: inherit; transition: opacity .3s; } .trackcard:not(:disabled) { cursor: pointer; } .trackcard:disabled { opacity: .5; } .trackcard:not(:disabled):active { background: var(--press); } .trackcard-title { margin-top: 3px; font-size: 17px; line-height: 1.1; letter-spacing: -.01em; } .trackcard-artist { margin-top: 2px; font-size: 13px; } .trackcard-album { margin-top: 1px; font-size: 12px; color: #55554f; } /* the 9-bar signal square */ .wave { width: 52px; height: 52px; flex-shrink: 0; background: var(--ink); display: flex; align-items: flex-end; gap: 2px; padding: 8px; } .wave i { flex: 1; background: #3a3a36; transform-origin: bottom; transform: scaleY(.25); transition: background .3s; } .wave.on i { background: var(--acc); transform: none; animation: bar 1s ease-in-out infinite; } @keyframes bar { 0%,100% { transform: scaleY(.2) } 50% { transform: scaleY(1) } } .section-head { padding: 20px 18px 8px; font-size: 11px; letter-spacing: .14em; font-weight: 700; display: flex; justify-content: space-between; text-transform: uppercase; } .section-head .count { font-weight: 500; letter-spacing: 0; text-transform: none; } .section-head.topped { border-top: 3px solid var(--ink); } .empty { padding: 32px 18px; text-align: center; font-size: 12px; } .empty strong { display: block; font-size: 12px; letter-spacing: .1em; font-weight: 700; text-transform: uppercase; } .empty span { display: block; margin-top: 6px; line-height: 1.5; } .micbreak { display: flex; gap: 14px; padding: 6px 18px; border-top: 1px solid var(--ink); align-items: center; background: var(--press); } /* ---------- schedule ---------- */ .daypicker { display: flex; border-bottom: 3px solid var(--ink); } .daycell { flex: 1; text-align: center; padding: 12px 0 10px; font-size: 11px; font-weight: 700; cursor: pointer; border-right: 1px solid var(--ink); background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); font-family: inherit; border-top: 0; border-bottom: 0; border-left: 0; } .daycell:last-child { border-right: 0; } .daycell.sel { background: var(--ink); color: var(--paper); } .daycell i { width: 5px; height: 5px; background: transparent; display: block; } .daycell.today i { background: var(--ink); } .daycell.today.sel i { background: var(--acc); } .showrow { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--ink); cursor: pointer; width: 100%; text-align: left; background: transparent; border-top: 0; border-left: 0; border-right: 0; font: inherit; color: inherit; } .showrow:active { opacity: .8; } .showrow.past { opacity: .45; padding: 14px 18px; } .showrow.live { background: var(--acc); } .showrow-time { font-size: 11px; font-weight: 500; width: 60px; flex-shrink: 0; padding-top: 3px; } .showrow-name { font-size: 19px; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: break-word; } .showrow.past .showrow-name { font-size: 17px; } .showrow-sub { font-size: 12px; margin-top: 4px; } .showrow-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .chip { font-size: 10px; font-weight: 700; letter-spacing: .12em; border: 2px solid var(--ink); padding: 3px 6px; white-space: nowrap; } .chip.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---------- show detail ---------- */ .band { background: var(--ink); color: #efece4; padding: 22px 18px 20px; } .band .status { font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--acc); text-transform: uppercase; } .band .name { margin-top: 8px; font-size: clamp(24px, 7vw, 32px); line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; } .band .genre { margin-top: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .hostcard { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 3px solid var(--ink); align-items: center; } .hostsq { width: 52px; height: 52px; flex-shrink: 0; background: var(--acc); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; } .about-copy { padding: 16px 18px; font-size: 13px; line-height: 1.6; text-wrap: pretty; border-bottom: 3px solid var(--ink); } /* It is a

, which carries a default margin: 16px 0. Without this reset the content sits low in the row (30px above the text, 17px below) and the row spaces itself differently from every other row in the app, which use padding. */ .kv { display: flex; margin: 0; padding: 12px 18px; border-bottom: 3px solid var(--ink); gap: 14px; align-items: center; } .kv dt { font-size: 10px; letter-spacing: .14em; font-weight: 700; width: 84px; flex-shrink: 0; text-transform: uppercase; margin: 0; } .kv dd { font-size: 13px; margin: 0; } /* ---------- buttons ---------- */ .btnrow { padding: 18px; display: flex; gap: 12px; } .btn { flex: 1; padding: 14px; text-align: center; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; border: 3px solid var(--ink); background: transparent; color: var(--ink); font-family: inherit; transition: background .2s, color .2s, transform .12s, box-shadow .12s; text-decoration: none; display: flex; align-items: center; justify-content: center; } .btn:active { background: var(--press); } .btn.solid { background: var(--ink); color: #efece4; box-shadow: 4px 4px 0 var(--acc); } .btn.solid:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--acc); background: var(--ink); } .btn.on { background: var(--acc); color: var(--ink); } .confirm-line { padding: 10px 18px; border-bottom: 3px solid var(--ink); font-size: 12px; background: var(--press); } /* ---------- about ---------- */ .hero { padding: 18px 18px 0; font-size: clamp(36px, 11vw, 44px); line-height: .95; letter-spacing: -.03em; overflow-wrap: break-word; } .hero .stop { color: var(--dark); } .linkrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--ink); cursor: pointer; width: 100%; text-align: left; background: transparent; border-top:0; border-left:0; border-right:0; font: inherit; color: inherit; text-decoration: none; } .linkrow:active { background: var(--press); } .linkrow.last { border-bottom: 3px solid var(--ink); } .linkrow .open { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; flex-shrink: 0; } /* ---------- player ---------- */ #dock { background: var(--paper); transition: background .25s ease; flex-shrink: 0; } .player { margin: 0 18px 14px; background: var(--ink); color: #efece4; padding: 14px; display: flex; align-items: center; gap: 14px; box-shadow: 6px 6px 0 var(--acc); transition: box-shadow .25s ease; } .playbtn { width: 64px; height: 64px; background: var(--acc); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; border: 3px solid var(--ink); padding: 0; transition: transform .12s, background .3s, opacity .3s; } .playbtn:active { transform: translate(2px,2px); } .playbtn:disabled { background: var(--disabled); opacity: .5; cursor: default; } .player-status { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--acc); text-transform: uppercase; } .player-title { margin-top: 4px; font-size: 16px; line-height: 1.1; letter-spacing: -.01em; } .player-sub { font-size: 12px; margin-top: 2px; } .outbtn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; background: transparent; border: 0; padding: 0; color: #efece4; } .outbtn span { width: 36px; height: 36px; border: 2px solid #55554f; display: flex; align-items: center; justify-content: center; } .outbtn:active { opacity: .7; } /* The player's text block is the tap target for the track sheet. */ .player-body { min-width: 0; flex: 1; text-align: left; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; } .player-body:disabled { cursor: default; } .player-body:not(:disabled):active { opacity: .7; } .tabs { border-top: 3px solid var(--ink); display: flex; padding-bottom: env(safe-area-inset-bottom); } .tab { flex: 1; text-align: center; padding: 14px 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; cursor: pointer; background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; border: 0; border-right: 3px solid var(--ink); } .tab:last-child { border-right: 0; } .tab i { width: 6px; height: 6px; display: block; } .tab.on { background: var(--ink); } /* ---------- banner ---------- */ .banner { margin: 8px 18px 6px; padding: 10px 14px; background: var(--ink); color: #efece4; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .banner-label { font-size: 10px; letter-spacing: .14em; font-weight: 700; } .banner-text { font-size: 12px; margin-top: 2px; line-height: 1.4; } .banner button { font-size: 11px; font-weight: 700; letter-spacing: .08em; border: 2px solid #efece4; padding: 6px 10px; cursor: pointer; flex-shrink: 0; white-space: nowrap; background: transparent; color: #efece4; font-family: inherit; } /* ---------- sheets & overlays ---------- */ .scrim { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; } /* Flat ink dim behind a sheet — no blur, to stay in the design's hard-edged language. It lives on a pseudo-element so it can fade in independently of the sheet, which slides. */ .scrim::before { content: ''; position: absolute; inset: 0; background: rgba(17, 17, 17, .4); animation: scrim-in .28s ease both; } @keyframes scrim-in { from { opacity: 0 } to { opacity: 1 } } /* Set when a render rebuilds an already-open sheet, so neither the dim nor the slide replays. */ .scrim.no-anim::before, .scrim.no-anim .sheet { animation: none; } /* Dismissal. These must come after .no-anim so they win at equal specificity when a sheet is closed after having been re-rendered. */ .scrim.closing::before, .scrim.closing.no-anim::before { animation: scrim-out .26s ease both; } .scrim.closing .sheet, .scrim.closing.no-anim .sheet { animation: sheet-down .28s cubic-bezier(.4, 0, .9, .35) both; } @keyframes scrim-out { from { opacity: 1 } to { opacity: 0 } } @keyframes sheet-down { from { transform: translateY(0) } to { transform: translateY(100%) } } #launch.closing { animation: launch-out .3s ease both; } @keyframes launch-out { from { opacity: 1 } to { opacity: 0 } } .sheet { position: relative; z-index: 1; width: 100%; max-width: 480px; background: var(--paper); border-top: 3px solid var(--ink); padding-bottom: calc(40px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; scrollbar-width: none; animation: up .38s cubic-bezier(.2,.8,.2,1); } .sheet::-webkit-scrollbar { display: none; } @keyframes up { from { transform: translateY(100%) } to { transform: translateY(0) } } .sheet-hdr { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-bottom: 3px solid var(--ink); gap: 12px; } .sheet-close { font-size: 12px; font-weight: 700; letter-spacing: .1em; cursor: pointer; background: none; border: 0; font-family: inherit; color: inherit; display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: -6px 0; } .sheet-title { font-size: clamp(22px, 7vw, 28px); line-height: 1; letter-spacing: -.02em; overflow-wrap: break-word; } .step { display: flex; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--ink); align-items: center; } .step-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; line-height: 1; width: 52px; flex-shrink: 0; color: var(--dark); } .field { width: 100%; padding: 14px; border: 3px solid var(--ink); background: transparent; font-family: inherit; font-size: 15px; outline: none; border-radius: 0; color: var(--ink); } .field.err { border-color: var(--dark); } .field::placeholder { color: #8a8a84; } .err-msg { padding: 8px 18px 0; font-size: 12px; color: var(--dark); font-weight: 700; } .fineprint { padding: 0 18px; font-size: 11px; line-height: 1.5; color: #55554f; } .done-card { margin: 18px; padding: 18px; border: 3px solid var(--ink); background: var(--press); } /* ---------- first launch ---------- */ #launch { position: absolute; inset: 0; z-index: 40; background: var(--ink); color: #efece4; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 18px calc(48px + env(safe-area-inset-bottom)); overflow-y: auto; } #launch .hero { padding: 0; font-size: 54px; margin-top: 14px; } #launch .hero .stop { color: #00e0a4; } #launch .kicker { font-size: 11px; letter-spacing: .1em; font-weight: 700; display: flex; gap: 8px; align-items: center; color: #00e0a4; } #launch p { margin: 16px 0 0; font-size: 14px; line-height: 1.6; text-wrap: pretty; max-width: 300px; } #launch .cta { margin-top: 28px; padding: 18px; background: #00e0a4; color: #111; border: 3px solid #00e0a4; text-align: center; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; display: flex; justify-content: center; gap: 12px; align-items: center; font-family: inherit; } #launch .cta:active { opacity: .85 } #launch .ghost { margin-top: 12px; padding: 14px; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .08em; cursor: pointer; border: 2px solid #efece4; background: transparent; color: #efece4; font-family: inherit; } #launch .note { margin-top: 14px; font-size: 11px; line-height: 1.5; color: #9a9a94; } .spinner { width: 26px; height: 26px; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; } .spinner.sm { width: 18px; height: 18px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg) } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Lock the page itself; only #scroll moves. */ html, body { height: 100%; overflow: hidden; } /* ---------- desktop ---------- On a phone the app is full-bleed. On anything wider, present it as a phone-shaped card rather than a tall stretched column: iPhone-ish width, capped height, centred, in the design's own border + hard-shadow language. */ @media (min-width: 600px) { body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } #shell { max-width: 402px; height: min(872px, calc(100vh - 48px)); border: 3px solid var(--ink); box-shadow: 12px 12px 0 rgba(17, 17, 17, .12); } /* The border draws the edge; the tab bar's own top rule would double it. */ #shell .tabs { padding-bottom: 0; } } /* Very short windows: let the frame use the full height rather than overflow. */ @media (min-width: 600px) and (max-height: 720px) { #shell { height: calc(100vh - 24px); } }