/* OBEINSON FREQUENCY X — the affirmative button, and the surfaces that carry it. * * Two jobs, and they turned out to be the same job. * * --------------------------------------------------------------------------- * 1. THE BUG: "Agree and continue" could not be read, even when it was live. * * Measured on a phone, dark theme, AFTER the box is ticked and the button is * enabled: ink rgb(11,18,32) on fill rgb(28,38,55) — 1.23:1. Not a dim disabled * state; the button a person has to press to get into the app was the least * readable thing on the screen. * * The cause is a chain, not a typo. index.html intends a bright fill: * * .eulaBtns .agree { background: linear-gradient(135deg,#8ec9f5,#5fb0ea); color:#fff } (0,2,0) * * and polish.css then darkens the ink, correctly, because white on #5fb0ea is * only 2.36:1. But the fill never lands: the dark theme carries * * :root[data-theme="dark"] button:not(.primary) { background:#1c2637 } (0,3,1) * * which outscores it, so the button paints dark navy and keeps the dark ink * meant for a bright one. Each rule is defensible alone. Together they produce * a ghost. * * The fix is to make the fill win, which makes the dark ink right again — so * the same change that repairs the contrast is the change that makes the * button look like the main action. That is why the premium pass and the bug * fix are one file. * * --------------------------------------------------------------------------- * 2. EVERY AFFIRMATIVE BUTTON, not just that one. * * `#tvYes` ("I understand — continue", the Free TV gate) was measured at * 1.78:1 — there the fill DOES land and the ink is still white, which is the * 2.36:1 polish.css was written about; that selector list just never included * it. Rather than keep adding ids to a list one bug report at a time, every * button that means "yes, go on" is given one treatment here. * * Contrast of that treatment, computed per gradient stop, not assumed: * ink #05121e on #7fe3ff (light stop) = 13.0:1 * ink #05121e on #2b7fff (dark stop) = 5.2:1 * so it passes AA across the whole sweep of the gradient, not just at one end. * * Nothing here sets width, height, margin, padding, flex or position, so it * cannot collide with layout tuned against a real device. np-vibrant.css owns * the phone player's colour and is deliberately untouched by this file. */ /* -------------------------------------------------------- the main action */ html .eulaBtns button.agree, html #tvYes, html button.primary, html #qsGo, html #aioGo, html #bcPickGo, html #obnVolWarn .go, html .devRow .go, html .localBar .go, html .sdrTuner #sdrTuneBtn { background-image: linear-gradient(135deg, #7fe3ff 0%, #35a7f5 55%, #2b7fff 100%) !important; background-color: #35a7f5 !important; color: #05121e !important; -webkit-text-fill-color: #05121e !important; border: none !important; font-weight: 700 !important; letter-spacing: .01em; /* Depth, not decoration: a coloured shadow under the one control that matters lifts it off the card, and the inner highlight gives the fill an edge so it reads as a raised surface rather than a flat swatch. */ box-shadow: 0 8px 22px -8px rgba(43, 127, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .45) !important; text-shadow: none !important; } html .eulaBtns button.agree:hover, html #tvYes:hover, html button.primary:hover, html #qsGo:hover, html #aioGo:hover, html #obnVolWarn .go:hover { filter: brightness(1.06); } html .eulaBtns button.agree:active, html #tvYes:active, html button.primary:active, html #obnVolWarn .go:active { filter: brightness(.96); box-shadow: 0 4px 12px -8px rgba(43, 127, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .3) !important; } /* ------------------------------------------------------- waiting, not gone * * The disabled state was `opacity:.45` over the ghost above. A disabled * control is exempt from the contrast rules, but a person who cannot read the * button does not know it is disabled — they think the app is broken. So it * stays readable and loses the fill and the glow instead: flat, quiet, * obviously not ready, still a sentence you can read. * * dark: #a9c0dc on #22304a = 6.8:1 * light: #4a5b70 on #dde5ee = 5.5:1 */ html .eulaBtns button.agree:disabled, html button.primary:disabled { background-image: none !important; background-color: #22304a !important; color: #a9c0dc !important; -webkit-text-fill-color: #a9c0dc !important; box-shadow: none !important; opacity: 1 !important; cursor: not-allowed; } :root[data-theme="light"] .eulaBtns button.agree:disabled, :root[data-theme="light"] button.primary:disabled { background-color: #dde5ee !important; color: #4a5b70 !important; -webkit-text-fill-color: #4a5b70 !important; } /* ------------------------------------------------------------- the gates * * The entry cards were translucent — measured `rgba(255,255,255,.72)` in light * and `rgba(15,23,42,.6)` in dark — so whatever was behind them bled through * and every word on them lost contrast against a muddy, shifting backdrop. In * light theme the licence card read as grey-on-grey and its headings measured * 2.16:1. * * Opaque is both the legible answer and the premium one: a solid card with one * real shadow looks considered, where a washed translucent panel looks unfinished. */ /* `html:root` is not decoration. The design-system layer carries `:root[data-theme="dark"] .eulaCard { background: var(--ds-surface) !important }` at (0,3,0); a plain `.eulaOv .eulaCard` is (0,2,0) and lost to it, so the card stayed translucent and the page behind went on showing through the licence text. This is (0,3,1). The light rule below was already (0,4,0) and always landed, which is why only dark was still bleeding. */ html:root .eulaOv .eulaCard, html:root #pinOv .pinCard, html:root #regOv .regCard { background: #111a29 !important; border: 1px solid rgba(143, 201, 245, .18) !important; box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset !important; } :root[data-theme="light"] .eulaOv .eulaCard, :root[data-theme="light"] #pinOv .pinCard, :root[data-theme="light"] #regOv .regCard { background: #ffffff !important; border: 1px solid #d7e2ee !important; box-shadow: 0 28px 64px -28px rgba(31, 51, 77, .38), 0 2px 6px -2px rgba(31, 51, 77, .12) !important; } /* ---------------------------------------------------- the PIN screen, in light * * This one is on me, and it is worth writing down exactly how it happened. * * The PIN screen was only ever drawn on a dark card, so its ink is near-white * (#e2e8f0) and hardcoded. In light theme the card above turned opaque white — * and nothing re-coloured the text, because there was no light-theme styling * for this screen at all. Measured on a phone: the title 1.23:1, the keypad * digits 1.14:1. Invisible. On the lock screen, where the keypad is the only * way back in. * * Two of my own changes had to meet for it to show: the card becoming opaque, * and the app starting to follow a phone set to light. Before them the card was * a dark translucent panel even in light theme, which kept the light ink * readable by accident. An accident is not a reason to leave it that way, so * the screen gets real light-theme colours and keeps the solid card. */ :root[data-theme="light"] #pinOv #pinTitle { color: #15212d !important; /* 15.9:1 on white */ -webkit-text-fill-color: #15212d !important; } :root[data-theme="light"] #pinOv #pinSub, :root[data-theme="light"] #pinOv #pinAlt { color: #55687e !important; /* 5.3:1 */ -webkit-text-fill-color: #55687e !important; } :root[data-theme="light"] #pinOv .pinPad button { color: #15212d !important; /* 14.6:1 on the key's own fill */ -webkit-text-fill-color: #15212d !important; background: #eef2f7 !important; border: 1px solid #cdd8e4 !important; } :root[data-theme="light"] #pinOv .pinPad button:active { background: #dce5ef !important; } /* "Reset the app" is the only way back from a PIN nobody remembers, so it has to read as a link and clear AA, not as decoration. */ :root[data-theme="light"] #pinOv #pinAlt a, :root[data-theme="light"] #pinOv #pinAlt button, :root[data-theme="light"] #pinOv #pinAlt .lnk { color: #1d6fa5 !important; /* 5.4:1 */ -webkit-text-fill-color: #1d6fa5 !important; } /* The four entry dots: an outline that was built to sit on a dark card. */ :root[data-theme="light"] #pinOv #pinDots i { border-color: #7d8fa4 !important; } :root[data-theme="light"] #pinOv #pinDots i.on { background: #15212d !important; border-color: #15212d !important; } /* The licence headings. Violet measures 5.5:1 on the dark card and is kept; in light it was inheriting --muted (#6b7f95) at 2.16:1. #1d6fa5 on white is 5.4:1 and belongs to the brand's own blue rather than introducing a hue. */ :root[data-theme="light"] .eulaBody h4, :root[data-theme="light"] .eulaHead p { color: #1d6fa5 !important; } /* The scrim behind a gate: deeper, so the card is clearly the only thing being asked of you, and the page behind stops competing for attention. */ .eulaOv, #pinOv, #regOv { background: radial-gradient(120% 90% at 50% 0%, rgba(43, 127, 255, .14), transparent 62%), rgba(6, 11, 20, .82) !important; } :root[data-theme="light"] .eulaOv, :root[data-theme="light"] #pinOv, :root[data-theme="light"] #regOv { background: radial-gradient(120% 90% at 50% 0%, rgba(43, 127, 255, .10), transparent 62%), rgba(226, 234, 244, .88) !important; } /* ------------------------------------------------- light theme legibility * * The light theme inherits colours chosen for black instrument panels. On * #f7f9fc they stop being readable, and a sweep of the visible screens (the * probe hit-tests every element, so nothing hidden behind an overlay is * counted) found them clustered into three families rather than scattered. * * Every replacement keeps the hue and deepens the value, which is the rule the * rest of this app already follows: the role owns the hue, the theme owns the * value. Ratios are measured against the surface each one actually sits on. */ /* 1. The muted family — labels, captions, "worldwide — all band plans shown". #6b7f95 measures 4.12:1 and is under AA; #55687e is 5.3:1 and is the value np-phone.css and live-stats.css already settled on, so the three agree instead of each inventing a grey. One variable, many fixes. */ :root[data-theme="light"] { --muted: #55687e; } /* 2. Instrument neon on a white panel. Cyan #2de2ff reads 1.48:1 there. */ :root[data-theme="light"] #monTitle, :root[data-theme="light"] .obnGeoZoom button, :root[data-theme="light"] #obnGeoZoomIn, :root[data-theme="light"] #obnGeoZoomOut, :root[data-theme="light"] #obnGeoZoomReset { color: #0a7386 !important; /* 5.2:1 on white, same teal hue */ -webkit-text-fill-color: #0a7386 !important; } :root[data-theme="light"] #zoomLevel, :root[data-theme="light"] .ok100 { color: #1d6fa5 !important; /* 5.4:1 — the brand blue, deepened */ } :root[data-theme="light"] #obScan { color: #b3244a !important; /* 6.6:1 — the same alert pink, deepened */ } /* 3. Near-white labels that only ever had a dark panel behind them. */ :root[data-theme="light"] #radioHub small, :root[data-theme="light"] .pl-title small { color: var(--text, #2f3e50) !important; } /* 4. The selected chip. White on the brand's light blue is 3.53:1 — the same 2.36:1 problem the main action had, in a smaller place. Dark ink on the same fill, exactly as the button above. */ :root[data-theme="light"] .qsTabs button.on, :root[data-theme="light"] .qsGenres button.on, :root[data-theme="light"] .coll.on, :root[data-theme="light"] .obnTab.on { color: #05121e !important; -webkit-text-fill-color: #05121e !important; } /* ------------------------------------------------------ dark theme leftovers * * What the same sweep found still under AA in dark, excluding two readings * that are probe artifacts rather than faults: the header wordmark is painted * by a gradient clipped to its text, which no colour probe can resolve, and an * emoji is a multicolour glyph that contrast ratios do not describe. */ /* `color` alone did nothing here, measured: the computed colour was already the light one and `-webkit-text-fill-color: rgb(47,62,80)` was painting the glyphs dark over it. The same trap the banner's gradient wordmark sprang. Where one is set, both have to be. */ :root[data-theme="dark"] #rhTitle { color: var(--text, #e2e8f0) !important; /* was 1.55:1 */ -webkit-text-fill-color: var(--text, #e2e8f0) !important; } /* The bottom tab bar's selected item: #3b8fd9 on #1c2637 is 4.43:1, just under. The same blue one step lighter is 8.4:1 and still reads as selected. */ :root[data-theme="dark"] .mobtabs button.on { color: #8ec9f5 !important; -webkit-text-fill-color: #8ec9f5 !important; } :root[data-theme="light"] .mobtabs button.on, :root[data-theme="light"] #obnWorldBtn.on, :root[data-theme="light"] .qsWord b { color: #1d6fa5 !important; /* 5.4:1 on white */ -webkit-text-fill-color: #1d6fa5 !important; } /* The catalog wordmark's amber. #f0a81e is built for a black bar and measures 1.74:1 on a white one; the same amber deepened is 6.0:1. */ :root[data-theme="light"] .qsWord i { color: #8a5a00 !important; -webkit-text-fill-color: #8a5a00 !important; } /* The selected region on the map. Its label is white on nothing — fine over a dark map, 1.78:1 over a light one. A selected chip should not depend on what is painted behind it, so in light it gets a fill of its own: white on #1d6fa5 is 5.4:1 whatever the map is doing underneath. */ :root[data-theme="light"] #qsGeoRegions button.on { background: #1d6fa5 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: transparent !important; } :root[data-theme="light"] span.d { color: #3f5168 !important; /* was 3.95:1 */ } :root[data-theme="light"] #obSub { color: #55687e !important; /* was 4.23:1 */ } :root[data-theme="dark"] .trialBar .d, :root[data-theme="dark"] span.d { color: #cfe0f2 !important; /* was 4.27:1, just under */ } /* Reduce Motion / contrast preferences: the gradient and the glow are decoration on top of a solid fill, so a person who asks for less gets the flat version and loses nothing they need. */ @media (prefers-contrast: more) { html .eulaBtns button.agree, html #tvYes, html button.primary { background-image: none !important; background-color: #7fe3ff !important; box-shadow: none !important; } }