/** * Halcyon — colour schemes. * * The default scheme is stamped on as data-halcyon-scheme * (light | dark | auto) by functions.php. These rules re-map the * theme.json colour presets per scheme, so every block — core or * custom — follows along with no further changes. * * Selectors use html[data-…] (specificity 0,1,1) so they win over the * :root preset declarations WordPress generates from theme.json, * whichever order the stylesheets load in. */ /* ---- Light (mirrors theme.json) -------------------------------------- */ html[data-halcyon-scheme="light"] { color-scheme: light; --wp--preset--color--base: #f4f6f8; --wp--preset--color--base-2: #ffffff; --wp--preset--color--contrast: #16263d; --wp--preset--color--contrast-2: #5a6b7d; --wp--preset--color--primary: #4a6fa5; --wp--preset--color--secondary: #cdd9ec; --wp--preset--color--tertiary: #e3eaf4; --wp--preset--gradient--soft-blue: linear-gradient(135deg, #e3eaf4 0%, #cdd9ec 100%); --wp--preset--gradient--deep-navy: linear-gradient(135deg, #16263d 0%, #2b3e5c 100%); --wp--preset--shadow--soft: 0 1px 3px rgba(22, 38, 61, 0.06), 0 1px 2px rgba(22, 38, 61, 0.04); --wp--preset--shadow--card: 0 10px 34px rgba(22, 38, 61, 0.08); } /* ---- Dark (mirrors styles/dark.json) ---------------------------------- */ html[data-halcyon-scheme="dark"] { color-scheme: dark; --wp--preset--color--base: #0f1722; --wp--preset--color--base-2: #16263d; --wp--preset--color--contrast: #e8eef6; --wp--preset--color--contrast-2: #9fb0c4; --wp--preset--color--primary: #8fb0e0; --wp--preset--color--secondary: #2b3e5c; --wp--preset--color--tertiary: #1b2a3f; --wp--preset--gradient--soft-blue: linear-gradient(135deg, #1b2a3f 0%, #2b3e5c 100%); --wp--preset--gradient--deep-navy: linear-gradient(135deg, #0f1722 0%, #16263d 100%); --wp--preset--shadow--soft: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --wp--preset--shadow--card: 0 10px 34px rgba(0, 0, 0, 0.45); } /* Social icons carry an inline colour value from the editor — re-map it in dark mode so they stay visible on dark surfaces. */ html[data-halcyon-scheme="dark"] .wp-block-social-links.has-icon-color .wp-block-social-link a { color: var(--wp--preset--color--contrast) !important; } /* The Code block is a dark editor panel in both schemes (set in theme.json). In dark mode the page base is already #0f1722, so lift the panel to the elevated surface (base-2) and firm up the hairline so it still reads as a distinct callout lozenge instead of merging into the page. */ html[data-halcyon-scheme="dark"] .wp-block-code { background-color: var(--wp--preset--color--base-2); border-color: rgba(255, 255, 255, 0.12); } /* ---- Auto: no-JS fallback (JS resolves "auto" to a concrete scheme) --- */ @media (prefers-color-scheme: dark) { html[data-halcyon-scheme="auto"] { color-scheme: dark; --wp--preset--color--base: #0f1722; --wp--preset--color--base-2: #16263d; --wp--preset--color--contrast: #e8eef6; --wp--preset--color--contrast-2: #9fb0c4; --wp--preset--color--primary: #8fb0e0; --wp--preset--color--secondary: #2b3e5c; --wp--preset--color--tertiary: #1b2a3f; --wp--preset--gradient--soft-blue: linear-gradient(135deg, #1b2a3f 0%, #2b3e5c 100%); --wp--preset--gradient--deep-navy: linear-gradient(135deg, #0f1722 0%, #16263d 100%); --wp--preset--shadow--soft: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --wp--preset--shadow--card: 0 10px 34px rgba(0, 0, 0, 0.45); } html[data-halcyon-scheme="auto"] .wp-block-social-links.has-icon-color .wp-block-social-link a { color: var(--wp--preset--color--contrast) !important; } html[data-halcyon-scheme="auto"] .wp-block-code { background-color: var(--wp--preset--color--base-2); border-color: rgba(255, 255, 255, 0.12); } } /* ---- Gentle cross-fade when the scheme flips -------------------------- */ @media (prefers-reduced-motion: no-preference) { html[data-halcyon-scheme] body { transition: background-color 0.25s ease, color 0.25s ease; } } /* ---- Visitor toggle — corner lozenge ---------------------------------- * Stays [hidden] until assets/js/color-scheme.js reveals it, so it never * appears as a dead control when JS is off or the admin disables it. * * The toggle lives in the header markup but is taken OUT OF FLOW and pinned * to the top-right corner of the sticky header — outside the centred content * column — so it no longer displaces the nav. (.halcyon-sticky-header is * position:sticky, which is the containing block for this absolute element.) * * It is a thin pill showing BOTH the sun and moon at once; a filled "thumb" * slides to whichever scheme is active, so the current choice is obvious. */ .halcyon-scheme-toggle { position: absolute; top: 50%; right: clamp(0.75rem, 2vw, 1.5rem); transform: translateY(-50%); z-index: 200; display: inline-flex; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .halcyon-scheme-toggle[hidden] { display: none; } /* The track: a thin curved lozenge. */ .halcyon-scheme-toggle__track { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 4px; width: 62px; height: 26px; padding: 0 6px; border: 1px solid var(--wp--preset--color--secondary); border-radius: 999px; background-color: var(--wp--preset--color--base-2); transition: border-color 0.2s ease, background-color 0.2s ease; } .halcyon-scheme-toggle:hover .halcyon-scheme-toggle__track { border-color: var(--wp--preset--color--primary); } .halcyon-scheme-toggle:focus-visible { outline: none; } .halcyon-scheme-toggle:focus-visible .halcyon-scheme-toggle__track { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); } /* The sliding indicator that marks the active scheme. */ .halcyon-scheme-toggle__thumb { position: absolute; z-index: 0; top: 50%; left: 6px; width: 22px; height: 22px; border-radius: 50%; background-color: var(--wp--preset--color--primary); transform: translateY(-50%); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease; } /* Both glyphs are always visible; the active one sits on the thumb. */ .halcyon-scheme-toggle__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--wp--preset--color--contrast-2); transition: color 0.2s ease; } .halcyon-scheme-toggle__icon svg { display: block; } /* Light active → thumb over the sun (left); sun reads on the thumb. */ html[data-halcyon-scheme="light"] .halcyon-scheme-toggle__thumb { transform: translate(0, -50%); } html[data-halcyon-scheme="light"] .halcyon-scheme-toggle__icon--sun { color: var(--wp--preset--color--base-2); } /* Dark active → thumb slides to the moon (right). */ html[data-halcyon-scheme="dark"] .halcyon-scheme-toggle__thumb { transform: translate(26px, -50%); } html[data-halcyon-scheme="dark"] .halcyon-scheme-toggle__icon--moon { color: var(--wp--preset--color--base-2); } @media (prefers-reduced-motion: reduce) { .halcyon-scheme-toggle__thumb { transition: background-color 0.2s ease; } } /* On small screens the nav collapses to a hamburger on the right; reserve a little room so the corner toggle never sits on top of it. */ @media (max-width: 600px) { .halcyon-sticky-header > .wp-block-group:first-child { padding-right: 3.5rem; } }