/* ============================================================ eHalo · halo-sky.css — shared living-sky layer for all pages Pair with assets/js/halo-sky.js (it injects the sky DOM). Pages opt in with and annotate sections with data-phase="dawn|morning|noon|golden|sunset|dusk|night". The itinerary page keeps its own copy (journey.css/js). ============================================================ */ .halo { --sky-top: #8fb6e8; --sky-mid: #f4c4c4; --sky-bot: #fde1c8; --sun-x: 30vw; --sun-y: 40vh; --sun-a: 1; --sun-c: #ffd9a0; --moon-a: 0; --moon-x: 72vw; --moon-y: 24vh; --cloud-a: 0.7; --ink: #1d2030; --ink-2: rgba(29, 32, 48, 0.66); --glass: rgba(255, 255, 255, 0.62); --glass-brd: rgba(255, 255, 255, 0.75); --chip: rgba(255, 255, 255, 0.55); --line: rgba(29, 32, 48, 0.18); --brand: #e85d75; --display: 'Space Grotesk', 'Inter', sans-serif; background: var(--sky-bot); color: var(--ink); overflow-x: hidden; } .halo.phase-dusk, .halo.phase-night { --ink: #eef0fb; --ink-2: rgba(238, 240, 251, 0.66); --glass: rgba(13, 17, 40, 0.72); --glass-brd: rgba(255, 255, 255, 0.14); --chip: rgba(13, 17, 40, 0.62); --line: rgba(238, 240, 251, 0.22); } .halo ::selection { background: var(--brand); color: #fff; } /* ============================================================ SKY LAYERS (injected by halo-sky.js) ============================================================ */ .halo .sky, .halo .sky-stars, .halo .sky-aurora, .halo .clouds, .halo .atmo { position: fixed; inset: 0; pointer-events: none; } .halo .sky { z-index: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-bot) 100%); } .halo .sun, .halo .moon { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform, opacity; } .halo .sun { left: var(--sun-x); top: var(--sun-y); width: clamp(90px, 12vw, 160px); height: clamp(90px, 12vw, 160px); background: radial-gradient(circle at 38% 36%, #fff 0%, var(--sun-c) 46%, transparent 72%); opacity: var(--sun-a); filter: blur(1px); box-shadow: 0 0 60px 22px var(--sun-c), 0 0 180px 80px color-mix(in srgb, var(--sun-c) 38%, transparent); } .halo .moon { left: var(--moon-x); top: var(--moon-y); width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px); background: radial-gradient(circle at 40% 36%, #ffffff 0%, #e8ecf7 55%, #c7cfe6 100%); opacity: var(--moon-a); box-shadow: 0 0 50px 16px rgba(214, 224, 255, 0.5); } .halo .moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 64% 30%, rgba(150, 162, 200, .55) 0 9%, transparent 11%), radial-gradient(circle at 36% 58%, rgba(150, 162, 200, .45) 0 7%, transparent 9%), radial-gradient(circle at 58% 70%, rgba(150, 162, 200, .4) 0 5%, transparent 7%); } .halo .sky-stars { z-index: 1; } .halo .sky-aurora { z-index: 2; mix-blend-mode: screen; opacity: .75; filter: blur(22px) saturate(1.2); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 52%); mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 52%); } .halo .clouds { z-index: 3; opacity: var(--cloud-a); } .halo .cloud-layer { position: absolute; inset: -10% -30%; } .halo .puff { position: absolute; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 72%); border-radius: 50%; filter: blur(2px); } .halo .cl-a { animation: hsDrift 150s linear infinite; } .halo .cl-b { animation: hsDrift 220s linear infinite reverse; opacity: .75; } .halo .cl-c { animation: hsDrift 320s linear infinite; opacity: .5; } @keyframes hsDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } } .halo .atmo { z-index: 4; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10, 8, 24, 0.22) 100%); } /* Everything in normal flow rides above the sky; nav stays on top */ .halo main, .halo section, .halo footer { position: relative; z-index: 5; } .halo .navbar { z-index: 1000; } .halo .mobile-menu { z-index: 999; } /* ============================================================ NAV — dark glass (!important beats app.js inline styles) ============================================================ */ .halo .navbar { background: rgba(14, 12, 32, 0.45) !important; box-shadow: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .halo .navbar .logo, .halo .nav-links a { color: #f4f1fa; } .halo .nav-links a:hover { color: #ffb3c2; } .halo .nav-links a.active { color: #ffb3c2; } .halo .nav-links .btn-nav { color: #fff; } .halo .nav-links .social-icons a { color: rgba(244, 241, 250, 0.75); } .halo .nav-links .social-icons a:hover { color: #ffb3c2; } .halo .mobile-menu-btn span { background: #f4f1fa; } .halo .mobile-menu { background: rgba(14, 12, 32, 0.96); } .halo .mobile-menu a { color: #f4f1fa; } .halo .mobile-menu .social-icons a { color: rgba(244, 241, 250, 0.75); } /* ============================================================ GENERIC PIECES — reveals, glass, magnet, display type ============================================================ */ .halo .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); will-change: opacity, transform; } .halo .reveal.in { opacity: 1; transform: translateY(0); } .halo .glass { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 22px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px -30px rgba(8, 6, 24, .4); } .halo .magnet { will-change: transform; transition: transform .2s cubic-bezier(.2, .7, .2, 1); } .halo .btn-ghost { background: var(--chip); color: var(--ink); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .halo .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .halo .btn-outline { color: var(--ink); border-color: var(--line); } .halo .btn-outline:hover { border-color: var(--brand); color: var(--brand); } /* ============================================================ RESTYLES of existing style.css components over the sky ============================================================ */ /* sections lose their solid backgrounds — the sky takes over */ .halo .hero, .halo .features, .halo .how-it-works, .halo .social-proof, .halo .app-showcase, .halo .destinations-preview, .halo .destinations-main, .halo .cta-section, .halo .legal-header { background: transparent; } /* home hero: sky replaces the blob shapes */ .halo .hero-bg { display: none; } .halo .hero-title { color: var(--ink); } .halo .hero-subtitle { color: var(--ink-2); } .halo .stat-number { color: var(--ink); } .halo .stat-label { color: var(--ink-2); } .halo .stat-divider { background: var(--line); } /* section headers */ .halo .section-title { color: var(--ink); } .halo .section-subtitle { color: var(--ink-2); } .halo .section-tag { background: var(--chip); border: 1px solid var(--glass-brd); color: var(--brand); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* feature cards become glass */ .halo .feature-card { background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .halo .feature-card h3 { color: var(--ink); } .halo .feature-card p { color: var(--ink-2); } /* steps */ .halo .step-content h3 { color: var(--ink); } .halo .step-content p { color: var(--ink-2); } .halo .step-connector { background: var(--line); } .halo .step-mockup { background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .halo .mockup-item { color: var(--ink); background: var(--chip); } /* globe floats directly on the sky (canvas is transparent) */ .halo .globe-container { background: transparent; } /* social proof quote becomes a glass card */ .halo .proof-content { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 26px; padding: 3rem 2.5rem; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .halo .quote-text { color: var(--ink); } .halo .author-name { color: var(--ink); } /* CTA section: night sky behind, keep its own white text */ .halo .cta-section h2 { color: #fff; } .halo .cta-section p { color: rgba(255, 255, 255, 0.85); } .halo .cta-bg-shapes { opacity: .4; } /* teaser band on home keeps its own gradient (it links the journey) */ /* destinations page */ .halo .destinations-hero { min-height: 56vh; } .halo .destinations-hero-bg { display: none; } .halo .destinations-hero-content h1 { color: var(--ink); } .halo .destinations-hero-content p { color: var(--ink-2); } .halo .destinations-hero .section-tag { background: var(--chip) !important; color: var(--brand) !important; border: 1px solid var(--glass-brd); } .halo .filter-btn { background: var(--chip); color: var(--ink); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .halo .filter-btn:hover { color: var(--brand); } .halo .filter-btn.active { background: var(--brand); color: #fff; border-color: transparent; } .halo .destination-full-card { box-shadow: 0 30px 70px -30px rgba(8, 6, 24, .5); } /* legal pages */ .halo .legal-header h1 { color: var(--ink); } .halo .legal-header p { color: var(--ink-2); } .halo .legal-content { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 26px; padding: 2.5rem clamp(1.25rem, 4vw, 3rem) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .halo .legal-content h2 { color: var(--ink); } .halo .legal-content p, .halo .legal-content li { color: var(--ink-2); } /* 404 */ .halo .error-page { background: transparent; } .halo .error-title { color: var(--ink); } .halo .error-message { color: var(--ink-2); } .halo .error-code { opacity: .3; } /* dark footer everywhere on halo pages */ .halo .footer { background: #0b0a1d; border-top: 1px solid rgba(255, 255, 255, .07); } /* display face for big headings */ .halo h1, .halo .section-title, .halo .error-title { font-family: var(--display); letter-spacing: -0.02em; } /* ============================================================ FORM + FAQ pieces (contact / work-with-us rewrites) ============================================================ */ .halo .hform { display: grid; gap: 1rem; } .halo .hform label { display: block; font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .4rem; } .halo .hform input, .halo .hform textarea, .halo .hform select { width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink); background: var(--chip); border: 1px solid var(--glass-brd); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .25s, box-shadow .25s; } .halo .hform input::placeholder, .halo .hform textarea::placeholder { color: var(--ink-2); } .halo .hform input:focus, .halo .hform textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); } .halo .hnote { padding: 1rem 1.25rem; border-radius: 16px; background: color-mix(in srgb, #10b981 16%, transparent); border: 1px solid color-mix(in srgb, #10b981 40%, transparent); color: var(--ink); } .halo .hfaq { border: 1px solid var(--glass-brd); background: var(--glass); border-radius: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 0 1.25rem; transition: border-color .25s; } .halo .hfaq + .hfaq { margin-top: .8rem; } .halo .hfaq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-weight: 600; color: var(--ink); } .halo .hfaq summary::-webkit-details-marker { display: none; } .halo .hfaq summary::after { content: '+'; font-family: var(--display); font-size: 1.4rem; color: var(--brand); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .halo .hfaq[open] summary::after { transform: rotate(45deg); } .halo .hfaq p { color: var(--ink-2); padding-bottom: 1.1rem; margin: 0; } .halo .hfaq:hover { border-color: var(--brand); } /* ============================================================ Responsive + reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .halo .cl-a, .halo .cl-b, .halo .cl-c { animation: none; } .halo .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }