/* ============================================================ Factures — Landing Design system: two directions (A: Sombre/app-native, B: Clair/éditorial) Themed via [data-direction] + [data-accent] on . ============================================================ */ /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%} button,input,textarea,select{font:inherit;color:inherit} a{color:inherit;text-decoration:none} ul{list-style:none} /* ---------- Accent palettes (work on dark + light) ---------- */ [data-accent="indigo"]{--accent:oklch(0.585 0.205 273);--accent-hi:oklch(0.66 0.19 273);--accent-deep:oklch(0.50 0.205 273);--accent-soft:oklch(0.585 0.205 273 / .14);--accent-line:oklch(0.585 0.205 273 / .35)} [data-accent="blue"]{--accent:oklch(0.585 0.165 248);--accent-hi:oklch(0.67 0.15 248);--accent-deep:oklch(0.50 0.17 248);--accent-soft:oklch(0.585 0.165 248 / .14);--accent-line:oklch(0.585 0.165 248 / .35)} [data-accent="violet"]{--accent:oklch(0.565 0.225 305);--accent-hi:oklch(0.65 0.2 305);--accent-deep:oklch(0.49 0.225 305);--accent-soft:oklch(0.565 0.225 305 / .14);--accent-line:oklch(0.565 0.225 305 / .35)} [data-accent="teal"]{--accent:oklch(0.62 0.115 196);--accent-hi:oklch(0.70 0.10 196);--accent-deep:oklch(0.52 0.12 196);--accent-soft:oklch(0.62 0.115 196 / .15);--accent-line:oklch(0.62 0.115 196 / .35)} :root{--accent-contrast:#fff} /* ---------- Direction A — Sombre / app-native (default) ---------- Premium pass: - hairline borders softened to ~0.06–0.10 alpha - second accent (champagne / gold) for editorial numerals - dual font stack — Hanken for body, Spectral for italic accents - card shadows toned down (flatter, hairline borders carry weight) */ html[data-direction="a"]{ --bg:oklch(0.155 0.012 270); --bg-grad-1:oklch(0.185 0.022 273); --bg-grad-2:oklch(0.155 0.012 270); --surface:oklch(0.205 0.013 270); --surface-2:oklch(0.245 0.014 270); --surface-3:oklch(0.285 0.015 270); --border:oklch(1 0 0 / .07); --border-strong:oklch(1 0 0 / .14); --text:oklch(0.97 0.004 270); --text-muted:oklch(0.73 0.012 270); --text-faint:oklch(0.58 0.012 270); --success:oklch(0.74 0.16 150); --warn:oklch(0.80 0.13 75); /* Second accent — warm champagne for premium-feeling numerals (countdown, headline price, daily-cost anchor). */ --gold:oklch(0.82 0.07 78); --gold-soft:oklch(0.82 0.07 78 / .14); --gold-line:oklch(0.82 0.07 78 / .32); --shadow-lg:0 30px 60px -28px rgba(0,0,0,.55); --shadow-md:0 14px 36px -22px rgba(0,0,0,.50); --shadow-card:0 1px 0 oklch(1 0 0 / .03) inset; --font-display:"Hanken Grotesk"; --font-body:"Hanken Grotesk"; --font-editorial:"Spectral"; --display-weight:800; --display-spacing:-0.022em; --display-italic:normal; --hero-glow: radial-gradient(58% 48% at 78% 4%, var(--accent-soft), transparent 70%), radial-gradient(38% 32% at 18% 92%, var(--gold-soft), transparent 78%); --mock-bg:oklch(0.135 0.011 270); --mock-surface:oklch(0.205 0.013 270); color-scheme:dark; } /* ---------- Direction B — Clair / éditorial / confiance ---------- */ html[data-direction="b"]{ --bg:oklch(0.985 0.006 92); --bg-grad-1:oklch(0.965 0.012 88); --bg-grad-2:oklch(0.985 0.006 92); --surface:oklch(1 0 0); --surface-2:oklch(0.975 0.007 88); --surface-3:oklch(0.955 0.009 86); --border:oklch(0.32 0.02 80 / .12); --border-strong:oklch(0.32 0.02 80 / .22); --text:oklch(0.24 0.018 68); --text-muted:oklch(0.46 0.014 68); --text-faint:oklch(0.60 0.012 70); --success:oklch(0.55 0.14 150); --warn:oklch(0.62 0.14 60); --shadow-lg:0 36px 70px -34px rgba(50,42,28,.30); --shadow-md:0 20px 44px -28px rgba(50,42,28,.22); --shadow-card:0 1px 2px rgba(50,42,28,.04), 0 18px 36px -30px rgba(50,42,28,.3); --font-display:"Spectral"; --font-body:"Hanken Grotesk"; --display-weight:600; --display-spacing:-0.012em; --display-italic:normal; --hero-glow:radial-gradient(70% 55% at 72% 5%, var(--accent-soft), transparent 72%); --mock-bg:oklch(0.955 0.008 86); --mock-surface:oklch(1 0 0); color-scheme:light; } /* ---------- Base ---------- */ body{ font-family:var(--font-body),ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); font-size:17px; line-height:1.6; letter-spacing:-0.004em; font-variant-numeric:tabular-nums; transition:background .4s ease,color .4s ease; position:relative; } /* Subtle film-grain texture over the entire surface — kills the "flat digital plastic" feeling without competing for attention. Sized via background-size (small) + low opacity, so it reads as light noise rather than a pattern. */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml;utf8,"); background-size:160px 160px; opacity:.06;mix-blend-mode:overlay; } html[data-direction="b"] body::after{mix-blend-mode:multiply;opacity:.04} @media (prefers-reduced-motion:reduce){body::after{opacity:.04}} h1,h2,h3{ font-family:var(--font-display),ui-sans-serif,system-ui,serif; font-weight:var(--display-weight); letter-spacing:var(--display-spacing); line-height:1.05; text-wrap:balance; } h2{font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.08} h3{font-size:1.3rem;font-weight:var(--display-weight);letter-spacing:-0.01em} p{text-wrap:pretty} /* Editorial italic in the dark direction — uses Spectral as a second face so accent words inside H1 read as a magazine pull-quote rather than just a colour swap. Letter-spacing relaxed back to 0 because Spectral italic is already inherently slanted. */ html[data-direction="a"] .hl{ font-family:var(--font-editorial),Georgia,serif; font-style:italic; font-weight:600; letter-spacing:0; color:var(--text); background:linear-gradient(95deg, var(--accent-hi) 12%, var(--gold) 88%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* ---------- Layout primitives ---------- */ .wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px} .section{padding-block:clamp(64px,9vw,128px)} .section--tight{padding-block:clamp(48px,6vw,84px)} /* v3.7 — unified background. Every section sits on the same body bg (no more surface-2 alternation that produced a stripey look). To keep visual rhythm we add a hairline rule at the top of each .section--rule and a faint editorial gold "shimmer" centred over it — the same treatment as the reform strip. Reads as one piece rather than a stack of differently-coloured panels. */ .section--rule{position:relative} .section--rule::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:var(--border);pointer-events:none; } .section--rule::after{ content:"";position:absolute;left:50%;top:-1px; width:180px;height:1px;transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold-line),transparent); pointer-events:none; } .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-body);font-size:.74rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent); position:relative;padding-left:18px; } /* Hairline editorial bar before eyebrow — the kind of detail you see in serious magazines and design-led product pages (Linear, Vercel, NYT). Replaces the SVG icon visually without removing it (icons stay for screen readers / scanning). */ .eyebrow::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:10px;height:1px;background:currentColor;opacity:.7; } .eyebrow svg{width:13px;height:13px;opacity:.85} .sec-head.center .eyebrow{padding-left:0} .sec-head.center .eyebrow::before{display:none} .lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--text-muted);line-height:1.55;max-width:62ch} .sec-head{max-width:none} .sec-head h2{margin-bottom:18px} .sec-head .lead{margin-inline:auto} .sec-head.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:0} .sec-head.center .eyebrow{margin-bottom:18px} /* v3.5 — drop the "LE PROBLÈME / LA SOLUTION / FONCTIONNALITÉS …" tag-line above every H2. The hero eyebrow ("Spécialement pour les auto-entrepreneurs français") stays because it's the only one doing real narrative work — the others were generic category labels and just added repetition between sections. Final CTA "Prêt à commencer ?" eyebrow also hidden for symmetry. */ .sec-head .eyebrow, .final-card .eyebrow{display:none} /* ---------- Buttons ---------- */ .btn{ --bh:52px; display:inline-flex;align-items:center;justify-content:center;gap:9px; height:var(--bh);padding-inline:24px;border-radius:13px;border:1px solid transparent; font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:-0.01em; cursor:pointer;white-space:nowrap; transition:transform .15s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease; } .btn svg{width:18px;height:18px} .btn:active{transform:translateY(1px)} .btn-primary{ background:var(--accent);color:var(--accent-contrast); box-shadow:0 10px 26px -12px var(--accent-line), 0 1px 0 oklch(1 0 0 / .25) inset; } .btn-primary:hover{background:var(--accent-hi);box-shadow:0 14px 32px -10px var(--accent-line),0 1px 0 oklch(1 0 0 / .3) inset} .btn-ghost{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)} .btn-ghost:hover{background:var(--surface-3);border-color:var(--border-strong)} .btn-line{background:transparent;color:var(--text);border-color:var(--border-strong)} .btn-line:hover{background:var(--surface-2)} .btn-sm{--bh:42px;padding-inline:17px;border-radius:11px;font-size:.94rem} .btn-lg{--bh:58px;padding-inline:30px;font-size:1.06rem} .btn-block{display:flex;width:100%} /* highlighted words in display headings */ .hl{color:var(--accent)} html[data-direction="b"] .hl{font-style:italic;font-weight:600} section[id],main[id]{scroll-margin-top:88px} /* ---------- Header ---------- */ .hdr{ position:sticky;top:0;z-index:100; backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); background:color-mix(in oklab,var(--bg) 80%,transparent); border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease; } .hdr.scrolled{border-bottom-color:var(--border)} .hdr-in{display:flex;align-items:center;gap:24px;height:70px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-body);font-weight:700;font-size:1.18rem;letter-spacing:-0.02em} .brand-mark{ width:34px;height:34px;border-radius:10px;flex-shrink:0; display:grid;place-items:center;color:#fff; background:linear-gradient(150deg,var(--accent-hi),var(--accent-deep)); box-shadow:0 6px 16px -8px var(--accent-line),0 1px 0 oklch(1 0 0 / .3) inset; } .brand-mark svg{width:19px;height:19px} .nav{display:flex;align-items:center;gap:4px;margin-left:8px} .nav a{padding:9px 13px;border-radius:9px;font-size:.95rem;font-weight:500;color:var(--text-muted);transition:color .15s,background .15s} .nav a:hover{color:var(--text);background:var(--surface-2)} .hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px} /* Language toggle (FR/RU) */ .lang{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);gap:2px} .lang button{ appearance:none;border:0;background:transparent;cursor:pointer; padding:5px 11px;border-radius:7px;font-size:.82rem;font-weight:700;letter-spacing:.02em; color:var(--text-faint);transition:color .15s,background .15s; } .lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-contrast)} .hdr .btn-ghost.login{display:inline-flex} .burger{display:none} /* ---------- Hero ---------- The hero is sized so header + hero + reform-strip exactly fill the visible viewport on desktop: visitor sees the whole pitch without scrolling. The svh unit (small-viewport height) is the non-shrinking fallback used on mobile so URL bars / keyboards don't collapse the fold. On short viewports (<760px) we drop the 100vh anchor and let the content lay out naturally — the page stays usable on laptops with small screens. */ .hero{ position:relative;overflow:hidden; min-height:calc(100svh - var(--lp-header-h,70px) - var(--lp-strip-h,68px)); padding-block:clamp(28px,4vh,60px); display:flex;align-items:center; } .hero::before{content:"";position:absolute;inset:0;background:var(--hero-glow);pointer-events:none} .hero-in{position:relative;display:grid;grid-template-columns:1.04fr 0.96fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%} @media (max-height:760px){ .hero{min-height:0;padding-block:clamp(48px,7vw,80px)} } .hero-copy{max-width:600px} .hero h1{font-size:clamp(2.5rem,5.3vw,4.05rem);margin:20px 0 22px} .hero-sub{font-size:clamp(1.08rem,1.7vw,1.28rem);color:var(--text-muted);max-width:38ch;margin-bottom:30px} .hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:26px} .hero-trust{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--text-faint);font-size:.9rem;font-weight:500} .hero-trust li{display:flex;align-items:center;gap:7px} .hero-trust svg{width:16px;height:16px;color:var(--success)} /* ---------- Mock window (product, stylized) ---------- */ .mock{ position:relative;border-radius:18px; /* overflow:visible so the floating Peppol pill can sit slightly above and outside the mock frame without being clipped. The inner mock-bar / mock-body still respect the rounded border because they paint flush to the .mock background. */ overflow:visible; background:var(--mock-bg);border:1px solid var(--border-strong); box-shadow:var(--shadow-lg); } .mock-bar{border-top-left-radius:17px;border-top-right-radius:17px} .mock-body{border-bottom-left-radius:17px;border-bottom-right-radius:17px} /* Hero mock — flat presentation (no perspective rotation). The 3D tilt was clipping the top-right / bottom-right corner radii under heavy backdrop blur on some renders; flat is also cleaner for the staged-entrance animation. */ .hero .mock{transform:none} .mock-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--mock-surface) 60%,transparent)} .mock-dots{display:flex;gap:6px} .mock-dots i{width:11px;height:11px;border-radius:50%;background:var(--border-strong)} .mock-bar .brand{font-size:.92rem;gap:8px;margin-left:4px} .mock-bar .brand-mark{width:24px;height:24px;border-radius:7px} .mock-bar .brand-mark svg{width:13px;height:13px} .mock-pill{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:999px;display:flex;align-items:center;gap:5px} .mock-pill svg{width:12px;height:12px} .mock-body{padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--mock-bg)} .mock-reform{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line)} .mock-reform .ic{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0} .mock-reform .ic svg{width:16px;height:16px} .mock-reform b{font-size:.82rem;font-weight:600;display:block;color:var(--text)} .mock-reform span{font-size:.74rem;color:var(--text-muted)} .mock-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;background:var(--mock-surface);border:1px solid var(--border)} .mock-row .fic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted);flex-shrink:0} .mock-row .fic svg{width:15px;height:15px} .mock-row .num{font-weight:600;font-size:.84rem;letter-spacing:-0.01em} .mock-row .cli{font-size:.72rem;color:var(--text-faint)} .mock-row .amt{margin-left:auto;font-weight:700;font-size:.86rem} .badge{font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:.01em} .badge.sent{color:var(--accent);background:var(--accent-soft)} .badge.paid{color:var(--success);background:color-mix(in oklab,var(--success) 16%,transparent)} .badge.draft{color:var(--text-faint);background:var(--surface-2)} /* Floating "envoyée via Peppol" pill — anchored to the bottom-right corner of the mock and pushed outside both edges (right + bottom) so it reads as a discrete badge "attached" to the corner. A green accent ring + soft success-coloured glow make it pop off the dark surface; heavy ambient shadow gives it visible elevation. The pill stops blending with the invoice rows behind because it lives below them, off the mock entirely. */ .mock-float{ position:absolute;right:-22px;bottom:6px;z-index:5; display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px; background:var(--surface); border:1px solid color-mix(in oklab,var(--success) 55%,var(--border-strong)); box-shadow: 0 0 0 4px color-mix(in oklab,var(--success) 14%,transparent), 0 30px 60px -22px rgba(0,0,0,.85), 0 16px 32px -14px rgba(0,0,0,.6), 0 0 24px -8px color-mix(in oklab,var(--success) 50%,transparent), 0 1px 0 oklch(1 0 0 / .06) inset; font-size:.78rem;font-weight:600; } .mock-float .chk{width:22px;height:22px;border-radius:7px;background:var(--success);color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in oklab,var(--success) 22%,transparent)} .mock-float .chk svg{width:13px;height:13px} .mock-float > div{min-width:0;line-height:1.25} .mock-float span{color:var(--text-faint);font-weight:500;font-size:.7rem;display:block} /* ---------- Countdown ---------- */ /* Editorial / magazine countdown — compact variant. Gold numerals stay editorial (Spectral italic) but at a tighter scale so the block doesn't dominate the hero. Hairlines top and between units keep the cover-spread feel. */ .countdown{ display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin-top:24px; padding:12px 16px;border-radius:12px; background:linear-gradient(180deg,var(--surface) 0%,color-mix(in oklab,var(--surface) 70%,transparent) 100%); border:1px solid var(--border); position:relative;overflow:hidden; } .countdown::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); } .countdown .cd-lbl{ font-size:.72rem;color:var(--text-muted);font-weight:500; max-width:24ch;align-self:center;letter-spacing:0;line-height:1.35; } .countdown .cd-lbl b{color:var(--text);font-weight:600} .cd-units{display:flex;gap:0;margin-left:auto;align-items:flex-end} .cd-unit{ position:relative;min-width:48px;text-align:center; padding:2px 11px 4px;background:transparent;border:0;border-radius:0; } .cd-unit + .cd-unit{border-left:1px solid var(--border)} .cd-unit b{ display:block; font-family:var(--font-editorial),Georgia,serif; font-size:clamp(1.55rem,2.2vw,1.85rem); font-weight:500; line-height:1;letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--gold); } .cd-unit span{ display:block;margin-top:4px; font-size:.54rem;text-transform:uppercase;letter-spacing:.16em; color:var(--text-faint);font-weight:600;font-family:var(--font-body); } /* ---------- Reform strip ---------- v3.4 — simpler reading: ditch the "feature bar in a box" look (background fill + double border + dotted dividers) for a quiet editorial caption under the hero. Items live in a flat 4-column grid so they line up cleanly without ad-hoc wraps; on tablet the grid collapses to 2x2, on mobile to a single column. Icons are muted (not accent), labels are smaller — the strip reads as a compliance footer, not a CTA. */ .strip{ background:transparent;border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; } .strip::before, .strip::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); width:160px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); } .strip::before{top:-1px} .strip::after{bottom:-1px} .strip-in{ display:flex;align-items:center;justify-content:space-between; gap:0;padding-block:22px; } .strip-item{ display:flex;align-items:center;gap:10px; font-size:.82rem;font-weight:500;color:var(--text-muted); letter-spacing:.005em;line-height:1.4; flex:0 0 auto; } .strip-item svg{ width:16px;height:16px;color:var(--text-faint);flex-shrink:0; opacity:.85; } /* Each label stays on a single line — width is driven by its own text instead of a 1fr grid cell, so items lay out justified (first flush left, last flush right, equal gaps between). */ .strip-item span{white-space:nowrap} .strip-sep{display:none} @media (max-width:900px){ .strip-in{ display:grid;grid-template-columns:repeat(2,1fr); justify-content:stretch;gap:14px 24px;padding-block:20px; } .strip-item{justify-content:center} } @media (max-width:560px){ .strip-in{grid-template-columns:1fr;gap:12px 0;justify-items:start} .strip-item{padding:0 8px} } /* ---------- Cards / grids ---------- */ .grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{ position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 26px; box-shadow:none; transition:border-color .25s ease,background .25s ease; } /* Hairline accent bar slides in from the left on hover — the kind of micro-interaction that signals "designed", not "templated". */ .card::before{ content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px; background:var(--accent);transform:scaleY(0);transform-origin:top; transition:transform .4s cubic-bezier(.2,.7,.25,1); } .card:hover{border-color:var(--border-strong);background:color-mix(in oklab,var(--surface) 92%,var(--accent) 8%)} .card:hover::before{transform:scaleY(1)} .card-ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:18px;transition:transform .3s cubic-bezier(.2,.7,.25,1)} .card:hover .card-ic{transform:translateX(4px)} .card-ic svg{width:21px;height:21px} .card h3{margin-bottom:9px} .card p{font-size:.97rem;color:var(--text-muted);line-height:1.55} @media (prefers-reduced-motion:reduce){ .card,.card-ic,.card::before{transition:none} .card:hover .card-ic{transform:none} .card:hover::before{transform:scaleY(1)} } /* Pain — timeline composition. Visually breaks the rhythm of "three cards in a row". Three pains are stacked vertically along a hairline rail; each pain reads as a paragraph rather than a card. Copy unchanged. */ .pain .card-ic{background:color-mix(in oklab,var(--warn) 16%,transparent);color:var(--warn)} .pain-note{margin-top:14px;font-size:.86rem;color:var(--text-faint);display:flex;align-items:center;gap:7px} .pain-note svg{width:15px;height:15px;flex-shrink:0} /* v3.6 — pain: simplified to a flat 3-column grid. The vertical rail with paragraphs was still too dense — visitor had to scroll and read 3 blocks of prose. Now each pain is one compact column with three elements only: 1. Big gold "01 / 02 / 03" numeral (Spectral italic) 2. Bold heading (what the pain is) 3. Gold stat chip (the concrete cost) The original paragraph stays in DOM but is muted and small under the heading. Hairline dividers between columns keep the rhythm editorial without using cards. */ .pain-rail{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; max-width:1100px;margin-inline:auto; counter-reset:pain; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .pain-rail::before, .pain-rail::after{display:none} .pain-rail .card{ position:relative; background:transparent;border:0;border-radius:0; padding:36px 28px 32px;overflow:visible; counter-increment:pain; display:flex;flex-direction:column;align-items:flex-start; } .pain-rail .card + .card{border-left:1px solid var(--border)} .pain-rail .card::before{display:none} .pain-rail .card:hover{background:transparent} .pain-rail .card:hover .card-ic{transform:none} .pain-rail .card-ic{ position:static;width:auto;height:auto; background:transparent;border:0;border-radius:0; color:transparent;box-shadow:none; margin:0 0 22px;padding:0; display:block; } .pain-rail .card-ic svg{display:none} .pain-rail .card-ic::before{ content:counter(pain, decimal-leading-zero); font-family:var(--font-editorial),Georgia,serif; font-style:italic;font-weight:500; font-size:2.4rem;letter-spacing:-0.03em;line-height:.9; color:var(--gold); } .pain-rail .card h3{ font-size:clamp(1.2rem,1.7vw,1.4rem); letter-spacing:-0.018em;line-height:1.2; margin-bottom:10px; } .pain-rail .card p{ font-size:.92rem;max-width:none;line-height:1.55; color:var(--text-muted); margin-bottom:16px; } /* Pain-note as an editorial caption: no pill, no border, no background. Short gold hairline above + Spectral italic text — reads as a magazine footnote / pull-quote rather than a "stat button". */ .pain-rail .pain-note{ display:flex;flex-direction:column;align-items:flex-start;gap:0; margin-top:auto;padding:14px 0 0; position:relative; background:transparent;border:0;border-radius:0; color:var(--gold); font-family:var(--font-editorial),Georgia,serif; font-style:italic;font-weight:500; font-size:.95rem;letter-spacing:0;line-height:1.35; } .pain-rail .pain-note::before{ content:"";display:block; width:28px;height:1px; background:var(--gold); margin-bottom:10px;opacity:.7; } .pain-rail .pain-note svg{display:none} .pain-rail .pain-note span{display:block;max-width:24ch} @media (max-width:880px){ .pain-rail{grid-template-columns:1fr} .pain-rail .card + .card{border-left:0;border-top:1px solid var(--border)} .pain-rail .card{padding:28px 0} } /* ---------- Solution — channel routing flow diagram ---------- v3.10 — clean vertical flow. Input on top → decision pill in the middle → 2 outputs at the bottom. Centered, symmetric, hairline connector lines drawn purely with pseudo-elements so the layout stays predictable. Premium framing (gradient bg, gold/indigo glows, top hairline) is preserved so it matches the rest of the page. */ .sol-flow{ position:relative; display:flex;flex-direction:column;align-items:center; gap:0; max-width:760px;margin-inline:auto; padding:clamp(40px,4vw,64px) clamp(28px,3vw,48px); border:1px solid var(--border-strong);border-radius:24px; background: radial-gradient(60% 60% at 20% 0%, color-mix(in oklab,var(--accent) 16%,transparent) 0%, transparent 70%), radial-gradient(60% 60% at 80% 100%, color-mix(in oklab,var(--gold) 12%,transparent) 0%, transparent 70%), linear-gradient(180deg, color-mix(in oklab,var(--surface) 65%,transparent) 0%, color-mix(in oklab,var(--surface-2) 40%,transparent) 100%); box-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 0 0 1px var(--gold-soft) inset, 0 40px 100px -50px rgba(0,0,0,.6); overflow:hidden; } .sol-flow::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent 5%,var(--accent-line) 30%,var(--gold-line) 50%,var(--accent-line) 70%,transparent 95%); pointer-events:none; } /* Step 1 — input. Centered card. */ .sol-flow-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} .sol-flow-label{ display:block;font-size:.64rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase; color:var(--text-faint);margin-bottom:12px;text-align:center; } .sol-flow-card{ display:inline-flex;align-items:center;gap:11px; padding:16px 22px;border-radius:14px; background:var(--mock-bg); border:1px solid var(--border-strong); font-size:1rem;font-weight:600;color:var(--text); font-variant-numeric:tabular-nums; box-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 14px 32px -16px rgba(0,0,0,.6), 0 0 0 5px color-mix(in oklab,var(--accent) 6%,transparent); } .sol-flow-card svg{width:20px;height:20px;color:var(--accent)} /* Step 2 — decision. Hairline connector dropping from the input card to the pill, and from the pill down to the split point. */ .sol-flow-rule{ position:relative;z-index:1; margin:14px 0;display:flex;flex-direction:column;align-items:center; } .sol-flow-rule::before, .sol-flow-rule::after{ content:"";display:block;width:1px;height:22px;background:var(--gold-line); } .sol-flow-rule-l{ display:inline-block;padding:6px 16px;border-radius:999px; background:color-mix(in oklab,var(--surface) 60%,transparent); border:1px solid var(--gold-line); color:var(--gold); font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; margin:0; } /* the bottom segment splits — draw the horizontal connector as another pseudo-element on the .sol-flow-out wrapper. */ .sol-flow-arrow{display:none} /* Step 3 — branches. Two cards side by side, centered. A hairline horizontal connector + two short verticals link them visually to the decision pill above. */ .sol-flow-out{ position:relative;z-index:1; display:grid;grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); width:100%;max-width:560px; padding-top:22px; } .sol-flow-out::before{ /* horizontal bridge between the two branch columns */ content:"";position:absolute;left:25%;right:25%;top:0;height:1px;background:var(--gold-line); } .sol-flow-out::after{ /* two vertical drops to each branch top */ content:"";position:absolute;left:0;right:0;top:0;height:22px; background: linear-gradient(var(--gold-line),var(--gold-line)) calc(25% - 0.5px) 0 / 1px 22px no-repeat, linear-gradient(var(--gold-line),var(--gold-line)) calc(75% - 0.5px) 0 / 1px 22px no-repeat; } .sol-flow-branch{ position:relative; display:flex;align-items:center;gap:14px; padding:18px 20px;border-radius:14px; background:color-mix(in oklab,var(--surface) 50%,transparent); border:1px solid var(--border-strong); transition:transform .25s cubic-bezier(.2,.7,.25,1),border-color .25s ease,background .25s ease; } .sol-flow-branch:hover{transform:translateY(-2px)} .sol-flow-branch--peppol{border-color:color-mix(in oklab,var(--accent) 40%,var(--border-strong))} .sol-flow-branch--email{border-color:color-mix(in oklab,var(--gold) 40%,var(--border-strong))} .sol-flow-branch > svg{ width:24px;height:24px;flex-shrink:0; padding:8px;border-radius:10px;box-sizing:content-box; } .sol-flow-branch--peppol > svg{color:var(--accent);background:var(--accent-soft)} .sol-flow-branch--email > svg{color:var(--gold);background:var(--gold-soft)} .sol-flow-branch b{ display:block;font-size:1.02rem;font-weight:700;color:var(--text); letter-spacing:-0.01em;line-height:1.2; } .sol-flow-branch span{ display:block;font-size:.82rem;color:var(--text-muted);margin-top:3px; } @media (max-width:680px){ .sol-flow-out{grid-template-columns:1fr;max-width:340px;gap:14px} .sol-flow-out::before{display:none} .sol-flow-out::after{ /* on mobile keep a single vertical line to first card only */ background:linear-gradient(var(--gold-line),var(--gold-line)) center 0 / 1px 22px no-repeat; } } /* ---------- Feature rows (alternating with mockups) ---------- */ .frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .frow + .frow{margin-top:clamp(48px,7vw,96px)} .frow.flip .frow-media{order:-1} /* v3.9 — Image de marque row. Was: full-bleed mock with copy overlay. Now: clean vertical composition — copy on top (centered), mock on bottom with a horizontal 3-step timeline. Premium multi-layer gradient background (indigo top glow → gold bottom glow → surface base) with hairline gold border on top. */ .frow.bleed{ position:relative;display:flex;flex-direction:column; padding:clamp(48px,6vw,80px) clamp(28px,4vw,64px); border-radius:24px;overflow:hidden; border:1px solid var(--border-strong); background: radial-gradient(70% 50% at 20% 0%, color-mix(in oklab,var(--accent) 14%,transparent) 0%, transparent 70%), radial-gradient(80% 60% at 85% 100%, color-mix(in oklab,var(--gold) 10%,transparent) 0%, transparent 75%), linear-gradient(180deg, color-mix(in oklab,var(--surface) 70%,transparent) 0%, color-mix(in oklab,var(--surface-2) 40%,transparent) 100%); box-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 0 0 1px var(--gold-soft) inset, 0 40px 100px -50px rgba(0,0,0,.6); } .frow.bleed::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent 5%,var(--accent-line) 30%,var(--gold-line) 50%,var(--accent-line) 70%,transparent 95%); pointer-events:none; } .frow.bleed .frow-copy{ position:relative;display:flex;flex-direction:column; align-items:center;text-align:center; max-width:720px;margin:0 auto clamp(36px,5vw,56px); } .frow.bleed .frow-copy .eyebrow{margin-bottom:14px} .frow.bleed .frow-copy h3{ font-size:clamp(1.8rem,2.8vw,2.4rem); margin-bottom:14px;letter-spacing:-0.022em;line-height:1.12; } .frow.bleed .frow-copy p{margin-bottom:22px;color:var(--text-muted);max-width:54ch} .frow.bleed .frow-copy .flist{ display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:8px 28px; justify-content:center;text-align:left; } .frow.bleed .frow-media{position:relative;width:100%} @media (max-width:760px){ .frow.bleed .frow-copy .flist{grid-template-columns:1fr} } /* Horizontal step timeline used inside the Image-de-marque mock — 3 cells in a row with connector lines between them. Replaces the tighter vertical .tl rail for this row only (scoped under .frow.bleed). */ .frow.bleed .mm{ max-width:860px;margin-inline:auto;border-radius:18px; background:color-mix(in oklab,var(--mock-bg) 92%,transparent); border:1px solid var(--border-strong); box-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 30px 80px -40px rgba(0,0,0,.7); } .frow.bleed .mm-h{padding:14px 20px} .frow.bleed .mm-b{padding:24px clamp(18px,3vw,32px) 32px} .frow.bleed .tl{ position:relative;padding:0;display:grid; grid-template-columns:repeat(3,1fr);gap:0; } .frow.bleed .tl::before{ /* connecting hairline between the three dots */ content:"";position:absolute; left:14%;right:14%;top:14px;height:1px; background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 50%,var(--border-strong) 50%,var(--border-strong) 100%); background-size:200% 100%;background-position:0% 0%; } .frow.bleed .tl-item{ position:relative;padding:0;display:flex;flex-direction:column; align-items:center;gap:6px;text-align:center; } .frow.bleed .tl-item::before{ /* override the vertical rail dot — reposition as a horizontal node */ position:static;transform:none; width:28px;height:28px;border-radius:50%; background:var(--mock-bg);border:2px solid var(--border-strong); display:block;margin-bottom:14px; } .frow.bleed .tl-item.done::before{ background:var(--accent);border-color:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); } .frow.bleed .tl-item:not(.done)::before{ border-style:dashed; } .frow.bleed .tl-item .t{ width:auto;flex:none;font-size:.9rem;font-weight:600; color:var(--text);letter-spacing:-0.005em; } .frow.bleed .tl-item .x{font-size:.78rem;color:var(--text-muted)} @media (max-width:680px){ .frow.bleed .tl{grid-template-columns:1fr;gap:18px} .frow.bleed .tl::before{display:none} .frow.bleed .tl-item{flex-direction:row;text-align:left;gap:14px} .frow.bleed .tl-item::before{margin-bottom:0} } .frow-copy .eyebrow{margin-bottom:14px} .frow-copy h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px;line-height:1.12} .frow-copy p{color:var(--text-muted);margin-bottom:18px;font-size:1.04rem} .flist{display:flex;flex-direction:column;gap:11px} .flist li{display:flex;align-items:flex-start;gap:11px;font-size:1rem;color:var(--text)} .flist .ck{width:23px;height:23px;border-radius:7px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex-shrink:0;margin-top:1px} .flist .ck svg{width:14px;height:14px} .frow-media{position:relative} /* mini-mockups inside feature rows */ .mm{border-radius:16px;border:1px solid var(--border-strong);background:var(--mock-bg);box-shadow:var(--shadow-md);overflow:hidden} .mm-h{padding:13px 16px;border-bottom:1px solid var(--border);font-size:.82rem;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:8px} .mm-h svg{width:15px;height:15px;color:var(--accent)} .mm-b{padding:16px;display:flex;flex-direction:column;gap:11px} /* compliance checklist mock */ .chkline{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;background:var(--mock-surface);border:1px solid var(--border);font-size:.84rem} .chkline .d{width:20px;height:20px;border-radius:6px;background:var(--success);color:#fff;display:grid;place-items:center;flex-shrink:0} .chkline .d svg{width:12px;height:12px} .chkline .muted{margin-left:auto;color:var(--text-faint);font-size:.72rem} /* reminder timeline mock */ .tl{position:relative;padding-left:22px} .tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border-strong)} .tl-item{position:relative;padding:7px 0;display:flex;gap:10px;align-items:center} .tl-item::before{content:"";position:absolute;left:-19px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)} .tl-item.done::before{background:var(--accent)} .tl-item .t{font-size:.8rem;font-weight:600;width:62px;flex-shrink:0;color:var(--text-muted)} .tl-item .x{font-size:.82rem;color:var(--text)} /* SIREN autofill mock */ .field{background:var(--mock-surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:.84rem} .field.lbl-up{position:relative} .field small{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-bottom:3px;font-weight:600} .field.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .autofill-row{display:flex;gap:7px;align-items:center;font-size:.74rem;color:var(--success);font-weight:600} .autofill-row svg{width:13px;height:13px} /* ---------- How it works ---------- */ .steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .step{position:relative;padding:28px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card)} .step .n{font-family:var(--font-display);font-weight:var(--display-weight);font-size:1.05rem;width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center;margin-bottom:18px} .step h3{font-size:1.18rem;margin-bottom:8px} .step p{font-size:.96rem;color:var(--text-muted)} /* ---------- Benefits ---------- */ .benefit{display:flex;gap:16px;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card)} .benefit .bic{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)} .benefit .bic svg{width:21px;height:21px} .benefit h3{font-size:1.1rem;margin-bottom:5px} .benefit p{font-size:.92rem;color:var(--text-muted);line-height:1.5} /* ---------- Use cases ---------- */ .uc{padding:26px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card);transition:transform .2s,border-color .2s} .uc:hover{transform:translateY(-3px);border-color:var(--accent-line)} .uc .tag{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:999px;margin-bottom:16px} .uc .tag svg{width:14px;height:14px} .uc h3{font-size:1.18rem;margin-bottom:9px} .uc p{font-size:.94rem;color:var(--text-muted);margin-bottom:14px} .uc ul{display:flex;flex-direction:column;gap:8px} .uc li{display:flex;gap:9px;font-size:.9rem;color:var(--text-muted)} .uc li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:2px} /* ---------- Comparison ---------- */ .cmp{border-radius:20px;border:1px solid var(--border);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-card)} .cmp-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr} .cmp-cell{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:.96rem} .cmp-grid>.cmp-cell:nth-last-child(-n+3){border-bottom:0} .cmp-head{font-weight:700;font-size:1rem;align-items:flex-start;flex-direction:column;gap:4px} .cmp-head .sm{font-size:.78rem;font-weight:500;color:var(--text-faint)} .cmp-col-old{background:color-mix(in oklab,var(--warn) 7%,transparent)} .cmp-col-new{background:var(--accent-soft)} .cmp-feat{color:var(--text-muted);font-weight:500} .cmp-cell .ic-x{color:var(--warn)} .cmp-cell .ic-v{color:var(--success)} .cmp-cell svg{width:18px;height:18px;flex-shrink:0} .cmp-new-val{font-weight:600;color:var(--text)} /* ---------- Trust ---------- */ .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tcard{padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-card)} .tcard .tic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:14px} .tcard .tic svg{width:20px;height:20px} .tcard h3{font-size:1.04rem;margin-bottom:6px} .tcard p{font-size:.9rem;color:var(--text-muted);line-height:1.5} /* ---------- Pricing ---------- */ /* Center-stage composition: the price-card stops being half of a two-column grid and becomes the single object hanging in the middle of the section. The "assure" block (3 reassurance lines) becomes a footnote-row beneath the card — quiet, not loud. The price itself is a magazine numeral: huge, Spectral-thin, tabular-nums, gold-tinted. */ .price-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(36px,5vw,56px)} .price-card{ position:relative;width:100%;max-width:560px; padding:48px clamp(28px,5vw,52px);border-radius:22px; background:var(--surface);border:1px solid var(--border-strong); box-shadow:0 36px 80px -44px rgba(0,0,0,.55); overflow:hidden; } .price-card::before{ content:"";position:absolute;inset:0; background:radial-gradient(82% 56% at 50% 0%,var(--accent-soft),transparent 70%); pointer-events:none; } .price-card::after{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); } .price-card > *{position:relative} .price-card .ribbon{ position:absolute;top:18px;right:18px; display:inline-flex;align-items:center;gap:6px; font-size:.7rem;font-weight:600;color:var(--gold); background:var(--gold-soft);padding:5px 11px;border-radius:999px; letter-spacing:.06em;text-transform:uppercase; } .price-card .ribbon svg{width:13px;height:13px} .price-amt{ display:flex;align-items:baseline;justify-content:center;gap:10px; margin:6px 0 4px; } .price-amt b{ /* v3.8 — switched from Spectral italic (serif) to Hanken Grotesk (sans) per request. Tighter scale, heavy weight keeps the numeral commanding without the editorial flourish. */ font-family:var(--font-display),ui-sans-serif,system-ui,sans-serif; font-style:normal; font-weight:800; font-size:clamp(2.6rem,5.2vw,3.6rem); letter-spacing:-0.04em;line-height:1; color:var(--text); font-variant-numeric:tabular-nums; } .price-amt span{color:var(--text-muted);font-size:1.05rem;font-weight:500} .price-foot{ font-size:.72rem;color:var(--text-faint);text-align:center; text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;font-weight:600; } /* Daily-cost anchor — read as gold "by the way" line, not as body copy */ [data-testid="price-anchor"]{ text-align:center;color:var(--gold) !important; font-family:var(--font-editorial),Georgia,serif; font-style:italic;font-weight:500; font-size:.95rem !important;letter-spacing:0; } .price-list{display:flex;flex-direction:column;gap:11px;margin:24px 0 28px} .price-list li{display:flex;gap:11px;align-items:flex-start;font-size:.98rem} .price-list .ck{width:22px;height:22px;border-radius:7px;background:var(--accent);color:var(--accent-contrast);display:grid;place-items:center;flex-shrink:0;margin-top:1px} .price-list .ck svg{width:13px;height:13px} /* Assure block — becomes a horizontal footnote row, centered, hairline rule above. */ .price-side{ width:100%;max-width:880px; border-top:1px solid var(--border);padding-top:28px; } .price-side h2{display:none} .price-side .lead{ text-align:center;font-size:.95rem;color:var(--text-muted); margin:0 auto 22px;max-width:60ch; } .price-assure{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; text-align:center; } .price-assure li{ display:flex;flex-direction:column;align-items:center;gap:8px; font-size:.86rem;color:var(--text-muted);line-height:1.5; } .price-assure svg{width:18px;height:18px;color:var(--success)} .price-assure b{color:var(--text);font-weight:600;display:block;font-size:.92rem;margin-bottom:2px} @media (max-width:760px){ .price-assure{grid-template-columns:1fr;gap:20px;text-align:left} .price-assure li{flex-direction:row;align-items:flex-start;gap:12px} .price-card .ribbon{position:static;margin-bottom:18px} } /* ---------- Public page — "mirror" composition ---------- The browser mock becomes a central theatrical object. Two hairline labels flank it: "VOUS" on the left, "VOTRE CLIENT" on the right, each with a thin arrow toward the mock. This frames the section as a single act rather than a copy/mock grid. Container class .public-stage is applied via a wrapper around the mock in +page.svelte. */ .public-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:18px} .public-stage .pmark{ display:flex;flex-direction:column;align-items:center;gap:8px; font-family:var(--font-body);font-size:.66rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint); flex-shrink:0; } .public-stage .pmark.left::after, .public-stage .pmark.right::after{ content:"";display:block;width:32px;height:1px;background:var(--border-strong);position:relative; } .public-stage .pmark.left::after{margin-top:6px} .public-stage .pmark.right::after{margin-top:6px} .public-stage .pmark .pdot{ width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } .public-stage > [data-testid="public-mock"]{flex:0 1 760px} @media (max-width:880px){ .public-stage{flex-direction:column;gap:14px} .public-stage .pmark{flex-direction:row} .public-stage .pmark.left::after, .public-stage .pmark.right::after{display:none} } /* ---------- FAQ ---------- */ /* Editorial column: narrow (640px), hairline separators only — no card chrome. The chevron becomes a "+ → ×" hairline that rotates on open, the kind of minimal accordion you see on premium product pages (Linear, Stripe). */ .faq{max-width:640px;margin-inline:auto} .faq-item{border-bottom:1px solid var(--border)} .faq-item:first-child{border-top:1px solid var(--border)} .faq-q{ width:100%;display:flex;align-items:center;gap:16px;padding:24px 4px; cursor:pointer;background:none;border:0;text-align:left; font-family:var(--font-body);font-weight:500;font-size:1.04rem; color:var(--text);letter-spacing:-0.01em;line-height:1.4; transition:color .2s ease; } .faq-q:hover{color:var(--accent)} .faq-q .chev{ margin-left:auto;flex-shrink:0;width:14px;height:14px; position:relative;color:var(--text-faint); } .faq-q .chev svg{display:none} .faq-q .chev::before, .faq-q .chev::after{ content:"";position:absolute;background:currentColor; transition:transform .35s cubic-bezier(.2,.7,.25,1),background .2s ease; } .faq-q .chev::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)} .faq-q .chev::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)} .faq-item.open .faq-q{color:var(--accent)} .faq-item.open .faq-q .chev{color:var(--accent)} .faq-item.open .faq-q .chev::after{transform:translateX(-50%) rotate(90deg);opacity:0} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.7,.25,1)} .faq-a-in{padding:0 4px 26px;color:var(--text-muted);font-size:.97rem;line-height:1.7;max-width:60ch} /* ---------- Final CTA ---------- v3.8 premium frame. The "quiet exit" was readable but disappeared into the page. Now the final card is wrapped in an editorial frame: - thin gold/indigo gradient border - deep multi-layer shadow + golden ambient glow - hairline corner brackets (L-shapes top-left/top-right/bottom- left/bottom-right) in pure gold — magazine-cover detail - inner radial vignette (indigo top, gold bottom) Type and CTA stay quiet so the frame does the loud work. */ .final{position:relative;overflow:hidden;padding-block:clamp(80px,12vw,160px)} .final-card{ position:relative;text-align:center; width:100%;margin-inline:auto; padding:clamp(64px,8vw,112px) clamp(36px,5vw,80px); border-radius:28px; background: radial-gradient(80% 70% at 50% 0%, color-mix(in oklab,var(--accent) 14%,transparent) 0%, transparent 65%), radial-gradient(80% 75% at 50% 100%, color-mix(in oklab,var(--gold) 12%,transparent) 0%, transparent 70%), linear-gradient(180deg, color-mix(in oklab,var(--surface) 75%,transparent), color-mix(in oklab,var(--surface) 35%,transparent)); border:1px solid var(--border-strong); box-shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 -1px 0 oklch(1 0 0 / .02) inset, 0 0 0 1px var(--gold-soft) inset, 0 48px 120px -40px rgba(0,0,0,.7), 0 24px 50px -30px var(--gold-soft), 0 12px 36px -24px var(--accent-soft); } /* Gradient hairline overlay (indigo → gold → indigo) along the top edge — the kind of detail you see on premium award badges. */ .final-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; border-top-left-radius:28px;border-top-right-radius:28px; background:linear-gradient(90deg,transparent 5%,var(--accent-line) 30%,var(--gold-line) 50%,var(--accent-line) 70%,transparent 95%); pointer-events:none; } .final-card::after{display:none} .final-card .eyebrow{position:relative;justify-content:center;margin-bottom:22px;color:var(--gold)} .final-card h2{ position:relative;font-size:clamp(2.2rem,4.4vw,3.2rem); margin:0 auto 22px;letter-spacing:-0.025em; /* Anchor H2 to a comfortable 2-line shape regardless of how wide the surrounding card grows. Balance keeps line lengths even. */ max-width:28ch;text-wrap:balance;line-height:1.1; } .final-card .lead{position:relative;margin-inline:auto;margin-bottom:34px;font-size:1.04rem;max-width:50ch} .final-card .hero-cta{position:relative;justify-content:center;margin-bottom:20px} .final-card .micro{position:relative;font-size:.82rem;color:var(--text-faint);display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;letter-spacing:.02em} .final-card .micro li{display:flex;align-items:center;gap:7px} .final-card .micro svg{width:14px;height:14px;color:var(--success)} /* ---------- Footer ---------- */ /* Footer — same body bg as the rest, just a hairline rule at the top with the editorial gold shimmer to match the section--rule pattern. */ .ftr{ position:relative;background:transparent; border-top:1px solid var(--border);padding-block:52px 34px; } .ftr::before{ content:"";position:absolute;left:50%;top:-1px; width:180px;height:1px;transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold-line),transparent); pointer-events:none; } .ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px} .ftr-brand p{font-size:.92rem;color:var(--text-muted);margin-top:14px;max-width:30ch} .ftr-col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:700;margin-bottom:14px;font-family:var(--font-body)} .ftr-col a{display:block;padding:5px 0;font-size:.94rem;color:var(--text-muted);transition:color .15s} .ftr-col a:hover{color:var(--text)} .ftr-bot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);font-size:.86rem;color:var(--text-faint)} .ftr-bot .made{display:flex;align-items:center;gap:8px} .ftr-bot .made svg{width:16px;height:16px;color:var(--accent)} .ftr-bot .sp{margin-left:auto} /* ---------- Hero mock — staged entrance ---------- After page load, the hero dashboard "builds itself" in front of the visitor: header → reform banner → invoice rows → Peppol pill, each sliding up + fading in with a 180ms cadence. Uses animation-fill-mode: backwards so SSR / no-JS users see the mock fully rendered (the .in class is added by JS in onMount). */ @keyframes mockStageIn{ from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(6px)} to{opacity:1;transform:none;filter:none} } @keyframes mockFloatIn{ /* the Peppol pill enters with a slight scale-pop and a green flash instead of a plain slide-up, so it reads as a "notification" */ 0%{opacity:0;transform:translateY(20px) scale(.7);filter:blur(8px)} 60%{opacity:1;transform:translateY(-4px) scale(1.06);filter:none} 100%{opacity:1;transform:none} } .hero-staged.in > .mock-bar, .hero-staged.in > .mock-body > .mock-reform, .hero-staged.in > .mock-body > .mock-row{ animation:mockStageIn 1.05s cubic-bezier(.2,.75,.25,1) backwards; } .hero-staged.in > .mock-float{ animation:mockFloatIn 1.15s cubic-bezier(.2,.7,.3,1.05) backwards; } .hero-staged.in > .mock-bar{animation-delay:120ms} .hero-staged.in > .mock-body > .mock-reform{animation-delay:360ms} .hero-staged.in > .mock-body > .mock-row:nth-child(2){animation-delay:600ms} .hero-staged.in > .mock-body > .mock-row:nth-child(3){animation-delay:840ms} .hero-staged.in > .mock-body > .mock-row:nth-child(4){animation-delay:1080ms} .hero-staged.in > .mock-float{animation-delay:1400ms} @media (prefers-reduced-motion:reduce){ .hero-staged.in > .mock-bar, .hero-staged.in > .mock-body > .mock-reform, .hero-staged.in > .mock-body > .mock-row, .hero-staged.in > .mock-float{animation:none} } /* ---------- Scroll progress bar ---------- Hairline 2px line under the sticky header, scaleX driven by JS. --lp-progress var is set on on each scroll tick. */ .lp-progress{ position:fixed;left:0;right:0;top:0;height:2px;z-index:90; background:linear-gradient(90deg,var(--accent) 0%,var(--gold) 100%); transform-origin:left; transform:scaleX(var(--lp-progress,0)); transition:transform .12s linear; pointer-events:none; } @media (prefers-reduced-motion:reduce){.lp-progress{transition:none}} /* ---------- Section indicator dots ---------- Vertical list of small dots on the desktop, right side. Active dot grows + uses accent. Click jumps to the section. Hidden on mobile. */ .lp-dots{ position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:80; display:flex;flex-direction:column;gap:11px; padding:14px 8px;border-radius:999px; background:color-mix(in oklab,var(--surface) 75%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid var(--border); } .lp-dots button{ appearance:none;border:0;cursor:pointer;background:transparent; width:18px;height:18px;display:grid;place-items:center;padding:0; } .lp-dots .ddot{ width:6px;height:6px;border-radius:50%; background:var(--text-faint);opacity:.45; transition:transform .25s ease,background .25s ease,opacity .25s ease,width .25s ease,height .25s ease; } .lp-dots button:hover .ddot{opacity:1;background:var(--text-muted)} .lp-dots button[aria-current="true"] .ddot{ width:9px;height:9px;background:var(--accent);opacity:1; box-shadow:0 0 0 4px var(--accent-soft); } @media (max-width:1100px){.lp-dots{display:none}} /* ---------- Magnetic CTA ---------- */ .btn.lp-magnetic{transition:transform .2s cubic-bezier(.2,.7,.25,1),background .2s ease,box-shadow .2s ease} @media (prefers-reduced-motion:reduce){.btn.lp-magnetic{transform:none !important}} /* ---------- Count-up numerals ---------- The count-up span lives inside the magazine price , which sets a clamp(5rem,12vw,7.5rem) Spectral italic numeral. Tailwind v4 preflight resets root font-size etc., so we force the span to actually pick up the parent typography explicitly. */ .price-amt b .lp-count{ font-family:inherit !important; font-size:inherit !important; font-weight:inherit !important; font-style:inherit !important; letter-spacing:inherit !important; line-height:inherit !important; color:inherit !important; font-variant-numeric:tabular-nums; } /* ---------- Reveal animation ---------- Content stays visible by default — SSR, no-JS, and full-page screenshot tools render every section correctly. The .in class, added by the IntersectionObserver in +page.svelte the first time a section crosses the viewport, plays the fade-up via a keyframe animation rather than gating the initial opacity. */ .reveal.in{animation:revealIn .7s cubic-bezier(.2,.7,.3,1) both} /* Stagger uses a JS-set CSS var (--lp-stagger) so siblings inside a grid animate one after another with a smooth 70ms cadence, the visual signature of designed pages (Linear, Vercel). Falls back to the older static delays. */ .reveal.in{animation-delay:calc(var(--lp-stagger,0) * 70ms)} .reveal.in.d1{animation-delay:.08s} .reveal.in.d2{animation-delay:.16s} .reveal.in.d3{animation-delay:.24s} .reveal.in.d4{animation-delay:.32s} @keyframes revealIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.reveal.in,.reveal.in.d1,.reveal.in.d2,.reveal.in.d3,.reveal.in.d4{animation:none}} /* ---------- Responsive ---------- */ @media (max-width:1000px){ .hero-in{grid-template-columns:1fr;gap:44px} .hero .mock{transform:none} .hero-sub{max-width:46ch} .price-wrap{grid-template-columns:1fr;gap:34px} .frow,.frow.flip{grid-template-columns:1fr;gap:28px} .frow.flip .frow-media{order:0} .grid-4{grid-template-columns:repeat(2,1fr)} } /* Header collapses to burger earlier than the body-content breakpoint: brand + 4 nav links + lang toggle + login + primary CTA already crowd themselves below ~1000px. Keeping the burger collapse at the old 760 threshold left tablets (768/810) with a header that overflowed the viewport. */ @media (max-width:1000px){ .nav, .hdr .login, .hdr .btn-ghost.login, .hdr-right > .btn-primary{display:none} .hdr-in{gap:12px} .hdr-right{gap:8px} .burger{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer} .burger svg{width:20px;height:20px} } @media (max-width:760px){ body{font-size:16px} .grid-2,.grid-3,.grid-4,.steps,.trust-grid{grid-template-columns:1fr} .cmp-grid{grid-template-columns:1.3fr .85fr .85fr} .cmp-cell{padding:13px 12px;font-size:.84rem} .cmp-head{font-size:.9rem} .cd-units{margin-left:0;width:100%} .countdown{flex-direction:column;align-items:flex-start} .hero-cta .btn{flex:1} .mock-float{display:none} /* Footer 4-col grid collapses to 2 cols on mobile — the third/fourth columns were overflowing the viewport at 375px. Brand block spans the full row, link columns stack 2×2 underneath. */ .ftr-top{grid-template-columns:1fr 1fr;gap:24px 20px} .ftr-brand{grid-column:1 / -1} /* Public-page mock — flex-basis:760 stays wider than the mobile viewport when the parent stacks vertically. Cap it so the URL bar and invoice mock shrink to whatever space we have. */ /* `style="max-width:760px"` is set inline on the mock div, so beat it with !important — without this the mock keeps overflowing the 375px viewport when the stage stacks vertically. */ .public-stage > [data-testid="public-mock"]{flex:1 1 auto;max-width:100% !important;min-width:0;width:100%} } /* Mobile nav drawer */ .mnav{position:fixed;inset:0;z-index:200;background:color-mix(in oklab,var(--bg) 94%,transparent);backdrop-filter:blur(8px);display:none;flex-direction:column;padding:24px} .mnav.open{display:flex} .mnav-top{display:flex;align-items:center;justify-content:space-between;height:46px;margin-bottom:24px} .mnav-close{width:42px;height:42px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer} .mnav-close svg{width:20px;height:20px} .mnav a{font-family:var(--font-display);font-weight:var(--display-weight);font-size:1.6rem;padding:14px 0;border-bottom:1px solid var(--border);color:var(--text)} .mnav .btn{margin-top:24px}