@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Jost:wght@300;400;500&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&display=swap'); /* ============================================================ ZOLARA — "Aura Bright" theme overlay (v2 — unified to funnel) Loaded LAST in so it overrides the page's inline styles. Now matches the Moon-funnel PDF/OTO look: calm CREAM ground, navy ink, single warm gold, Playfair headings + Jost body + Cinzel labels. One file → every legacy page (index, products, all product pages) shares the funnel identity. ============================================================ */ :root{ /* funnel palette (matches cosmic-vip-oto / birth PDF) */ --aura-cream:#FBF6EC; --aura-paper:#FFFDF7; --aura-sand:#F3EADB; --aura-navy:#2A2E5A; /* headings / primary ink */ --aura-ink:#2A2E5A; /* deepest readable ink */ --aura-ink-2:#43405e; /* body text */ --aura-muted:#7A7280; /* muted labels */ --aura-gold:#C9A24B; /* single warm gold */ --aura-gold-deep:#B78B2E; --aura-line:#E4D2A6; --aura-speed:18s; } /* ---- kill every dark background system on these pages ---- */ .z-cosmic-layer, #star-field, .stars, .neb{ display:none !important; } body{ background:transparent !important; font-family:'Jost', system-ui, -apple-system, sans-serif !important; color:var(--aura-ink-2) !important; -webkit-font-smoothing:antialiased; } /* ---- paint a calm CREAM ground on the existing fixed bg layers ---- */ .page-bg, .cosmic-bg{ background:radial-gradient(1200px 760px at 50% -10%, var(--aura-paper) 0%, var(--aura-cream) 55%, var(--aura-sand) 100%) !important; background-size:auto !important; animation:none !important; opacity:1 !important; } .page-bg::after, .cosmic-bg::after{ content:none !important; } @keyframes auraShift{ 0%,100%{background-position:50% 50%} } /* ---- NAV → light, clean ---- */ nav{ background:rgba(255,253,247,.82) !important; border-bottom:1px solid var(--aura-line) !important; -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important; } nav a, .nav-links a{ color:var(--aura-navy) !important; font-family:'Jost',sans-serif !important; } nav a:hover, .nav-links a:hover{ color:var(--aura-gold-deep) !important; } .nav-logo{ color:var(--aura-navy) !important; font-family:'Cinzel',serif !important; letter-spacing:.06em; } .nav-links .nav-cta, .nav-cta{ color:#3a2c05 !important; background:linear-gradient(180deg,#F0D77B,#C9A24B) !important; border:1px solid var(--aura-gold-deep) !important; } .nav-toggle span{ background:var(--aura-navy) !important; } @media(max-width:768px){ .nav-links{ background:rgba(255,253,247,.98) !important; } } /* ============================================================ HERO — index.html (galaxy .hero-cover replaced by wordmark) ============================================================ */ .hero .hero-cover{ display:none !important; } .hero .hero-metrics{ display:none !important; } .hero h1, .hero-title{ margin-bottom:14px !important; letter-spacing:.01em; } .hero-sub{ margin-bottom:30px !important; } .hero-btns{ margin-top:6px !important; } /* hero text on a soft paper card (calm, premium) */ .hero .hero-text{ margin:36px auto 0 !important; max-width:820px !important; padding:clamp(30px,5vw,52px) clamp(22px,4vw,46px) !important; background:rgba(255,253,247,.90) !important; -webkit-backdrop-filter:blur(10px) !important; backdrop-filter:blur(10px) !important; border:1px solid var(--aura-line) !important; border-radius:26px !important; box-shadow:0 24px 70px rgba(122,106,58,.16), inset 0 1px 0 rgba(255,255,255,.7) !important; } /* luminous ZOLARA wordmark injected above the badge */ .hero .hero-text::before{ content:"ZOLARA"; display:block; text-align:center; font-family:'Cinzel',serif; font-weight:700; font-size:clamp(56px,14vw,132px); line-height:1; letter-spacing:.08em; background:linear-gradient(135deg,#2A2E5A 0%,#5b4a86 42%,#B78B2E 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#2A2E5A; filter:drop-shadow(0 2px 14px rgba(255,253,247,.9)); margin:0 auto 6px; text-wrap:balance; } .hero .hero-text::after{ content:''; display:block; width:min(340px,58vw); height:2px; margin:0 auto 26px; background:linear-gradient(90deg,transparent,var(--aura-gold),transparent); box-shadow:0 0 12px rgba(201,162,75,.5); } /* ---- hero text readability on cream ---- */ .hero .hero-badge, .page-hero .hero-badge{ color:var(--aura-gold-deep) !important; border:1px solid var(--aura-line) !important; background:rgba(255,253,247,.8) !important; font-family:'Cinzel',serif !important; } .hero h1, .hero-title, .page-title{ color:var(--aura-navy) !important; -webkit-text-fill-color:var(--aura-navy) !important; background:none !important; text-shadow:none !important; } /* gold emphasis word */ .hero h1 em, .page-title .gold, .gold{ -webkit-text-fill-color:initial !important; background:none !important; color:var(--aura-gold-deep) !important; font-style:italic; } .hero-sub, .page-sub, .hero-subtitle{ color:var(--aura-ink-2) !important; font-family:'Jost',sans-serif !important; text-shadow:none !important; } .hero-trust{ color:var(--aura-muted) !important; text-shadow:none !important; font-family:'Jost',sans-serif !important; } .hero-trust span{ color:var(--aura-gold-deep) !important; } /* ---- HEADINGS → Playfair Display (mixed-case bold serif) ---- */ .hero h1, .hero-title, .page-title, .sec-title, .modal-title, .final-cta h2{ font-family:'Playfair Display', Georgia, serif !important; text-transform:none !important; letter-spacing:0 !important; font-weight:700 !important; color:var(--aura-navy) !important; } h2, h3, .why-card h3, .step h3, .prod-name, .faq-q, .card-name{ font-family:'Playfair Display', Georgia, serif !important; color:var(--aura-navy) !important; } /* section eyebrows/labels → Cinzel, deep gold */ .sec-label, .section-label, .eyebrow, .sec-title, .section-title{ font-family:'Cinzel', serif !important; color:var(--aura-gold-deep) !important; text-shadow:none !important; } /* ---- legacy blog/journal cards (dark --card-bg + white text) → light paper + navy ink ---- */ a[style*="card-bg"]{ background:var(--aura-paper) !important; border:1px solid var(--aura-line) !important; box-shadow:0 8px 24px rgba(122,106,58,.08) !important; } a[style*="card-bg"], a[style*="card-bg"] *{ color:var(--aura-ink-2) !important; -webkit-text-fill-color:var(--aura-ink-2) !important; } a[style*="card-bg"] :first-child{ color:var(--aura-navy) !important; -webkit-text-fill-color:var(--aura-navy) !important; } /* ---- reduced motion ---- */ @media(prefers-reduced-motion:reduce){ .page-bg, .cosmic-bg{ animation:none !important; background-position:50% 50% !important; } }