/* ============================================================================= ultrasonik — glowing headings ============================================================================= John: "make all the headers h3 so the theme alters them but make them glow." WHY h3 SPECIFICALLY Checked against the library's site.css rather than assumed: h3 is the ONLY heading level the theme tints with the accent colour. .page h1 { color: var(--text-primary) } .page h2 { color: var(--text-primary) } .page h3 { color: var(--primary) } <- the one that follows the theme .page h4 { color: var(--text-primary) } So every section heading on this site is now an h3 and picks up whatever accent the current theme defines. Nothing here sets a heading colour, on purpose — that would defeat the point of using h3 in the first place. WHY A CLASS AND NOT BARE h3 Card captions are already h3 for document-outline reasons: video titles, music titles, issue subjects. Those are item names, not section headings, and a page of glowing video titles would be noise. So the glow attaches to `.site-heading`, which the real headings carry and the captions do not. THE ONE PLACE THIS DEVIATES FROM THE INSTRUCTION Page titles stay

. Converting them to h3 would leave every page with no h1 at all — screen readers use it to announce what the page IS, and search engines treat it as the page's title. They carry .site-heading--hero instead, so they glow like the rest and read at heading-one size. The look matches; the document outline stays correct. ========================================================================== */ .site-heading { /* currentColor, so the glow is whatever the theme made the text. A literal colour here would need updating for all twenty-odd themes and would be wrong in most of them. */ text-shadow: 0 0 0.6rem currentColor, 0 0 1.6rem color-mix(in srgb, currentColor 60%, transparent); } /* Page titles: larger type wants a wider, softer halo — the same radius on a 3rem heading looks like a thin outline rather than a glow. John: "each page has a h1, i want those to glow." Matched on the ELEMENT as well as the class, because the class had to be remembered and was not: an audit found it on 7 of the 24 pages. The band's own pages carried it; privacy, terms, about and links did not, and neither would any page written next week. `h1` needs no help from a class to be a page title — that is what the element means. Styling it directly makes the rule impossible to forget, and the class stays for the rare hero heading that is not an h1. Pages that have both simply match the same declaration twice, which costs nothing. */ h1, .site-heading--hero { text-shadow: 0 0 0.8rem currentColor, 0 0 2.4rem color-mix(in srgb, currentColor 65%, transparent); } /* One exception, and it is not a special case so much as a collision. ai-permutation-test.html paints its h1 with a clipped background gradient, so the text itself is transparent — a text-shadow behind transparent glyphs draws the shadow as a solid blurred block where the letters should be. */ h1.wb-gradient-text { text-shadow: none; } /* color-mix has been in every current browser since 2023, but a reader on an older one would get NO text-shadow at all rather than a degraded one — the whole declaration is dropped when a value fails to parse. This fallback runs first and is overridden above wherever color-mix is understood. */ @supports not (color: color-mix(in srgb, currentColor 50%, transparent)) { .site-heading { text-shadow: 0 0 0.5rem currentColor; } /* h1 listed alongside the class in every block below too. A selector added to the main rule but not to its fallback and its light-mode override is the half-migration that leaves bare-h1 pages with a full-strength halo on a pale background. */ h1, .site-heading--hero { text-shadow: 0 0 0.9rem currentColor; } } /* A glow is decoration; text has to stay readable first. On a light theme the accent is dark against a pale background, and a heavy halo turns into a smudge — so it tightens rather than disappearing. */ /* The site theme, not the OS. `data-theme` is what the Theme dropdown sets; prefers-color-scheme is the machine's setting and the two are unrelated — picking Light on a dark machine used to leave the full-strength glow on a pale background. */ :root[data-theme="light"] .site-heading { text-shadow: 0 0 0.4rem color-mix(in srgb, currentColor 35%, transparent); } h1, :root[data-theme="light"] .site-heading--hero { text-shadow: 0 0 0.6rem color-mix(in srgb, currentColor 40%, transparent); } /* Still no shadow behind clipped-gradient text, whatever the theme. */ h1.wb-gradient-text { text-shadow: none; } /* Kept for first paint, before the engine has set data-theme. */ @media (prefers-color-scheme: light) { .site-heading { text-shadow: 0 0 0.4rem color-mix(in srgb, currentColor 35%, transparent); } h1, .site-heading--hero { text-shadow: 0 0 0.6rem color-mix(in srgb, currentColor 40%, transparent); } /* Still no shadow behind clipped-gradient text, whatever the theme. */ h1.wb-gradient-text { text-shadow: none; } } /* ============================================================================= The wordmark ============================================================================= John: "Make these headers glow" — pointing at ULTRASONIK in the site header alongside the already-glowing page title. The header is built by the LIBRARY, not by this site. site-engine.js emits ULTRASONIK from branding.companyName, so it cannot be given .site-heading here. The glow attaches to the class the library actually emits. Class rather than #headerLogoText: an id selector would win against anything the library later adds, which is a fight worth avoiding for a decoration. Tighter than a page title. The wordmark sits at header size against the header's own background, where a hero-sized halo bleeds into the rule beneath it. ========================================================================== */ .header__logo-text { text-shadow: 0 0 0.55rem currentColor, 0 0 1.4rem color-mix(in srgb, currentColor 55%, transparent); } @supports not (color: color-mix(in srgb, currentColor 50%, transparent)) { .header__logo-text { text-shadow: 0 0 0.5rem currentColor; } } /* The site theme, not the OS. `data-theme` is what the Theme dropdown sets; prefers-color-scheme is the machine's setting and the two are unrelated — picking Light on a dark machine used to leave the full-strength glow on a pale background. */ :root[data-theme="light"] .header__logo-text { text-shadow: 0 0 0.4rem color-mix(in srgb, currentColor 35%, transparent); } /* Kept for first paint, before the engine has set data-theme. */ @media (prefers-color-scheme: light) { .header__logo-text { text-shadow: 0 0 0.4rem color-mix(in srgb, currentColor 35%, transparent); } } /* ============================================================================= Show dates on the home page ============================================================================= John: "Make these glow" — the date line on each Next-shows card. Already accent-coloured, so the glow reads as the same visual language as the headings rather than a new decoration. MUCH tighter than a heading: this is 0.8125rem uppercase with letter spacing, and a heading-sized halo on text that small closes up the counters and reads as being out of focus. Same reasoning that kept the glow off the nav items — the radius has to suit the type size, not the site. currentColor again, so it follows whatever accent the active theme sets. ========================================================================== */ .home-show__when { text-shadow: 0 0 0.45rem currentColor, 0 0 1.1rem color-mix(in srgb, currentColor 55%, transparent); } @supports not (color: color-mix(in srgb, currentColor 50%, transparent)) { .home-show__when { text-shadow: 0 0 0.35rem currentColor; } } /* On a light theme the accent is dark on pale, where a halo smudges small text fastest of all — so it tightens further rather than disappearing. */ /* The site theme, not the OS. `data-theme` is what the Theme dropdown sets; prefers-color-scheme is the machine's setting and the two are unrelated — picking Light on a dark machine used to leave the full-strength glow on a pale background. */ :root[data-theme="light"] .home-show__when { text-shadow: 0 0 0.25rem color-mix(in srgb, currentColor 30%, transparent); } /* Kept for first paint, before the engine has set data-theme. */ @media (prefers-color-scheme: light) { .home-show__when { text-shadow: 0 0 0.25rem color-mix(in srgb, currentColor 30%, transparent); } } /* ============================================================================= Nav links ============================================================================= John: "I also wanted the nav links to glow." I argued against this when asked and was overruled, so here it is. The objection was about radius, not about the idea, and that part still applies: nav items are ~1rem, and the halo used on a 3rem page title reads as blur at that size rather than glow. So this is the tightest glow on the site — noticeably lighter than the wordmark above it, which is itself lighter than a page title. Applied to the nav item rather than a wrapper so it follows the text colour, which the theme sets and which changes on the active item. ========================================================================== */ .nav__item { text-shadow: 0 0 0.4rem currentColor, 0 0 1rem color-mix(in srgb, currentColor 50%, transparent); } /* The active item sits on a filled background, where a halo of its own text colour smears against the fill instead of reading as light. It gets a slightly wider, softer one so it still glows without muddying. */ .nav__item--active { text-shadow: 0 0 0.5rem currentColor, 0 0 1.2rem color-mix(in srgb, currentColor 55%, transparent); } @supports not (color: color-mix(in srgb, currentColor 50%, transparent)) { .nav__item { text-shadow: 0 0 0.3rem currentColor; } } /* Light theme: nav text is dark on pale, and small dark text smudges first. */ /* The site theme, not the OS. `data-theme` is what the Theme dropdown sets; prefers-color-scheme is the machine's setting and the two are unrelated — picking Light on a dark machine used to leave the full-strength glow on a pale background. */ .nav__item, :root[data-theme="light"] .nav__item--active { text-shadow: 0 0 0.22rem color-mix(in srgb, currentColor 28%, transparent); } /* Kept for first paint, before the engine has set data-theme. */ @media (prefers-color-scheme: light) { .nav__item, .nav__item--active { text-shadow: 0 0 0.22rem color-mix(in srgb, currentColor 28%, transparent); } } /* ============================================================================= The home page has no h1 of its own ============================================================================= Every other page carries one; home's largest text is "ULTRASONIK" inside the hero, which x-cardhero renders as an

(card.js:507). So the site's most important page had no h1 at all — nothing for a screen reader to announce as what the page IS, and nothing for the h1 rule above to reach. Rather than add a second visible "ULTRASONIK" under the first, the hero's own title is treated as the page title and glows like one. ========================================================================== */ #home-hero .wb-card__title { text-shadow: 0 0 0.8rem currentColor, 0 0 2.4rem color-mix(in srgb, currentColor 65%, transparent); } /* Hidden from sight, not from assistive technology. `display:none` and `visibility:hidden` would remove it from the accessibility tree too, which defeats the point of adding it. This is the standard clip pattern: present, announced, occupying no visual space. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }