/* Marketing landing page (website/templates/website/home.html). * * THE MARKETING CARVE-OUT — this stylesheet is the one sanctioned exception to * the "no page-specific styling, no gradients" rule in CLAUDE.md "## UI". * The public landing is a billboard, not an app screen: bold brand gradients, * motion and oversized type are allowed HERE ONLY. Everything is scoped under * `.landing-page` (one body class, one stylesheet) so nothing leaks into the * Trezo app UI. Gradient stops derive from the brand artwork * (static/images/luppis/brand/*.svg, backgrounds/dashboard-ambient.svg) and the * primary tracks the theme via --bs-primary-rgb. * * Motion contract (see static/js/landing.js): * - A tiny inline script adds `lp-motion` to unless the user * prefers reduced motion. All entrance-hiding and keyframe animation is * gated on `html.lp-motion`, so no-JS and reduced-motion users get the * full page, instantly, with zero movement. * - [data-reveal] elements start hidden (only under html.lp-motion) and get * `.is-revealed` from an IntersectionObserver; `--reveal-delay` staggers. */ .landing-page { /* Landing-only design tokens (the "--lp-" namespace). */ --lp-primary: rgb(var(--bs-primary-rgb)); --lp-violet: #ad63f6; --lp-blue: #3584fc; --lp-sky: #2db6f5; --lp-cyan: #06b6d4; --lp-magenta: #d015ff; --lp-ink: #14163a; /* deep navy derived from the primary's hue */ --lp-ink-rgb: 20, 22, 58; --lp-grad: linear-gradient(135deg, var(--lp-cyan) 0%, var(--lp-primary) 52%, var(--lp-magenta) 100%); --lp-grad-text: linear-gradient(110deg, var(--lp-blue) 0%, var(--lp-primary) 48%, var(--lp-magenta) 100%); /* Deeper variant for SMALL gradient text (13-14px needs 4.5:1 on white; * every stop here is ≥5.5:1 — the standard --lp-grad-text stops are not). */ --lp-grad-text-deep: linear-gradient(110deg, #1d63d4 0%, #4d4ae0 48%, #a312c9 100%); --lp-glass-bg: rgba(255, 255, 255, 0.78); --lp-glass-border: rgba(var(--bs-primary-rgb), 0.14); --lp-shadow-soft: 0 16px 40px -20px rgba(var(--lp-ink-rgb), 0.25); --lp-shadow-glow: 0 24px 64px -16px rgba(var(--bs-primary-rgb), 0.35); --lp-radius: 1.25rem; --lp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); padding-top: 76px; /* fixed navbar offset */ scroll-behavior: smooth; color: var(--bs-body-color); } /* scroll-behavior on does not reliably propagate to the viewport * (Firefox honours only the root element) — set it on too. */ html:has(body.landing-page) { scroll-behavior: smooth; } .landing-page section[id], .landing-page header[id] { scroll-margin-top: 76px; } /* ===== Reveal system ===== * Hidden initial state ONLY when motion is on (html.lp-motion) — no-JS or * reduced-motion visitors always see content. JS adds .is-revealed. */ html.lp-motion .landing-page [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--lp-ease) var(--reveal-delay, 0s), transform 0.7s var(--lp-ease) var(--reveal-delay, 0s); will-change: opacity, transform; } html.lp-motion .landing-page [data-reveal="fade"] { transform: none; } html.lp-motion .landing-page [data-reveal="scale"] { transform: translateY(18px) scale(0.96); } html.lp-motion .landing-page [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; /* release the compositor-layer hint once revealed */ } /* Failsafe: if landing.js never executes (404, aborted load, extension), no * .is-revealed would ever arrive and the page would stay blank. A running * animation overrides the transitioned values, so after 4s everything is * forced visible regardless. Normal reveals happen well before 4s. */ html.lp-motion .landing-page [data-reveal] { animation: lp-reveal-failsafe 0s 4s forwards; } @keyframes lp-reveal-failsafe { to { opacity: 1; transform: none; } } /* ===== Navbar — glass, with a scrolled state toggled by landing.js ===== */ .landing-navbar { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .landing-navbar.is-scrolled { background: rgba(255, 255, 255, 0.94); border-bottom-color: rgba(var(--lp-ink-rgb), 0.07); box-shadow: 0 10px 30px -18px rgba(var(--lp-ink-rgb), 0.25); } @media (max-width: 991.98px) { /* The expanded mobile menu needs a near-solid surface to stay readable. */ .landing-navbar { background: rgba(255, 255, 255, 0.96); } } /* The theme css forces img height:auto, defeating the height attribute. */ .landing-navbar .navbar-brand img { height: 34px; width: auto; } .landing-footer img { height: 28px; width: auto; } .landing-navbar .nav-link { color: var(--bs-body-color); } .landing-navbar .nav-link:hover, .landing-navbar .nav-link:focus-visible { color: var(--lp-primary); } /* Language switcher — text buttons, deliberately not .btn (nav-link styling). */ .landing-lang { display: inline-flex; align-items: center; gap: 0.25rem; } .landing-lang-btn { background: none; border: 0; padding: 0.25rem; font-size: 14px; font-weight: 500; text-decoration: none; /* the switcher is now links, not buttons */ color: var(--bs-body-color); /* secondary-color fails AA at 14px */ } .landing-lang-btn:hover, .landing-lang-btn:focus-visible { color: var(--lp-primary); } .landing-lang-btn.active { color: var(--lp-primary); font-weight: 700; } /* ===== Shared section primitives ===== */ .landing-section { padding: 88px 0; position: relative; } .landing-section-tint { background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05) 0%, rgba(45, 182, 245, 0.04) 100%); border-top: 1px solid rgba(var(--bs-primary-rgb), 0.08); border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08); } .landing-section-title { margin-bottom: 48px; } .landing-section-title p { max-width: 640px; } .landing-eyebrow { display: inline-block; margin-bottom: 0.875rem; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: var(--lp-grad-text-deep); /* small text — AA needs the deep stops */ -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-h2 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.65rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; } .landing-gradient-text { background: var(--lp-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== Aurora backdrop (hero + final CTA) ===== * Pre-faded radial gradients (no filter: blur — it's expensive); only * transform/opacity animate, and only when html.lp-motion is set. */ .landing-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .landing-aurora-blob { position: absolute; width: 56vw; min-width: 480px; aspect-ratio: 1; border-radius: 50%; } .landing-aurora-blob.b1 { top: -28%; left: -12%; background: radial-gradient(closest-side, rgba(45, 182, 245, 0.4), transparent 70%); } .landing-aurora-blob.b2 { top: -20%; right: -16%; background: radial-gradient(closest-side, rgba(var(--bs-primary-rgb), 0.34), transparent 70%); } .landing-aurora-blob.b3 { bottom: -42%; left: 24%; background: radial-gradient(closest-side, rgba(208, 21, 255, 0.2), transparent 70%); } html.lp-motion .landing-aurora-blob.b1 { animation: lp-drift-a 26s ease-in-out infinite alternate; } html.lp-motion .landing-aurora-blob.b2 { animation: lp-drift-b 32s ease-in-out infinite alternate; } html.lp-motion .landing-aurora-blob.b3 { animation: lp-drift-a 38s ease-in-out infinite alternate-reverse; } @keyframes lp-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.12); } } @keyframes lp-drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-7%, 6%, 0) scale(0.95); } } /* Faint engineering-grid texture over the aurora, masked to the center. */ .landing-grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--lp-ink-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lp-ink-rgb), 0.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 35%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 35%, transparent 75%); } /* ===== Hero ===== */ .landing-hero { position: relative; overflow: hidden; padding: 96px 0 84px; /* Fade the backdrop into plain white so the trust band sits naturally. */ background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.04), transparent 60%); } .landing-hero .landing-aurora { -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); } .landing-h1 { font-size: clamp(2.55rem, 1.6rem + 3.8vw, 4.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; } .landing-hero-sub { max-width: 600px; } /* Product visual: real screenshot inside a CSS browser frame, glow behind, * pointer tilt driven by --tilt-x/--tilt-y from landing.js. */ .landing-hero-visual { position: relative; perspective: 1200px; } .landing-hero-visual::before { /* the glow */ content: ""; position: absolute; inset: -12% -8%; background: radial-gradient(closest-side at 50% 45%, rgba(var(--bs-primary-rgb), 0.3), transparent 72%); pointer-events: none; } .landing-browser { position: relative; border-radius: 18px; background: #fff; border: 1px solid rgba(var(--lp-ink-rgb), 0.1); box-shadow: 0 48px 96px -32px rgba(var(--lp-ink-rgb), 0.32), 0 16px 40px -16px rgba(var(--bs-primary-rgb), 0.22); overflow: hidden; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 0.25s ease-out; } .landing-browser-bar { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; background: linear-gradient(180deg, #f8f9fd, #f2f3fa); border-bottom: 1px solid rgba(var(--lp-ink-rgb), 0.07); } .landing-browser-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--lp-ink-rgb), 0.14); } .landing-browser-dot:nth-child(2) { background: rgba(var(--lp-ink-rgb), 0.1); } .landing-browser-dot:nth-child(3) { background: rgba(var(--lp-ink-rgb), 0.07); } .landing-browser-url { display: inline-flex; align-items: center; gap: 0.375rem; margin-inline: auto; padding: 0.2rem 0.875rem; border-radius: 999px; background: #fff; border: 1px solid rgba(var(--lp-ink-rgb), 0.08); font-size: 12px; color: var(--bs-secondary-color); } .landing-browser img { display: block; width: 100%; height: auto; } /* Floating glass chips over the hero frame. */ .landing-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 14px 36px -10px rgba(var(--lp-ink-rgb), 0.25); } .landing-chip-paid { top: 9%; right: -1.25rem; } .landing-chip-barcode { bottom: 9%; left: -1.75rem; } html.lp-motion .landing-chip-paid { animation: lp-float 7s ease-in-out infinite alternate; } html.lp-motion .landing-chip-barcode { animation: lp-float 8s ease-in-out -4s infinite alternate-reverse; } @keyframes lp-float { from { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 7px, 0); } } .landing-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 0.625rem; background: rgba(var(--bs-success-rgb), 0.14); color: var(--bs-success); font-size: 18px; } .landing-chip .landing-barcode-bars { width: 96px; height: 26px; } @media (max-width: 575.98px) { .landing-chip-paid { right: 0.25rem; } .landing-chip-barcode { left: 0.25rem; } } /* HUB-3-style barcode texture (also reused in the bento HUB-3 cell). */ .landing-barcode-bars { display: block; height: 36px; border-radius: 2px; background-image: repeating-linear-gradient( to right, var(--lp-ink) 0 2px, transparent 2px 4px, var(--lp-ink) 4px 7px, transparent 7px 8px, var(--lp-ink) 8px 9px, transparent 9px 12px ); opacity: 0.85; } /* ===== Trust band — honest market/product facts, never vanity metrics ===== */ .landing-trust { padding: 40px 0 48px; } .landing-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .landing-trust-item { position: relative; text-align: center; padding: 0.5rem 1rem; } .landing-trust-item + .landing-trust-item::before { content: ""; position: absolute; left: -0.75rem; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--bs-primary-rgb), 0.25), transparent); } .landing-trust-value { display: block; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; background: var(--lp-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-trust-label { display: block; margin-top: 0.25rem; font-size: 14px; /* ≈7:1 on white — Trezo's --bs-secondary-color is only ~3:1 at this size */ color: rgba(var(--lp-ink-rgb), 0.72); } @media (max-width: 767.98px) { .landing-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.5rem; } .landing-trust-item:nth-child(3)::before { display: none; /* no divider at the start of the wrapped row */ } } /* ===== The loop — signature connected flow ===== */ .landing-loop-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* Gradient connector behind the icon medallions; "draws" on reveal. */ .landing-loop-track { position: absolute; top: 32px; /* icon medallion vertical center */ left: 6%; right: 6%; height: 3px; border-radius: 2px; background: var(--lp-grad); opacity: 0.55; transform-origin: left center; } /* The draw effect needs to OUT-SPECIFY the generic [data-reveal] rules above * (hence the full html.lp-motion .landing-page prefix + [data-reveal]), and is * keyed on the attribute so landing.js's post-reveal attribute removal returns * the track to its natural resting style (opacity .55). */ html.lp-motion .landing-page .landing-loop-track[data-reveal] { opacity: 0; transform: scaleX(0); transition: opacity 0.5s ease 0.25s, transform 1.4s var(--lp-ease) 0.25s; } html.lp-motion .landing-page .landing-loop-track[data-reveal].is-revealed { opacity: 0.55; transform: scaleX(1); } .landing-loop-step { position: relative; text-align: center; padding: 0 0.5rem; } .landing-loop-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lp-grad); margin-bottom: 1.125rem; box-shadow: 0 12px 28px -10px rgba(var(--bs-primary-rgb), 0.55); } .landing-loop-icon::before { /* inner white disc → the gradient reads as a ring */ content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; } .landing-loop-icon i { position: relative; font-size: 26px; background: var(--lp-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-loop-num { position: absolute; top: -4px; right: -4px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lp-ink); color: #fff; font-size: 11px; font-weight: 700; } @media (max-width: 767.98px) { /* Vertical timeline: rail on the left, steps indented. */ .landing-loop-grid { grid-template-columns: 1fr; gap: 2rem; padding-left: 0; } /* Medallion centers sit at x = 32px (no grid/step padding on mobile), so the * 3px rail is centred at 30.5px. It runs from the first medallion's center * (top: 32px) to roughly the last one's — the end hides behind the 64px * circle, so the estimate never shows. */ .landing-loop-track { top: 32px; bottom: 80px; left: 30.5px; right: auto; width: 3px; height: auto; transform-origin: center top; } html.lp-motion .landing-page .landing-loop-track[data-reveal] { transform: scaleY(0); } html.lp-motion .landing-page .landing-loop-track[data-reveal].is-revealed { transform: scaleY(1); } .landing-loop-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.25rem; text-align: start; padding: 0; } .landing-loop-step .landing-loop-icon { grid-row: 1 / span 2; margin-bottom: 0; } .landing-loop-step h3 { align-self: center; } } /* ===== Bento feature grid ===== */ .landing-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; } .landing-bento-cell { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--lp-radius); background: var(--lp-glass-bg); border: 1px solid var(--lp-glass-border); box-shadow: var(--lp-shadow-soft); transition: transform 0.35s var(--lp-ease), border-color 0.35s ease, box-shadow 0.35s ease; } .landing-bento-cell:hover { transform: translateY(-5px); border-color: rgba(var(--bs-primary-rgb), 0.38); box-shadow: var(--lp-shadow-glow); } .lb-pdf { grid-column: span 4; grid-row: span 2; } .lb-einvoice { grid-column: span 2; } .lb-hub3 { grid-column: span 2; } .lb-leads { grid-column: span 2; } .lb-quotes { grid-column: span 2; } .lb-lang { grid-column: span 2; } @media (max-width: 991.98px) { .lb-pdf { grid-column: span 6; } .lb-einvoice, .lb-hub3, .lb-leads, .lb-quotes, .lb-lang { grid-column: span 3; } } @media (max-width: 575.98px) { .landing-bento-cell { grid-column: span 6 !important; } } .landing-bento-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 0.875rem; background: rgba(var(--bs-primary-rgb), 0.1); color: var(--lp-primary); font-size: 22px; } .landing-bento-media { margin-top: auto; padding-top: 1.25rem; } .landing-bento-media img { display: block; width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid rgba(var(--lp-ink-rgb), 0.08); box-shadow: 0 12px 28px -14px rgba(var(--lp-ink-rgb), 0.3); } /* The big PDF cell: let the tall screenshot bleed out of the bottom edge. */ .lb-pdf .landing-bento-media { margin-bottom: -1.75rem; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0; } .lb-pdf .landing-bento-media img { border-radius: 0.75rem 0.75rem 0 0; border-bottom: 0; } /* ===== Deadlines timeline ===== */ .landing-timeline { position: relative; max-width: 780px; margin-inline: auto; } .landing-timeline::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, var(--lp-sky), var(--lp-primary) 55%, var(--lp-magenta)); opacity: 0.6; } .landing-timeline-item { position: relative; padding-left: 64px; } .landing-timeline-item + .landing-timeline-item { margin-top: 1.75rem; } .landing-timeline-dot { position: absolute; left: 8px; top: 22px; width: 24px; height: 24px; border-radius: 50%; background: var(--lp-grad); box-shadow: 0 0 0 5px #fff, 0 8px 20px -6px rgba(var(--bs-primary-rgb), 0.5); } .landing-timeline-card { padding: 1.5rem 1.75rem; border-radius: var(--lp-radius); background: var(--lp-glass-bg); border: 1px solid var(--lp-glass-border); box-shadow: var(--lp-shadow-soft); } /* Deadline callout (the MIKROeRAČUN receive-only gap). */ .landing-callout { border-radius: var(--lp-radius); background: rgba(var(--bs-warning-rgb), 0.07); border: 1px solid rgba(var(--bs-warning-rgb), 0.35); border-left: 4px solid var(--bs-warning); } /* ===== Accountant band ===== */ .landing-accountant { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 3rem; background: linear-gradient(120deg, rgba(var(--bs-primary-rgb), 0.09), rgba(208, 21, 255, 0.05) 65%, rgba(45, 182, 245, 0.07)); border: 1px solid rgba(var(--bs-primary-rgb), 0.16); } .landing-accountant-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: 1.125rem; background: var(--lp-grad); color: #fff; font-size: 30px; box-shadow: 0 14px 32px -10px rgba(var(--bs-primary-rgb), 0.55); } .landing-zip-stack { display: flex; flex-direction: column; gap: 0.5rem; min-width: 220px; } .landing-zip-chip { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.55rem 0.875rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(var(--lp-ink-rgb), 0.08); font-size: 14px; font-weight: 500; color: var(--bs-body-color); box-shadow: 0 8px 20px -12px rgba(var(--lp-ink-rgb), 0.25); } .landing-zip-chip i { font-size: 18px; color: var(--lp-primary); } .landing-zip-chip.is-zip { border-color: rgba(var(--bs-primary-rgb), 0.3); background: rgba(var(--bs-primary-rgb), 0.08); } @media (max-width: 767.98px) { .landing-accountant { padding: 2rem 1.5rem; } } /* ===== FAQ — scoped premium restyle of the shared ui-accordion ===== */ .landing-page .ui-accordion .accordion-item { border: 1px solid var(--lp-glass-border); border-radius: 1rem; background: var(--lp-glass-bg); overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .landing-page .ui-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(var(--bs-primary-rgb), 0.35); box-shadow: var(--lp-shadow-soft); } .landing-page .ui-accordion .accordion-button { background: transparent; } .landing-page .ui-accordion .accordion-button:not(.collapsed) { color: var(--lp-primary); box-shadow: none; } .landing-page .ui-accordion .accordion-button:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: -2px; box-shadow: none; } /* ===== Final CTA — full-bleed dark gradient mesh ===== */ .landing-cta-final { position: relative; overflow: hidden; padding: 104px 0; background: var(--lp-ink); } .landing-cta-final .landing-aurora-blob.b1 { background: radial-gradient(closest-side, rgba(45, 182, 245, 0.28), transparent 70%); } .landing-cta-final .landing-aurora-blob.b2 { background: radial-gradient(closest-side, rgba(var(--bs-primary-rgb), 0.34), transparent 70%); } .landing-cta-final .landing-aurora-blob.b3 { background: radial-gradient(closest-side, rgba(208, 21, 255, 0.22), transparent 70%); } .landing-cta-final .landing-grid-overlay { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); } .landing-cta-final h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.025em; } .landing-cta-final p { color: rgba(255, 255, 255, 0.78); max-width: 560px; } .landing-cta-final .fs-14 { color: rgba(255, 255, 255, 0.6); } .landing-cta-final .btn-primary { box-shadow: 0 16px 48px -10px rgba(var(--bs-primary-rgb), 0.65); } /* ===== Footer ===== */ .landing-footer { position: relative; padding-top: 1.75rem !important; } .landing-footer::before { /* gradient hairline instead of a flat border-top */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bs-primary-rgb), 0.35), transparent); } /* ===== Reduced motion — belt and suspenders ===== * The html.lp-motion gate already keeps everything static for reduced-motion * users (the inline head script never adds the class); this block guarantees * it even if that script is somehow skipped. */ @media (prefers-reduced-motion: reduce) { .landing-page, html:has(body.landing-page) { scroll-behavior: auto; } .landing-page *, .landing-page *::before, .landing-page *::after { animation: none !important; transition: none !important; } .landing-page [data-reveal] { opacity: 1 !important; transform: none !important; } .landing-page .landing-loop-track { transform: none !important; } }