/* * hv-global.css — Unconditionally enqueued chrome stylesheet. * * PURPOSE: All header + footer chrome rules that must be SELF-SUFFICIENT — i.e. * they must render correctly whether or not Elementor's conditional per-page * asset loading happened to enqueue widget-icon-list.css (or any other widget * base CSS) on a given page. This file is enqueued on every page, always, so * the chrome never inherits broken layout from missing widget base CSS. * * Background: Elementor's "improved CSS loading" only enqueues a widget's base * CSS on pages whose OWN content uses that widget. The global header (Xpro * template post 217) is chrome, not page content, so the icon-list widget CSS * is not reliably loaded. Lesson 40: on pages without an icon-list in the body * the phone icon balloons and the WhatsApp lockup collapses because the widget * base resets are absent. This file makes those resets unconditional. * * Scope: ONLY header/footer chrome rules live here. Page-section / content * styling lives in hv-elementor.css. The modal component is in hv-elementor.css * (separate, recently fixed — leave it there). Load order: after hv-elementor.css * (declared as a dependency in functions.php) so cascade wins are reliable. * * Values reference --hv-* tokens (assets/css/hv-tokens.css); no raw hex except * where noted and justified. */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CHROME TOKEN: --hv-slate Defined locally here (not yet in tokens.css / Pencil — see BACKLOG). The orbital figure (hv-orbital.js) reads this token for its ring colour; keeping the definition in an unconditionally-loaded file ensures it resolves regardless of which page is being viewed. The utility bar previously used var(--hv-slate) as its background; that usage is now replaced by var(--hv-dark-background) to match the footer (Task 3). The token definition is retained because the orbital still needs it. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { --hv-slate: #475569; /* sky tone — orbital ring; not the utility bar (Task 3) */ } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ANCHOR SCROLL OFFSET The sticky header sits at 96px; anchor targets need that clearance. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { --hv-header-offset: 96px; } /* Anchor targets land clear of the sticky header. */ [id] { scroll-margin-top: var(--hv-header-offset); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ICON-LIST WIDGET BASE RESETS (self-sufficiency layer) Elementor's widget-icon-list.css normally handles these. When it's absent (pages without an icon-list in their body content), the header icon-list falls back to browser defaults: ul margin inflates the utility bar, icon span reverts to display:inline (collapses width), etc. These resets duplicate ONLY the minimal base behaviour we depend on so the chrome renders identically on every page. They are intentionally low-specificity so the more targeted rules below can still override them. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Base ul reset — Elementor's widget-icon-list.css zeros this; without it the browser default ~16px top/bottom margin inflates the utility bar. */ .elementor-icon-list-items { margin: 0; padding: 0; list-style: none; } /* Inline layout items: Elementor sets display:inline-block on each li when link_click="inline" is set on the icon-list. Without widget CSS this falls back to display:list-item (block). */ .elementor-inline-items .elementor-inline-item { display: inline-block; margin: 0; } /* Icon span base: Elementor's widget CSS sets display:inline-block. Without it the span reverts to display:inline, which ignores explicit width/height — causing the WhatsApp lockup box to collapse to zero (lesson 40). */ .elementor-icon-list-icon { display: inline-block; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ UTILITY ROW LAYOUT The text-editor widget for office hours emits a

with a browser-default margin-bottom (~1em). Kill it so hours + phone + WhatsApp sit on the same visual baseline within the flex container (ae10010). The icon-list (phone + WhatsApp) is pushed to the right edge via margin-left:auto — the reliable equivalent of space-between when there are exactly two flex items. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hv-k-chrome-header-hours p { margin: 0; } .hv-k-chrome-header-contact { margin-left: auto; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ UTILITY BAR — dark band (matches footer background, Task 3) Background is var(--hv-dark-background) = #1B1917, matching the footer (post 218, background_color: globals/colors?id=hv_dark_background). Previously var(--hv-slate) #475569; changed on Jon's instruction 2026-06-21 so the utility bar and footer share the same dark value. Full-bleed: the row sits inside #site-header's 20px gutter; widened +40px and pulled -20px each side to reach viewport edges (lesson 38: negative margin alone only shifts, does not stretch). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .elementor-element-ae10010 { background: var(--hv-dark-background); box-sizing: border-box; width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding: 8px 20px; overflow: visible; } /* Cream text on the dark band — !important beats the icon-list text_color global (hv_muted_foreground #6B7280) which otherwise wins on the phone number + hours. */ .hv-k-chrome-header-hours, .hv-k-chrome-header-hours p, .hv-k-chrome-header-contact .elementor-icon-list-text, .hv-k-chrome-header-contact a { color: var(--hv-background) !important; } /* Icon-list UL base reset (self-sufficiency — lesson 40 family). This zeroes the browser-default block margin on the