/* OpenFinance — public landing page styles. Scoped with the lp- prefix so nothing here can collide with the React app. */ /* ── Smooth in-page navigation (disabled for reduced-motion users) ────── */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ── Accessibility: skip link & focus rings ───────────────────────────── */ .lp-skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 600; transition: top 0.15s ease; } .lp-skip-link:focus { top: 12px; } a:focus-visible, button:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; border-radius: 8px; } /* ── Header: transparent over hero, solid after scroll ────────────────── */ #lp-header { background: transparent; } #lp-header.lp-scrolled { background: rgba(2, 6, 23, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* ── Hero backdrop: layered radial glows over deep slate ──────────────── */ .lp-hero { background: radial-gradient(1000px 520px at 78% -10%, rgba(37, 99, 235, 0.28), transparent 60%), radial-gradient(720px 420px at 8% 18%, rgba(14, 165, 233, 0.14), transparent 55%), linear-gradient(180deg, #020617 0%, #0f172a 100%); } /* Subtle grid texture for a technical, product feel. */ .lp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%); pointer-events: none; } .lp-gradient-text { background: linear-gradient(92deg, #60a5fa 0%, #38bdf8 55%, #34d399 110%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Mockup frame & floating insight cards ────────────────────────────── */ .lp-mockup-glow { position: absolute; inset: -8% -4%; background: radial-gradient(closest-side, rgba(56, 189, 248, 0.16), transparent 70%); pointer-events: none; } .lp-mockup-frame { border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px -16px rgba(2, 6, 23, 0.85), 0 0 0 1px rgba(2, 6, 23, 0.4); } .lp-glass { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 14px 36px -12px rgba(2, 6, 23, 0.5); } @keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .lp-float { animation: lp-float 5.5s ease-in-out infinite; } .lp-float-slow { animation: lp-float 7s ease-in-out 0.8s infinite; } @media (prefers-reduced-motion: reduce) { .lp-float, .lp-float-slow { animation: none; } } /* ── Scroll-reveal (JS adds lp-reveal-visible via IntersectionObserver) ── The hidden initial state only applies when JS is running (lp-js on ), so content is always readable without JS or with reduced motion. */ .lp-js .lp-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } .lp-js .lp-reveal-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lp-js .lp-reveal { opacity: 1; transform: none; transition: none; } } /* ── Micro-interactions ───────────────────────────────────────────────── */ .lp-cta { box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.55); } .lp-cta:hover { box-shadow: 0 10px 28px -8px rgba(37, 99, 235, 0.7); } .lp-benefit-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .lp-benefit-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.18); } .lp-insight { transition: transform 0.2s ease, box-shadow 0.2s ease; } .lp-insight:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.16); } @media (prefers-reduced-motion: reduce) { .lp-benefit-card, .lp-insight { transition: none; } .lp-benefit-card:hover, .lp-insight:hover { transform: none; } } /* ── Invoice timeline ─────────────────────────────────────────────────── */ .lp-timeline { scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; } .lp-timeline::-webkit-scrollbar { height: 4px; } .lp-timeline::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; } .lp-timeline-item { position: relative; } /* Connector between months. */ .lp-timeline-item + .lp-timeline-item::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: #cbd5e1; } .lp-timeline-current { box-shadow: 0 10px 26px -12px rgba(37, 99, 235, 0.45); } /* ── "Como funciona" steps ────────────────────────────────────────────── */ .lp-step-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff; font-size: 1.05rem; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.6); } /* Dashed connector between steps on wide screens. */ @media (min-width: 1024px) { .lp-step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 60px; right: -8px; border-top: 2px dashed #e2e8f0; } } /* ── Security section backdrop ────────────────────────────────────────── */ .lp-security { background: radial-gradient(800px 420px at 85% 0%, rgba(14, 165, 233, 0.12), transparent 60%), radial-gradient(700px 400px at 10% 100%, rgba(37, 99, 235, 0.12), transparent 60%), #0f172a; } /* ── Final CTA panel ──────────────────────────────────────────────────── */ .lp-final-cta { background: radial-gradient(640px 320px at 85% -20%, rgba(125, 211, 252, 0.35), transparent 65%), linear-gradient(120deg, #1d4ed8 0%, #2563eb 55%, #0284c7 100%); box-shadow: 0 28px 64px -24px rgba(29, 78, 216, 0.55); } .lp-final-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, black 20%, transparent 80%); pointer-events: none; }