/* ========================================================================== Dark Hero — Shared Stylesheet for Subpages Opt in: + All rules scoped under body[data-hero="dark"] for specificity override. ========================================================================== */ /* --- 1. Variable Fallbacks --- */ body[data-hero="dark"] { --color-navy-deep: #0d1b2a; --color-navy-mid: #1b2d45; --color-gold: #c9a96e; --color-cream: #f8f6f1; } /* --- 2. Transparent Header (initial state) --- */ body[data-hero="dark"] header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } body[data-hero="dark"] header .nav-links > li > a { color: var(--color-white, #fff); } body[data-hero="dark"] header .logo img { filter: brightness(0) invert(1); } body[data-hero="dark"] header .nav-phone { color: var(--color-white, #fff); border-color: rgba(255, 255, 255, 0.5); } body[data-hero="dark"] header .hamburger span { background: var(--color-white, #fff); } /* --- 3. Scrolled Header (solid white) --- */ body[data-hero="dark"] header.scrolled { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(64, 105, 161, 0.08); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); } body[data-hero="dark"] header.scrolled .nav-links > li > a { color: var(--color-text, #2c2c2c); } body[data-hero="dark"] header.scrolled .logo img { filter: none; } body[data-hero="dark"] header.scrolled .nav-phone { color: var(--color-primary, #4069a1); border-color: var(--color-primary, #4069a1); } body[data-hero="dark"] header.scrolled .hamburger span { background: var(--color-text, #2c2c2c); } /* --- 4. Dark Hero Background --- */ body[data-hero="dark"] .page-hero, body[data-hero="dark"] .hero { background: var(--color-navy-deep, #0d1b2a); } /* Hide the light radial-gradient pseudo-element */ body[data-hero="dark"] .page-hero::before, body[data-hero="dark"] .hero::before { background: none; } /* Cream fade at the bottom */ body[data-hero="dark"] .page-hero::after, body[data-hero="dark"] .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to top, var(--color-cream, #f8f6f1), transparent); z-index: 2; pointer-events: none; } /* --- 5. Typography --- */ body[data-hero="dark"] .page-hero h1, body[data-hero="dark"] .hero h1 { color: var(--color-white, #fff); } body[data-hero="dark"] .page-hero p, body[data-hero="dark"] .page-hero .lead, body[data-hero="dark"] .hero p, body[data-hero="dark"] .hero-subtitle { color: rgba(255, 255, 255, 0.85); } body[data-hero="dark"] .page-hero p strong, body[data-hero="dark"] .hero p strong, body[data-hero="dark"] .hero-subtitle strong { color: var(--color-white, #fff); } /* Eyebrow badges — gold */ body[data-hero="dark"] .page-hero .eyebrow, body[data-hero="dark"] .hero .hero-eyebrow, body[data-hero="dark"] .hero-eyebrow { color: var(--color-gold, #c9a96e); background: rgba(201, 169, 110, 0.15); border: 1px solid rgba(201, 169, 110, 0.3); } /* Hero badge (geo landing pages) */ body[data-hero="dark"] .hero .hero-badge { background: rgba(201, 169, 110, 0.2); color: var(--color-gold, #c9a96e); border: 1px solid rgba(201, 169, 110, 0.3); } /* Stats */ body[data-hero="dark"] .hero-stats .hero-stat-number, body[data-hero="dark"] .hero-stat-number { color: var(--color-white, #fff); } body[data-hero="dark"] .hero-stats .hero-stat-label, body[data-hero="dark"] .hero-stat-label { color: rgba(255, 255, 255, 0.7); } /* Trust items (geo landing pages) */ body[data-hero="dark"] .hero-trust .trust-item { color: rgba(255, 255, 255, 0.85); } /* Location block (geo landing pages) */ body[data-hero="dark"] .hero-location { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.15); } body[data-hero="dark"] .hero-location strong { color: var(--color-white, #fff); } /* City name accent */ body[data-hero="dark"] .hero .city-name { color: var(--color-gold, #c9a96e); } /* Checklist items */ body[data-hero="dark"] .hero-checklist li { color: rgba(255, 255, 255, 0.9); } body[data-hero="dark"] .hero-checklist li::before { background: var(--color-gold, #c9a96e); color: var(--color-navy-deep, #0d1b2a); } /* --- 6. Buttons --- */ body[data-hero="dark"] .page-hero .btn-primary, body[data-hero="dark"] .hero .btn-primary { background: var(--color-white, #fff); color: var(--color-navy-deep, #0d1b2a); border-color: var(--color-white, #fff); } body[data-hero="dark"] .page-hero .btn-primary:hover, body[data-hero="dark"] .hero .btn-primary:hover { background: var(--color-gold, #c9a96e); border-color: var(--color-gold, #c9a96e); color: var(--color-navy-deep, #0d1b2a); } body[data-hero="dark"] .page-hero .btn-secondary, body[data-hero="dark"] .hero .btn-secondary { background: transparent; color: var(--color-white, #fff); border-color: rgba(255, 255, 255, 0.5); } body[data-hero="dark"] .page-hero .btn-secondary:hover, body[data-hero="dark"] .hero .btn-secondary:hover { background: var(--color-white, #fff); color: var(--color-navy-deep, #0d1b2a); border-color: var(--color-white, #fff); } /* --- 7. Grid Image Treatment (Groups A & B) --- */ body[data-hero="dark"] .page-hero-image, body[data-hero="dark"] .hero-image { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } body[data-hero="dark"] .page-hero-image img, body[data-hero="dark"] .hero-image img { border-radius: var(--radius-lg, 24px); } /* --- 8. Breadcrumb --- */ body[data-hero="dark"] .breadcrumb { background: var(--color-navy-deep, #0d1b2a); } body[data-hero="dark"] .breadcrumb a, body[data-hero="dark"] .breadcrumb span { color: rgba(255, 255, 255, 0.7); } body[data-hero="dark"] .breadcrumb a:hover { color: var(--color-white, #fff); } body[data-hero="dark"] .breadcrumb .separator { color: rgba(255, 255, 255, 0.4); } /* --- 9. Dropdown Menus --- */ /* Transparent header state: dark dropdown */ body[data-hero="dark"] header:not(.scrolled) .dropdown-menu { background: var(--color-navy-mid, #1b2d45); border: 1px solid rgba(255, 255, 255, 0.1); } body[data-hero="dark"] header:not(.scrolled) .dropdown-menu a { color: rgba(255, 255, 255, 0.9); } body[data-hero="dark"] header:not(.scrolled) .dropdown-menu a:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-white, #fff); } /* Scrolled header state: normal white dropdown */ body[data-hero="dark"] header.scrolled .dropdown-menu { background: var(--color-white, #fff); border: 1px solid rgba(64, 105, 161, 0.08); } body[data-hero="dark"] header.scrolled .dropdown-menu a { color: var(--color-text, #2c2c2c); } body[data-hero="dark"] header.scrolled .dropdown-menu a:hover { background: var(--color-accent-light, rgba(64, 105, 161, 0.1)); color: var(--color-primary, #4069a1); } /* --- 9b. Full-bleed hero image overlay (longevity.html layout) --- */ body[data-hero="dark"] .hero-image::before { background: linear-gradient(to right, var(--color-navy-deep, #0d1b2a) 0%, rgba(13,27,42,0.85) 30%, rgba(13,27,42,0.4) 100%); } @media (max-width: 1024px) { body[data-hero="dark"] .hero-image::before { background: rgba(13, 27, 42, 0.8); } } /* --- 10. Mobile --- */ @media (max-width: 768px) { /* Hero padding adjustment */ body[data-hero="dark"] .page-hero, body[data-hero="dark"] .hero { padding-top: 120px; padding-bottom: 60px; } /* Cream fade shorter on mobile */ body[data-hero="dark"] .page-hero::after, body[data-hero="dark"] .hero::after { height: 100px; } /* Mobile nav overlay inherits header style */ body[data-hero="dark"] header:not(.scrolled) .nav-links { background: var(--color-navy-mid, #1b2d45); } body[data-hero="dark"] header:not(.scrolled) .nav-links > li > a { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.1); } body[data-hero="dark"] header:not(.scrolled) .nav-phone { color: var(--color-white, #fff); border-color: rgba(255, 255, 255, 0.5); } /* Scrolled mobile nav — normal white */ body[data-hero="dark"] header.scrolled .nav-links { background: var(--color-white, #fff); } /* Stack hero grid on mobile */ body[data-hero="dark"] .page-hero-content, body[data-hero="dark"] .hero-grid { grid-template-columns: 1fr; gap: 40px; } }