/* ============================================================ LANDING GLASS — premium glassmorphism for the public landing ------------------------------------------------------------ One fixed, premium architecture backdrop sits behind the whole landing page; every section becomes a translucent pane over it, and cards get true frosted blur. Scoped to #landing-page-content (+ the logged-out header), so the portal is untouched. Performance rules: - ONE fixed backdrop image for the entire page. - Sections are translucent tints (cheap). True backdrop-filter runs only on small surfaces: header, cards, strips. ============================================================ */ /* ---------- The premium backdrop behind the glass ---------- */ #landing-page-content { position: relative; } #landing-page-content::before { content: ''; position: fixed; inset: 0; z-index: 0; background: /* light veil so every pane keeps contrast */ linear-gradient(180deg, rgba(248, 250, 252, 0.82) 0%, rgba(241, 245, 249, 0.78) 45%, rgba(248, 250, 252, 0.84) 100%), /* colour breath */ radial-gradient(900px 540px at 85% 8%, rgba(56, 189, 248, 0.16), transparent 60%), radial-gradient(760px 520px at 8% 85%, rgba(99, 102, 241, 0.14), transparent 60%), /* the premium image behind the glass */ url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2000&auto=format&fit=crop') center 30%/cover no-repeat; pointer-events: none; } #landing-page-content > main { position: relative; z-index: 1; } /* ---------- Header: floating frosted bar (landing only wins here; the portal's ID-scoped rules keep priority inside the app) ---------- */ .header { background: rgba(255, 255, 255, 0.68) !important; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08); } /* ---------- Light sections → clear glass panes ---------- */ .hero { background: rgba(255, 255, 255, 0.30) !important; } .hero::before { opacity: .5; } .free-estimation-section { background: rgba(255, 255, 255, 0.44) !important; } .ai-features-section { background: rgba(253, 244, 255, 0.40) !important; } .business-analytics-section { background: rgba(238, 242, 255, 0.42) !important; } #project-rooms.prl-section { background: rgba(255, 255, 255, 0.40) !important; } #project-rooms.prl-section::before, #project-rooms.prl-section::after { opacity: .55; } .how-it-works { background: rgba(255, 255, 255, 0.42) !important; } .why-sc-section { background: rgba(255, 251, 235, 0.38) !important; } .testimonials-section { background: rgba(255, 255, 255, 0.46) !important; } .hero-auth-strip { background: transparent !important; } /* Soften each section's own decorative wash so the imagery reads through */ .free-est-bg-orb, .ba-orb, .hiw-orb { opacity: .18 !important; } /* ---------- Deep sections → smoked / tinted glass (white text stays) ---------- */ .demo-section { background: linear-gradient(180deg, rgba(4, 10, 24, 0.86) 0%, rgba(17, 24, 48, 0.84) 55%, rgba(8, 14, 32, 0.86) 100%) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .content-gate { background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.80)) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cta-section { background: linear-gradient(135deg, rgba(49, 46, 129, 0.80) 0%, rgba(79, 70, 229, 0.76) 55%, rgba(99, 102, 241, 0.72) 100%) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .features-strip { background: linear-gradient(135deg, rgba(55, 48, 163, 0.72), rgba(99, 102, 241, 0.66)) !important; backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); } .site-footer { background: rgba(10, 15, 28, 0.88) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ---------- Cards: true frosted glass ---------- */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .why-sc-stats-band, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .prl-card { background: rgba(255, 255, 255, 0.62) !important; backdrop-filter: blur(16px) saturate(1.45); -webkit-backdrop-filter: blur(16px) saturate(1.45); border: 1px solid rgba(255, 255, 255, 0.72) !important; box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; } /* Lift on hover — glass catching the light */ #landing-page-content .floating-card:hover, #landing-page-content .free-est-benefit-card:hover, #landing-page-content .hiw-shared-item:hover, #landing-page-content .testimonial-card:hover, #landing-page-content .prl-feats li:hover { background: rgba(255, 255, 255, 0.78) !important; box-shadow: 0 18px 48px rgba(37, 99, 235, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; } /* Cards living on smoked panes → dark glass chips */ #landing-page-content .demo-stat-card, #landing-page-content .demo-counter-card, #landing-page-content .cg-preview-card { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35) !important; } /* Prestige band: let its own imagery do the work — just polish the tiles */ .pb-band { background-color: transparent; } .pb-stat { border: 1px solid rgba(255, 255, 255, 0.8) !important; } /* ---------- Mobile: lighter blur, calmer effects, same look ---------- */ @media (max-width: 768px) { #landing-page-content::before { background: linear-gradient(180deg, rgba(248, 250, 252, 0.88) 0%, rgba(241, 245, 249, 0.86) 100%), radial-gradient(500px 300px at 85% 5%, rgba(56, 189, 248, 0.14), transparent 60%), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=70&w=900&auto=format&fit=crop') center 30%/cover no-repeat; } #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .testimonial-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .demo-section, .content-gate, .cta-section, .features-strip, .site-footer { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Accessibility: no translucency tricks for users who opt out */ @media (prefers-reduced-transparency: reduce) { #landing-page-content::before { background: #f8fafc; } } /* ============================================================ GLASS V2 — "WORLD CLASS" pass Living light behind the panes, gradient glass surfaces, edge lighting, glossy primary actions. Still landing-scoped. ============================================================ */ /* ---------- Living light: aurora drifting behind the glass ---------- */ #landing-page-content::after { content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(42% 34% at 24% 28%, rgba(56, 189, 248, 0.16), transparent 70%), radial-gradient(38% 30% at 78% 64%, rgba(129, 140, 248, 0.15), transparent 70%), radial-gradient(30% 26% at 55% 12%, rgba(45, 212, 191, 0.10), transparent 70%); animation: lgAurora 26s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes lgAurora { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .55; } 50% { transform: translate3d( 2%, 2%, 0) scale(1.06); opacity: .95; } 100% { transform: translate3d(-1%, 3%, 0) scale(1.02); opacity: .7; } } @media (prefers-reduced-motion: reduce) { #landing-page-content::after { animation: none; } } /* Soft vignette keeps the eye centered — expensive-print feel */ #landing-page-content > main::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(15, 23, 42, 0.05) 100%); } /* ---------- Gradient glass: panes catch light, not flat white ---------- */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .prl-card { background: linear-gradient(152deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.52) 48%, rgba(240, 247, 255, 0.62) 100%) !important; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) inset, 0 -1px 1px rgba(37, 99, 235, 0.05) inset, 0 2px 6px rgba(15, 23, 42, 0.04), 0 14px 42px rgba(15, 23, 42, 0.10), 0 30px 80px rgba(37, 99, 235, 0.06) !important; border-radius: 18px; } /* Edge lighting on hover — the pane catches the aurora */ #landing-page-content .floating-card:hover, #landing-page-content .free-est-benefit-card:hover, #landing-page-content .hiw-shared-item:hover, #landing-page-content .testimonial-card:hover, #landing-page-content .analytics-card:hover, #landing-page-content .chart-card:hover, #landing-page-content .prl-feats li:hover { background: linear-gradient(152deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(224, 242, 254, 0.78) 100%) !important; border-color: rgba(125, 211, 252, 0.9) !important; box-shadow: 0 1px 1px rgba(255, 255, 255, 1) inset, 0 0 0 1px rgba(56, 189, 248, 0.25), 0 6px 14px rgba(15, 23, 42, 0.06), 0 24px 60px rgba(37, 99, 235, 0.18) !important; transform: translateY(-4px); transition: all .35s cubic-bezier(.22, 1, .36, 1); } /* ---------- Hero visual: a framed pane of museum glass ---------- */ #landing-page-content .hero-image-container { border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 70px rgba(15, 23, 42, 0.22), 0 60px 140px rgba(37, 99, 235, 0.14); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1); } #landing-page-content .hero-image-container:hover { transform: perspective(1200px) rotateX(1.2deg) rotateY(-1.5deg) translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 30px 80px rgba(15, 23, 42, 0.26), 0 70px 160px rgba(37, 99, 235, 0.2); } /* ---------- Actions: glossy primary, frosted secondary ---------- */ #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 -2px 6px rgba(13, 40, 100, 0.35) inset, 0 10px 26px rgba(37, 99, 235, 0.38), 0 24px 60px rgba(37, 99, 235, 0.22) !important; border: none !important; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; } #landing-page-content .hero-cta .btn-primary:hover, #landing-page-content .cta-btn-primary:hover, #landing-page-content .prl-cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -2px 6px rgba(13, 40, 100, 0.35) inset, 0 16px 38px rgba(37, 99, 235, 0.48), 0 32px 80px rgba(37, 99, 235, 0.28) !important; } #landing-page-content .hero-cta .btn-ai, #landing-page-content .cta-btn-secondary { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.8) !important; color: #1d4ed8 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 24px rgba(15, 23, 42, 0.08) !important; } #landing-page-content .hero-cta .btn-ai:hover, #landing-page-content .cta-btn-secondary:hover { background: rgba(255, 255, 255, 0.8) !important; transform: translateY(-2px); } /* ---------- Header: jeweled hairline under the frost ---------- */ .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.55) 30%, rgba(129, 140, 248, 0.55) 70%, transparent 100%); pointer-events: none; } body:has(#app-content:not([style*="none"])) .header::after { display: none; } /* portal keeps its own chrome */ /* Landing nav links: quiet glass pills on hover */ #main-nav-menu .nav-link { border-radius: 999px; padding: 8px 14px; transition: background .25s, color .25s; } #main-nav-menu .nav-link:hover { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); } /* ---------- Typography: engraved headings across the landing ---------- */ #landing-page-content .section-title { letter-spacing: -0.03em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } /* ---------- Smoked panes get edge light too ---------- */ .demo-section, .content-gate, .cta-section { border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); } /* ---------- Scrollbar: glass rail (WebKit) ---------- */ body::-webkit-scrollbar { width: 11px; } body::-webkit-scrollbar-track { background: rgba(241, 245, 249, 0.6); } body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(148, 163, 184, 0.55), rgba(100, 116, 139, 0.55)); border-radius: 999px; border: 3px solid rgba(241, 245, 249, 0.8); } body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #64748b, #475569); } /* ---------- Mobile: keep the wow, trim the physics ---------- */ @media (max-width: 768px) { #landing-page-content::after { animation: none; opacity: .6; } #landing-page-content .hero-image-container:hover { transform: none; } } /* ============================================================ GLASS V3 — DIMENSIONAL TYPE Headlines become beautifully projected 3D lettering: a lit top edge, a tight machined bevel, then soft ambient depth. Built with stacked drop-shadows so it wraps gradient-filled letters perfectly (text-shadow would leak through clipped fills). ============================================================ */ /* ---------- The signature treatment: light-theme headlines ---------- */ #landing-page-content .hero-text h1, #landing-page-content .section-title, #landing-page-content .prl-title, #landing-page-content .pb-line, #landing-page-content .hiw-journey-title, #landing-page-content .ai-feature-title, #landing-page-content .cg-title { filter: /* lit top edge — the glass catches light on the letter crowns */ drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.85)) /* machined bevel — two crisp steps of extrusion */ drop-shadow(0 1.5px 0 rgba(163, 177, 198, 0.9)) drop-shadow(0 1.5px 0 rgba(148, 163, 184, 0.5)) /* ambient depth — letters float off the pane */ drop-shadow(0 7px 9px rgba(15, 23, 42, 0.16)) drop-shadow(0 20px 30px rgba(37, 99, 235, 0.13)); } /* Tighter, heavier crowns — projected type needs mass */ #landing-page-content .hero-text h1 { letter-spacing: -0.035em; font-weight: 900; } #landing-page-content .section-title { letter-spacing: -0.03em; font-weight: 800; text-shadow: none; } /* ---------- Headlines on smoked panes: deep-cut white type ---------- */ #landing-page-content .cta-title, #landing-page-content .demo-section .section-title, #landing-page-content .demo-title, #landing-page-content .content-gate .cg-title { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 2px 0 rgba(2, 6, 23, 0.65)) drop-shadow(0 3px 0 rgba(2, 6, 23, 0.35)) drop-shadow(0 10px 18px rgba(2, 6, 23, 0.55)) drop-shadow(0 26px 40px rgba(56, 189, 248, 0.14)); } /* ---------- Dimensional numerals: stats read like engraved plaques ---------- */ #landing-page-content .pb-stat b, #landing-page-content .floating-card-number, #landing-page-content .testimonial-stat-value, #landing-page-content .demo-stat-card b, #landing-page-content .why-sc-stat-item strong { filter: drop-shadow(0 -0.5px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 1px 0 rgba(163, 177, 198, 0.85)) drop-shadow(0 5px 8px rgba(37, 99, 235, 0.22)); } #landing-page-content .demo-stat-card b { filter: drop-shadow(0 1px 0 rgba(2, 6, 23, 0.6)) drop-shadow(0 5px 10px rgba(2, 6, 23, 0.5)); } /* ---------- Hero: the crown jewel gets one extra breath of life ---------- */ @keyframes lgTypeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* Hero headline stays perfectly still — a continuous float reads as "shaking/unstable", especially behind the login modal's blur. The 3D depth from the other rules remains; only the perpetual bob is removed. */ #landing-page-content .hero-text h1 { animation: none; } /* ---------- Badges & eyebrows: raised metal pills ---------- */ #landing-page-content .hero-badge, #landing-page-content .prl-eyebrow, #landing-page-content .pb-kicker { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 23, 42, 0.06), 0 3px 6px rgba(15, 23, 42, 0.07), 0 10px 22px rgba(37, 99, 235, 0.10); } /* ---------- Logo: the SC mark projects like a cast emblem ---------- */ #landing-page-content ~ * .logo-icon, /* no-op guard */ .header .logo-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(7, 30, 80, 0.35), 0 4px 10px rgba(37, 99, 235, 0.35), 0 1px 2px rgba(15, 23, 42, 0.25); text-shadow: 0 1px 2px rgba(7, 30, 80, 0.45); } /* ---------- Mobile: lighter stacks, same dimensionality ---------- */ @media (max-width: 768px) { #landing-page-content .hero-text h1, #landing-page-content .section-title, #landing-page-content .prl-title, #landing-page-content .pb-line, #landing-page-content .hiw-journey-title, #landing-page-content .ai-feature-title, #landing-page-content .cg-title { filter: drop-shadow(0 1px 0 rgba(163, 177, 198, 0.85)) drop-shadow(0 5px 8px rgba(15, 23, 42, 0.16)); } #landing-page-content .hero-text h1 { animation: none; } #landing-page-content .cta-title, #landing-page-content .demo-section .section-title, #landing-page-content .demo-title { filter: drop-shadow(0 2px 0 rgba(2, 6, 23, 0.6)) drop-shadow(0 8px 14px rgba(2, 6, 23, 0.5)); } } /* ============================================================ GLASS V4 — LIVING GLASS + PREMIUM LETTERING 1) Pointer light: a soft specular highlight follows the cursor across glass cards (element injected by script.js). 2) Periodic glint sweeps across primary actions. 3) Every letter refined: smoothing, kerning, engraved body text, jeweled labels — not just the headlines. ============================================================ */ /* ---------- Pointer light on glass (hosts get .lg-live) ---------- */ .lg-live { overflow: hidden; } .lg-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55) 0%, rgba(186, 230, 253, 0.18) 38%, transparent 62%); mix-blend-mode: soft-light; z-index: 1; } .lg-live:hover .lg-sheen { opacity: 1; } /* the light also kisses the border edge nearest the cursor */ .lg-edge { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.35), transparent 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.5px; z-index: 1; } .lg-live:hover .lg-edge { opacity: 1; } @media (hover: none), (prefers-reduced-motion: reduce) { .lg-sheen, .lg-edge { display: none; } } /* ---------- Luxury glint: a light streak crosses primary actions ---------- */ #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.28) 32%, rgba(255, 255, 255, 0.05) 40%, transparent 50%), linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important; background-size: 260% 100%, 100% 100% !important; background-position: 130% 0, 0 0 !important; animation: lgGlint 5.5s ease-in-out infinite; } @keyframes lgGlint { 0%, 72% { background-position: 130% 0, 0 0; } 88%, 100% { background-position: -60% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { animation: none; } } /* ---------- PREMIUM LETTERING — every letter, not just headlines ---------- */ #landing-page-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-feature-settings: 'kern' 1, 'liga' 1; } /* Body copy: engraved into the glass — ink slate with a hairline of light */ #landing-page-content p, #landing-page-content .section-subtitle, #landing-page-content .hero-text p { letter-spacing: -0.011em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); } #landing-page-content .section-subtitle { color: #46536a; } /* Card titles: tight, confident crowns with a whisper of depth */ #landing-page-content .floating-card h4, #landing-page-content .free-est-benefit-card h4, #landing-page-content .hiw-shared-item strong, #landing-page-content .testimonial-info h4, #landing-page-content .why-sc-stat-item strong, #landing-page-content .analytics-card-title { letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 3px rgba(15, 23, 42, 0.08); } /* Labels, badges, eyebrows: jeweled small caps */ #landing-page-content .hero-badge span, #landing-page-content .prl-eyebrow, #landing-page-content .pb-kicker, #landing-page-content .free-est-badge, #landing-page-content .ba-badge, #landing-page-content .hiw-badge { letter-spacing: 0.14em; font-feature-settings: 'kern' 1, 'ss01' 1; } /* Nav: assured, quiet authority */ #main-nav-menu .nav-link { font-weight: 600; letter-spacing: 0.005em; color: #1e293b; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } /* Buttons: lettering set like engraved metal */ #landing-page-content .btn, #landing-page-content .cta-btn-primary, #landing-page-content .cta-btn-secondary, #landing-page-content .prl-cta { letter-spacing: 0.01em; font-feature-settings: 'kern' 1; } #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { text-shadow: 0 1px 2px rgba(7, 30, 80, 0.45); } /* Selection: even highlighting text feels branded */ #landing-page-content ::selection { background: rgba(56, 189, 248, 0.25); color: #0f172a; } /* Smoked panes: body text gets deep-engraved treatment */ .demo-section p, .content-gate p, .cta-section p { text-shadow: 0 1px 2px rgba(2, 6, 23, 0.5); letter-spacing: -0.005em; } /* ============================================================ GLASS V5 — STABILITY & GLIDE The page should feel like it moves on rails: one smooth easing everywhere, no bobbing, no snap-backs, no scroll jank. Later rules override earlier passes by design. ============================================================ */ /* ---------- Anchor navigation glides ---------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Kill constant bobbing (reads as "shaking") ---------- */ #landing-page-content .hero-text h1 { animation: none; } /* no floating headline */ #landing-page-content .prl-float { animation: none; } /* rooms chips sit still */ #landing-page-content .floating-card { animation: none !important; } /* hero cards sit still */ /* Aurora: from drifting to breathing — opacity only, no movement */ #landing-page-content::after { animation: lgAuroraCalm 36s ease-in-out infinite alternate; transform: none; } @keyframes lgAuroraCalm { 0% { opacity: .55; } 100% { opacity: .85; } } /* ---------- THE snap-back fix: symmetric transitions at REST ---------- */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .prl-card, #landing-page-content .pb-stat, #landing-page-content .tour-tab { transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1), background .45s ease, border-color .45s ease !important; } /* Calmer lift: 2px glide, never a 4px jump */ #landing-page-content .floating-card:hover, #landing-page-content .free-est-benefit-card:hover, #landing-page-content .hiw-shared-item:hover, #landing-page-content .testimonial-card:hover, #landing-page-content .analytics-card:hover, #landing-page-content .chart-card:hover, #landing-page-content .prl-feats li:hover, #landing-page-content .pb-stat:hover { transform: translateY(-2px); } #landing-page-content .prl-feats li:hover, #landing-page-content .prl-card:hover { transform: translateY(-2px) !important; } /* Hero visual: no 3D wobble — a single confident rise */ #landing-page-content .hero-image-container:hover { transform: translateY(-4px); } /* Buttons glide too (and their glint slows to a whisper) */ #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1); animation-duration: 8s; } /* Pointer sheen: softer light, no blend-mode shimmer */ .lg-sheen { mix-blend-mode: normal; opacity: 0; } .lg-live:hover .lg-sheen { opacity: .55; } /* ---------- Scroll-jank sources removed ---------- */ /* background-attachment:fixed repaints every scroll frame on Windows */ .pb-band { background-attachment: scroll !important; } /* big translucent sections don't need live blur — tint alone reads as glass */ .cta-section, .content-gate, .site-footer { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Reveal animations glide on the same rail as everything else */ #landing-page-content .reveal, #landing-page-content .reveal-left, #landing-page-content .reveal-right, #landing-page-content .reveal-scale { transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important; transition-duration: .7s !important; } /* ============================================================ GLASS V6 — DUAL-PANE LED Every card becomes two panes of glass: the card itself plus a second glass rim around it with a lit outer edge. Behind the big screens, an ambient LED backlight bleeds colour onto the page (premium-TV style). A gloss band across each pane's top makes surfaces read as lit displays. Static — no new motion. ============================================================ */ /* ---------- Dual-pane glass + LED bleed on all glass cards ---------- */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .pb-stat, #landing-page-content .tour-tab { background: /* lit top band — the pane reads as a display */ linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 16%), linear-gradient(152deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.56) 48%, rgba(240, 247, 255, 0.66) 100%) !important; box-shadow: /* inner bevel */ 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 -1px 1px rgba(37, 99, 235, 0.06) inset, /* the SECOND pane: a glass lip with a lit outer edge */ 0 0 0 4px rgba(255, 255, 255, 0.16), 0 0 0 5px rgba(255, 255, 255, 0.5), /* depth */ 0 6px 18px rgba(15, 23, 42, 0.06), 0 22px 60px rgba(37, 99, 235, 0.10), /* LED backlight bleed */ 0 30px 90px -14px rgba(56, 189, 248, 0.25) !important; } /* Hover: the second pane lights up sky-blue and the LED brightens */ #landing-page-content .floating-card:hover, #landing-page-content .free-est-benefit-card:hover, #landing-page-content .hiw-shared-item:hover, #landing-page-content .testimonial-card:hover, #landing-page-content .analytics-card:hover, #landing-page-content .chart-card:hover, #landing-page-content .prl-feats li:hover, #landing-page-content .pb-stat:hover, #landing-page-content .tour-tab:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 18%), linear-gradient(152deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.74) 50%, rgba(224, 242, 254, 0.8) 100%) !important; box-shadow: 0 1px 1px rgba(255, 255, 255, 1) inset, 0 -1px 1px rgba(37, 99, 235, 0.08) inset, 0 0 0 4px rgba(186, 230, 253, 0.28), 0 0 0 5px rgba(56, 189, 248, 0.6), 0 8px 22px rgba(15, 23, 42, 0.07), 0 26px 70px rgba(37, 99, 235, 0.16), 0 36px 110px -12px rgba(56, 189, 248, 0.4) !important; } /* ---------- The big screens get full Ambilight ---------- */ #landing-page-content .hero-image-container { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(255, 255, 255, 0.5), 0 24px 70px rgba(15, 23, 42, 0.2), 0 40px 120px -10px rgba(56, 189, 248, 0.4), 0 60px 160px -20px rgba(139, 92, 246, 0.3); } #landing-page-content .tour-screen { box-shadow: 0 34px 80px rgba(15, 23, 42, 0.18), 0 30px 110px -8px rgba(56, 189, 248, 0.42), 0 50px 150px -16px rgba(139, 92, 246, 0.32); } #landing-page-content .prl-card { box-shadow: 0 1px 0 #ffffff inset, 0 0 0 5px rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(255, 255, 255, 0.5), 0 26px 70px rgba(15, 23, 42, 0.15), 0 36px 110px -10px rgba(99, 102, 241, 0.35) !important; } /* Smoked-pane chips: dark dual-pane with neon edge */ #landing-page-content .demo-stat-card, #landing-page-content .cg-preview-card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 0 0 4px rgba(255, 255, 255, 0.05), 0 0 0 5px rgba(125, 211, 252, 0.22), 0 12px 34px rgba(2, 6, 23, 0.4), 0 24px 70px -10px rgba(56, 189, 248, 0.2) !important; } /* Header: a lit lower pane edge under the frost */ .header { box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 20px 60px -18px rgba(56, 189, 248, 0.28); } /* ---------- Mobile: single rim, softer bleed (perf + tight grids) ---------- */ @media (max-width: 768px) { #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .pb-stat, #landing-page-content .tour-tab { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 0 0 2.5px rgba(255, 255, 255, 0.35), 0 8px 26px rgba(15, 23, 42, 0.08), 0 18px 50px -12px rgba(56, 189, 248, 0.2) !important; } } /* ============================================================ GLASS V7 — CHROMA & KINETIC INK The missing "wow" was colour range: everything sat in one blue family. This pass adds a disciplined third hue (warm rose) to the light system, and sets the key words in LIVING INK — a vivid gradient that flows slowly INSIDE the letterforms. Kinetic type, zero layout movement (V5 stability intact). ============================================================ */ /* ---------- Three-hue light system: sky · violet · warm rose ---------- */ #landing-page-content::before { background: linear-gradient(180deg, rgba(248, 250, 252, 0.82) 0%, rgba(241, 245, 249, 0.78) 45%, rgba(248, 250, 252, 0.84) 100%), radial-gradient(900px 540px at 85% 8%, rgba(56, 189, 248, 0.17), transparent 60%), radial-gradient(760px 520px at 8% 85%, rgba(124, 58, 237, 0.14), transparent 60%), radial-gradient(700px 460px at 92% 88%, rgba(251, 113, 133, 0.10), transparent 62%), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2000&auto=format&fit=crop') center 30%/cover no-repeat; } /* aurora gains the warm note too */ #landing-page-content::after { background: radial-gradient(42% 34% at 24% 28%, rgba(56, 189, 248, 0.16), transparent 70%), radial-gradient(38% 30% at 78% 64%, rgba(139, 92, 246, 0.15), transparent 70%), radial-gradient(26% 22% at 62% 88%, rgba(251, 113, 133, 0.09), transparent 70%), radial-gradient(30% 26% at 55% 12%, rgba(45, 212, 191, 0.10), transparent 70%); } /* ---------- LIVING INK: colour flows inside the key words ---------- */ @keyframes lgInk { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } #landing-page-content .hero-text .highlight, #landing-page-content .prl-title em, #landing-page-content .free-est-title, #landing-page-content .cta-title { background-image: linear-gradient(100deg, #1d4ed8 0%, #0ea5e9 22%, #7c3aed 48%, #db2777 68%, #0ea5e9 88%, #1d4ed8 100%) !important; background-size: 300% 100% !important; background-position: 42% 50% !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Static premium gradient — the flowing shimmer is frozen for a calm, professional, rock-steady headline (no perceived movement). */ animation: none; } #landing-page-content .cta-title { background-image: linear-gradient(100deg, #ffffff 0%, #bae6fd 25%, #ddd6fe 50%, #fbcfe8 72%, #ffffff 100%) !important; } #landing-page-content .hero-text .ai-highlight, #landing-page-content .hero-text .analytics-highlight { background-size: 220% 100% !important; background-position: 42% 50% !important; animation: none; } /* Kinetic signature: a flowing light-bar under the hero's key words */ #landing-page-content .hero-text .highlight { position: relative; display: inline-block; } #landing-page-content .hero-text .highlight::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: -6px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #0ea5e9, #8b5cf6, #ec4899, #0ea5e9, #2563eb); background-size: 300% 100%; background-position: 42% 50%; animation: none; opacity: .85; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); } /* ---------- Actions deepen into the violet register ---------- */ #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.28) 32%, rgba(255, 255, 255, 0.05) 40%, transparent 50%), linear-gradient(180deg, #3b82f6 0%, #2563eb 45%, #4f46e5 100%) !important; background-size: 260% 100%, 100% 100% !important; background-position: 130% 0, 0 0 !important; } /* Prestige numerals join the living ink (slower, statelier) */ #landing-page-content .pb-stat b { background: linear-gradient(100deg, #1d4ed8, #0ea5e9 35%, #7c3aed 70%, #1d4ed8 100%) !important; background-size: 260% 100% !important; background-position: 50% 50% !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: none; } /* ---------- Restraint switches ---------- */ @media (prefers-reduced-motion: reduce) { #landing-page-content .hero-text .highlight, #landing-page-content .hero-text .ai-highlight, #landing-page-content .hero-text .analytics-highlight, #landing-page-content .prl-title em, #landing-page-content .free-est-title, #landing-page-content .cta-title, #landing-page-content .pb-stat b, #landing-page-content .hero-text .highlight::after { animation: none; } } @media (max-width: 768px) { /* phones: ink still flows on the hero only; the rest sit still */ #landing-page-content .free-est-title, #landing-page-content .cta-title, #landing-page-content .pb-stat b { animation: none; } } /* ============================================================ GLASS V8 — LIQUID GLASS The three signatures of liquid glass, added on top of the frosted system: (1) a MENISCUS — the curved bright edge where liquid glass meets light, top and bottom; (2) CHROMATIC REFRACTION — faint cyan/violet fringes at the side edges, like light dispersing through a lens; (3) JELLY PHYSICS — surfaces squish softly on press. Interaction-only; no idle motion. ============================================================ */ /* ---------- Meniscus + chromatic edge on every glass pane ---------- */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .pb-stat, #landing-page-content .tour-tab { /* deeper lens: more colour pulled through the pane */ backdrop-filter: blur(18px) saturate(1.7) brightness(1.04); -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.04); box-shadow: /* meniscus: lit curve top AND a soft liquid rise at the bottom */ 0 1.5px 1px rgba(255, 255, 255, 0.98) inset, 0 -1.5px 2px rgba(255, 255, 255, 0.55) inset, /* chromatic refraction: cyan fringe left, violet fringe right */ 2px 0 6px -3px rgba(34, 211, 238, 0.35) inset, -2px 0 6px -3px rgba(167, 139, 250, 0.35) inset, /* second pane + lit edge (V6) */ 0 0 0 4px rgba(255, 255, 255, 0.16), 0 0 0 5px rgba(255, 255, 255, 0.5), /* depth + LED bleed */ 0 6px 18px rgba(15, 23, 42, 0.06), 0 22px 60px rgba(37, 99, 235, 0.10), 0 30px 90px -14px rgba(56, 189, 248, 0.25) !important; } /* ---------- Jelly physics: liquid squish on press ---------- */ #landing-page-content .floating-card:active, #landing-page-content .free-est-benefit-card:active, #landing-page-content .hiw-shared-item:active, #landing-page-content .testimonial-card:active, #landing-page-content .prl-feats li:active, #landing-page-content .pb-stat:active, #landing-page-content .tour-tab:active { transform: scale(0.982) !important; transition-duration: .12s !important; } @keyframes lgSquish { 0% { transform: scale(1); } 35% { transform: scale(0.96, 0.985); } 65% { transform: scale(1.015, 0.995); } 100% { transform: scale(1); } } #landing-page-content .hero-cta .btn-primary:active, #landing-page-content .cta-btn-primary:active, #landing-page-content .prl-cta:active, #landing-page-content .hero-cta .btn-ai:active, #landing-page-content .cta-btn-secondary:active { animation: lgSquish .38s cubic-bezier(.34, 1.56, .64, 1); } /* Hover picks up a whisper of liquid swell with the existing 2px lift */ #landing-page-content .floating-card:hover, #landing-page-content .free-est-benefit-card:hover, #landing-page-content .hiw-shared-item:hover, #landing-page-content .testimonial-card:hover, #landing-page-content .prl-feats li:hover, #landing-page-content .pb-stat:hover { transform: translateY(-2px) scale(1.004); } /* ---------- Droplet chrome: pills and buttons read as liquid beads ---------- */ #landing-page-content .hero-badge, #landing-page-content .prl-eyebrow, #landing-page-content .pb-kicker, #landing-page-content .hero-trades span, #landing-page-content .t-pill { box-shadow: 0 1px 0.5px rgba(255, 255, 255, 0.95) inset, 0 -1px 1.5px rgba(255, 255, 255, 0.5) inset, 1.5px 0 4px -2px rgba(34, 211, 238, 0.3) inset, -1.5px 0 4px -2px rgba(167, 139, 250, 0.3) inset, 0 3px 8px rgba(15, 23, 42, 0.07), 0 8px 20px -6px rgba(56, 189, 248, 0.2); } #landing-page-content .hero-cta .btn-ai, #landing-page-content .cta-btn-secondary { box-shadow: 0 1.5px 1px rgba(255, 255, 255, 0.95) inset, 0 -1.5px 2px rgba(255, 255, 255, 0.5) inset, 2px 0 5px -3px rgba(34, 211, 238, 0.35) inset, -2px 0 5px -3px rgba(167, 139, 250, 0.35) inset, 0 8px 24px rgba(15, 23, 42, 0.08) !important; } /* Frosted header becomes a liquid sheet: meniscus along its bottom */ .header { box-shadow: 0 -1px 1.5px rgba(255, 255, 255, 0.6) inset, 0 1px 0.5px rgba(255, 255, 255, 0.9) inset, 0 8px 32px rgba(15, 23, 42, 0.08), 0 20px 60px -18px rgba(56, 189, 248, 0.28); } /* ---------- Restraint ---------- */ @media (prefers-reduced-motion: reduce) { #landing-page-content .hero-cta .btn-primary:active, #landing-page-content .cta-btn-primary:active, #landing-page-content .prl-cta:active, #landing-page-content .hero-cta .btn-ai:active, #landing-page-content .cta-btn-secondary:active { animation: none; } } @media (max-width: 768px) { /* phones keep the meniscus but drop the heavier lens (GPU) */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .tour-tab { backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); } } /* ============================================================ GLASS V9 — PERFORMANCE RAIL (smoothness is the luxury) Backdrop-filter on ~30 cards re-samples the page EVERY scroll frame; animated gradient text inside heavy drop-shadow filters repaints every frame. That was the judder. The look survives: cards go near-opaque gradient glass (identical over the pale backdrop) and live blur is reserved for the few chrome pieces. Ink freezes into static rich gradients; glint plays on hover. ============================================================ */ /* ---------- Cards: same glass look, zero per-frame cost ---------- */ #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .pb-stat, #landing-page-content .tour-tab, #landing-page-content .prl-card, #landing-page-content .demo-stat-card, #landing-page-content .cg-preview-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #landing-page-content .floating-card, #landing-page-content .hero-auth-strip-inner, #landing-page-content .free-est-container, #landing-page-content .free-est-benefit-card, #landing-page-content .analytics-card, #landing-page-content .chart-card, #landing-page-content .ai-feature-slide, #landing-page-content .hiw-journey, #landing-page-content .hiw-shared-item, #landing-page-content .hiw-portal-card, #landing-page-content .why-sc-card, #landing-page-content .testimonial-card, #landing-page-content .prl-feats li, #landing-page-content .pb-stat, #landing-page-content .tour-tab { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 16%), linear-gradient(152deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 254, 255, 0.88) 48%, rgba(240, 247, 255, 0.9) 100%) !important; } /* chrome keeps true blur — few elements, worth it */ .features-strip { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ---------- Ink freezes: rich gradients stay, repainting stops ---------- */ #landing-page-content .hero-text .highlight, #landing-page-content .hero-text .ai-highlight, #landing-page-content .hero-text .analytics-highlight, #landing-page-content .prl-title em, #landing-page-content .free-est-title, #landing-page-content .cta-title, #landing-page-content .pb-stat b { animation: none !important; background-position: 35% 50% !important; } /* the kinetic light-bar under the hero words stays — one tiny element */ /* ---------- Glint: on-demand, not always-on ---------- */ #landing-page-content .hero-cta .btn-primary, #landing-page-content .cta-btn-primary, #landing-page-content .prl-cta { animation: none; } @keyframes lgGlintOnce { from { background-position: 130% 0, 0 0; } to { background-position: -60% 0, 0 0; } } #landing-page-content .hero-cta .btn-primary:hover, #landing-page-content .cta-btn-primary:hover, #landing-page-content .prl-cta:hover { animation: lgGlintOnce .9s ease-out 1; } /* Aurora: hold it steady (a fixed full-screen layer is cheap only when idle) */ #landing-page-content::after { animation: none; opacity: .7; } /* ============================================================ ENTRANCE PLAYS ONCE — the hero slide-in is a first-impression effect for the initial page load only. When the landing page is re-shown after logout, replaying it reads as the whole top of the page "coming down". Once the app adds sc-entrance-done to , every hero element renders in its final resting place. ============================================================ */ body.sc-entrance-done .hero-badge, body.sc-entrance-done .hero-text h1, body.sc-entrance-done .hero-text p, body.sc-entrance-done .hero-cta, body.sc-entrance-done .hero-stats, body.sc-entrance-done .hero-visual { animation: none !important; opacity: 1; transform: none; filter: none; }