/* ========================================================= VITRINE INFLUENCEUR — PUBLIC CSS (LUMINOUS PREMIUM BLING) - Mobile-first - Theme switch: html[data-theme="dark|light|system"] - Accent injected inline: - Brighter, premium rhythm, subtle luxe animations ========================================================= */ /* ----------------- Tokens / Themes ----------------- */ :root{ --a: var(--accent, #7c3aed); --a2: color-mix(in srgb, var(--a) 55%, #22d3ee); /* Premium highlight tones */ --gold: #d6b46a; --gold2:#f2e6c8; --rose: #ff5fd7; /* LIGHT = default (bright premium) */ --bg: #fbfaf7; --bg2:#f3f6ff; --fg: #0a0f1f; --muted: rgba(10,15,31,.66); --card: rgba(255,255,255,.88); --card2: rgba(255,255,255,.72); --stroke: rgba(10,15,31,.10); --shadow: 0 22px 70px rgba(10,20,60,.14); --shadow2: 0 12px 40px rgba(10,20,60,.10); --r: 16px; --r2: 24px; --wrap: 1120px; --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; --fs-hero: 38px; --fs-h2: 26px; --fs-lead: 16px; --btn-h: 48px; /* Tooltip */ --tipBg: rgba(255,255,255,.96); --tipFg: rgba(10,15,31,.92); --tipStroke: rgba(10,15,31,.14); --tipShadow: 0 28px 90px rgba(10,20,60,.18); /* Motion */ --ease: cubic-bezier(.2,.9,.2,1); --dur: 180ms; --dur2: 520ms; /* Rhythm */ --hair: linear-gradient(90deg, transparent, rgba(10,15,31,.12), transparent); color-scheme: light; } /* DARK = luxe night, not black */ html[data-theme="dark"]{ --bg: #141a2a; --bg2:#0f1424; --fg: #f6f7ff; --muted: rgba(246,247,255,.74); --card: rgba(255,255,255,.10); --card2: rgba(255,255,255,.07); --stroke: rgba(255,255,255,.16); --shadow: 0 22px 70px rgba(2,6,23,.44); --shadow2: 0 12px 40px rgba(2,6,23,.30); --tipBg: rgba(18,22,36,.94); --tipFg: rgba(255,255,255,.92); --tipStroke: rgba(255,255,255,.18); --tipShadow: 0 28px 90px rgba(2,6,23,.48); color-scheme: dark; } /* SYSTEM */ html[data-theme="system"]{ color-scheme: light; } @media (prefers-color-scheme: dark){ html[data-theme="system"]{ --bg: #141a2a; --bg2:#0f1424; --fg: #f6f7ff; --muted: rgba(246,247,255,.74); --card: rgba(255,255,255,.10); --card2: rgba(255,255,255,.07); --stroke: rgba(255,255,255,.16); --shadow: 0 22px 70px rgba(2,6,23,.44); --shadow2: 0 12px 40px rgba(2,6,23,.30); --tipBg: rgba(18,22,36,.94); --tipFg: rgba(255,255,255,.92); --tipStroke: rgba(255,255,255,.18); --tipShadow: 0 28px 90px rgba(2,6,23,.48); color-scheme: dark; } } /* ----------------- Base ----------------- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ margin:0; color:var(--fg); font-family: var(--sans); line-height:1.62; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* Lux bright background: pearlescent + gold */ background: radial-gradient(1200px 700px at 12% -10%, color-mix(in srgb, var(--a) 20%, transparent), transparent 60%), radial-gradient(980px 640px at 92% 0%, color-mix(in srgb, var(--a2) 16%, transparent), transparent 62%), radial-gradient(900px 600px at 72% 22%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 62%), radial-gradient(900px 560px at 16% 36%, color-mix(in srgb, var(--rose) 10%, transparent), transparent 66%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, var(--bg2) 18%), var(--bg)); background-attachment: fixed; } /* Premium grain + sparkle dust (subtle) */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.55) 0, transparent 2px), radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.35) 0, transparent 2px), radial-gradient(1px 1px at 65% 35%, rgba(255,255,255,.45) 0, transparent 2px), radial-gradient(1px 1px at 82% 62%, rgba(255,255,255,.38) 0, transparent 2px), repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0px, rgba(0,0,0,.012) 1px, transparent 2px, transparent 7px); opacity:.10; mix-blend-mode: overlay; } html[data-theme="dark"] body::before{ background: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.32) 0, transparent 2px), radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.20) 0, transparent 2px), radial-gradient(1px 1px at 65% 35%, rgba(255,255,255,.26) 0, transparent 2px), radial-gradient(1px 1px at 82% 62%, rgba(255,255,255,.22) 0, transparent 2px), repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 2px, transparent 7px); opacity:.14; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; height:auto; } button, input, textarea, select{ font:inherit; color:inherit; } :focus-visible{ outline: 3px solid color-mix(in srgb, var(--a) 38%, transparent); outline-offset: 2px; border-radius: 14px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } body{ background-attachment: scroll; } body::before{ display:none; } } /* ----------------- Helpers ----------------- */ .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; } @media (min-width: 900px){ .wrap{ padding:0 22px; } } .grid{ display:grid; gap:14px; } .center{ text-align:center; } .muted{ color:var(--muted); } .tiny{ font-size:12px; } .small{ font-size:12px; opacity:.84; } .glass{ background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); border: 1px solid var(--stroke); border-radius: var(--r2); box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position:relative; overflow:hidden; } /* Luxe rim light */ .glass::after{ content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--gold2) 22%, transparent) 22%, transparent 40%, color-mix(in srgb, var(--a) 16%, transparent) 62%, transparent 78%); opacity:.55; } /* Section rhythm */ .hr{ height:1px; background: var(--hair); opacity:.85; } /* ----------------- Topbar ----------------- */ .topbar{ position:sticky; top:0; z-index:30; background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--stroke); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); will-change: transform; } .topbar::after{ content:""; display:block; height:1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 38%, transparent), transparent); opacity:.7; } .topbar__in{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:-0.02em; } .brand__dot{ width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--a) 70%, #0000) 45%), linear-gradient(135deg, var(--a), var(--a2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--a) 10%, transparent), 0 14px 30px color-mix(in srgb, var(--a) 16%, transparent); } .brand__name{ position:relative; font-family: var(--serif); } .brand__name::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; border-radius:999px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent), transparent); opacity:.75; } .nav{ display:none; gap:6px; align-items:center; } @media (min-width: 900px){ .nav{ display:flex; } } .nav__a{ padding:10px 10px; border-radius:14px; color:var(--muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .nav__a:hover{ background: color-mix(in srgb, var(--card) 60%, transparent); color: var(--fg); transform: translateY(-1px); } .topbar__actions{ display:flex; align-items:center; gap:10px; } .iconBtn{ display:flex; align-items:center; gap:10px; height:44px; padding:0 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--gold) 26%, var(--stroke)); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); box-shadow: var(--shadow2); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease); } .iconBtn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 48%, var(--stroke)); filter: saturate(1.04); } .iconBtn__dot{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--a) 45%, var(--gold2))); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 14%, transparent); } .burger{ width:44px; height:44px; border-radius:14px; border:1px solid color-mix(in srgb, var(--gold) 24%, var(--stroke)); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 12px; box-shadow: var(--shadow2); } .burger span{ height:2px; background:var(--fg); opacity:.9; border-radius:2px; } @media (min-width: 900px){ .burger{ display:none; } } .mnav{ border-top:1px solid var(--stroke); } .mnav__in{ padding:12px 0; } .mnav__a{ display:block; padding:12px 10px; border-radius:14px; color: color-mix(in srgb, var(--fg) 92%, var(--muted)); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); } .mnav__a:hover{ background: color-mix(in srgb, var(--card) 60%, transparent); transform: translateY(-1px); } .mnav__sep{ height:10px; } /* ----------------- Sections / Type / Rhythm ----------------- */ .app{ min-height:70vh; } .sec{ padding:26px 0; } @media(min-width:900px){ .sec{ padding:58px 0; } } .secHead h2{ margin:0 0 6px; font-size: var(--fs-h2); letter-spacing:-0.02em; font-family: var(--serif); } .secHead h2::after{ content:""; display:block; width: clamp(70px, 12vw, 110px); height:3px; border-radius:999px; margin-top:10px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, transparent), color-mix(in srgb, var(--a) 45%, transparent), transparent); opacity:.95; } .lead{ font-size: var(--fs-lead); color: var(--muted); margin:12px 0 0; max-width: 62ch; } /* Desktop scale */ @media(min-width:900px){ :root{ --fs-hero: 64px; --fs-h2: 38px; --fs-lead: 18px; } } /* ----------------- Hero (premium glow + motion) ----------------- */ .hero__grid{ display:grid; gap:16px; align-items:stretch; } @media(min-width:900px){ .hero__grid{ grid-template-columns: 1.05fr .95fr; gap:18px; } } .hero h1{ margin:0; font-size: var(--fs-hero); letter-spacing:-0.05em; line-height:1.01; font-family: var(--serif); max-width: 18ch; animation: heroIn .80s var(--ease) both; text-shadow: 0 10px 40px rgba(10,20,60,.10); } @keyframes heroIn{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform: translateY(0); } } .hero h1 em{ font-style: normal; background: linear-gradient(90deg, var(--a), color-mix(in srgb, var(--gold) 55%, var(--a2))); -webkit-background-clip: text; background-clip:text; color: transparent; } .hero__cta{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; animation: heroIn2 .90s var(--ease) both; } @keyframes heroIn2{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } } .hero__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; animation: heroIn3 1.02s var(--ease) both; } @keyframes heroIn3{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: translateY(0); } } .pill{ display:inline-flex; align-items:center; height:30px; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--gold) 22%, var(--stroke)); color: color-mix(in srgb, var(--fg) 82%, var(--muted)); background: color-mix(in srgb, var(--card) 62%, transparent); } .demoHeroMedia{ margin-bottom:14px; border-radius:18px; overflow:hidden; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background: color-mix(in srgb, var(--card) 66%, transparent); box-shadow: var(--shadow2); } .demoHeroMedia img{ width:100%; height:auto; display:block; } /* ----------------- Buttons (shine) ----------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; height: var(--btn-h); padding:0 18px; border-radius:999px; border:1px solid var(--stroke); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); box-shadow: var(--shadow2); font-weight:950; letter-spacing:-0.01em; position:relative; overflow:hidden; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover{ transform: translateY(-2px); filter: saturate(1.04); } .btn:active{ transform: translateY(0px) scale(.99); } .btn::after{ content:""; position:absolute; top:-40%; left:-60%; width:60%; height:180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(18deg); opacity:0; pointer-events:none; } .btn:hover::after{ opacity:.9; animation: sweep 900ms var(--ease) both; } @keyframes sweep{ from{ transform: translateX(0) rotate(18deg); } to{ transform: translateX(240%) rotate(18deg); } } .btn.primary{ background: linear-gradient(135deg, color-mix(in srgb, var(--a) 92%, #fff0), color-mix(in srgb, var(--gold) 55%, var(--a2))); border-color: color-mix(in srgb, var(--gold) 40%, rgba(255,255,255,.22)); color:#fff; box-shadow: 0 22px 70px color-mix(in srgb, var(--a) 14%, rgba(10,20,60,.22)), 0 10px 24px rgba(255,255,255,.18) inset; } html[data-theme="dark"] .btn.primary{ box-shadow: 0 22px 70px color-mix(in srgb, var(--a) 18%, rgba(2,6,23,.42)), 0 10px 24px rgba(255,255,255,.12) inset; } .btn.ghost{ background: transparent; box-shadow: none; } .btn.ghost:hover{ background: color-mix(in srgb, var(--card) 55%, transparent); } /* ----------------- Cards ----------------- */ .card{ padding:18px; } .card__kicker{ color:var(--muted); font-size:12px; letter-spacing:.16em; text-transform:uppercase; } .card__title{ font-size:18px; font-weight:950; margin-top:8px; letter-spacing:-0.02em; font-family: var(--serif); } .card__text{ color:var(--muted); margin-top:8px; } .card__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; } .mini{ padding:10px; border-radius:18px; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background: color-mix(in srgb, var(--card) 62%, transparent); } .mini__n{ font-weight:950; font-size:16px; letter-spacing:-0.01em; } .mini__l{ color:var(--muted); font-size:12px; } /* ----------------- Demos ----------------- */ .demosGrid{ grid-template-columns:1fr; } @media(min-width:700px){ .demosGrid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:980px){ .demosGrid{ grid-template-columns:repeat(3,1fr); } } .demoCard{ padding:16px; border-radius: var(--r2); border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); box-shadow: var(--shadow2); position:relative; overflow:hidden; transition: transform var(--dur2) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease); transform: translateZ(0); backface-visibility: hidden; } .demoCard::before{ content:""; position:absolute; inset:-60% -50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%); transform: rotate(-10deg); opacity:.85; pointer-events:none; } .demoCard:hover{ transform: translateY(-8px); border-color: color-mix(in srgb, var(--gold) 38%, var(--stroke)); filter: saturate(1.04); } .badge{ display:inline-flex; height:26px; align-items:center; padding:0 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--gold) 26%, var(--stroke)); background: color-mix(in srgb, var(--gold2) 18%, transparent); font-size:12px; font-weight:950; } .demoCard__t{ font-weight:950; font-size:16px; margin-top:12px; letter-spacing:-0.01em; font-family: var(--serif); } .demoCard__d{ color:var(--muted); margin-top:8px; min-height:44px; overflow-wrap:anywhere; } .demoCard__go{ margin-top:14px; font-weight:950; color: color-mix(in srgb, var(--a) 78%, var(--fg)); } .demoCard__go::after{ content:" →"; opacity:.85; } /* ----------------- Features ----------------- */ .featsGrid{ grid-template-columns:1fr; } @media(min-width:900px){ .featsGrid{ grid-template-columns:repeat(3,1fr); } } .feat{ padding:16px; border-radius: var(--r2); border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); box-shadow: var(--shadow2); transition: transform var(--dur2) var(--ease), border-color var(--dur) var(--ease); transform: translateZ(0); backface-visibility: hidden; } .feat:hover{ transform: translateY(-6px); border-color: color-mix(in srgb, var(--gold) 38%, var(--stroke)); } .feat__t{ font-weight:950; letter-spacing:-0.01em; font-family: var(--serif); } .feat__d{ color:var(--muted); margin-top:8px; overflow-wrap:anywhere; } /* ----------------- CTA Box ----------------- */ .ctaBox{ padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; position:relative; overflow:hidden; } .ctaBox::before{ content:""; position:absolute; inset:-70% -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%); transform: rotate(10deg); opacity:.9; pointer-events:none; } .ctaBox__t{ font-weight:950; font-size:18px; letter-spacing:-0.02em; font-family: var(--serif); } .ctaBox__d{ color:var(--muted); margin-top:6px; max-width: 70ch; overflow-wrap:anywhere; } /* ----------------- Footer ----------------- */ .footer{ padding:20px 0 28px; border-top:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); color:var(--muted); } .footer__in{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .footer__links{ display:flex; gap:12px; flex-wrap:wrap; } .footer__a{ color:var(--muted); padding:8px 10px; border-radius:12px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .footer__a:hover{ background: color-mix(in srgb, var(--card) 55%, transparent); color: var(--fg); transform: translateY(-1px); } /* ========================================================= OFFRES / FONCTIONNALITÉS — Tabs + Panels + Rows + Tooltips ========================================================= */ .pwrap{ margin-top:8px; overflow:visible; } .ptabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:8px 0 18px; } /* Tabs: sparkling rim + bounce */ .ptab{ appearance:none; border:1px solid color-mix(in srgb, var(--gold) 22%, var(--stroke)); background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); color:inherit; padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:950; letter-spacing:-0.01em; box-shadow: var(--shadow2); transition: transform var(--dur2) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease); } .ptab:hover{ transform: translateY(-3px) scale(1.01); border-color: color-mix(in srgb, var(--gold) 45%, var(--stroke)); filter: saturate(1.04); } .ptab.is-active{ border-color: color-mix(in srgb, var(--gold) 60%, var(--stroke)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent), var(--shadow2); transform: translateY(-2px); } .pbadge{ display:inline-block; margin-left:8px; padding:2px 8px; font-size:12px; border-radius:999px; background: color-mix(in srgb, var(--gold2) 22%, transparent); border:1px solid color-mix(in srgb, var(--gold) 30%, var(--stroke)); font-weight:950; } .ppanel{ display:none; overflow:visible; contain:unset; } .ppanel.is-active{ display:block; } /* Panel card: luxe glow + entrance */ .pcard{ max-width:920px; margin:0 auto; border:1px solid color-mix(in srgb, var(--gold) 22%, var(--stroke)); border-radius: var(--r2); padding:18px 18px 16px; background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 92%, transparent)); box-shadow: var(--shadow); position:relative; overflow:visible; opacity:0; transform: translateY(16px) translateZ(0); animation: fadeUp .60s var(--ease) forwards; backface-visibility:hidden; } @keyframes fadeUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform: translateY(0); } } .pcard::before{ content:""; position:absolute; inset:-90% -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), radial-gradient(closest-side, color-mix(in srgb, var(--a2) 10%, transparent), transparent 70%); transform: rotate(-8deg); opacity:.95; pointer-events:none; } .pcard.is-highlight{ border-color: color-mix(in srgb, var(--gold) 52%, var(--stroke)); box-shadow: 0 26px 90px color-mix(in srgb, var(--gold) 14%, rgba(10,20,60,.22)), var(--shadow2); } .phead h3{ margin:0 0 6px; letter-spacing:-0.02em; font-weight:950; font-family: var(--serif); } .pprice{ font-size:30px; margin:6px 0 2px; font-weight:950; letter-spacing:-0.02em; } .pprice .old{ opacity:.62; text-decoration: line-through; margin-right:8px; font-weight:800; } .pnote{ margin:10px 0 0; opacity:.86; font-size:13px; color: color-mix(in srgb, var(--fg) 78%, var(--muted)); } /* Rows: luxe list + shimmer on hover */ .ptable{ margin:14px 0 14px; display:grid; gap:10px; overflow:visible; contain:unset; } .prow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:18px; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 72%, transparent), color-mix(in srgb, var(--card2) 92%, transparent)); color: color-mix(in srgb, var(--fg) 90%, var(--muted)); position:relative; overflow:visible; transition: transform var(--dur2) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur2) var(--ease); contain:unset; transform:translateZ(0); backface-visibility:hidden; } .prow::after{ content:""; position:absolute; top:-40%; left:-60%; width:55%; height:180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: rotate(18deg); opacity:0; pointer-events:none; } .prow:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 42%, var(--stroke)); box-shadow: 0 18px 56px rgba(10,20,60,.12); } html[data-theme="dark"] .prow:hover{ box-shadow: 0 18px 56px rgba(2,6,23,.30); } .prow:hover::after{ opacity:.75; animation: sweep 900ms var(--ease) both; } /* CTA */ .pcta{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:999px; text-decoration:none; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--gold) 55%, var(--a2))); color:#fff; font-weight:950; border:1px solid color-mix(in srgb, var(--gold) 44%, rgba(255,255,255,.18)); box-shadow: 0 26px 90px color-mix(in srgb, var(--a) 12%, rgba(10,20,60,.22)), 0 10px 24px rgba(255,255,255,.16) inset; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); } html[data-theme="dark"] .pcta{ box-shadow: 0 26px 90px color-mix(in srgb, var(--a) 16%, rgba(2,6,23,.44)), 0 10px 24px rgba(255,255,255,.10) inset; } .pcta:hover{ transform: translateY(-2px); filter:saturate(1.06); } .pcta:active{ transform: translateY(0px) scale(.99); } /* TOOLTIP: luxe glass + gold rim, anchored */ .tip{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; border:1px solid color-mix(in srgb, var(--gold) 26%, var(--stroke)); background: color-mix(in srgb, var(--card) 55%, transparent); cursor:help; user-select:none; opacity:.96; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); z-index:120; } .tip:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 55%, var(--stroke)); } .tip::after{ content:attr(data-tip); position:absolute; right:0; bottom: calc(100% + 10px); width: clamp(240px, 26vw, 360px); padding:12px 12px; border-radius:18px; border:1px solid color-mix(in srgb, var(--gold) 34%, var(--tipStroke)); background: var(--tipBg); color: var(--tipFg); font-size:12px; line-height:1.35; letter-spacing:.01em; box-shadow: var(--tipShadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity:0; pointer-events:none; transform: translateY(12px) scale(.985); z-index:9998; will-change: transform, opacity; } .tip::before{ content:""; position:absolute; right: 12px; bottom: calc(100% + 4px); width:10px; height:10px; background: var(--tipBg); border-left:1px solid color-mix(in srgb, var(--gold) 34%, var(--tipStroke)); border-top:1px solid color-mix(in srgb, var(--gold) 34%, var(--tipStroke)); transform: rotate(45deg); opacity:0; pointer-events:none; z-index:9997; will-change: transform, opacity; } .tip:hover::after, .tip:hover::before{ opacity:1; } .tip:hover::after{ animation: tipIn .22s var(--ease) both; } @keyframes tipIn{ from{ opacity:0; transform: translateY(14px) scale(.985); } to{ opacity:1; transform: translateY(0) scale(1); } } /* Mobile: center tooltip */ @media (max-width: 640px){ .tip::after{ left:50%; right:auto; transform: translateX(-50%) translateY(12px) scale(.985); width: min(360px, 80vw); } .tip::before{ left:50%; right:auto; transform: translateX(-50%) rotate(45deg); } } /* Mobile tweaks */ @media (max-width: 640px){ .ptabs{ gap:8px; } .ptab{ width:100%; text-align:center; } .pprice{ font-size:28px; } .hero h1{ max-width: 22ch; } } /* ========================================================= WOW MIX (Influenceur + Luxe Keynote) — CSS ONLY - Mesh premium + drift punchy (no snapping) - Persistent across SPA nav: html::before / html::after - Hero halo cover-style + subtle float - Respects prefers-reduced-motion ========================================================= */ @property --m1x { syntax: ""; inherits: true; initial-value: 34%; } @property --m1y { syntax: ""; inherits: true; initial-value: 28%; } @property --m2x { syntax: ""; inherits: true; initial-value: 82%; } @property --m2y { syntax: ""; inherits: true; initial-value: 62%; } @property --spin { syntax: ""; inherits: true; initial-value: 0deg; } html{ position: relative; overflow-x: clip; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } /* ========================= LAYER 1 — PREMIUM MESH (core) ========================= */ html::before{ content:""; position: fixed; inset: -30%; pointer-events: none; z-index: -3; background: radial-gradient(1100px 720px at var(--m1x) var(--m1y), color-mix(in srgb, var(--a) 30%, transparent), transparent 66%), radial-gradient(1000px 680px at var(--m2x) var(--m2y), color-mix(in srgb, var(--a2) 26%, transparent), transparent 68%), radial-gradient(980px 640px at 18% 82%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%), radial-gradient(920px 620px at 88% 78%, color-mix(in srgb, var(--rose) 18%, transparent), transparent 72%), conic-gradient(from var(--spin) at 54% 44%, transparent 0deg, color-mix(in srgb, var(--gold) 14%, transparent) 70deg, transparent 150deg, color-mix(in srgb, var(--a2) 14%, transparent) 240deg, transparent 330deg); background-size: 145% 145%; background-position: 50% 50%; filter: blur(20px) saturate(1.28); opacity: .66; transform: translate3d(0,0,0); will-change: transform, background-position; animation: meshPan 26s linear infinite, meshDrift 92s linear infinite, meshSpin 64s linear infinite; } /* ========================= LAYER 2 — AURORA DRIFT (punchy life) ========================= */ html::after{ content:""; position: fixed; inset: -36%; pointer-events:none; z-index: -2; background: radial-gradient(980px 700px at 22% 34%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%), radial-gradient(980px 700px at 78% 62%, color-mix(in srgb, var(--a2) 20%, transparent), transparent 72%), radial-gradient(860px 620px at 55% 86%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 74%), radial-gradient(820px 600px at 86% 26%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 76%); filter: blur(26px) saturate(1.35); opacity: .52; transform: translate3d(0,0,0) scale(1.06); will-change: transform; animation: auroraDrift 110s linear infinite; } /* ========================= LAYER 3 — SPARKLES ========================= */ body{ position: relative; } body::after{ content:""; position: fixed; inset: 0; pointer-events:none; z-index: -1; background: radial-gradient(1px 1px at 10% 18%, rgba(255,255,255,.62), transparent 2px), radial-gradient(1px 1px at 16% 62%, rgba(255,255,255,.26), transparent 2px), radial-gradient(1px 1px at 28% 78%, rgba(255,255,255,.34), transparent 2px), radial-gradient(1px 1px at 40% 40%, rgba(255,255,255,.44), transparent 2px), radial-gradient(1px 1px at 52% 22%, rgba(255,255,255,.28), transparent 2px), radial-gradient(1px 1px at 62% 58%, rgba(255,255,255,.30), transparent 2px), radial-gradient(1px 1px at 74% 74%, rgba(255,255,255,.26), transparent 2px), radial-gradient(1px 1px at 86% 28%, rgba(255,255,255,.42), transparent 2px), radial-gradient(1px 1px at 92% 62%, rgba(255,255,255,.24), transparent 2px); mix-blend-mode: overlay; opacity: .24; transform: translate3d(0,0,0); will-change: transform, opacity; animation: sparkleFloat 70s linear infinite, sparkleBreath 5.8s linear infinite; } /* ========================= HERO HALO ========================= */ .hero{ position: relative; } .hero::before{ content:""; position:absolute; left:50%; top:-26px; width:min(1040px, 96vw); height:min(620px, 62vh); transform: translateX(-50%); pointer-events:none; z-index:0; background: radial-gradient(closest-side at 35% 35%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%), radial-gradient(closest-side at 70% 50%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%), radial-gradient(closest-side at 58% 72%, color-mix(in srgb, var(--a2) 20%, transparent), transparent 74%), radial-gradient(closest-side at 80% 30%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 76%); filter: blur(18px) saturate(1.30); opacity: .92; animation: haloPulse 6.2s ease-in-out infinite; } .hero > *{ position: relative; z-index: 1; } /* Soft float on hero card */ .hero__card .glass, .hero__card .card{ animation: cardFloat 8.2s ease-in-out infinite; } /* ========================= KEYFRAMES ========================= */ @keyframes meshPan{ 0% { background-position: 50% 50%; } 25% { background-position: 56% 46%; } 50% { background-position: 48% 58%; } 75% { background-position: 44% 52%; } 100% { background-position: 50% 50%; } } @keyframes meshDrift{ 0% { --m1x: 32%; --m1y: 26%; --m2x: 84%; --m2y: 60%; } 20% { --m1x: 60%; --m1y: 36%; --m2x: 70%; --m2y: 50%; } 40% { --m1x: 46%; --m1y: 60%; --m2x: 76%; --m2y: 34%; } 60% { --m1x: 66%; --m1y: 40%; --m2x: 62%; --m2y: 72%; } 80% { --m1x: 40%; --m1y: 50%; --m2x: 86%; --m2y: 56%; } 100% { --m1x: 54%; --m1y: 34%; --m2x: 74%; --m2y: 66%; } } @keyframes meshSpin{ 0% { --spin: 0deg; } 100% { --spin: 360deg; } } @keyframes auroraDrift{ 0% { transform: translate3d(-6%, -3%, 0) scale(1.06); } 25% { transform: translate3d( 4%, -7%, 0) scale(1.09); } 50% { transform: translate3d( 7%, 4%, 0) scale(1.07); } 75% { transform: translate3d(-4%, 7%, 0) scale(1.09); } 100% { transform: translate3d(-6%, -3%, 0) scale(1.06); } } @keyframes sparkleFloat{ 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -22px, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes sparkleBreath{ 0% { opacity: .18; } 25% { opacity: .28; } 50% { opacity: .21; } 75% { opacity: .30; } 100% { opacity: .24; } } @keyframes haloPulse{ 0%,100%{ transform: translateX(-50%) scale(1); opacity:.86; } 50% { transform: translateX(-50%) scale(1.05); opacity:.98; } } @keyframes cardFloat{ 0%,100%{ transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================= Theme tuning ========================= */ html[data-theme="dark"]::before{ opacity:.70; filter: blur(22px) saturate(1.30); } html[data-theme="dark"]::after{ opacity:.58; filter: blur(28px) saturate(1.38); } html[data-theme="dark"] body::after{ opacity:.18; } @media (prefers-color-scheme: dark){ html[data-theme="system"]::before{ opacity:.70; filter: blur(22px) saturate(1.30); } html[data-theme="system"]::after{ opacity:.58; filter: blur(28px) saturate(1.38); } html[data-theme="system"] body::after{ opacity:.18; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ html::before, html::after, body::after, .hero::before, .hero__card .glass, .hero__card .card{ animation:none !important; } } .msChips__help{ margin-top: 8px; font-size: 12px; opacity: .75; } .msChips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .msChip{ border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: inherit; padding: 10px 12px; border-radius: 999px; cursor: pointer; font-weight: 700; transition: transform .08s ease, background .15s ease, border-color .15s ease; } .msChip:hover{ transform: translateY(-1px); } .msChip.is-on{ border-color: rgba(99,102,241,.55); background: rgba(99,102,241,.18); box-shadow: 0 0 0 2px rgba(99,102,241,.10) inset; } /* ===== Demos Grid ===== */ .demo-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:12px; } .demo-card{ display:block; text-decoration:none; color:inherit; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:14px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.18s ease; min-height:140px; transform: translateZ(0); backface-visibility: hidden; } .demo-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,.12)); box-shadow:0 16px 50px rgba(0,0,0,.22); } .demo-top{display:flex; align-items:center; gap:10px; margin-bottom:8px} .demo-ico{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-size:20px; } .demo-title{font-weight:900} .demo-tag{ margin-left:auto; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); opacity:.9; } .demo-desc{opacity:.78; font-size:13px; line-height:1.35} .demo-cta{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; font-weight:900; color:color-mix(in srgb, var(--accent) 90%, #fff); } /* Responsive */ @media (max-width: 980px){ .demo-grid{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width: 620px){ .demo-grid{grid-template-columns:1fr} } /* ========================= DEMO THEME (vars + switch) ========================= */ :root{ --demo-bg: var(--bg, #0b0c10); --demo-text: var(--fg, #e9e9ee); --demo-accent: var(--a, #7c3aed); } body[data-demo-theme], body[data-demo-layout]{ color: var(--demo-text); background: radial-gradient(900px 540px at 18% 15%, color-mix(in srgb, var(--demo-accent) 30%, transparent), transparent 60%), radial-gradient(900px 540px at 82% 12%, color-mix(in srgb, var(--demo-accent) 18%, transparent), transparent 60%), var(--demo-bg); background-attachment: fixed; } /* Switch UI */ .dth{ padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); } .dthBtns, .dth__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .dth__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .dth__t{font-weight:950;letter-spacing:-.01em} .dthBtn{ height:40px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; font-weight: 800; transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; } .dthBtn:hover{ transform: translateY(-1px); } .dthBtn.is-on{ border-color: color-mix(in srgb, var(--demo-accent) 70%, rgba(255,255,255,.2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--demo-accent) 18%, transparent); background: color-mix(in srgb, var(--demo-accent) 14%, rgba(255,255,255,.06)); } /* Layouts A/B/C */ body[data-demo-layout="A"] .hero__grid{ grid-template-columns: 1.1fr .9fr; } body[data-demo-layout="B"] .hero__grid{ grid-template-columns: 1fr; } body[data-demo-layout="B"] .hero__card{ display:none; } body[data-demo-layout="C"] .hero__card .card{ transform: rotate(-1deg); } @media (max-width: 900px){ body[data-demo-layout="A"] .hero__grid, body[data-demo-layout="B"] .hero__grid, body[data-demo-layout="C"] .hero__grid{ grid-template-columns: 1fr; } } /* ===== Fix tooltips offres ===== */ .rich.glass{ overflow: visible; contain: unset; } /* ========================================================= CONTACT FORM / FIELDS ========================================================= */ .cfCard{ padding:18px; } .cfFormGrid{ display:grid; gap:14px; } @media (min-width: 900px){ .cfFormGrid{ grid-template-columns: 1fr 1fr; } .cfFormGrid .fld[data-field="message"], .cfFormGrid .fld[data-type="multiselect"]{ grid-column: 1 / -1; } } .fld label{ display:block; font-weight:950; letter-spacing:-.01em; margin-bottom:8px; } .fld input, .fld select, .fld textarea{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: inherit; outline:none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .fld select[multiple]{ padding:10px 12px; } .fld textarea{ resize: vertical; min-height: 140px; } .fld input:focus, .fld select:focus, .fld textarea:focus{ border-color: color-mix(in srgb, var(--a) 60%, rgba(255,255,255,.18)); box-shadow: 0 0 0 4px rgba(99,102,241,.14); } .fld.is-bad input, .fld.is-bad select, .fld.is-bad textarea{ border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 4px rgba(239,68,68,.12); } .fld.is-ok input, .fld.is-ok select, .fld.is-ok textarea{ border-color: rgba(34,197,94,.45); box-shadow: 0 0 0 4px rgba(34,197,94,.10); } .cfErr{ min-height: 18px; margin-top:8px; font-size:12px; opacity:.9; color: rgba(255,120,120,.95); } .cfCheck{ display:flex; gap:10px; align-items:flex-start; font-weight:900; } .cfCheck input{ margin-top:4px; } .cfCaptcha{ margin-top: 14px; } .cfFoot{ margin-top: 14px; display:flex; flex-direction:column; gap:12px; } .cfActions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .cfBtn{ position:relative; } .cfBtn__spin{ display:none; width:16px; height:16px; border-radius:999px; border:2px solid rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.95); margin-left:10px; animation: cfSpin .8s linear infinite; } .cfBtn.is-loading .cfBtn__spin{ display:inline-block; } @keyframes cfSpin{ to { transform: rotate(360deg); } } .cfAlert{ padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.08); } .cfAlert__t{ font-weight: 950; margin-bottom: 4px; } .cfAlert__d{ opacity: .9; } .cfToast{ position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); z-index: 9999; } .cfToast__in{ display:flex; gap:12px; align-items:flex-start; padding: 14px 14px; border-radius: 18px; border: 1px solid rgba(34,197,94,.35); background: rgba(16,185,129,.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,.25); animation: cfToastIn .35s cubic-bezier(.2,.9,.2,1) both; } @keyframes cfToastIn{ from{ transform: translateY(12px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } } .cfToast__icon{ width: 28px; height: 28px; display:grid; place-items:center; border-radius: 999px; background: rgba(34,197,94,.22); border: 1px solid rgba(34,197,94,.35); font-weight: 950; } .cfToast__t{ font-weight: 950; letter-spacing: -.01em; } .cfToast__d{ opacity: .9; margin-top:2px; } .cfToast__x{ margin-left:auto; border:none; background: transparent; color: inherit; font-size: 18px; opacity: .8; cursor:pointer; } .cfToast__x:hover{ opacity: 1; } /* ========================================================= FAQ ========================================================= */ .faqList{ display:grid; gap:12px; } .faqItem{ padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.14); } .faqItem summary{ cursor:pointer; font-weight:950; letter-spacing:-.01em; } .faqItem__answer{ margin-top:10px; } /* ========================================================= CONTACT FORM / FIELDS — FIX SELECT BACKGROUND ========================================================= */ .formCard, .contactForm, .formGrid{ overflow: visible; } .formGrid{ display: grid; gap: 14px; } @media (min-width: 900px){ .formGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .formGrid .field--full, .formGrid [data-span="full"]{ grid-column: 1 / -1; } } .field{ display: grid; gap: 8px; } .field label{ font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--fg); } .field .hint{ font-size: 12px; color: var(--muted); margin-top: -2px; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select{ width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 20%, var(--stroke)); background: linear-gradient( 180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card2) 96%, transparent) ); color: var(--fg); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow2); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); -webkit-appearance: none; appearance: none; } textarea{ min-height: 150px; resize: vertical; } input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--muted) 82%, transparent); } /* Focus */ input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, textarea:focus, select:focus{ border-color: color-mix(in srgb, var(--a) 56%, var(--gold)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 16%, transparent), 0 16px 40px color-mix(in srgb, var(--a) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.08); outline: none; } /* Hover */ input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="number"]:hover, textarea:hover, select:hover{ border-color: color-mix(in srgb, var(--gold) 38%, var(--stroke)); } /* Disabled */ input:disabled, textarea:disabled, select:disabled{ opacity: .65; cursor: not-allowed; } /* ========================= SELECT — CLOSED STATE ========================= */ select{ padding-right: 52px; cursor: pointer; background: linear-gradient( 180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card2) 96%, transparent) ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23c7b27a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 0 0, right 16px center; background-size: auto, 18px 18px; } select::-ms-expand{ display: none; } /* ========================= SELECT — DROPDOWN LIST ========================= */ select option{ color: var(--fg); background: var(--bg2); } select option:hover, select option:focus, select option:checked, select option:active{ color: var(--fg); background: color-mix(in srgb, var(--a) 22%, var(--bg2)); } select optgroup{ color: var(--fg); background: var(--bg2); font-weight: 800; } select:required:invalid{ color: color-mix(in srgb, var(--muted) 88%, transparent); } select:required:invalid option[value=""]{ color: color-mix(in srgb, var(--muted) 88%, transparent); } select:not(:invalid){ color: var(--fg); } /* ========================= DARK THEME — extra fix options ========================= */ html[data-theme="dark"] select{ background: linear-gradient( 180deg, rgba(255,255,255,.10), rgba(255,255,255,.07) ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23e7d7a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 0 0, right 16px center; background-size: auto, 18px 18px; } html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup{ background: #20263a; color: #f6f7ff; } html[data-theme="dark"] select option:hover, html[data-theme="dark"] select option:focus, html[data-theme="dark"] select option:checked, html[data-theme="dark"] select option:active{ background: color-mix(in srgb, var(--a) 30%, #20263a); color: #ffffff; } /* ========================= SYSTEM DARK ========================= */ @media (prefers-color-scheme: dark){ html[data-theme="system"] select{ background: linear-gradient( 180deg, rgba(255,255,255,.10), rgba(255,255,255,.07) ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23e7d7a8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat, no-repeat; background-position: 0 0, right 16px center; background-size: auto, 18px 18px; } html[data-theme="system"] select option, html[data-theme="system"] select optgroup{ background: #20263a; color: #f6f7ff; } html[data-theme="system"] select option:hover, html[data-theme="system"] select option:focus, html[data-theme="system"] select option:checked, html[data-theme="system"] select option:active{ background: color-mix(in srgb, var(--a) 30%, #20263a); color: #ffffff; } } /* ========================= CHECKBOX / GROUPS ========================= */ .checkboxRow{ display: flex; align-items: flex-start; gap: 10px; } .checkboxRow input[type="checkbox"]{ margin-top: 3px; accent-color: var(--a); } .checkGrid{ display: grid; gap: 10px; margin-top: 6px; } @media (min-width: 700px){ .checkGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } .checkItem{ display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background: color-mix(in srgb, var(--card) 62%, transparent); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); } .checkItem:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--gold) 40%, var(--stroke)); } .checkItem input[type="checkbox"]{ margin-top: 2px; accent-color: var(--a); } /* ========================= Submit / status ========================= */ .formActions{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .formNote{ font-size: 12px; color: var(--muted); } .formError, .formSuccess{ margin-top: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; font-size: 14px; font-weight: 700; } .formSuccess{ background: color-mix(in srgb, #22c55e 14%, var(--card)); border-color: color-mix(in srgb, #22c55e 34%, var(--stroke)); color: var(--fg); } .formError{ background: color-mix(in srgb, #ef4444 12%, var(--card)); border-color: color-mix(in srgb, #ef4444 34%, var(--stroke)); color: var(--fg); } .simuBox{ display:grid; gap:24px; margin-top:30px; } .simuHead{ padding:22px; border-radius:24px; } .simuHead__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; } .simuTitle{ margin:6px 0 0; font-size:28px; line-height:1.05; letter-spacing:-.03em; font-family:var(--serif); } .simuLead{ margin:10px 0 0; color:var(--muted); max-width:62ch; overflow-wrap:anywhere; } .simuKicker{ font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); font-weight:900; } .simuTrust{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid color-mix(in srgb, var(--gold) 24%, var(--stroke)); background:color-mix(in srgb, var(--card) 72%, transparent); box-shadow:var(--shadow2); font-weight:800; } .simuTrust__dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, #22c55e, #86efac); box-shadow:0 0 0 6px rgba(34,197,94,.12); } .simuProgressBar{ margin-top:18px; height:12px; border-radius:999px; background:color-mix(in srgb, var(--card2) 90%, transparent); border:1px solid color-mix(in srgb, var(--gold) 16%, var(--stroke)); overflow:hidden; position:relative; } .simuProgressBar > span{ display:block; height:100%; width:25%; border-radius:999px; background:linear-gradient(90deg, var(--a), color-mix(in srgb, var(--gold) 55%, var(--a2))); box-shadow:0 10px 30px color-mix(in srgb, var(--a) 18%, transparent); transition:width .35s var(--ease); } .simuSteps{ display:flex; gap:12px; justify-content:center; margin-top:18px; } .simuStep{ width:38px; height:38px; border-radius:50%; background:color-mix(in srgb, var(--card2) 92%, transparent); border:1px solid color-mix(in srgb, var(--gold) 20%, var(--stroke)); display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:var(--shadow2); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); will-change:auto; } .simuStep.active{ background:linear-gradient(135deg, var(--a), color-mix(in srgb, var(--gold) 45%, var(--a2))); color:#fff; border-color:color-mix(in srgb, var(--gold) 40%, rgba(255,255,255,.2)); transform:translateY(-2px); } .simuLayout{ display:grid; gap:22px; min-width:0; } @media (min-width: 980px){ .simuLayout{ grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); align-items:start; } } .simuCard{ padding:30px; border-radius:24px; background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card2) 94%, transparent)); border:1px solid var(--stroke); box-shadow:var(--shadow); min-width:0; } .simuStage{ display:none; } .simuStage.active{ display:block; } .simuStage h3{ margin:0 0 12px; font-size:24px; letter-spacing:-.02em; font-family:var(--serif); } .simuHint{ margin:12px 0 0; color:var(--muted); font-size:14px; } .simuChecks{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; } .simuChecks label{ display:flex; align-items:center; gap:10px; min-height:54px; padding:12px 14px; border-radius:18px; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background:color-mix(in srgb, var(--card) 62%, transparent); font-weight:700; cursor:pointer; transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); transform: translateZ(0); backface-visibility: hidden; will-change:auto; } .simuChecks label:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--gold) 36%, var(--stroke)); } .simuChecks input[type="checkbox"]{ accent-color:var(--a); } .simuNav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; } .simuResult{ padding:24px; border-radius:24px; text-align:left; position:sticky; top:96px; contain:unset; min-width:0; } .simuPrice{ font-size:36px; line-height:1; font-weight:950; margin:12px 0 10px; letter-spacing:-.03em; font-family:var(--serif); } .simuSubline{ color:var(--muted); font-size:14px; margin-bottom:16px; } .simuMetaRow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:14px 0 14px; min-width:0; } .simuMetaCard{ padding:12px; border-radius:18px; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background:color-mix(in srgb, var(--card) 66%, transparent); box-shadow:var(--shadow2); transform: translateZ(0); backface-visibility: hidden; will-change:auto; } .simuMetaCard small{ display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:6px; } .simuMetaCard div{ font-weight:900; letter-spacing:-.02em; } .simuComplexBar{ height:10px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--card2) 90%, transparent); border:1px solid color-mix(in srgb, var(--gold) 16%, var(--stroke)); margin:10px 0 18px; } .simuComplexBar span{ display:block; height:100%; width:50%; background:linear-gradient(90deg, #22c55e, #eab308, #ef4444); border-radius:999px; transition:width .35s var(--ease); will-change:auto; } .simuScoreBadge{ display:inline-flex; align-items:center; justify-content:center; min-width:54px; height:34px; padding:0 12px; border-radius:999px; background:linear-gradient(135deg, var(--a), color-mix(in srgb, var(--gold) 48%, var(--a2))); color:#fff; font-weight:950; box-shadow:var(--shadow2); } .simuSummary{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .simuSummaryCard{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background:color-mix(in srgb, var(--card) 68%, transparent); box-shadow:var(--shadow2); transform: translateZ(0); backface-visibility: hidden; will-change:auto; } .simuSummaryIcon{ width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--gold2) 18%, transparent); border:1px solid color-mix(in srgb, var(--gold) 20%, var(--stroke)); font-size:18px; } .simuSummaryMeta{ display:flex; flex-direction:column; gap:2px; } .simuSummaryMeta small{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; } .simuSummaryMeta strong{ font-size:14px; letter-spacing:-.01em; } .simuReco{ margin-top:18px; padding:16px; border-radius:20px; } .simuReco__kicker{ font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:900; margin-bottom:8px; } .simuCompare{ display:grid; gap:10px; margin-top:18px; } .simuPackCard{ padding:14px; border-radius:20px; border:1px solid color-mix(in srgb, var(--gold) 18%, var(--stroke)); background:color-mix(in srgb, var(--card) 70%, transparent); box-shadow:var(--shadow2); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); transform: translateZ(0); backface-visibility: hidden; will-change:auto; } .simuPackCard.is-recommended{ border-color:color-mix(in srgb, var(--gold) 52%, var(--stroke)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent), var(--shadow2); transform:translateY(-2px); } .simuPackCard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:950; margin-bottom:6px; } .simuPackCard p{ margin:0; color:var(--muted); font-size:13px; } .simuActions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .simuNote{ margin-top:14px; font-size:12px; } @media (max-width: 820px){ .simuChecks{ grid-template-columns:1fr; } .simuMetaRow{ grid-template-columns:1fr; } .simuResult{ position:static; } } .simuChecks label.is-disabled { opacity: 0.45; filter: grayscale(0.35); cursor: not-allowed; } .simuChecks label.is-disabled input { pointer-events: none; } /* ========================================================= SAFE PERFORMANCE OPTIMIZATION LAYER ========================================================= */ /* Accélère les cartes et éléments interactifs */ .feat, .pcard, .prow, .btn, .iconBtn, .burger, .simuPackCard, .simuSummaryCard, .simuMetaCard, .simuChecks label{ transform: translateZ(0); backface-visibility: hidden; } /* Réduit le coût du fixed background sur mobile / tablettes */ @media (max-width: 1024px){ body, body[data-demo-theme], body[data-demo-layout]{ background-attachment: scroll; } } /* Backdrop-filter coûteux sur petits appareils : on allège un peu */ @media (max-width: 820px){ .glass, .topbar, .tip::after, .demo-card{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* Scroll plus propre */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } /* Sécurise les longs contenus */ .card__text, .feat__d, .ctaBox__d, .rich, .box, .muted, .simuLead{ overflow-wrap: anywhere; } /* Empêche certains débordements rares */ .hero__grid, .grid, .grid2, .card__row, .simuLayout, .simuMetaRow, .demosGrid, .featsGrid, .demo-grid{ min-width: 0; } .hero__copy, .hero__card, .card, .glass, .simuCard, .simuResult, .demoCard, .feat, .pcard{ min-width: 0; } /* Inputs plus fluides sur iOS */ input, textarea, select, button{ -webkit-tap-highlight-color: transparent; } /* Hover seulement quand le device le permet */ @media (hover: none){ .btn:hover, .demoCard:hover, .feat:hover, .demo-card:hover, .prow:hover, .pcta:hover, .ptab:hover, .iconBtn:hover, .nav__a:hover, .mnav__a:hover, .footer__a:hover, .simuChecks label:hover{ transform:none; filter:none; box-shadow:inherit; } .btn:hover::after, .prow:hover::after{ animation:none; opacity:0; } } /* Réduction légère des effets ultra lourds sur mobiles */ @media (max-width: 640px){ html::before{ filter: blur(16px) saturate(1.18); opacity:.54; } html::after{ filter: blur(20px) saturate(1.22); opacity:.42; } .hero::before{ filter: blur(14px) saturate(1.16); opacity:.78; } body::after{ opacity:.16; } } /* Rendus plus propres pour les textarea JSON / code */ .mono, textarea.mono, input.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* Sécurité visuelle sticky simulateur */ @media (min-width: 821px){ .simuResult{ max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; } } /* Allège les ombres sur petits écrans pour améliorer le rendu */ @media (max-width: 640px){ :root{ --shadow: 0 14px 40px rgba(10,20,60,.12); --shadow2: 0 8px 24px rgba(10,20,60,.08); } html[data-theme="dark"]{ --shadow: 0 14px 40px rgba(2,6,23,.36); --shadow2: 0 8px 24px rgba(2,6,23,.24); } } /* Backdrop filter minimal sur mobile */ @media (max-width: 768px){ body{ background-attachment: scroll; } .glass{ backdrop-filter: none; -webkit-backdrop-filter: none; } .glass::after{ opacity: .28; } body::before{ opacity: .06; } } /* ========================================================= SAFE PERFORMANCE OPTIMIZATION LAYER (mobile GPU protection — keeps desktop visuals intact) ========================================================= */ /* accélère certains éléments interactifs */ .feat, .pcard, .prow, .btn, .iconBtn, .burger, .simuPackCard, .simuSummaryCard, .simuMetaCard, .simuChecks label{ transform: translateZ(0); backface-visibility: hidden; } /* mobile : évite le coût énorme du fixed background */ @media (max-width:1024px){ body, body[data-demo-theme], body[data-demo-layout]{ background-attachment: scroll !important; } } /* mobile : réduit les blur GPU très lourds */ @media (max-width:768px){ html::before{ filter: blur(14px) saturate(1.15) !important; opacity:.55 !important; animation: meshPan 36s linear infinite !important; } html::after{ filter: blur(16px) saturate(1.18) !important; opacity:.42 !important; animation:none !important; } body::after{ opacity:.16 !important; animation:none !important; } .hero::before{ filter: blur(14px) saturate(1.16) !important; opacity:.78 !important; animation:none !important; } } /* petits écrans : évite les GPU spikes */ @media (max-width:640px){ html::before{ filter: blur(12px) saturate(1.12) !important; } html::after{ filter: blur(14px) saturate(1.15) !important; } } /* mobile : réduit le coût du glass effect */ @media (max-width:820px){ .glass, .topbar, .tip::after, .demo-card{ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* hover désactivé sur tactile */ @media (hover:none){ .btn:hover, .demoCard:hover, .feat:hover, .demo-card:hover, .prow:hover, .pcta:hover, .ptab:hover, .iconBtn:hover, .nav__a:hover, .mnav__a:hover, .footer__a:hover, .simuChecks label:hover{ transform:none; filter:none; box-shadow:inherit; } } /* évite débordements layout */ .hero__grid, .grid, .grid2, .card__row, .simuLayout, .simuMetaRow, .demosGrid, .featsGrid, .demo-grid{ min-width:0; } .hero__copy, .hero__card, .card, .glass, .simuCard, .simuResult, .demoCard, .feat, .pcard{ min-width:0; } /* sécurité contenus longs */ .card__text, .feat__d, .ctaBox__d, .rich, .box, .muted, .simuLead{ overflow-wrap:anywhere; } /* tap highlight iOS */ input, textarea, select, button{ -webkit-tap-highlight-color: transparent; } /* sticky simulateur safe */ @media (min-width:821px){ .simuResult{ max-height: calc(100vh - 120px); overflow:auto; overscroll-behavior:contain; } } /* mobile : ombres plus légères */ @media (max-width:640px){ :root{ --shadow:0 14px 40px rgba(10,20,60,.12); --shadow2:0 8px 24px rgba(10,20,60,.08); } html[data-theme="dark"]{ --shadow:0 14px 40px rgba(2,6,23,.36); --shadow2:0 8px 24px rgba(2,6,23,.24); } } .cookie-banner{ position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 99999; justify-content: center; display: none; } .cookie-banner.is-visible{ display: flex !important; } .cookie-banner[hidden]{ display: none !important; } .cookie-box{ width: 100%; max-width: 900px; background: rgba(20,20,28,0.96); color: #fff; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); backdrop-filter: blur(10px); display: flex; gap: 16px; align-items: center; justify-content: space-between; } .cookie-text strong{ display: block; margin-bottom: 6px; font-size: 16px; } .cookie-text p{ margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); } .cookie-actions{ display: flex; gap: 10px; flex-shrink: 0; } .cookie-btn{ border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; font-weight: 700; background: rgba(255,255,255,0.12); color: #fff; } .cookie-btn.primary{ background: #4f46e5; } .cookie-btn:hover{ transform: translateY(-1px); } @media (max-width: 700px){ .cookie-box{ flex-direction: column; align-items: stretch; } .cookie-actions{ width: 100%; flex-direction: column; } .cookie-btn{ width: 100%; } } .scrollTopBtn{ --size: 58px; --ring-size: 60px; --circumference: 163.3628; --progress: 163.3628; --st-accent: var(--accent, #6366f1); --st-accent-2: var(--accent2, var(--accent, #8b5cf6)); --st-btn-bg1: rgba(32,34,48,.94); --st-btn-bg2: rgba(18,20,30,.96); --st-btn-border: rgba(255,255,255,.12); --st-btn-fg: #fff; --st-ring-bg: rgba(255,255,255,.12); --st-focus-ring: color-mix(in srgb, var(--st-accent) 26%, transparent); position: fixed; right: 22px; bottom: 22px; width: var(--size); height: var(--size); padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px) scale(.92); pointer-events: none; transition: opacity .30s ease, transform .30s ease, filter .30s ease; } .scrollTopBtn.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .scrollTopBtn:hover{ filter: brightness(1.05); } .scrollTopBtn:active{ transform: translateY(0) scale(.965); } .scrollTopBtn:focus-visible{ outline: none; } .scrollTopBtn:focus-visible .scrollTopBtn__core{ box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 0 6px var(--st-focus-ring), 0 14px 34px rgba(0,0,0,.28); } .scrollTopBtn__ring{ position: absolute; inset: 0; width: var(--ring-size); height: var(--ring-size); transform: rotate(-90deg); overflow: visible; pointer-events: none; } .scrollTopBtn__ringBg, .scrollTopBtn__ringProgress{ fill: none; stroke-width: 4; } .scrollTopBtn__ringBg{ stroke: var(--st-ring-bg); } .scrollTopBtn__ringProgress{ stroke: var(--st-accent); stroke-linecap: round; stroke-dasharray: var(--circumference); stroke-dashoffset: var(--progress); transition: stroke-dashoffset .12s linear, stroke .25s ease, filter .25s ease; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--st-accent) 45%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--st-accent-2) 22%, transparent)); } .scrollTopBtn__core{ position: relative; width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--st-btn-fg); background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.12), transparent 35%), linear-gradient(180deg, var(--st-btn-bg1), var(--st-btn-bg2)); border: 1px solid var(--st-btn-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease; } .scrollTopBtn__core::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 45%, rgba(255,255,255,.04)); opacity: .8; pointer-events: none; } .scrollTopBtn__core::after{ content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at center, color-mix(in srgb, var(--st-accent) 16%, transparent) 0%, transparent 62%); opacity: 0; transform: scale(.9); transition: opacity .28s ease, transform .28s ease; pointer-events: none; } .scrollTopBtn:hover .scrollTopBtn__core{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--st-accent) 28%, rgba(255,255,255,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 38px rgba(0,0,0,.32), 0 0 0 1px color-mix(in srgb, var(--st-accent) 18%, transparent); } .scrollTopBtn:hover .scrollTopBtn__core::after{ opacity: 1; transform: scale(1); } .scrollTopBtn__icon{ width: 20px; height: 20px; display: block; position: relative; z-index: 1; } .scrollTopBtn__shaft, .scrollTopBtn__head{ transition: transform .24s ease, opacity .24s ease, stroke .24s ease; transform-origin: center; } .scrollTopBtn:hover .scrollTopBtn__shaft{ transform: translateY(-1.5px); } .scrollTopBtn:hover .scrollTopBtn__head{ transform: translateY(-2.5px); } .scrollTopBtn:hover .scrollTopBtn__icon{ color: color-mix(in srgb, var(--st-accent) 72%, white); } html[data-theme="light"] .scrollTopBtn{ --st-btn-bg1: rgba(255,255,255,.95); --st-btn-bg2: rgba(240,244,255,.96); --st-btn-border: rgba(30,41,59,.10); --st-btn-fg: #111827; --st-ring-bg: rgba(15,23,42,.10); } @media (max-width: 768px){ .scrollTopBtn{ right: 16px; bottom: 16px; --size: 54px; --ring-size: 56px; } .scrollTopBtn__core{ width: 42px; height: 42px; } .scrollTopBtn__icon{ width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce){ .scrollTopBtn, .scrollTopBtn__core, .scrollTopBtn__ringProgress, .scrollTopBtn__shaft, .scrollTopBtn__head{ transition: none; } }