/* FLEX Landing - mobile first */ /* Index page: remove global reserved header spacing */ .flex-main{ padding-top: 0 !important; padding-bottom: env(safe-area-inset-bottom) !important; } /* Full-bleed landing section even if base.html uses .container */ .flex-landing{ position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); min-height: 100svh; min-height: 100dvh; padding: clamp(22px, 4vh, 64px) 16px; display: flex; align-items: center; justify-content: center; } /* Full viewport gradient backdrop */ .landing-bg{ position: fixed; inset: -30vmax; z-index: 0; background: radial-gradient(900px 550px at 25% 20%, rgba(220, 53, 69, 0.18), transparent 55%), radial-gradient(750px 500px at 80% 35%, rgba(255, 255, 255, 0.10), transparent 55%), radial-gradient(700px 500px at 50% 90%, rgba(220, 53, 69, 0.12), transparent 60%); filter: blur(18px); transform: translateZ(0); animation: bgPulse 10s ease-in-out infinite; pointer-events: none; } @keyframes bgPulse{ 0%, 100% { transform: scale(1) translateZ(0); opacity: 1; } 50% { transform: scale(1.05) translateZ(0); opacity: 0.95; } } /* Content wrapper */ .landing-wrap{ width: 100%; max-width: 640px; position: relative; z-index: 1; } /* Center everything cleanly */ .landing-content{ width: 100%; text-align: center; margin: 0 auto; } /* Logo */ .logo-wrap{ display: grid; place-items: center; margin-bottom: 10px; position: relative; } .logo-glow{ position: absolute; width: 170px; height: 170px; border-radius: 999px; background: radial-gradient(circle at 50% 50%, rgba(220, 53, 69, 0.35), transparent 65%); filter: blur(8px); opacity: 0.9; animation: glowBreath 2.8s ease-in-out infinite; } @keyframes glowBreath{ 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.07); opacity: 1; } } .landing-logo{ max-width: 180px; height: auto; transform: translateZ(0); animation: logoFloat 3.5s ease-in-out infinite; will-change: transform; } @keyframes logoFloat{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Title + subtitle */ .landing-title{ text-align: center; font-weight: 900; letter-spacing: 0.6px; margin: 10px 0 8px; text-shadow: 0 10px 24px rgba(0,0,0,0.28); } .landing-subtitle{ text-align: center; margin: 0 auto 18px; max-width: 46ch; opacity: 0.96; text-shadow: 0 8px 22px rgba(0,0,0,0.18); } /* CTAs */ .cta-stack{ display: grid; gap: 12px; margin: 18px auto 18px; width: 100%; max-width: 460px; } .landing-cta{ border-radius: 18px; padding: 12px 14px; font-weight: 800; box-shadow: 0 14px 28px rgba(0,0,0,0.18); transform: translateZ(0); } .landing-cta:active{ transform: translateY(1px); } /* Feature rows */ .quick-points{ display: grid; gap: 12px; margin: 14px auto 0; width: 100%; max-width: 560px; } .qp{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(6px); text-align: left; /* keeps text aligned nicely */ } :root[data-bs-theme="light"] .qp{ background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.08); } .qp-dot{ width: 10px; height: 10px; border-radius: 999px; margin-top: 6px; background: rgba(220, 53, 69, 0.95); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0.18); flex: 0 0 auto; } .qp-body{ min-width: 0; } .qp-title{ font-weight: 900; line-height: 1.1; margin-bottom: 2px; } .qp-text{ opacity: 0.92; font-size: 0.95rem; margin: 0; } /* ---- Reveal animation (JS toggles .landing-ready on ) ---- */ [data-landing-reveal]{ opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms ease; transition-delay: var(--reveal-delay, 0ms); } html.landing-ready [data-landing-reveal]{ opacity: 1; transform: translateY(0); } /* Desktop/tablet polish */ @media (min-width: 576px){ .landing-wrap{ max-width: 720px; } .cta-stack{ grid-template-columns: 1fr 1fr; max-width: 620px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .landing-bg, .logo-glow, .landing-logo{ animation: none !important; } [data-landing-reveal]{ transition: none !important; opacity: 1 !important; transform: none !important; } }