/** * tr-logo — theme-aware site logo * ---------------------------------------------------------------------------- * The brand mark ships as two files with opposite ink: * * assets/images/logo/logo-dark.svg dark ink → shown in LIGHT theme * assets/images/logo/logo-light.svg light ink → shown in DARK theme * * Vector, because the mark renders at 32px tall and the 256px raster export it * replaced was visibly soft on any 2x display. The matching .png files stay in * the theme for the consumers that need real pixels — Organization schema and * the partner badges — and act as the resolver's fallback. * * The rendered theme is resolved in the browser (header.php's inline bootstrap * stamps `data-theme` on from localStorage / prefers-color-scheme), so * the server cannot pick one and a page cache cannot vary on it. Both images * are emitted by `tiorai_render_logo()` and the swap happens here. * * `prefers-color-scheme` is deliberately NOT used: it would ignore an explicit * choice made through the header's theme toggle, leaving a visitor who forced * light mode on a dark-preference OS with an invisible logo. * * Two-class specificity on the swap rules is deliberate. This file emits after * theme-unified.css but BEFORE any module stylesheet, and the footer already * declares `.footer-brand-logo-img { display: block }` at single-class * specificity, which would otherwise win on source order and defeat the swap. * * This component declares `display` ONLY. Every dimension — height, width, * max-width — stays owned by the consuming module (`.header__logo-image`, * `.mobile-drawer__logo-image`, `.footer-brand-logo-img`), so adding the * wrapper changes no size anywhere. * * @package TiorAI * @since 1.30.0 */ .tr-logo { display: inline-flex; align-items: center; line-height: 0; } .tr-logo .tr-logo__img { display: block; } /* `TiorAI.MediaFallback` hides an image that 404s by setting the `hidden` attribute, whose UA rule is a single attribute selector — the two-class rule above would beat it and leave the broken-image glyph on screen. */ .tr-logo .tr-logo__img[hidden] { display: none; } .tr-logo .tr-logo__img--dark { display: none; } [data-theme="dark"] .tr-logo .tr-logo__img--light { display: none; } [data-theme="dark"] .tr-logo .tr-logo__img--dark { display: block; }