skip a heading level). The size is set here, so the tag changed and the look did not. */ .panel-hd h2,.panel-hd h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em} .panel-hd .sp{font-size:11px;color:var(--ink-3)} .panel-bd{padding:19px} .sched a{ display:flex;gap:13px;align-items:center;padding:13px 19px; border-bottom:1px solid var(--line-2);transition:background .16s var(--ease); } .sched a:last-child{border-bottom:0} .sched a:hover{background:var(--ground)} .sched img,.sched .art-ph{ width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0; border:2px solid var(--line-2);font-size:16px; } .sched .nm{font-weight:700;font-size:14.5px;letter-spacing:-.01em} .sched .tmz{font-size:12.5px;color:var(--primary-text);font-weight:600} .sched .now{background:var(--primary-lt)} .wx-now{display:flex;align-items:center;gap:16px;margin-bottom:16px} .wx-now .tmp{font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;font-family:var(--display)} .wx-now .ic{font-size:34px;line-height:1} .wx-now .ds{font-size:13.5px;color:var(--ink-3)} .wx-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;text-align:center} .wx-days div{background:var(--ground);border-radius:calc(var(--r) - 3px);padding:11px 4px} .wx-days .d{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} .wx-days .i{font-size:17px;margin:4px 0 2px} .wx-days .t{font-size:14px;font-weight:700} .wx-credit{margin:14px 0 0;font-size:11px;color:var(--ink-3);text-align:center} .wx-credit a{text-decoration:underline;text-underline-offset:2px} .wx-loading .wx-now,.wx-loading .wx-days{opacity:.45} .soc{display:flex;gap:9px;flex-wrap:wrap} .soc a{ flex:1;min-width:42px;aspect-ratio:1;border-radius:calc(var(--r) - 3px); display:grid;place-items:center;background:var(--ground); border:1px solid var(--line);color:var(--ink-2); transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease); } .soc a:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-on)} .soc svg{width:18px;height:18px;fill:currentColor} /* Travel links: to the people who hold the data, not our own incident feed. */ .tgrid{display:grid;gap:10px} @media(min-width:620px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} .tlink{ display:flex;align-items:flex-start;gap:11px;background:var(--ground); border:1px solid var(--line-2);border-radius:calc(var(--r) - 2px);padding:12px 14px; transition:border-color .16s var(--ease),background .16s var(--ease); } .tlink:hover{border-color:var(--primary);background:var(--card)} .tlink .ic{font-size:17px;line-height:1.3;flex-shrink:0} .tlink .nm{display:block;font-weight:700;font-size:14px} .tlink .nm::after{content:"\2197";font-size:11px;color:var(--primary-text);margin-left:6px} .tlink .ds{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.42;margin-top:2px} .tnote{margin:0 0 15px;font-size:13px;color:var(--ink-3);line-height:1.5;max-width:64ch} /* ---------------------------------------------------- 10. player bar ---- */ /* Fixed, persistent, and never re-mounted on navigation — see static/js/app.js. This bar is the product; everything else is a page around it. */ .player{ position:fixed;left:0;right:0;bottom:0;z-index:90; background:var(--deep);color:#fff; border-top:1px solid rgb(255 255 255 / .10); padding-bottom:env(safe-area-inset-bottom,0px); transition:transform .3s var(--ease); } [data-player="light"] .player{ background:var(--card);color:var(--ink);border-top-color:var(--line); box-shadow:0 -4px 20px -12px rgb(0 0 0 / .35); } [data-player="vivid"] .player{ background:linear-gradient(100deg,var(--primary) 0%,var(--accent) 130%); color:var(--primary-on);border-top-color:transparent; } .player .wrap{display:flex;align-items:center;gap:14px;height:var(--player-h)} .pbtn{ width:48px;height:48px;flex-shrink:0;border-radius:50%;border:0;cursor:pointer; background:var(--primary);color:var(--primary-on);display:grid;place-items:center; transition:transform .16s var(--ease),filter .16s var(--ease); } [data-player="vivid"] .pbtn{background:#fff;color:#111} .pbtn:hover{transform:scale(1.06);filter:brightness(1.08)} .pbtn svg{width:19px;height:19px;fill:currentColor;margin-left:1px} .pbtn[data-playing="true"] svg{margin-left:0} /* Buffering: the ring turns while we wait, so a slow stream looks like it is working rather than broken. */ .pbtn.busy::after{ content:"";position:absolute;width:60px;height:60px;border-radius:50%; border:2px solid transparent;border-top-color:currentColor;opacity:.55; animation:spin .8s linear infinite; } .pbtn{position:relative} @keyframes spin{to{transform:rotate(360deg)}} .pnow{display:flex;align-items:center;gap:12px;min-width:0;flex:1} .pnow .pa{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgb(255 255 255 / .1)} .pnow .pa.art-ph{font-size:18px} .pnow .pt{min-width:0} .pnow .p1{ font-weight:700;font-size:14.5px;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pnow .p2{ font-size:12.5px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } [data-player="light"] .pnow .p2{opacity:1;color:var(--ink-3)} .pstat{ font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; display:flex;align-items:center;gap:6px;opacity:.85; } .pstat .dot{background:#ff4d4d} .player.on .pstat .dot{background:#2ecc71} /* ---- listen again ------------------------------------------------------ The player in on-demand mode. Everything here is hidden by default and only the JS shows it, so a station with listen again switched off carries a few hundred bytes of CSS and no markup they can see. */ /* THE SCRUBBER. Full width of the window on purpose: the longer the track the finer the control, and these are three-hour programmes. A 3px line was technically draggable and nobody would ever have found it. */ .pseekwrap{position:absolute;top:0;left:0;right:0;height:0} .pseekwrap[hidden]{display:none} .pseek{ position:relative;height:5px;cursor:pointer;touch-action:none; background:rgb(255 255 255 / .18); } [data-player="light"] .pseek{background:var(--line-2)} /* The hit area is 18px tall while the line stays 5px: a track you can grab without having to aim. Fitts's law, not decoration. */ .pseek::after{content:"";position:absolute;left:0;right:0;top:-7px;height:19px} .pseek .pbuf, .pseek .pfill{position:absolute;left:0;top:0;height:100%;width:0} .pseek .pbuf{background:rgb(255 255 255 / .22)} [data-player="light"] .pseek .pbuf{background:var(--line)} .pseek .pfill{background:var(--primary);transition:width .12s linear} [data-player="vivid"] .pseek .pfill{background:#fff} .pseek.dragging .pfill{transition:none} /* The handle appears on hover, drag or focus. Visible at rest it reads as a control fighting the bar; absent entirely there is nothing to grab. */ .pseek .phandle{ position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%; background:var(--primary);transform:translate(-50%,-50%) scale(0); transition:transform .14s var(--ease);pointer-events:none; box-shadow:0 0 0 3px rgb(0 0 0 / .22); } [data-player="vivid"] .pseek .phandle{background:#fff} .pseek:hover .phandle, .pseek:focus-visible .phandle, .pseek.dragging .phandle{transform:translate(-50%,-50%) scale(1)} .pseek:focus-visible{outline:2px solid var(--primary);outline-offset:3px} /* Where in the programme, and the time of day it went out - because nobody thinks "one hour thirty-two minutes in", they think "around half four". */ .pbubble{ position:absolute;bottom:14px;transform:translateX(-50%);white-space:nowrap; background:var(--ink,#111);color:var(--card,#fff);border-radius:7px; padding:6px 10px;font-size:12px;font-weight:700;pointer-events:none; font-variant-numeric:tabular-nums;box-shadow:var(--shadow-1,0 4px 14px rgb(0 0 0/.3)); } .pbubble[hidden]{display:none} /* Wound back: the fill is the part of the hour already behind them, so the handle crawls rightwards towards live as they listen. */ .player.rewound .pfill{opacity:.85} /* Live with a recording behind us: the whole bar is filled, because everything up to now has already happened. */ .player.scrubbing:not(.rewound):not(.ondemand) .pfill{opacity:.55} /* Skip. Thirty seconds is the size of the thing somebody is hunting for. */ /* Label BESIDE the arrow, not inside it. Stacked, the 30 sat on top of the arrowhead and both became a smudge at 21px - the number is the whole point of the button, so it has to be readable. */ .pskip{ display:inline-flex;align-items:center;gap:5px;flex-shrink:0;cursor:pointer; height:36px;padding:0 11px;border-radius:100px;border:0;background:none; color:inherit;transition:background .16s var(--ease); } .pskip[hidden]{display:none} .pskip:hover{background:rgb(255 255 255 / .12)} [data-player="light"] .pskip:hover{background:var(--ground)} .pskip svg{width:18px;height:18px;fill:currentColor;flex-shrink:0} .pskip span{font-size:11.5px;font-weight:800;letter-spacing:-.01em;opacity:.9} .pskip:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* On a phone the bar is tight: the play button and the scrubber matter more than the skips, which the drag already covers. */ @media(max-width:520px){.pskip{display:none}} .ptime{ font-size:12px;font-variant-numeric:tabular-nums;opacity:.75;flex-shrink:0; letter-spacing:.01em; } .ptime[hidden]{display:none} .plive{ display:flex;align-items:center;gap:7px;flex-shrink:0;cursor:pointer; background:rgb(255 255 255 / .12);border:1px solid rgb(255 255 255 / .2); color:inherit;border-radius:100px;padding:7px 14px;font-size:12px;font-weight:700; transition:background .16s var(--ease); } .plive[hidden]{display:none} .plive:hover{background:rgb(255 255 255 / .2)} [data-player="light"] .plive{background:var(--ground);border-color:var(--line)} .plive .dot{width:7px;height:7px;border-radius:50%;background:#ff4d4d;flex-shrink:0} /* On demand, the live indicator is not the truth, so it goes. */ .player.ondemand .pstat{display:none} /* The listen again page: the same row shape as the schedule, so the two pages read as one product rather than as two features. */ .agday{margin:26px 0 12px;font-size:19px} .agrow{ display:flex;align-items:center;gap:14px;background:var(--card); border:1px solid var(--line);border-radius:var(--r);padding:14px 18px; margin-bottom:10px;transition:border-color .18s var(--ease);flex-wrap:wrap; } .agrow:hover{border-color:var(--primary)} .agrow .tm{ font-size:13.5px;font-weight:700;color:var(--primary-text); font-variant-numeric:tabular-nums;flex-shrink:0;min-width:52px; } .agrow .bd{display:flex;flex-direction:column;gap:2px;flex:1;min-width:150px} .agrow .nm{font-weight:700;font-size:15.5px;letter-spacing:-.012em} .agrow .ps{font-size:13px;color:var(--ink-3)} .agrow .again{position:static;transform:none;margin:0;width:auto} /* NOT flex. Flex makes every text node its own item, so `gap` pushed the full stop away from the link it belongs to and the line read "...last 7 days .". This is a sentence, so it is laid out as one. */ /* A station's own words inside a page that is otherwise ours. Styled as body copy rather than as a call-out: it IS the page's opening paragraph, not an aside, and a box round it would say otherwise. */ .ownwords{margin:0 0 22px;color:var(--ink-2,var(--ink));line-height:1.65} .ownwords > :first-child{margin-top:0} .ownwords > :last-child{margin-bottom:0} .ownwords p{margin:0 0 12px} .ownwords ul,.ownwords ol{margin:0 0 12px;padding-left:22px} .ownwords li{margin-bottom:5px} .ownwords h2,.ownwords h3{margin:20px 0 8px;font-size:18px;letter-spacing:-.015em} .ownwords a{color:var(--primary-text);font-weight:600} /* The noticeboard's feature. This one IS a call-out - it is the station asking for something, not part of the page's own prose. */ .focus{ background:var(--primary-lt,var(--ground));border:1px solid var(--line-2); border-left:4px solid var(--primary);border-radius:var(--r); padding:clamp(20px,3vw,28px);margin:0 0 26px; } .focus h2{margin:0 0 10px;font-size:20px;letter-spacing:-.02em} .focus .ownwords{margin-bottom:0} .focus .btn{margin-top:16px} .againnote{margin:0 0 16px;font-size:14px;color:var(--ink-3);line-height:1.5} .againnote .ic{margin-right:7px;opacity:.6} .againnote a{color:var(--primary-text);font-weight:700} /* The button on a schedule row. */ .slotwrap{position:relative} .again{ position:absolute;right:14px;top:50%;transform:translateY(-50%); display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:var(--ground);border:1px solid var(--line);color:var(--primary-text); border-radius:100px;padding:8px 14px;font-size:12.5px;font-weight:700; transition:border-color .16s var(--ease),background .16s var(--ease); } .again:hover{border-color:var(--primary);background:var(--primary-lt)} .again:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .again svg{width:14px;height:14px;fill:currentColor;flex-shrink:0} /* Room for it, so a long programme title never runs underneath the button. */ .slot.has-again .bd{padding-right:150px} /* On a phone the row is stacked and there is no room beside it, so the button goes back into the flow under the programme rather than sitting on top of the title. */ @media(max-width:619px){ .again{position:static;transform:none;margin:0 20px 14px;width:calc(100% - 40px);justify-content:center} .slot.has-again .bd{padding-right:20px;padding-bottom:10px} } .pvol{display:none;align-items:center;gap:9px;flex-shrink:0} @media(min-width:820px){.pvol{display:flex}} .pvol input[type=range]{ width:98px;accent-color:var(--primary);cursor:pointer;background:transparent; } [data-player="vivid"] .pvol input[type=range]{accent-color:#fff} .pvol button{background:none;border:0;color:inherit;cursor:pointer;padding:6px;display:grid;place-items:center} .pvol svg{width:18px;height:18px;fill:currentColor} .pchan{ display:none;flex-shrink:0;background:rgb(255 255 255 / .12); border:1px solid rgb(255 255 255 / .18);border-radius:100px;padding:3px;gap:2px; } @media(min-width:1000px){.pchan{display:flex}} .pchan button{ background:none;border:0;color:inherit;cursor:pointer;border-radius:100px; padding:7px 14px;font-size:12px;font-weight:700;opacity:.7; } .pchan button[aria-pressed="true"]{background:#fff;color:#111;opacity:1} [data-player="light"] .pchan{background:var(--ground);border-color:var(--line)} [data-player="light"] .pchan button[aria-pressed="true"]{background:var(--primary);color:var(--primary-on)} @media(max-width:520px){ .player .wrap{gap:11px} .pnow .pa{width:42px;height:42px} .pbtn{width:44px;height:44px} } /* ------------------------------- 11. forms, sponsors, footer, utils ----- */ .form{display:grid;gap:16px} .field{display:grid;gap:6px} .field label{font-size:13.5px;font-weight:700} .field .hint{font-size:12.5px;color:var(--ink-3)} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;border:1.5px solid var(--line); border-radius:calc(var(--r) - 2px);background:var(--card);color:var(--ink); transition:border-color .16s var(--ease),box-shadow .16s var(--ease); } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); outline:none; } .field textarea{min-height:132px;resize:vertical} .field.err input,.field.err textarea,.field.err select{border-color:#DC2626} .field .msg{font-size:12.5px;color:#DC2626;font-weight:600} .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45} .check input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--primary)} .form-row{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)} @media(min-width:620px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}} .formnote{font-size:14px;padding:13px 16px;border-radius:calc(var(--r) - 2px);margin:0} .formnote.ok{background:var(--accent-lt);color:var(--accent-on-tint)} .formnote.bad{background:#FEF2F2;color:#991B1B} .sponsors{background:var(--card);border-top:1px solid var(--line);padding-block:26px} .sponsors .lbl{ text-align:center;font-size:10px;font-weight:800;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-3);margin-bottom:18px; } .sponsor-wall{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:clamp(20px,4vw,52px); } .sponsor-wall a{display:block;opacity:.72;transition:opacity .2s var(--ease),transform .2s var(--ease)} .sponsor-wall a:hover{opacity:1;transform:translateY(-2px)} .sponsor-wall img{max-height:46px;width:auto;background:none} .sponsored-by{font-size:11px;color:var(--ink-3);letter-spacing:.03em} .sponsored-by b{color:var(--ink-2);font-weight:700} /* --------------------------------------------------- injected elements --- Browser extensions append their own hosts to the end of : screen recorders, ad blockers, coupon toolbars, password managers. They are usually an EMPTY element (their UI lives in a shadow root) and they are usually in normal flow, so a host that happens to be sized adds its full height to the document — below the footer, where it reads as a screen of blank space the site forgot to fill. One real example, measured: a recorder adding exactly one viewport height, 889px, under the footer of every page. We cannot remove somebody else's element and should not try. Taking it out of flow is enough: it stops contributing height, and its own UI is positioned from inside its shadow root either way. Deliberately narrow — only an element AFTER the footer, only a `div`, and only one that is `:empty`, which a shadow host with no light-DOM children is. Our own trailing elements (the player, the cookie note, studio mode's drawer) all have content, so none of them match. */ body > .footer ~ div:empty{ position:absolute; } /* The footer reserves the room for the fixed player, rather than doing it. Body padding left a strip of PAGE colour under the dark footer - which on a short page read as the site simply stopping halfway down. Put the space inside the footer and the colour runs to the player. */ .footer{ background:var(--deep);color:rgb(255 255 255 / .72);margin-top:var(--block); padding-block:clamp(34px,5vw,56px) calc(26px + var(--player-h) + env(safe-area-inset-bottom,0px)); } /* No player configured: no room to reserve. */ body:not(:has(.player)) .footer{padding-block-end:26px} .footer .cols{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)} @media(min-width:700px){.footer .cols{grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr)}} @media(min-width:1000px){.footer .cols{grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}} .footer h4{color:#fff;font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px} .footer a:hover{color:#fff;text-decoration:underline} .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px} .footer .fbrand img{height:56px;margin-bottom:14px} .footer .fbrand p{font-size:14px;max-width:38ch} .footer .legal{ margin-top:34px;padding-top:20px;border-top:1px solid rgb(255 255 255 / .12); display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between; font-size:12.5px;color:rgb(255 255 255 / .5);} .footer .legal .made{margin-inline-start:auto} .footer .legal .made a{color:rgb(255 255 255 / .8);text-decoration:underline; text-underline-offset:2px} .footer .legal .made a:hover{color:#fff} @media(max-width:700px){.footer .legal .made{margin-inline-start:0}} .empty{ text-align:center;padding:clamp(34px,6vw,64px) var(--gut); border:1.5px dashed var(--line);border-radius:var(--r);color:var(--ink-3); } .empty h3{color:var(--ink);font-size:19px;margin-bottom:8px} .pager{display:flex;gap:8px;justify-content:center;margin-top:var(--gap);flex-wrap:wrap} .pager a,.pager span{ padding:10px 15px;border:1px solid var(--line);border-radius:calc(var(--r) - 2px); font-size:14px;font-weight:600;background:var(--card); } .pager .on{background:var(--primary);border-color:var(--primary);color:var(--primary-on)} .pager .off{opacity:.45} .prose{max-width:72ch;font-size:16.5px;color:var(--ink-2)} .prose h2{font-size:26px;margin:1.6em 0 .5em;color:var(--ink)} .prose h3{font-size:20px;margin:1.5em 0 .45em;color:var(--ink)} .prose a{color:var(--primary-text);text-decoration:underline;text-underline-offset:2px} .prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em} .prose li{margin-bottom:.4em} .prose img{border-radius:var(--r);margin:1.4em 0} .prose blockquote{ margin:1.5em 0;padding:4px 0 4px 22px;border-left:3px solid var(--primary); font-size:19px;color:var(--ink);font-style:italic; } .prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r);margin:1.4em 0} .tags{display:flex;flex-wrap:wrap;gap:7px} .tag{ font-size:12px;font-weight:600;padding:5px 11px;border-radius:100px; background:var(--line-2);color:var(--ink-2); } .tag:hover{background:var(--primary);color:var(--primary-on)} .cookie{ position:fixed;left:var(--gut);right:var(--gut);z-index:95; bottom:calc(var(--player-h) + 14px + env(safe-area-inset-bottom,0px)); max-width:520px;background:var(--card);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow-2);padding:18px 20px; display:flex;flex-direction:column;gap:12px;font-size:14px; } .cookie[hidden]{display:none} /* The page-swap transition. Deliberately tiny: 120ms is enough to feel deliberate and short enough that nobody waiting for content notices it. */ /* The page's own background lives here now, because is painted in the footer's colour. `min-height` keeps a short page — a 404, an empty search — from showing the dark through the middle. */ main{ animation:fade .16s var(--ease); background:var(--ground); min-height:40vh; } @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} body.swapping main{opacity:.4;transition:opacity .1s linear} @media print{ .player,.navbar,.mobile-nav,.listen-btn,.cookie,.sponsors{display:none !important} body{padding-bottom:0;background:#fff;color:#000} .card,.panel{border-color:#ccc;box-shadow:none} } /* A field the server said was wrong. Marked as well as focused, because the focus ring alone is gone the moment the person clicks somewhere else. */ .field.bad input,.field.bad textarea,.field.bad select{ border-color:var(--bad, #B42318); box-shadow:0 0 0 3px color-mix(in srgb, var(--bad, #B42318) 16%, transparent); } .field.bad label{color:var(--bad, #B42318)} /* ---------------------------------------------------------- tap targets --- WCAG 2.2 (2.5.8, AA) asks for 24x24 of target. These were all a few pixels short, and every one of them is in a place you reach for on a phone: the footer link lists at 18px, the legal strip at 16px, the weather credit at 14px, a podcast episode heading at 23px. Padding rather than font size, so nothing about the design changes - the links simply become possible to hit. Measured by the responsive tests. */ .footer ul li a, .footer .fbrand a, .footer p a, .legal a, .wx-credit a, .newscredit a{ display:inline-flex;align-items:center;min-height:24px; } /* A list of links is also easier to hit with a little air between the rows. */ .footer ul li{margin-bottom:2px} .legal a{padding-inline:2px} /* A heading that is a link needs the same. One pixel short is still short. */ .ncard h3 a,.hcard h3 a,.story h3 a,.card h3 a{ display:inline-flex;align-items:center;min-height:24px; } /* ------------------------------------------------------- the station app -- The install card. Bottom of the screen, out of the way, and gone for good once dismissed - an install prompt that keeps coming back is an advert. */ .install-card{ position:fixed;left:12px;right:12px;bottom:calc(var(--player-h,74px) + 12px); z-index:60;display:flex;gap:14px;align-items:center;flex-wrap:wrap; background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 12px 40px rgb(0 0 0 / .18);padding:14px 16px; max-width:560px;margin-inline:auto; } .install-card[hidden]{display:none !important} .install-card .ic-b{display:flex;gap:13px;align-items:center;flex:1;min-width:220px} .install-card img{border-radius:10px;flex:none} .install-card b{display:block;font-size:14.5px} .install-card span{display:block;font-size:13px;color:var(--ink-3);line-height:1.45} .install-card .ios{margin-top:6px;color:var(--ink-2)} .install-card .ic-a{display:flex;gap:8px;margin-left:auto} .notify{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} /* A presenter's photograph standing in for missing show artwork. Circular, and cropped from the TOP rather than the centre: a portrait centre-cropped into a square takes the chin and loses the eyes, which is the one thing a listener recognises. */ /* Only the crop, never the size. Setting width/aspect-ratio here fought the sizes the cards already give their pictures and pushed them off to one side at odd heights - and on the schedule it was pointless anyway, because .slot .av is a circle already. A class that changes layout has to be opted into by the layout, not imposed on it. */ .art-face{ border-radius:50%; object-fit:cover; object-position:50% 22%; } /* What replaces a form once it has sent. The form used to stay on screen with a line underneath, which reads as "nothing happened" - people sent the same message two or three times and a presenter got it three times. */ .formdone{ display:grid;gap:14px;justify-items:start; padding:clamp(20px,3vw,30px); border:1px solid var(--line-2);border-radius:var(--r); background:var(--primary-lt,var(--panel)); } .formdone:focus{outline:2px solid var(--primary);outline-offset:3px} .formdone-hd{margin:0;font-weight:700;font-size:17px;color:var(--ink)}