/* --------------------------------------------------------------------------- Horizon Hearth brand skin — layered over Bootstrap 5.3 color modes. Loaded by every PLATFORM layout (public, member, admin) so inner pages inherit it. Themes are driven by data-bs-theme on . The funnel pages use their own funnel.css but share the extended --hh-* palette defined here. --------------------------------------------------------------------------- */ :root { /* Extended Horizon Hearth palette (also consumed by the funnel pages). */ --hh-amber-500: #D58D38; --hh-amber-600: #B5762A; --hh-amber-400: #E7A24E; --hh-silver-200: #DADADA; --hh-silver-400: #919191; --hh-steel-600: #515151; --hh-charcoal-900: #1C2024; --hh-charcoal-800: #2A2F34; --hh-parchment-100: #F8F0E1; --hh-warm-border: #E2DED6; --hh-ink: #23282D; --hh-text-muted: #6E717A; --brand-primary: #D58D38; --brand-accent: #B5762A; --brand-surface: #FFFFFF; --brand-surface-alt: #F8F0E1; --brand-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } body { font-family: var(--brand-font); } /* ---- Primary + buttons (both themes) ---- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-primary: #D58D38; --bs-primary-rgb: 213, 141, 56; } .btn-primary { --bs-btn-bg: #D58D38; --bs-btn-border-color: #D58D38; --bs-btn-color: #1C2024; --bs-btn-hover-bg: #B5762A; --bs-btn-hover-border-color: #B5762A; --bs-btn-hover-color: #1C2024; --bs-btn-active-bg: #B5762A; --bs-btn-active-border-color: #B5762A; --bs-btn-active-color: #1C2024; --bs-btn-focus-shadow-rgb: 213, 141, 56; } .btn-outline-primary { --bs-btn-color: #B5762A; --bs-btn-border-color: #D58D38; --bs-btn-hover-bg: #D58D38; --bs-btn-hover-border-color: #D58D38; --bs-btn-hover-color: #1C2024; --bs-btn-active-bg: #B5762A; --bs-btn-active-border-color: #B5762A; --bs-btn-active-color: #1C2024; --bs-btn-focus-shadow-rgb: 213, 141, 56; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #E0A050; } .btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); } /* ---- Themed surfaces (brand charcoal on dark, parchment tints on light) ---- */ [data-bs-theme="dark"] { --bs-body-bg: #1C2024; --bs-body-color: #DADADA; --bs-emphasis-color: #F8F0E1; --bs-secondary-bg: #2A2F34; --bs-tertiary-bg: #23282D; --bs-border-color: #3A4048; } [data-bs-theme="light"] { --bs-body-color: #23282D; --bs-secondary-bg: #F8F0E1; --bs-border-color: #E2DED6; } /* Links, contrast-safe per theme (amber-as-text fails AA on white → bronze on light). */ [data-bs-theme="light"] { --bs-link-color: #9A6420; --bs-link-hover-color: #7C4E17; --bs-link-color-rgb: 154,100,32; --bs-link-hover-color-rgb: 124,78,23; } [data-bs-theme="dark"] { --bs-link-color: #E0A050; --bs-link-hover-color: #F0C070; --bs-link-color-rgb: 224,160,80; --bs-link-hover-color-rgb: 240,192,112; } /* ---- Area switcher (slim top utility bar) ---- */ .gowl-areabar { background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); font-size: 12px; } .gowl-areabar .container { display: flex; justify-content: flex-end; } .gowl-areanav { display: flex; gap: 20px; padding: 5px 0; } .gowl-areanav a { color: var(--bs-body-color); opacity: .7; text-decoration: none; letter-spacing: .08em; font-weight: 600; padding: 2px 0; border-bottom: 2px solid transparent; } .gowl-areanav a:hover { opacity: 1; } .gowl-areanav a.active { color: var(--bs-primary); opacity: 1; border-bottom-color: var(--bs-primary); } /* ---- Navbar (themed surface both themes) ---- */ .brand-nav { background: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color); } .brand-nav .nav-link { color: var(--bs-body-color); } .brand-nav .nav-link:hover { color: var(--bs-primary); } .brand-nav .navbar-text { color: var(--bs-body-color); opacity: .75; } /* ---- Theme-aware brand logo ---- */ .brand-logo-light, .brand-logo-dark { display: none; align-items: center; } [data-bs-theme="light"] .brand-logo-light { display: flex; } [data-bs-theme="dark"] .brand-logo-dark { display: flex; gap: 8px; } .brand-logo-light img, .brand-logo-dark img { display: block; } .brand-wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; line-height: 1; } .brand-wordmark .w-h { color: #DADADA; } .brand-wordmark .w-a { color: #D58D38; } /* ---- Footer ---- */ .brand-footer { background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color); } .brand-footer a { color: var(--bs-link-color); text-decoration: none; } .brand-footer a:hover { text-decoration: underline; } .legal-body { line-height: 1.7; } /* ---- Brand amber "warning" badge (no default yellow/blue) ---- */ .gowl-badge-warning { background-color: var(--bs-primary); color: #1C2024; }