/* ============================================================ * Avia Theme 5 — Brand · Dark Hero * * Extends theme-4 (Brand · Dark Header): in addition to the dark nav * strip, the ENTIRE hero block is also dark navy. Eyebrow becomes a * pill with yellow dot. Stats sit as translucent cards on the dark * canvas. The booking card stays white (contrast against the dark * canvas — same as the brand guidelines reference doc). * * Applied via THREE classes on : * `avia-theme-brand avia-theme-four avia-theme-five` * * Cascade: * - theme-2-brand.css → yellow primary, Inter italic, blue secondary, rounded radii * - theme-4-brand-dark.css → dark nav strip + inverted brand mark + no wa-btn + h1 60px * - theme-5 (this file) → dark hero block + pill eyebrow + translucent stats * ============================================================ */ /* ----- Hero block: dark navy canvas ----- */ html.avia-theme-five .hero, html.avia-theme-five .about-hero, html.avia-theme-five .contact-hero, html.avia-theme-five .faq-hero { background: radial-gradient(900px 500px at 8% 0%, rgba(254, 205, 2, 0.07) 0%, transparent 60%), #122231; border-bottom: 0; color: #FFFFFF; } /* faq-hero has its own radial gradient — override fully */ html.avia-theme-five .faq-hero::before { background: radial-gradient(circle, rgba(254, 205, 2, 0.08) 0%, transparent 65%); } /* ----- Eyebrow: pill with yellow dot, like reference doc ----- */ html.avia-theme-five .hero .eyebrow, html.avia-theme-five .about-hero .eyebrow, html.avia-theme-five .contact-hero .eyebrow, html.avia-theme-five .faq-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; background: rgba(254, 205, 2, 0.08); border: 1px solid rgba(254, 205, 2, 0.32); border-radius: 999px; padding: 8px 18px; color: #FECD02; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 22px; } html.avia-theme-five .hero .eyebrow::before, html.avia-theme-five .about-hero .eyebrow::before, html.avia-theme-five .contact-hero .eyebrow::before, html.avia-theme-five .faq-hero .eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FECD02; } /* ----- Hero text colors inverted ----- */ html.avia-theme-five .hero h1, html.avia-theme-five .about-hero h1, html.avia-theme-five .contact-hero h1, html.avia-theme-five .faq-hero h1 { color: #FFFFFF; } html.avia-theme-five .hero p.lead, html.avia-theme-five .about-hero p.lead, html.avia-theme-five .contact-hero p.lead, html.avia-theme-five .faq-hero p.lead { color: rgba(255, 255, 255, 0.74); } /* "stress-free" swipe stays yellow — pops beautifully on dark. Inherited from theme-2-brand .swipe (yellow background fill). */ /* ----- Trust badges (if present) ----- */ html.avia-theme-five .hero .trust-badges .trust-badge { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.86); } html.avia-theme-five .hero .trust-badges .trust-badge svg { color: #FECD02; } /* ----- Breadcrumb (sgn-v2 etc.) ----- */ html.avia-theme-five .hero .breadcrumb, html.avia-theme-five .hero .breadcrumb a { color: rgba(255, 255, 255, 0.55); } html.avia-theme-five .hero .breadcrumb a:hover { color: #FECD02; } html.avia-theme-five .hero .breadcrumb .sep { color: rgba(255, 255, 255, 0.25); } /* ----- Stats: translucent on dark canvas, yellow numbers ----- */ html.avia-theme-five .hero .stat, html.avia-theme-five .stats-bar .stat { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; } html.avia-theme-five .hero .stat-num { color: #FECD02; } html.avia-theme-five .hero .stat-label { color: rgba(255, 255, 255, 0.66); } /* stats-bar for /about/ — sits below dark hero, also dark canvas */ html.avia-theme-five .stats-bar { background: #0E1B27; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } html.avia-theme-five .stats-bar .stat-num { color: #FECD02; } html.avia-theme-five .stats-bar .stat-label { color: rgba(255, 255, 255, 0.66); } html.avia-theme-five .stats-bar .stat:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.08); } /* ----- Booking card: keep white BG (contrast) — but soften the yellow offset ----- */ /* Inherited from styles.css — no override needed. The yellow ::before offset block looks great on dark canvas, so we keep it. */ /* ----- WhatsApp button (was hidden in theme-4): keep hidden ----- */ /* Inherited from theme-4 — no override needed. */ /* ----- Primary CTA "GET A FREE QUOTE" in nav: yellow gradient still pops ----- */ /* Inherited from theme-2-brand. */ /* ----- Hero CTA wa-btn already hidden by theme-4. The .btn primary CTA inherits yellow gradient from theme-2-brand. No more changes needed. ----- */ /* ----- Smooth transition between dark hero and next light section ----- */ html.avia-theme-five .hero + section, html.avia-theme-five .about-hero + section { /* Soft top hairline to mark the boundary */ border-top: 1px solid rgba(0, 0, 0, 0); } /* ----- Hero CTA buttons row — when wa-btn is hidden, keep btn alone ----- */ html.avia-theme-five .hero-ctas .btn, html.avia-theme-five .hero-ctas .wa-btn { box-shadow: 0 4px 16px rgba(254, 205, 2, 0.18); }