/* Public site: the landing page and the legal pages. */ :root { --paper: #F8F6F1; --card: #FFFFFF; --ink: #22212B; --ink-soft: #6B6875; --stamp: #C13A22; --stamp-ink: #A82F19; --stamp-soft: #F6E3DC; --line: #E4E0D6; --pass-bg: #2B2A35; --pass-ink: #F4F2EA; --shadow: 0 18px 50px rgba(34,33,43,.14); /* Customer segments, in the same hues the dashboard gives them: the pills on this page are the ones the merchant will actually see. */ --good: #2E7D4F; --good-soft: #DDEEE3; --warn: #9A6B15; --warn-soft: #F4E8D2; --royal: #63479B; --royal-soft: #E9E1F5; --slate: #55535E; --slate-soft: #E7E5E0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #191820; --card: #211F2A; --ink: #ECEAE2; --ink-soft: #A5A2AE; --stamp: #E86A4E; --stamp-ink: #EF8168; --stamp-soft: #3A2620; --line: #312F3B; --shadow: 0 18px 50px rgba(0,0,0,.45); --good: #6FBE8F; --good-soft: #1F3328; --warn: #D9A954; --warn-soft: #38301C; --royal: #BAA0E4; --royal-soft: #2B2339; --slate: #B4B1BC; --slate-soft: #2A2833; } } /* The same palette, for a visitor who asked for it explicitly rather than through their system. Repeated because CSS has no way to reuse a block of declarations under a second selector — keep the two in step. */ :root[data-theme="dark"] { --paper: #191820; --card: #211F2A; --ink: #ECEAE2; --ink-soft: #A5A2AE; --stamp: #E86A4E; --stamp-ink: #EF8168; --stamp-soft: #3A2620; --line: #312F3B; --shadow: 0 18px 50px rgba(0,0,0,.45); --good: #6FBE8F; --good-soft: #1F3328; --warn: #D9A954; --warn-soft: #38301C; --royal: #BAA0E4; --royal-soft: #2B2339; --slate: #B4B1BC; --slate-soft: #2A2833; } /* Apparence, offered in the footer: the public site follows the visitor's system until they say otherwise, and then it remembers. */ .theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); vertical-align: middle; } .theme-toggle button { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; padding: 5px 12px; border-radius: 999px; } .theme-toggle button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); } .theme-toggle button:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; } .foot-end { display: inline-flex; align-items: center; gap: 12px; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } .serif { font-family: ui-serif, "New York", Georgia, "Times New Roman", serif; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } a { color: inherit; } nav.main { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.15rem; text-decoration: none; } .logo-punch { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--stamp); position: relative; flex: none; } .logo-punch::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--stamp); } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { text-decoration: none; color: var(--ink-soft); font-size: .95rem; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); } .nav-links a.btn-primary, .nav-links a.btn-primary:hover, .nav-links a.btn-primary:focus-visible { color: #FFF8F5; } .btn { display: inline-block; text-decoration: none; border-radius: 999px; padding: 12px 26px; font-weight: 600; font-size: .95rem; border: 1.5px solid transparent; cursor: pointer; } .btn-primary { background: var(--stamp); color: #FFF8F5; } .btn-primary:hover { background: var(--stamp-ink); } .btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; } .btn-ghost:hover { border-color: var(--ink-soft); } a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; } .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 64px 0 88px; } h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.08; font-weight: 500; margin: 0 0 22px; text-wrap: balance; letter-spacing: -.01em; } h1 em { font-style: italic; color: var(--stamp); } .lede { color: var(--ink-soft); font-size: 1.13rem; max-width: 34em; margin: 0 0 32px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero-note { color: var(--ink-soft); font-size: .85rem; margin-top: 14px; } .wallet-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; } .wallet-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 15px 6px 9px; font-size: .84rem; font-weight: 600; } .wallet-chip svg { width: 22px; height: 22px; flex: none; } /* In the hero the chips sit above a left-aligned headline; in the closing section everything is centred and they have to follow. */ .final .wallet-row { justify-content: center; margin: 30px 0 0; } .phone-zone { position: relative; display: flex; justify-content: center; padding: 54px 8px 28px; } .phone-zone::before { content: ""; position: absolute; inset: 10% -6% 0; background: radial-gradient(105% 90% at 55% 42%, var(--stamp-soft) 0%, transparent 74%); border-radius: 44px; z-index: 0; } .phone-zone .iphone { position: relative; z-index: 1; } /* Struck across the top of the phone, the way a notification actually arrives on it — the one thing a paper card can never do. */ .notif { position: absolute; top: 0; right: -6px; z-index: 3; width: min(310px, 88%); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 13px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: flex-start; transform: rotate(1.5deg); } .notif-icon { width: 34px; height: 34px; border-radius: 9px; flex: none; background: var(--stamp); color: #FFF8F5; display: grid; place-items: center; font-weight: 700; font-size: 1rem; font-family: ui-serif, Georgia, serif; } .notif b { display: block; font-size: .84rem; } .notif span { font-size: .82rem; color: var(--ink-soft); display: block; line-height: 1.4; } .notif time { font-size: .68rem; color: var(--ink-soft); margin-left: auto; flex: none; } /* section.wrap: .wrap's padding shorthand outranks a bare `section` selector and would zero out the vertical rhythm. */ section.wrap { padding-block: 88px; } .section-line { border-top: 1px solid var(--line); } .kicker { color: var(--stamp); margin-bottom: 14px; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 500; line-height: 1.15; margin: 0 0 14px; text-wrap: balance; letter-spacing: -.01em; } .sub { color: var(--ink-soft); max-width: 42em; margin: 0 0 44px; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; } .step-num { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--stamp); color: var(--stamp); display: grid; place-items: center; font-weight: 700; font-size: .9rem; margin-bottom: 16px; font-family: ui-monospace, Menlo, monospace; transform: rotate(-6deg); } .step h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 600; } .step p { margin: 0; color: var(--ink-soft); font-size: .93rem; } .band { background: var(--pass-bg); color: var(--pass-ink); border-radius: 22px; padding: 52px 48px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .band h2 { color: var(--pass-ink); } .band p { color: rgba(244,242,234,.72); margin: 0; } .band-compare { display: grid; gap: 18px; } .compare-row { display: grid; gap: 6px; } .compare-label { display: flex; justify-content: space-between; font-size: .85rem; } .compare-label b { font-variant-numeric: tabular-nums; } .compare-track { height: 10px; border-radius: 5px; background: rgba(244,242,234,.14); overflow: hidden; } .compare-fill { height: 100%; border-radius: 5px; background: var(--stamp); } .compare-fill.dim { background: rgba(244,242,234,.45); } /* The same badges the client list uses, so the promise and the product match. */ .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: .74rem; font-weight: 600; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.sent { background: var(--good-soft); color: var(--good); } .pill.progress { background: var(--warn-soft); color: var(--warn); } .pill.royal { background: var(--royal-soft); color: var(--royal); } .pill.slate { background: var(--slate-soft); color: var(--slate); } /* What the dashboard tells a shopkeeper, shown rather than claimed. */ .proof { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .proof-lead { font-size: 1.02rem; margin: 0 0 18px; } .proof-list { margin: 0; padding-left: 20px; color: var(--ink-soft); } .proof-list li { margin-bottom: 10px; font-size: .94rem; line-height: 1.55; } .proof-panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; } .proof-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; } .proof-stats div { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .proof-stats span { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .proof-stats b { font-size: 1.6rem; font-weight: 600; } .proof-segments { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; } .proof-segments div { display: flex; justify-content: space-between; align-items: center; } .proof-segments b { font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .proof { grid-template-columns: 1fr; gap: 28px; } } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feature { border-top: 2px solid var(--line); padding-top: 18px; } .feature .mono { color: var(--stamp); display: block; margin-bottom: 8px; } .feature h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 600; } .feature p { margin: 0; color: var(--ink-soft); font-size: .92rem; } .billing-switch { display: flex; margin: 0 0 26px; } .billing-switch .seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .billing-switch button { font: inherit; font-size: .92rem; border: 0; background: transparent; color: var(--ink-soft); padding: 8px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .billing-switch button[aria-pressed="true"] { background: var(--stamp); color: #FFF8F5; } .billing-switch button:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; } .seg-save { font-family: ui-monospace, Menlo, monospace; font-size: .68rem; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--stamp-soft); color: var(--stamp); } .billing-switch button[aria-pressed="true"] .seg-save { background: rgba(255,255,255,.22); color: inherit; } /* Pushed to the bottom of the card by its own auto margin: the list keeps its natural height, and what is left over sits between the features and the purchase note rather than above a stranded button. */ .plan-billing { margin: auto 0 14px; font-size: .8rem; color: var(--ink-soft); } .plan.soon { opacity: .72; } .plan-flag.soon-flag { background: var(--slate); } .btn.is-soon { cursor: default; color: var(--ink-soft); border-style: dashed; } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; display: flex; flex-direction: column; position: relative; } .plan.featured { border: 2px solid var(--stamp); box-shadow: var(--shadow); } .plan-flag { position: absolute; top: -13px; left: 24px; background: var(--stamp); color: #FFF8F5; border-radius: 999px; padding: 4px 14px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; } .plan h3 { margin: 0 0 4px; font-size: 1.05rem; } .plan-for { color: var(--ink-soft); font-size: .85rem; margin: 0 0 20px; } .price { font-family: ui-serif, Georgia, serif; font-size: 2.4rem; font-weight: 500; line-height: 1; } .price small { font-size: .95rem; color: var(--ink-soft); font-family: system-ui, sans-serif; } /* align-content: start is not cosmetic — the list is a grid that flex: 1 stretches to the bottom of the card, so without it a short list has its rows spread apart instead of packed under the heading. */ .plan ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; align-content: start; } /* "Tout Comptoir, plus :" — what follows is the difference, so it reads darker than a plain feature line and the list starts right under it. */ .plan-inherits { margin: 22px 0 0; font-size: .88rem; font-weight: 600; color: var(--ink); } .plan-inherits + ul { margin-top: 12px; } .plan-inherits + ul li { color: var(--ink); } .plan li { padding-left: 24px; position: relative; font-size: .92rem; color: var(--ink-soft); } .plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--stamp); font-weight: 700; } .plan .btn { text-align: center; } .faq { max-width: 720px; } details { border-top: 1px solid var(--line); padding: 4px 0; } details:last-of-type { border-bottom: 1px solid var(--line); } summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: .98rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--stamp); font-size: 1.3rem; font-weight: 400; flex: none; } details[open] summary::after { content: "–"; } details p { margin: 0 0 18px; color: var(--ink-soft); font-size: .93rem; max-width: 60ch; } .final { text-align: center; padding-block: 100px 110px; } .final h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 16px; } .final .sub { margin: 0 auto 34px; } footer.main { border-top: 1px solid var(--line); padding: 30px 0 44px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--ink-soft); font-size: .85rem; } footer.main .logo { font-size: 1rem; color: var(--ink); } footer.main .logo .logo-punch { width: 20px; height: 20px; border-width: 2px; } footer.main .logo .logo-punch::after { inset: 4px; } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding: 40px 0 64px; } .phone-zone { margin-top: 30px; } .steps, .features, .plans { grid-template-columns: 1fr; } .band { grid-template-columns: 1fr; padding: 36px 28px; } .nav-links a:not(.btn) { display: none; } } /* The marketing layout is where sign-out and account deletion land, so it has to be able to show a flash message. */ .flash { max-width: 1080px; margin: 16px auto 0; padding: 12px 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--stamp); font-size: .92rem; } /* Legal pages: long-form prose, narrow measure for readability. */ .legal { max-width: 46em; padding: 40px 0 72px; } .legal h1 { font-family: ui-serif, "New York", Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 0 0 6px; } .legal .legal-date { color: var(--ink-soft); font-size: .85rem; margin: 0 0 34px; } .legal h2 { font-size: 1.18rem; margin: 38px 0 10px; scroll-margin-top: 20px; } .legal h3 { font-size: 1rem; margin: 22px 0 6px; font-weight: 600; } .legal p, .legal li { color: var(--ink-soft); font-size: .95rem; } .legal p { margin: 0 0 12px; } .legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; } .legal strong { color: var(--ink); } .legal a { color: var(--stamp); } .legal table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .9rem; } .legal th, .legal td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); } .legal th { color: var(--ink); font-weight: 600; } .legal .table-wrap { overflow-x: auto; } /* Anything still marked "À COMPLÉTER" must be impossible to miss. */ .todo { background: var(--stamp-soft); color: var(--stamp-ink); border-radius: 5px; padding: 1px 7px; font-weight: 600; } .legal-toc { border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 30px; background: var(--card); } .legal-toc ol { margin: 0; } .legal-toc a { color: var(--ink-soft); text-decoration: none; } .legal-toc a:hover { color: var(--stamp); } .legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 44px; font-size: .88rem; } .legal-nav a { color: var(--ink-soft); text-decoration: none; } .legal-nav a:hover { color: var(--stamp); } footer.main .foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; } footer.main .foot-links a { text-decoration: none; } footer.main .foot-links a:hover { color: var(--stamp); } /* ---------- Small phones ---------- */ @media (max-width: 560px) { .wrap { padding: 0 16px; } section.wrap { padding-block: 56px; } .hero { padding: 28px 0 48px; gap: 30px; } .lede { font-size: 1.04rem; margin-bottom: 26px; } .hero-ctas .btn { flex: 1; text-align: center; } /* The notification overlaps the phone on a narrow screen, so it drops into the flow above it instead. */ .phone-zone { flex-direction: column; align-items: center; padding: 0; } .phone-zone::before { inset: 6% -10% 0; } .notif { position: static; width: 100%; transform: none; margin-bottom: 16px; } .phone-zone .iphone { zoom: .84; } .step, .plan { padding: 22px 20px; } .band { padding: 28px 20px; border-radius: 16px; } .final { padding-block: 64px 72px; } .sub { margin-bottom: 30px; } .nav-links { gap: 12px; } nav.main { padding: 16px 0; } } @media (prefers-reduced-motion: no-preference) { .notif { animation: drop .7s ease .3s both; } @keyframes drop { from { opacity: 0; transform: translateY(-14px) rotate(1.5deg); } to { opacity: 1; transform: translateY(0) rotate(1.5deg); } } } /* ---------- Signup ---------- The product is called Poinçon, so the form is a punch card: three sections divided by cut-lines, each headed by a punch that fills in once its fields are answered. The card on the right is the real thing, carrying the merchant's own name and reward as they type. Laid out to fit a laptop screen without scrolling — fields are paired and the plans sit side by side rather than stacked. */ .signup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0; align-items: start; padding: 20px 0 36px; } /* min-width: 0 — without it the grid item refuses to shrink below the widest thing inside it, and the submit label alone is wider than a phone. */ .signup-form { min-width: 0; padding-right: 54px; border-right: 1.5px dashed var(--line); } .signup-form h1 { font-size: clamp(1.8rem, 3vw, 2.35rem); margin-bottom: 10px; } .signup-lede { color: var(--ink-soft); font-size: .98rem; margin: 0 0 22px; max-width: 32em; } .signup-have-account { color: var(--ink-soft); font-size: .95rem; } /* A section of the card. The rule between them is a cut-line, not a border. */ .signup-section + .signup-section { border-top: 1.5px dashed var(--line); margin-top: 18px; padding-top: 18px; } .signup-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .signup-step .kicker { margin: 0; } /* The same mark as the logo: an empty ring that takes the ink once the section is answered. */ .signup-punch { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--line); position: relative; flex: none; transition: border-color .18s ease; } .signup-punch::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--stamp); transform: scale(0); transition: transform .18s ease; } .signup-punch.is-done { border-color: var(--stamp); } .signup-punch.is-done::after { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .signup-punch, .signup-punch::after { transition: none; } } .signup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { margin-bottom: 0; } .field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; } .field input, .signup select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-size: .95rem; font-family: inherit; background: var(--card); color: var(--ink); } .field input::placeholder { color: var(--ink-soft); opacity: .65; } .field input:focus-visible, .signup select:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; border-color: transparent; } .field-note { font-size: .8rem; color: var(--ink-soft); margin: 7px 0 0; } .field-inline { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: .85rem; } .field-inline label { margin: 0; line-height: 1.5; } .field-inline input { margin-top: 3px; flex: none; accent-color: var(--stamp); width: 16px; height: 16px; } /* Three tiers side by side: the price is the only number that matters here, and a dropdown hid it. Set in the utility face — it is data, not prose. */ .plan-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .plan-option { display: grid; align-content: start; gap: 4px; cursor: pointer; position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 15px 14px; } .plan-option:hover { border-color: var(--ink-soft); } .plan-option:has(input:checked) { border-color: var(--stamp); background: var(--stamp-soft); } .plan-option:has(input:focus-visible) { outline: 2px solid var(--stamp); outline-offset: 2px; } .plan-option input { position: absolute; opacity: 0; pointer-events: none; } .plan-option-name { font-weight: 600; font-size: .93rem; display: flex; align-items: center; gap: 7px; } .plan-option-name::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 1.8px solid var(--line); flex: none; } .plan-option:has(input:checked) .plan-option-name::before { border-color: var(--stamp); background: var(--stamp); box-shadow: inset 0 0 0 2.5px var(--card); } .plan-option-for { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; min-height: 2.7em; } .plan-option-price { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600; } .plan-option-price small { font-weight: 400; color: var(--ink-soft); font-size: .72rem; margin-left: 2px; } /* A