/* ========================================================================== Hope Harbour: accessibility toolbar and reading aids -------------------------------------------------------------------------- Everything here is driven by data-* attributes on , set by js/a11y.js and re-applied before first paint by an inline script in each page's . ========================================================================== */ /* ========================================================================== 1. COLOUR THEMES One selector rather than a pile of independent toggles. Each theme redefines the semantic tokens only, so every component follows along. ========================================================================== */ /* -- High contrast: pure black on pure white ---------------------------- */ html[data-hh-theme="contrast"] { --c-bg: #FFFFFF; --c-bg-alt: #FFFFFF; --c-text: #000000; --c-text-soft: #000000; --c-text-mute: #1A1A1A; --c-heading: #000000; --c-rule: #000000; --c-action: #8A2E0B; --c-action-text: #6E2408; --c-focus: #000000; --hh-cream: #FFFFFF; --hh-paper: #FFFFFF; --hh-cream-dim: #FFFFFF; --hh-orange-wash: #FFFFFF; --hh-gold-wash: #FFFFFF; --hh-sky-wash: #FFFFFF; --hh-navy: #000000; --hh-navy-deep: #000000; --hh-navy-90: #1A1A1A; --hh-navy-80: #1A1A1A; --hh-orange: #8A2E0B; --hh-orange-hover: #6E2408; --c-action-solid: #7A2909; --c-action-solid-hover: #5C1F06; --hh-gold: #FFD24A; --hh-gold-text: #4A3200; --c-band: #000000; --c-band-deep: #000000; --c-on-band: #FFFFFF; --c-on-band-soft: #FFFFFF; --c-on-band-mute: #E8E8E8; --c-band-rule: #FFFFFF; --c-chip: #000000; --c-chip-hover: #1A1A1A; --c-on-chip: #FFFFFF; } /* -- Night: light text on near-black ----------------------------------- */ html[data-hh-theme="night"] { --c-bg: #0B0B0C; --c-bg-alt: #16171A; --c-text: #F2F1EE; --c-text-soft: #D2D0CB; --c-text-mute: #A8A5A0; --c-heading: #FFFFFF; --c-rule: #3A3B3F; --c-action: #FFA366; --c-action-text: #FFB784; --c-focus: #FFD24A; /* --hh-orange-text is the light theme's #B0421D, meant for orange text on cream. Left unmapped here it painted six things on dark grounds at 2.0-3.4:1: the drawer's current-page and hover links, .pill--orange, .feature__icon--orange, .acc-trigger:hover and .aside-links a:hover. Reusing this theme's own action-text value puts every one of them above 10:1. */ --hh-orange-text: #FFB784; --hh-cream: #0B0B0C; --hh-paper: #16171A; --hh-cream-dim: #121316; --hh-orange-wash: #241610; --hh-gold-wash: #241E10; --hh-sky-wash: #121A22; --hh-navy: #F2F1EE; --hh-navy-deep: #000000; --hh-navy-90: #D2D0CB; --hh-navy-80: #55565C; --hh-orange: #C9501F; --hh-orange-hover: #E0602C; --c-action-solid: #D8622E; --c-action-solid-hover: #E87442; --hh-gold: #FFD24A; --hh-gold-text: #FFD98F; /* Bands stay dark (a lifted charcoal), but floating chips invert to light so they read against the near-black page. */ --c-band: #191A1E; --c-band-deep: #000000; --c-on-band: #F7F6F3; --c-on-band-soft: #CFCDC8; --c-on-band-mute: #9C9994; --c-band-rule: rgba(242, 241, 238, .2); --c-chip: #F2F1EE; --c-chip-hover: #FFFFFF; --c-on-chip: #0B0B0C; --shadow-1: 0 1px 2px rgba(0,0,0,.6); --shadow-2: 0 4px 14px -4px rgba(0,0,0,.7); --shadow-3: 0 18px 44px -18px rgba(0,0,0,.85); --shadow-4: 0 32px 70px -24px rgba(0,0,0,.9); } html[data-hh-theme="night"] img:not([src*="logo"]):not([src*="spray"]) { filter: brightness(.88); } html[data-hh-theme="night"] .hero__ornament { opacity: .22; filter: invert(1) brightness(1.6); } /* The night theme lifts the action orange to #D8622E so a filled button reads against a near-black page, but a WHITE label on it is only 3.68:1, and 3.00:1 on the #E87442 hover. Both fail AA for a 14-17px/600 label. Reaching 4.5:1 with white means dropping the orange to roughly #D53214, which is a red rather than this brand's orange, so the label goes dark and the colour stays: #0B0B0C on #D8622E is 5.35:1, and 6.57:1 on hover. That is the move the blue theme below already makes with its yellow button. The :not() chain matters. A blanket `.btn { --btn-fg: #0B0B0C }` also hits every variant that sets --btn-bg: transparent, putting a near-black label on the near-black page: the header's outlined referral pill measured 1.13:1 that way. Those four are the complete set of transparent variants in components.css, and .btn--on-navy is excluded too because it pairs its own light background with a dark label already. :hover is listed separately because components.css:41 sets `color: #fff` directly on .btn:hover rather than through --btn-fg, so overriding the custom property alone never reaches the hover state. Same reason for .btn--outline:hover, which fills with the action orange. */ html[data-hh-theme="night"] .btn:not(.btn--secondary):not(.btn--outline):not(.btn--ghost):not(.btn--on-navy):not(.btn--on-navy-outline), html[data-hh-theme="night"] .btn:not(.btn--secondary):not(.btn--outline):not(.btn--ghost):not(.btn--on-navy):not(.btn--on-navy-outline):hover { --btn-fg: #0B0B0C; color: #0B0B0C; } html[data-hh-theme="night"] .btn--outline:hover { color: #0B0B0C; } html[data-hh-theme="night"] .btn--secondary { --btn-fg: #F2F1EE; --btn-bd: #6A6B71; } /* -- Cream / sepia: warm, low glare ------------------------------------ */ html[data-hh-theme="cream"] { --c-bg: #FBF3E3; --c-bg-alt: #F5EAD4; --c-text: #3A2E1B; --c-text-soft: #57462C; --c-text-mute: #7A6647; --c-heading: #2E2413; --c-rule: #DCCBA9; --c-action: #9A3D10; --c-action-text: #8A360D; --hh-cream: #FBF3E3; --hh-paper: #F5EAD4; --hh-cream-dim: #F8EEDC; --hh-orange-wash: #FAE8D8; --hh-gold-wash: #FAF0D5; --hh-sky-wash: #EEF0E4; --hh-navy: #2E2413; --hh-navy-deep: #241C0F; --hh-orange: #9A3D10; --hh-orange-hover: #7E3009; --c-action-solid: #9A3D10; --c-action-solid-hover: #7E3009; --hh-gold-text: #6B4A0A; --c-band: #2E2413; --c-band-deep: #241C0F; --c-on-band: #FBF3E3; --c-on-band-soft: #E4D6B8; --c-on-band-mute: #C3B291; --c-band-rule: rgba(251, 243, 227, .22); --c-chip: #2E2413; --c-chip-hover: #45351B; --c-on-chip: #FBF3E3; } /* -- Blue: pale yellow on deep blue. A common preference for dyslexia -- */ html[data-hh-theme="blue"] { --c-bg: #06284A; --c-bg-alt: #0A3560; --c-text: #FFF6C7; --c-text-soft: #F0E4A8; --c-text-mute: #D0C98F; --c-heading: #FFFAD9; --c-rule: #2B577F; --c-action: #FFD24A; --c-action-text: #FFE28A; --c-focus: #FFFAD9; /* Same as the night theme: the light theme's orange-on-cream ink is 2.0-2.6:1 on these blues. */ --hh-orange-text: #FFE28A; --hh-cream: #06284A; --hh-paper: #0A3560; --hh-cream-dim: #082E55; --hh-orange-wash: #0E3A63; --hh-gold-wash: #0E3A63; --hh-sky-wash: #0E3A63; --hh-navy: #FFF6C7; --hh-navy-deep: #041C35; --hh-navy-80: #4E7BA3; --hh-orange: #C9501F; --hh-orange-hover: #E0602C; --hh-gold: #FFD24A; --hh-gold-text: #FFE28A; --c-band: #0A3560; --c-band-deep: #041C35; --c-on-band: #FFF6C7; --c-on-band-soft: #EADFA6; --c-on-band-mute: #CBC28E; --c-band-rule: rgba(255, 246, 199, .24); --c-chip: #FFF6C7; --c-chip-hover: #FFFAD9; --c-on-chip: #06284A; } html[data-hh-theme="blue"] img:not([src*="logo"]):not([src*="spray"]) { filter: brightness(.9); } html[data-hh-theme="blue"] .hero__ornament { filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg); opacity: .2; } html[data-hh-theme="blue"] .btn { --btn-bg: #FFD24A; --btn-fg: #06284A; --btn-bd: #FFD24A; } html[data-hh-theme="blue"] .btn:hover { background: #FFE28A; border-color: #FFE28A; color: #06284A; } html[data-hh-theme="blue"] .btn--secondary { --btn-bg: transparent; --btn-fg: #FFF6C7; --btn-bd: #FFF6C7; } /* -- Green: black on pale green, an Irlen-style tint -------------------- */ html[data-hh-theme="green"] { --c-bg: #E6F2E1; --c-bg-alt: #D9EBD2; --c-text: #11210D; --c-text-soft: #2C3F26; --c-text-mute: #4E6146; --c-heading: #0B1808; --c-rule: #B4CFAB; --c-action: #8A2E0B; --c-action-text: #75270A; --hh-cream: #E6F2E1; --hh-paper: #D9EBD2; --hh-cream-dim: #E0EEDA; --hh-orange-wash: #EFEADF; --hh-gold-wash: #F0EFDB; --hh-sky-wash: #DEEBEA; --hh-navy: #0B1808; --hh-navy-deep: #081306; --hh-orange: #8A2E0B; --hh-orange-hover: #6E2408; --c-action-solid: #8A2E0B; --c-action-solid-hover: #6E2408; --hh-gold-text: #4A4207; --c-band: #0B1808; --c-band-deep: #081306; --c-on-band: #E6F2E1; --c-on-band-soft: #C4DBBC; --c-on-band-mute: #A7C09E; --c-band-rule: rgba(230, 242, 225, .24); --c-chip: #0B1808; --c-chip-hover: #1C3016; --c-on-chip: #E6F2E1; } /* Shared theme hardening: any theme other than the brand default gets solid grounds and visible borders, since photography and washes cannot be relied on to preserve contrast. */ html[data-hh-theme]:not([data-hh-theme="default"]) .media-overlay__text { background: var(--c-bg); color: var(--c-text); padding: var(--s-4); } html[data-hh-theme="contrast"] .card, html[data-hh-theme="contrast"] .panel, html[data-hh-theme="contrast"] .aside-card, html[data-hh-theme="contrast"] .field input, html[data-hh-theme="contrast"] .field select, html[data-hh-theme="contrast"] .field textarea, html[data-hh-theme="contrast"] .choice { border: 2px solid #000 !important; } html[data-hh-theme="contrast"] .btn { border-width: 2px !important; } html[data-hh-theme="contrast"] a:not(.btn) { text-decoration: underline !important; } html[data-hh-theme="contrast"] img:not([src*="logo"]) { filter: contrast(1.2) saturate(.5); } html[data-hh-theme="contrast"] .hero__ornament, html[data-hh-theme="contrast"] .cta-band__ornament { display: none; } html[data-hh-theme="contrast"] .shadow, html[data-hh-theme="contrast"] .card, html[data-hh-theme="contrast"] .panel { box-shadow: none !important; } /* Form fields must stay legible in the dark themes */ html[data-hh-theme="night"] .field input, html[data-hh-theme="night"] .field select, html[data-hh-theme="night"] .field textarea, html[data-hh-theme="night"] .choice, html[data-hh-theme="blue"] .field input, html[data-hh-theme="blue"] .field select, html[data-hh-theme="blue"] .field textarea, html[data-hh-theme="blue"] .choice { background: var(--c-bg-alt); color: var(--c-text); border-color: var(--c-rule); } /* Upload zone in the dark themes */ html[data-hh-theme="night"] .upload, html[data-hh-theme="blue"] .upload { background: var(--c-bg-alt); border-color: var(--c-rule); } html[data-hh-theme="night"] .upload__list > li, html[data-hh-theme="blue"] .upload__list > li { background: var(--c-bg-alt); border-color: var(--c-rule); } html[data-hh-theme="contrast"] .upload { border: 2px solid #000 !important; } html[data-hh-theme="contrast"] .upload__list > li { border: 2px solid #000 !important; } html[data-hh-theme="night"] .field input::placeholder, html[data-hh-theme="blue"] .field input::placeholder, html[data-hh-theme="night"] .field textarea::placeholder, html[data-hh-theme="blue"] .field textarea::placeholder { color: var(--c-text-mute); } /* ========================================================================== 2. READING AIDS ========================================================================== */ /* -- Reading ruler: a highlighted band that tracks the pointer ---------- */ .hh-ruler { position: fixed; left: 0; right: 0; top: 0; height: 46px; z-index: var(--z-overlay); pointer-events: none; background: rgba(240, 168, 58, .16); border-top: 2px solid rgba(224, 90, 43, .7); border-bottom: 2px solid rgba(224, 90, 43, .7); display: none; will-change: transform; } html[data-hh-ruler="on"] .hh-ruler { display: block; } /* -- Screen mask: dims everything except a reading band ----------------- */ .hh-mask { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; display: none; will-change: transform; } html[data-hh-mask="on"] .hh-mask { display: block; } .hh-mask__part { position: absolute; left: 0; right: 0; background: rgba(8, 12, 22, .78); } .hh-mask__top { top: 0; } .hh-mask__bottom { bottom: 0; } /* -- Text magnifier: shows the text under the pointer, enlarged --------- */ .hh-lens { position: fixed; z-index: var(--z-toast); max-width: min(560px, 92vw); padding: 14px 18px; background: var(--c-band); color: var(--c-on-band); border: 2px solid var(--hh-gold); border-radius: 8px; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .55); font-family: var(--hh-font-body); font-size: 26px; line-height: 1.4; font-weight: 500; pointer-events: none; display: none; } html[data-hh-lens="on"] .hh-lens[data-show="true"] { display: block; } /* -- Text-to-speech: highlight the chunk being read -------------------- */ .hh-speaking { background: #FFF3BF; color: #33290A !important; box-shadow: 0 0 0 3px #FFF3BF, 0 0 0 5px #E0A81F; border-radius: 3px; scroll-margin-block: 30vh; } html[data-hh-theme="night"] .hh-speaking, html[data-hh-theme="blue"] .hh-speaking { background: #FFD24A; box-shadow: 0 0 0 3px #FFD24A, 0 0 0 5px #FFF6C7; } /* Floating transport controls while speech is active */ .hh-speech-bar { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: var(--z-toast); display: none; align-items: center; gap: var(--s-2); padding: 10px 12px; background: var(--hh-navy); color: var(--hh-on-navy); border-radius: var(--radius-pill); box-shadow: var(--shadow-3); } .hh-speech-bar[data-show="true"] { display: flex; } .hh-speech-bar button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: color-mix(in srgb, var(--c-on-chip) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-on-chip) 30%, transparent); border-radius: 50%; color: inherit; cursor: pointer; transition: background-color var(--dur) var(--ease-soft); } .hh-speech-bar button:hover { background: color-mix(in srgb, var(--c-on-chip) 26%, transparent); } .hh-speech-bar button:focus-visible { outline: 3px solid var(--hh-gold); outline-offset: 2px; } .hh-speech-bar svg { width: 19px; height: 19px; } .hh-speech-bar__status { font-family: var(--hh-font-body); font-size: 0.8125rem; font-weight: 600; padding-inline: var(--s-2); white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 560px) { .hh-speech-bar { bottom: 84px; } .hh-speech-bar__status { display: none; } } /* ========================================================================== 3. DICTIONARY POPOVER ========================================================================== */ .hh-dict { position: absolute; z-index: var(--z-toast); width: min(340px, calc(100vw - 32px)); background: var(--hh-cream); color: var(--c-text); border: 1px solid var(--c-rule); border-radius: 8px; box-shadow: var(--shadow-3); padding: var(--s-4); font-family: var(--hh-font-body); font-size: var(--t-small); line-height: 1.6; display: none; } .hh-dict[data-show="true"] { display: block; } .hh-dict__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); margin-bottom: var(--s-3); border-bottom: 1px solid var(--c-rule); } .hh-dict__word { font-family: var(--hh-font-display); font-size: 1.375rem; font-weight: 600; color: var(--c-heading); line-height: 1.2; } .hh-dict__pos { font-style: italic; color: var(--c-text-mute); font-size: 0.8125rem; } .hh-dict__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--c-text-mute); cursor: pointer; } .hh-dict__close:hover { background: var(--hh-cream-dim); color: var(--c-text); } .hh-dict__close svg { width: 16px; height: 16px; } .hh-dict ol { margin: 0; padding-left: 1.2em; } .hh-dict li { margin-bottom: 0.5em; } .hh-dict__say { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--c-rule); display: flex; align-items: center; gap: 0.5em; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; font-family: var(--hh-font-body); font-size: 0.8125rem; font-weight: 600; color: var(--c-action-text); cursor: pointer; min-height: 40px; } .hh-dict__say svg { width: 16px; height: 16px; } .hh-dict__note { color: var(--c-text-mute); font-size: 0.75rem; margin: var(--s-2) 0 0; } /* A dotted underline hints that a word can be looked up */ html[data-hh-dict="on"] main p, html[data-hh-dict="on"] main li { cursor: help; } /* ========================================================================== 4. TRANSLATE LIST ========================================================================== */ .hh-langs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; margin-top: var(--s-2); padding: 4px; border: 1px solid var(--c-rule); border-radius: var(--radius); background: var(--c-bg); overscroll-behavior: contain; } .hh-langs a { display: flex; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: var(--radius); font-size: 0.8125rem; font-weight: 500; color: var(--c-text); text-decoration: none; } .hh-langs a:hover { background: var(--hh-cream-dim); color: var(--c-action-text); } .hh-langs a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; } .hh-lang-search { width: 100%; min-height: 44px; margin-top: var(--s-2); padding: 0.5rem 0.7rem; font-family: var(--hh-font-body); font-size: 0.9375rem; color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-rule); border-radius: var(--radius); } .hh-lang-search:focus { outline: 3px solid var(--c-focus); outline-offset: 1px; } /* ========================================================================== 5. PANEL EXTRAS ========================================================================== */ .a11y-panel { width: min(410px, calc(100vw - 32px)); max-height: min(80vh, 720px); } /* Tabs across the top of the panel */ .a11y-tabs { display: flex; gap: 2px; padding: var(--s-2) var(--s-3) 0; border-bottom: 1px solid var(--c-rule); flex: none; overflow-x: auto; scrollbar-width: none; } .a11y-tabs::-webkit-scrollbar { display: none; } .a11y-tab { flex: none; min-height: 46px; padding: 0 0.75rem; background: none; border: 0; border-bottom: 2px solid transparent; font-family: var(--hh-font-body); font-size: 0.8125rem; font-weight: 600; color: var(--c-text-mute); cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft); } .a11y-tab:hover { color: var(--c-text); } .a11y-tab[aria-selected="true"] { color: var(--c-heading); border-bottom-color: var(--hh-orange); } .a11y-tab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; } .a11y-tabpanel[hidden] { display: none; } /* Swatch grid for colour themes */ .a11y-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } .a11y-theme { display: grid; gap: 6px; padding: 8px; min-height: 76px; background: none; border: 2px solid var(--c-rule); border-radius: var(--radius-lg); cursor: pointer; font-family: var(--hh-font-body); transition: border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-out); } .a11y-theme:hover { transform: translateY(-2px); border-color: var(--hh-navy-80); } .a11y-theme[aria-pressed="true"] { border-color: var(--hh-orange); border-width: 3px; padding: 7px; } .a11y-theme:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; } .a11y-theme__swatch { height: 30px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .18); display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1; } .a11y-theme__name { font-size: 0.6875rem; font-weight: 600; color: var(--c-text); line-height: 1.3; } /* Slider row (speech rate) */ .a11y-slider { display: grid; gap: 6px; } .a11y-slider label { font-size: var(--t-small); font-weight: 600; color: var(--c-heading); } .a11y-slider input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--hh-orange); cursor: pointer; background: transparent; } .a11y-slider output { font-size: 0.8125rem; color: var(--c-text-mute); font-variant-numeric: tabular-nums; } .a11y-select { width: 100%; min-height: 44px; padding: 0.4rem 0.7rem; font-family: var(--hh-font-body); font-size: var(--t-small); color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-rule); border-radius: var(--radius); cursor: pointer; } .a11y-select:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; } .a11y-actions { display: grid; gap: var(--s-2); } .a11y-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.6rem 1rem; background: var(--c-chip); color: var(--c-on-chip); border: 1px solid var(--c-chip); border-radius: var(--radius-pill); font-family: var(--hh-font-body); font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: background-color var(--dur) var(--ease-soft); } .a11y-btn:hover { background: var(--c-chip-hover); } .a11y-btn--ghost { background: transparent; color: var(--c-heading); border-color: var(--c-rule); } .a11y-btn--ghost:hover { background: var(--hh-cream-dim); } .a11y-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; } .a11y-btn svg { width: 18px; height: 18px; flex: none; } .a11y-note { font-size: 0.75rem; line-height: 1.55; color: var(--c-text-mute); margin: var(--s-3) 0 0; } .a11y-note a { color: var(--c-action-text); } /* Keep the launcher clear of the speech bar on small screens */ @media (max-width: 560px) { .to-top { bottom: 140px; } } /* ========================================================================== 6. ANIMATED LOGO IN DARK THEMES draws itself and writes the ink colour as an inline style on the wordmark and as a presentation attribute on the artwork. The header sits on the page background, so in the dark themes both need retinting or the wordmark and stems vanish. The inline style needs !important; the SVG presentation attributes do not, because any CSS rule outranks them. ========================================================================== */ html[data-hh-theme="night"] .site-header hh-logo .hh-name, html[data-hh-theme="blue"] .site-header hh-logo .hh-name, html[data-hh-theme="night"] .drawer hh-logo .hh-name, html[data-hh-theme="blue"] .drawer hh-logo .hh-name { color: var(--c-heading) !important; } html[data-hh-theme="night"] .site-header hh-logo .hh-tag, html[data-hh-theme="blue"] .site-header hh-logo .hh-tag, html[data-hh-theme="night"] .drawer hh-logo .hh-tag, html[data-hh-theme="blue"] .drawer hh-logo .hh-tag { color: var(--c-text-mute) !important; } html[data-hh-theme="night"] .site-header hh-logo .hh-stem, html[data-hh-theme="blue"] .site-header hh-logo .hh-stem, html[data-hh-theme="night"] .drawer hh-logo .hh-stem, html[data-hh-theme="blue"] .drawer hh-logo .hh-stem { stroke: var(--c-heading); } /* The vase and the navy leaves are filled with the brand navy. */ html[data-hh-theme="night"] hh-logo [fill="#16233F"], html[data-hh-theme="blue"] hh-logo [fill="#16233F"] { fill: var(--c-heading); } /* High contrast: the logo becomes a single-colour mark. */ html[data-hh-theme="contrast"] .site-header hh-logo .hh-name { color: #000 !important; } html[data-hh-theme="contrast"] .site-header hh-logo .hh-tag { color: #26262A !important; } html[data-hh-theme="contrast"] .site-header hh-logo .hh-stem { stroke: #000; } html[data-hh-theme="contrast"] .site-header hh-logo path, html[data-hh-theme="contrast"] .site-header hh-logo ellipse { fill: #000; } html[data-hh-theme="contrast"] .site-header hh-logo .hh-stem { fill: none; } /* The hero spray is the same component on the page background rather than in the header, so it needs the same stem retint. Without this the navy stems disappear on the dark grounds and the mark reads as leaves floating loose. */ html[data-hh-theme="night"] .hero__spray hh-logo .hh-stem, html[data-hh-theme="blue"] .hero__spray hh-logo .hh-stem { stroke: var(--c-heading); } /* High contrast asks for the opposite of decorative artwork behind text, so the spray goes entirely. The header logo still identifies the brand. */ html[data-hh-theme="contrast"] .hero__spray { display: none; }