/* ============================================================ Premium layer — hover, reveal, parallax, nav overrides Loaded after landing.css to override where needed. ============================================================ */ :root { --ease-luxe: cubic-bezier(0.19, 1, 0.22, 1); --ring: 0 0 0 1px rgba(10,191,219,0.28), 0 20px 60px -20px rgba(10,191,219,0.25); } /* Grain overlay, applied on via ::before ----------- */ html::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.55; } /* Hairline vignette on every dark section ---------------- */ .section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(10,191,219,0.05), transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(18,15,41,0.4), transparent 70%); opacity: 0.9; } .section { position: relative; } .section > .container { position: relative; z-index: 1; } /* ============================================================ NAV — floating pill ============================================================ */ .site-header { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 0 !important; padding: 20px 40px !important; pointer-events: none; } .site-header > * { pointer-events: auto; } .site-header .logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45)); transition: transform 420ms var(--ease-luxe), filter 300ms; height: 24px !important; } .site-header a:hover .logo { transform: translateY(-1px); filter: drop-shadow(0 4px 14px rgba(10,191,219,0.35)); } /* The pill-shaped nav */ .site-nav { position: relative; gap: 4px !important; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; background: rgba(18,15,41,0.55); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 40px -20px rgba(0,0,0,0.6); } .site-nav a { position: relative; padding: 10px 16px !important; border-radius: 999px; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: rgba(244,244,251,0.68) !important; transition: color 240ms var(--ease-luxe), background 240ms var(--ease-luxe) !important; } .site-nav a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 7px; height: 1px; background: var(--igl-blue-400); transform: scaleX(0); transform-origin: left; transition: transform 340ms var(--ease-luxe); opacity: 0.85; } .site-nav a:hover { color: #fff !important; } .site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); } .site-nav a.is-active { color: #fff !important; background: rgba(10,191,219,0.10); } /* CTA in header */ .site-header .btn--sm { position: relative; overflow: hidden; padding: 11px 18px !important; border-radius: 999px !important; box-shadow: 0 10px 30px -10px rgba(10,191,219,0.55), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 300ms var(--ease-luxe), box-shadow 300ms !important; } .site-header .btn--sm:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(10,191,219,0.75), inset 0 1px 0 rgba(255,255,255,0.45); } .site-header .btn--sm::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); transition: left 820ms var(--ease-luxe); } .site-header .btn--sm:hover::before { left: 160%; } /* Hide desktop nav pill below 980; show hamburger */ @media (max-width: 980px) { .site-nav { position: fixed; top: 80px; left: 20px; right: 20px; flex-direction: column; gap: 0 !important; padding: 14px 12px; border-radius: 16px; background: rgba(12,10,28,0.92); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); transform: translateY(-10px) scale(0.98); opacity: 0; pointer-events: none; transition: transform 320ms var(--ease-luxe), opacity 240ms !important; } .site-nav.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .site-nav a { text-align: left; padding: 14px 16px !important; border-radius: 10px; font-size: 16px !important; border-top: 0 !important; } .site-nav a + a { border-top: 1px solid rgba(255,255,255,0.05) !important; } .nav-toggle { border-radius: 999px !important; background: rgba(18,15,41,0.55) !important; backdrop-filter: blur(14px); } } /* ============================================================ REVEAL ON SCROLL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-luxe), transform 900ms var(--ease-luxe); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 80ms; } .reveal-d2 { transition-delay: 160ms; } .reveal-d3 { transition-delay: 240ms; } .reveal-d4 { transition-delay: 320ms; } /* ============================================================ PARALLAX HOOKS ============================================================ */ .hero__bg, .admit > div:first-of-type { will-change: transform; } /* ============================================================ HERO polish ============================================================ */ .hero__bg::before { content: ""; position: absolute; inset: -5%; background: radial-gradient(ellipse 50% 35% at 30% 30%, rgba(10,191,219,0.18), transparent 60%), radial-gradient(ellipse 40% 30% at 80% 70%, rgba(18,15,41,0.55), transparent 60%); mix-blend-mode: screen; opacity: 0.55; pointer-events: none; } .hero .t-display { background: linear-gradient(180deg, #fff 0%, #cfd3e6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================ CARD polish — how, problem, testimonial, step ============================================================ */ .how__card, .problem__card, .step-card, .tml__card { position: relative; transition: transform 520ms var(--ease-luxe), border-color 320ms var(--ease-luxe), background 320ms var(--ease-luxe), box-shadow 520ms var(--ease-luxe); will-change: transform; } .how__card::before, .problem__card::before, .step-card::before, .tml__card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(10,191,219,0.14), transparent 60%); opacity: 0; transition: opacity 420ms var(--ease-luxe); } .how__card:hover, .problem__card:hover, .step-card:hover, .tml__card:hover { transform: translateY(-4px); border-color: rgba(10,191,219,0.28) !important; box-shadow: var(--ring); } .how__card:hover::before, .problem__card:hover::before, .step-card:hover::before, .tml__card:hover::before { opacity: 1; } /* animated corner bracket on how cards */ .how__card { overflow: hidden; } .how__card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-top: 1px solid rgba(10,191,219,0); border-right: 1px solid rgba(10,191,219,0); transition: border-color 420ms var(--ease-luxe); pointer-events: none; } .how__card:hover::after { border-top-color: rgba(10,191,219,0.55); border-right-color: rgba(10,191,219,0.55); } /* ============================================================ BUTTON polish ============================================================ */ .btn--primary { position: relative; overflow: hidden; box-shadow: 0 14px 38px -14px rgba(10,191,219,0.65), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 300ms var(--ease-luxe), box-shadow 300ms !important; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(10,191,219,0.85), inset 0 1px 0 rgba(255,255,255,0.4); } .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%, transparent 100%); transform: translateX(-120%); transition: transform 900ms var(--ease-luxe); pointer-events: none; } .btn--primary:hover::after { transform: translateX(120%); } /* ============================================================ FAQ polish — active chevron + hover underline ============================================================ */ .faq__item { transition: border-color 320ms var(--ease-luxe); } .faq__item:hover { border-color: rgba(10,191,219,0.25) !important; } .faq__q { transition: color 240ms var(--ease-luxe); } .faq__q:hover { color: var(--igl-blue-400) !important; } .faq__marker { transition: transform 380ms var(--ease-luxe), color 240ms; } .faq__item.is-open .faq__marker { transform: rotate(45deg); color: var(--igl-blue-400); } /* ============================================================ COUNTDOWN polish ============================================================ */ .countdown { background: linear-gradient(180deg, rgba(18,15,41,0.55), rgba(10,8,25,0.55)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 30px 60px -30px rgba(0,0,0,0.5); } .countdown__unit { position: relative; transition: background 260ms var(--ease-luxe); } .countdown__unit:hover { background: rgba(10,191,219,0.05); } .countdown__val { font-variant-numeric: tabular-nums; } /* Pulsing ring on first seat-taken dot */ .seats__dot--taken:first-of-type::after { display: none; } .seats__dot--taken { position: relative; } @keyframes seatPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,74,90,0.55), 0 0 10px rgba(239,74,90,0.6); } 50% { box-shadow: 0 0 0 6px rgba(239,74,90,0), 0 0 14px rgba(239,74,90,0.8); } } .seats__dots .seats__dot--taken:last-of-type { animation: seatPulse 2.4s var(--ease-luxe) infinite; } /* ============================================================ PRICE BLOCK (admissions) ============================================================ */ .price-card { position: relative; margin-top: 48px; padding: 36px 40px; border: 1px solid rgba(10,191,219,0.28); background: linear-gradient(180deg, rgba(10,191,219,0.055), rgba(10,191,219,0.015)), rgba(12,10,28,0.55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; gap: 32px; overflow: hidden; } .price-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(10,191,219,0.18), transparent 60%); } .price-card__left { position: relative; z-index: 1; } .price-card__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--igl-blue-400); margin-bottom: 8px; } .price-card__value { font-family: var(--font-display); font-size: clamp(38px, 4.5vw, 56px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg); } .price-card__value em { font-style: normal; color: var(--fg-muted); font-size: 0.55em; letter-spacing: -0.005em; margin-left: 8px; } .price-card__note { margin-top: 10px; color: var(--fg-muted); font-size: 14px; max-width: 42ch; line-height: 1.55; } .price-card__right { position: relative; z-index: 1; text-align: right; } .price-card__right .btn { white-space: nowrap; } @media (max-width: 720px) { .price-card { flex-direction: column; align-items: flex-start; padding: 28px; } .price-card__right { width: 100%; } .price-card__right .btn { width: 100%; justify-content: center; } } /* ============================================================ MISC ============================================================ */ .eyebrow--status { position: relative; padding-left: 20px; display: inline-block; } .eyebrow--status::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 0 rgba(53,208,127,0.6); animation: pulseDot 2s infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(53,208,127,0.55); } 70% { box-shadow: 0 0 0 12px rgba(53,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); } } /* Respect motion prefs */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition-duration: 0s !important; } .reveal { opacity: 1 !important; transform: none !important; } }