/* Silvousplait — motion layer. All effects are disabled for users who prefer reduced motion. Loaded on every page alongside responsive.css. */ /* Smooth page-to-page transitions — one consistent crossfade in every browser. We deliberately do NOT use native cross-document View Transitions (@view-transition): in practice they get "skipped" unpredictably across browser versions, leaving a hard cut. Instead app.js fades the outgoing page to the cream page background, then the incoming page fades itself back in. Opacity only (never transform) = a clean crossfade with no white flash and no layout jump. Both halves are gated on prefers-reduced-motion below. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* ---- Incoming page reveal ---- ONLY when arriving via a click navigation (html.svp-nav, set before first paint by the per-page nav-gate script). On a fresh load / reload / the accueil intro there's no svp-nav, so the page is untouched. We fade out a solid cream cover (a fixed ::after box) OVER a static page, instead of animating 's opacity. That matters for performance: pages like premium have many backdrop-filter blurs + a running marquee, and animating body opacity forces the browser to re-composite all of them every frame → visible stutter on large desktop viewports. A solid cover fading out only composites one box; the page beneath stays static → smooth. */ html.svp-nav body::after { content: ''; position: fixed; inset: 0; z-index: 2147483200; background: #FFFEF5; pointer-events: none; opacity: 1; will-change: opacity; transition: opacity .25s ease; } /* The cover stays OPAQUE until app.js adds .svp-revealed at the very end of init() (i.e. after the incoming page has painted and all wiring ran). Only then does it fade out — so the reveal fade runs on a free main thread and never stutters against the heavy initial layout/JS of pages like premium. A per-page failsafe timeout also adds .svp-revealed in case init is slow. */ html.svp-nav.svp-revealed body::after { opacity: 0; } /* Outgoing page: the fade-OUT is driven in JS (wirePageTransitions in app.js). It must release the entrance animation with an explicit reflow before transitioning opacity, otherwise the still-"filling" animation makes the fade snap instantly instead of interpolating — which CSS alone can't do. */ /* ---- Scroll reveal (JS tags elements with .svp-reveal) ---- */ .svp-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .svp-reveal.svp-in { opacity: 1; transform: none; } /* ---- Buttons & CTA anchors: lift + brighten on hover ---- */ button, a[style*="border-radius: 100px"], a[style*="border-radius:100px"], a[style*="border-radius: 12px"], a[style*="border-radius: 10px"], a[style*="border-radius: 14px"], a[style*="border-radius: 9px"], [data-svp="checkout"], [data-svp="hero-submit"] { transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease; } button:hover, a[style*="border-radius: 100px"]:hover, a[style*="border-radius:100px"]:hover, a[style*="border-radius: 12px"]:hover, a[style*="border-radius: 10px"]:hover, a[style*="border-radius: 14px"]:hover, a[style*="border-radius: 9px"]:hover, [data-svp="checkout"]:hover, [data-svp="hero-submit"]:hover { transform: translateY(-2px); filter: brightness(1.06); } button:active, a[style*="border-radius: 100px"]:active, a[style*="border-radius: 12px"]:active, [data-svp="checkout"]:active { transform: translateY(0) scale(.99); } /* ---- Cards: gentle lift ---- */ [data-svp="offer"], [data-card], [style*="box-shadow: rgb(51, 71, 202)"], [style*="box-shadow: rgba(142, 160, 245"] { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; will-change: transform; } [data-svp="offer"]:hover, [data-card]:hover { transform: translateY(-5px); } /* ---- Inputs: focus polish ---- */ input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(51,71,202,.14); } /* ---- Nav links ---- */ a { transition: color .15s ease, opacity .15s ease; } /* ---- Intro splash logo pop ---- */ .svp-intro-pop { animation: svp-pop .6s cubic-bezier(.2,.9,.3,1.2) both; } @keyframes svp-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } /* ---- FAQ answer open ---- */ .faq-answer { animation: svp-fade-in .28s ease both; } @keyframes svp-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } }