/* CONVXA — shared page system, Appendix C "fiche technique". --------------------------------------------------------------------------- Extracted from cvx-home.css so every public page uses ONE system instead of each template carrying its own chrome. cvx-home.css now holds only the home-specific blocks (hero, facts, cats, steps, credit); the homepage loads both files, so their union is exactly what it had before. Tokens come from cvx-tokens.css — this file must contain ZERO hardcoded hex (grep-proofed, §7). Logical properties throughout (§4) so one sheet serves LTR and RTL without a second stylesheet. Load order on a page: cvx-tokens.css → cvx-page.css → [page-specific].css */ /* ── Base ────────────────────────────────────────────────────────────── */ .cvx{ margin:0; background:var(--cvx-ground); color:var(--cvx-ink); font-family:var(--cvx-font-latin); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .cvx *,.cvx *::before,.cvx *::after{ box-sizing:border-box; } .cvx img{ max-width:100%; display:block; } .cvx a{ color:inherit; } .cvx h1,.cvx h2,.cvx h3,.cvx h4{ margin:0; line-height:1.15; text-wrap:balance; } .cvx p{ margin:0; } .cvx ul,.cvx ol,.cvx dl{ margin:0; padding:0; list-style:none; } .cvx-wrap{ max-width:1200px; margin-inline:auto; padding-inline:var(--cvx-s4); } @media (min-width:768px){ .cvx-wrap{ padding-inline:var(--cvx-s5); } } .cvx-num{ font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; } .cvx-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cvx-ink-3); } .cvx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .cvx-skip{ position:absolute; inset-inline-start:-9999px; top:0; z-index:100; background:var(--cvx-navy-800); color:var(--cvx-surface); padding:var(--cvx-s3); } .cvx-skip:focus{ inset-inline-start:0; } /* §6: visible focus everywhere, never outline:none without a replacement */ .cvx a:focus-visible,.cvx button:focus-visible,.cvx summary:focus-visible, .cvx input:focus-visible,.cvx select:focus-visible,.cvx textarea:focus-visible{ outline:2px solid var(--cvx-navy-600); outline-offset:2px; } .cvx-link{ color:var(--cvx-surface); text-decoration:none; font-size:14px; } .cvx-link:hover{ text-decoration:underline; } /* ── Chrome self-sufficiency ────────────────────────────────────────────── The header and footer are included on pages whose is NOT yet .cvx (products, product_details, search_results keep their legacy body until phase 4). The .cvx resets above therefore do not reach them, and without these the footer

keeps its UA margins. Scoped tightly to the two components so nothing else moves. / .cvx-head,.cvx-foot,.cvx-utility{ box-sizing:border-box; } .cvx-head ,.cvx-head ::before,.cvx-head ::after, .cvx-foot ,.cvx-foot ::before,.cvx-foot ::after, .cvx-utility ,.cvx-utility ::before,.cvx-utility ::after{ box-sizing:border-box; } .cvx-head ul,.cvx-foot ul{ list-style:none; margin:0; padding:0; } .cvx-head p,.cvx-foot p, .cvx-head h1,.cvx-head h2,.cvx-head h3,.cvx-head h4, .cvx-foot h1,.cvx-foot h2,.cvx-foot h3,.cvx-foot h4{ margin:0; } .cvx-head img,.cvx-foot img{ display:block; max-width:100%; } .cvx-head a,.cvx-foot a,.cvx-utility a{ color:inherit; } .cvx-head,.cvx-foot,.cvx-utility{ font-family:var(--cvx-font-latin); line-height:1.55; } /* §6 focus ring, unscoped for the same reason / .cvx-head a:focus-visible,.cvx-head button:focus-visible, .cvx-foot a:focus-visible,.cvx-utility a:focus-visible{ outline:2px solid var(--cvx-surface); outline-offset:2px; } / ── Utility strip + header (navy administrative band) ───────────────── / .cvx-utility{ background:var(--cvx-navy-900); color:var(--cvx-surface); font-size:12px; } .cvx-utilityin{ display:flex; align-items:center; justify-content:space-between; gap:var(--cvx-s3); min-height:34px; } .cvx-utilityin > span{ opacity:.78; } .cvx-utilitytel{ font-family:var(--cvx-font-num); font-weight:600; text-decoration:none; } / This is the most important tap target on the site; it was 19px tall. / @media (pointer:coarse){ .cvx-utilityin{ min-height:44px; } .cvx-utilitytel{ display:flex; align-items:center; min-height:44px; padding-inline:var(--cvx-s1); } } .cvx-utilitytel:hover{ text-decoration:underline; } @media (max-width:600px){ .cvx-utilityin > span{ display:none; } .cvx-utilityin{ justify-content:flex-end; } } .cvx-head{ background:var(--cvx-navy-800); color:var(--cvx-surface); position:sticky; top:0; z-index:60; } .cvx-headin{ display:flex; align-items:center; gap:var(--cvx-s5); min-height:64px; } .cvx-headbrand{ display:flex; align-items:center; min-height:44px; } .cvx-headbrand img{ height:26px; width:auto; } .cvx-headnav{ display:none; gap:var(--cvx-s4); font-size:14px; margin-inline-end:auto; } / nowrap: six items at 14px wrapped to two lines at 1440 and pushed the header to 96px tall. They stay on one line and the nav shows only where it fits. / .cvx-headnav a{ text-decoration:none; opacity:.85; white-space:nowrap; } .cvx-headnav a:hover{ opacity:1; text-decoration:underline; } .cvx-headright{ display:flex; align-items:center; gap:var(--cvx-s3); margin-inline-start:auto; } / The header CTA rides on every page, including product pages that already carry an orange "Appeler" in the sticky bar. Two oranges on one screen and §2.1 says neither is the action — so the header steps down to an outline. White on navy-800 is 15.3:1. / .cvx-head .cvx-btn--action{ background:transparent; color:var(--cvx-surface); border-color:rgba(255,255,255,.45); } .cvx-head .cvx-btn--action:hover{ background:var(--cvx-surface); color:var(--cvx-navy-800); border-color:var(--cvx-surface); } / Search — sits between brand and nav on desktop, full width under the bar on mobile. White field on the navy band so it reads as an input, not a link. / .cvx-search{ display:none; position:relative; flex:1; max-width:340px; } .cvx-searchin{ width:100%; min-height:40px; padding:0 40px 0 var(--cvx-s3); background:var(--cvx-surface); color:var(--cvx-ink); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); font-family:var(--cvx-font-latin); font-size:14px; } .cvx-searchin::placeholder{ color:var(--cvx-ink-3); } .cvx-searchgo{ position:absolute; inset-inline-end:0; top:0; width:40px; height:100%; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:var(--cvx-ink-2); cursor:pointer; } .cvx-searchgo:hover{ color:var(--cvx-action); } @media (min-width:1160px){ .cvx-search{ display:block; } } @media (min-width:1160px){ .cvx-headnav{ display:flex; } .cvx-headright{ margin-inline-start:0; } } .cvx-burger{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; color:inherit; border:1px solid rgba(255,255,255,.25); border-radius:var(--cvx-radius); cursor:pointer; } @media (min-width:1160px){ .cvx-burger{ display:none; } } @media (max-width:1159px){ .cvx-headright .cvx-link{ display:none; } } @media (max-width:520px){ .cvx-headright .cvx-btn--action{ display:none; } } .cvx-mnav{ display:none; flex-direction:column; border-top:1px solid rgba(255,255,255,.14); } .cvx-mnav.is-open{ display:flex; } .cvx-mnav a{ padding:var(--cvx-s4) var(--cvx-s4); text-decoration:none; font-size:15px; border-bottom:1px solid rgba(255,255,255,.10); } @media (min-width:1160px){ .cvx-mnav{ display:none !important; } } / ── Page header band (§3.5 — city pages, and any interior page) ─────── / .cvx-band{ background:var(--cvx-navy-800); color:var(--cvx-surface); padding-block:var(--cvx-s7); } .cvx-band h1{ font-size:26px; font-weight:700; } @media (min-width:768px){ .cvx-band h1{ font-size:34px; } } .cvx-bandeyebrow{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; opacity:.72; margin-bottom:var(--cvx-s3); } / the mono delivery line the spec asks for / .cvx-bandmeta{ margin-top:var(--cvx-s4); font-family:var(--cvx-font-num); font-size:13px; opacity:.85; } .cvx-bandlead{ margin-top:var(--cvx-s4); max-width:64ch; opacity:.9; font-size:15px; } .cvx-bandcta{ display:flex; flex-wrap:wrap; gap:var(--cvx-s3); margin-top:var(--cvx-s5); } / ── Sections ────────────────────────────────────────────────────────── / .cvx-sec{ padding-block:var(--cvx-s7); border-bottom:1px solid var(--cvx-line); } .cvx-sec--alt{ background:var(--cvx-surface); } .cvx-sechead{ margin-bottom:var(--cvx-s6); } .cvx-sechead h2{ font-size:19px; font-weight:700; } @media (min-width:768px){ .cvx-sechead h2{ font-size:22px; } } .cvx-seclead{ color:var(--cvx-ink-2); max-width:68ch; margin-top:var(--cvx-s3); } .cvx-note{ margin-top:var(--cvx-s4); font-size:13px; color:var(--cvx-ink-3); } .cvx-prose p{ color:var(--cvx-ink-2); max-width:70ch; } .cvx-prose p + p{ margin-top:var(--cvx-s4); } / Two-column interior layout: content + sticky contact rail / .cvx-cols{ display:grid; gap:var(--cvx-s6); align-items:start; } @media (min-width:992px){ .cvx-cols{ grid-template-columns:1fr 360px; gap:var(--cvx-s7); } } / Table, buttons, badges, inputs and the card surface are PRIMITIVES — they live in cvx-tokens.css so every template gets them, not just the eight that link this file. / / ── FAQ — native details, zero JS ───────────────────────────────────── / .cvx-faqtitle{ font-size:19px; font-weight:700; margin-block:var(--cvx-s7) var(--cvx-s4); } .cvx-faq{ background:var(--cvx-surface); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); } .cvx-faq details{ border-bottom:1px solid var(--cvx-line-soft); } .cvx-faq details:last-child{ border-bottom:0; } .cvx-faq summary{ cursor:pointer; padding:var(--cvx-s4); font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:var(--cvx-s3); } .cvx-faq summary::-webkit-details-marker{ display:none; } .cvx-faq summary::after{ content:'+'; color:var(--cvx-ink-3); font-weight:400; } .cvx-faq details[open] summary::after{ content:'−'; } .cvx-faqa{ padding:0 var(--cvx-s4) var(--cvx-s4); } .cvx-faqa p{ font-size:14px; color:var(--cvx-ink-2); max-width:68ch; } / ── Final CTA ───────────────────────────────────────────────────────── / .cvx-cta{ background:var(--cvx-navy-800); color:var(--cvx-surface); padding-block:var(--cvx-s7); } .cvx-ctain{ display:grid; gap:var(--cvx-s5); } @media (min-width:768px){ .cvx-ctain{ grid-template-columns:1fr auto; align-items:center; } } .cvx-cta h2{ font-size:22px; font-weight:700; } .cvx-cta p{ margin-top:var(--cvx-s2); font-size:15px; opacity:.8; } .cvx-ctaactions{ display:flex; align-items:center; gap:var(--cvx-s4); flex-wrap:wrap; } .cvx-ctatel{ font-size:20px; font-weight:600; color:var(--cvx-surface); text-decoration:none; } .cvx-ctatel:hover{ text-decoration:underline; } / Error pages (§ family I) — the escape hatch, styled / .error-contact{ margin-block:var(--cvx-s6); padding:var(--cvx-s5); background:var(--cvx-surface); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); text-align:center; } .error-contactlead{ margin:0 0 var(--cvx-s4); font-size:16px; color:var(--cvx-ink); } .error-contactactions{ display:flex; flex-wrap:wrap; gap:var(--cvx-s3); justify-content:center; } .error-contactnote{ margin:var(--cvx-s4) 0 0; font-size:13px; color:var(--cvx-ink-3); } .error-contactnote a{ color:var(--cvx-navy-600); font-weight:600; } / ── Footer ──────────────────────────────────────────────────────────── / .cvx-foot{ background:var(--cvx-navy-900); color:var(--cvx-surface); padding-block:var(--cvx-s7) var(--cvx-s4); font-size:14px; } / The buyer/supplier FAB is fixed; on a short page it lands on the legal line. Reserve room so the identity strip is never covered. / body:has(.cvx-fab) .cvx-foot{ padding-bottom:var(--cvx-s8); } .cvx-footgrid{ display:grid; gap:var(--cvx-s6); } @media (min-width:768px){ .cvx-footgrid{ grid-template-columns:2fr 1fr 1fr 1fr; } } .cvx-foot img{ height:26px; width:auto; margin-bottom:var(--cvx-s3); } .cvx-foot p{ opacity:.72; max-width:38ch; } .cvx-foot h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-bottom:var(--cvx-s3); } .cvx-foot ul{ display:grid; gap:var(--cvx-s2); } / §6 wants 44px targets. On a mouse a 27px link is comfortable and a 44px one makes the footer needlessly tall, so the floor is applied where it actually matters — coarse pointers. The gap collapses so total height barely moves. / @media (pointer:coarse){ .cvx-foot ul{ gap:0; } .cvx-foot li a{ display:flex; align-items:center; min-height:44px; } } .cvx-foot a{ text-decoration:none; opacity:.85; } .cvx-foot a:hover{ opacity:1; text-decoration:underline; } / Legal identity strip — the lines a bank analyst looks for first / .cvx-footidentity{ display:flex; flex-wrap:wrap; gap:var(--cvx-s2) var(--cvx-s5); margin-top:var(--cvx-s5); padding-top:var(--cvx-s4); border-top:1px solid rgba(255,255,255,.14); font-size:13px; opacity:.75; } .cvx-footidentity .cvx-num{ font-weight:600; } @media (pointer:coarse){ .cvx-footlegal a{ display:inline-flex; align-items:center; min-height:44px; } } .cvx-footlegal{ display:flex; flex-wrap:wrap; gap:var(--cvx-s3); justify-content:space-between; margin-top:var(--cvx-s3); padding-top:var(--cvx-s3); font-size:13px; opacity:.7; } / ═════════════════════════════════════════════════════════════════════ §3.2 — Product card (listing grid) ═══════════════════════════════════════════════════════════════════ / .cvx-grid{ display:grid; gap:var(--cvx-s4); grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); } / 4:3, contain not cover — a cut-off fitting is worse than a small one / .cvx-cardmedia{ position:relative; / the placeholder underlays the img / aspect-ratio:4/3; background:var(--cvx-ground); border-bottom:1px solid var(--cvx-line); display:flex; align-items:center; justify-content:center; } .cvx-cardmedia img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; background:var(--cvx-ground); / hides the panel behind it / } / No image = a rendered placeholder, never a broken image or empty box / .cvx-cardph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--cvx-s2); padding:var(--cvx-s3); text-align:center; } .cvx-cardph-mark{ font-family:var(--cvx-font-num); font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--cvx-navy-600); opacity:.55; } .cvx-cardph-cat{ font-family:var(--cvx-font-num); font-size:12px; color:var(--cvx-ink-3); } .cvx-cardbody{ display:grid; gap:var(--cvx-s2); padding:var(--cvx-s4); flex:1; } .cvx-cardcat{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cvx-ink-3); } .cvx-cardtitle{ font-size:15px; font-weight:600; color:var(--cvx-ink); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cvx-cardtitle:hover{ text-decoration:underline; } .cvx-cardprice{ font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; font-size:17px; font-weight:600; color:var(--cvx-ink); } .cvx-cardunit{ font-size:13px; color:var(--cvx-ink-3); font-weight:400; } / An unpriced product must still look like an invitation — never grey / .cvx-cardask{ font-size:15px; font-weight:600; color:var(--cvx-action); } .cvx-cardfoot{ display:flex; gap:var(--cvx-s2); padding:var(--cvx-s3) var(--cvx-s4) var(--cvx-s4); border-top:1px solid var(--cvx-line-soft); margin-top:auto; } / 40px icon actions so a listing converts without a click into detail / .cvx-cardact{ display:inline-flex; align-items:center; justify-content:center; gap:var(--cvx-s2); flex:1; min-height:44px; border-radius:var(--cvx-radius); / §6 touch floor / font-size:13px; font-weight:600; text-decoration:none; transition:background var(--cvx-transition); } / Outlined, not filled. §3.2 wants both actions ON the card, but §2.1 wants ONE orange per screen — and a 24-card grid of orange fills is a wall of orange in which nothing is the action. Outlining keeps both actions present and legible while the page's single orange stays on the sticky contact bar. Both text colours clear 4.5:1 on white (orange 5.18, green 4.53). / .cvx-cardact--call{ background:var(--cvx-surface); color:var(--cvx-action); border:1px solid var(--cvx-action); } .cvx-cardact--call:hover{ background:var(--cvx-action); color:var(--cvx-surface); } .cvx-cardact--wa{ background:var(--cvx-surface); color:var(--cvx-wa); border:1px solid var(--cvx-wa); } / Buyer area: a logged-in purchase flow, so the card action is navigation, not a phone call. Outlined — it is not competing for the page's orange. / .cvx-cardact--detail{ background:var(--cvx-surface); color:var(--cvx-navy-800); border:1px solid var(--cvx-line); } .cvx-cardact--detail:hover{ border-color:var(--cvx-navy-600); } .cvx-cardact--wa:hover{ background:var(--cvx-wa); color:var(--cvx-surface); } / ═════════════════════════════════════════════════════════════════════ §3.3 — Product detail page ═══════════════════════════════════════════════════════════════════ / .cvx-pdgallery{ background:var(--cvx-surface); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); } .cvx-pdmain{ aspect-ratio:4/3; background:var(--cvx-ground); display:flex; align-items:center; justify-content:center; } .cvx-pdmain img{ width:100%; height:100%; object-fit:contain; } .cvx-pdthumbs{ display:flex; gap:var(--cvx-s2); padding:var(--cvx-s3); overflow-x:auto; border-top:1px solid var(--cvx-line); } .cvx-pdthumb{ flex:none; width:64px; height:64px; padding:0; cursor:pointer; background:var(--cvx-ground); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); } .cvx-pdthumb img{ width:100%; height:100%; object-fit:contain; } .cvx-pdthumb[aria-current="true"]{ border-color:var(--cvx-navy-600); } .cvx-pd h1{ font-size:22px; font-weight:700; margin-top:var(--cvx-s3); } @media (min-width:768px){ .cvx-pd h1{ font-size:28px; } } .cvx-pdsku{ margin-top:var(--cvx-s2); font-family:var(--cvx-font-num); font-size:13px; color:var(--cvx-ink-3); } / Price: largest element after H1, mono, 32px / .cvx-pdprice{ margin-top:var(--cvx-s5); font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; font-size:28px; font-weight:700; color:var(--cvx-ink); line-height:1.1; } @media (min-width:768px){ .cvx-pdprice{ font-size:32px; } } .cvx-pdprice small{ font-size:14px; font-weight:400; color:var(--cvx-ink-3); } .cvx-pdask{ margin-top:var(--cvx-s5); font-size:22px; font-weight:700; color:var(--cvx-action); } / Landed-cost transparency box — a genuine differentiator, given its own panel / .cvx-landed{ margin-top:var(--cvx-s4); padding:var(--cvx-s4); background:var(--cvx-navy-100); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); } .cvx-landed h3{ font-size:13px; font-weight:700; color:var(--cvx-navy-800); } .cvx-landed dl{ display:grid; grid-template-columns:1fr auto; gap:var(--cvx-s2) var(--cvx-s4); margin-top:var(--cvx-s3); font-size:13px; } .cvx-landed dt{ color:var(--cvx-ink-2); } .cvx-landed dd{ margin:0; font-family:var(--cvx-font-num); font-variant-numeric:tabular-nums; text-align:end; } .cvx-landednote{ margin-top:var(--cvx-s3); font-size:11px; color:var(--cvx-ink-3); } / Product-detail image placeholder: sits under the main image the same way the card's does, so a missing or broken file reveals a panel, never a broken icon. / .main-image-viewport{ position:relative; } .cvx-pdph{ position:absolute; inset:0; z-index:0; } .main-image-viewport > img{ position:relative; z-index:1; background:var(--cvx-ground); } / Trust strip — doing the work of an About page at the moment of decision / .cvx-trust{ display:grid; gap:var(--cvx-s3); margin-top:var(--cvx-s5); padding-block:var(--cvx-s4); border-block:1px solid var(--cvx-line); grid-template-columns:repeat(2,1fr); } @media (min-width:768px){ .cvx-trust{ grid-template-columns:repeat(4,1fr); } } .cvx-trust li{ display:flex; align-items:flex-start; gap:var(--cvx-s2); font-size:13px; color:var(--cvx-ink-2); } .cvx-trust svg{ flex:none; margin-top:2px; color:var(--cvx-navy-600); } / Technical sheet — a bordered row with icon + size, not a bare link / .cvx-doc{ display:flex; align-items:center; gap:var(--cvx-s3); margin-top:var(--cvx-s3); padding:var(--cvx-s3) var(--cvx-s4); background:var(--cvx-surface); border:1px solid var(--cvx-line); border-radius:var(--cvx-radius); text-decoration:none; transition:border-color var(--cvx-transition); } .cvx-doc:hover{ border-color:var(--cvx-navy-600); } .cvx-doc svg{ flex:none; color:var(--cvx-navy-600); } .cvx-docname{ font-size:14px; font-weight:600; } .cvx-doc__meta{ font-family:var(--cvx-font-num); font-size:12px; color:var(--cvx-ink-3); margin-inline-start:auto; } @media (prefers-reduced-motion: reduce){ .cvx { transition:none !important; } }