@charset "UTF-8"; /*! * Hot Web Design - dark theme. * * Every colour token in user.css is declared once as light-dark(, * ) and resolves against the element's `color-scheme`. This file is the * switch: it says which scheme is in, and nothing else about colour. * * Two entry points: * html.hwd-dark - explicit choice (visitor toggle, or forced default) * html.hwd-theme-system - follow the operating system; `light dark` lets the * browser resolve it, so the theme is still correct * with JavaScript disabled * * What remains below are the behaviours that are not colours - which logo and * which toggle icon is shown - and one opacity. Those cannot be expressed with * light-dark(), so they name both entry points explicitly. */ html.hwd-dark { color-scheme: dark; } html.hwd-theme-system { color-scheme: light dark; } /* The rgb triplets Bootstrap composes into rgba() are not colours and cannot go through light-dark(). Nothing the template paints reads them - user.css sets link colours directly - but Bootstrap's .icon-link and .link-underline helpers do. */ html.hwd-dark { --hwd-link-rgb: var(--hwd-link-rgb-dk, 185, 165, 255); --hwd-link-hover-rgb: var(--hwd-link-hover-rgb-dk, 211, 198, 255); } /* Logo swap. Both variants are in the markup, so the switch costs no layout shift and no script. Toggle icon: one glyph per resolved theme. Client logos keep their own colours; only the resting opacity is lifted so they stay legible on a dark ground. */ html.hwd-dark .hwd-logo-img--light, html.hwd-dark .hwd-dark-toggle .hwd-icon-moon { display: none; } html.hwd-dark .hwd-logo-img--dark, html.hwd-dark .hwd-dark-toggle .hwd-icon-sun { display: block; } html.hwd-dark .hwd-clients-grid img { opacity: .75; } @media (prefers-color-scheme: dark) { html.hwd-theme-system { --hwd-link-rgb: var(--hwd-link-rgb-dk, 185, 165, 255); --hwd-link-hover-rgb: var(--hwd-link-hover-rgb-dk, 211, 198, 255); } html.hwd-theme-system .hwd-logo-img--light, html.hwd-theme-system .hwd-dark-toggle .hwd-icon-moon { display: none; } html.hwd-theme-system .hwd-logo-img--dark, html.hwd-theme-system .hwd-dark-toggle .hwd-icon-sun { display: block; } html.hwd-theme-system .hwd-clients-grid img { opacity: .75; } } /* Smooth the toggle between themes, but never fight a reduced-motion request and never animate the very first paint: user.js adds the class one frame after load. */ @media (prefers-reduced-motion: no-preference) { html.hwd-theme-ready body, html.hwd-theme-ready .hwd-header, html.hwd-theme-ready .hwd-section, html.hwd-theme-ready .hwd-band, html.hwd-theme-ready .hwd-component, html.hwd-theme-ready .hwd-footer, html.hwd-theme-ready .hwd-copyright, html.hwd-theme-ready .hwd-hero { transition: background-color var(--hwd-transition-mid), color var(--hwd-transition-mid), border-color var(--hwd-transition-mid); } }