/* ============================================================ Carvee — stylesheet Tokens en vormtaal uit het ontwerp van Claude Design, samengevoegd tot één bestand. Lettertypen komen uit de . ============================================================ */ /* ---------- KLEUR ---------- */ :root{ /* Base palette — from carvee-site/assets/style.css */ --ink:#0E1F1C; --ink-2:#3D5450; --teal-dark:#0A5A4A; --teal:#0E7C66; --lime:#C8F04C; --lime-press:#B8E03C; --bg:#F6F8F6; --card:#FFFFFF; --line:#E3EAE7; --faint:#8AA39D; /* Certificate / mint family */ --mint:#F2FAF7; --mint-line:#BFE0D5; /* Comparator (Western / rival / dealer) — never for Carvee elements */ --comparator:#B8C4C0; --comparator-head-bg:#EEF1F0; --comparator-cell-bg:#FAFBFA; --comparator-text:#5D716C; /* Honesty amber — reserved for content that concedes something */ --amber:#D9A441; --amber-bg:#FFF9EC; --amber-text:#8A6D1A; --amber-soft-bg:#FFF3D6; /* Prototype / launch ribbon */ --banner-bg:#FFF7D6; --banner-line:#EADF9A; --banner-text:#7A6A12; /* Semantic status */ --green:#177245; --green-bg:#E5F6E9; --green-line:#A9DFB8; --red:#B3261E; --fav:#E0245E; /* Interaction tints */ --tint-hover:#EEF4F1; --tint-row-hover:#F2F7F5; /* Dark-section materials */ --hero-gradient:linear-gradient(160deg,#0E1F1C 0%,#0A5A4A 100%); /* @kind color */ --glass-bg:rgba(255,255,255,.06); --glass-line:rgba(255,255,255,.12); --glass-btn:rgba(255,255,255,.12); --kicker-bg:rgba(200,240,76,.15); --photo-placeholder:linear-gradient(135deg,#DFE9E5,#C8D8D2); /* @kind color */ /* Semantic aliases */ --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-tertiary:var(--faint); --text-on-dark:#FFFFFF; --text-on-dark-muted:#C9D8D4; --text-accent-on-dark:var(--lime); --surface-page:var(--bg); --surface-card:var(--card); --surface-emphasis:var(--teal-dark); --surface-certificate:var(--mint); --border-default:var(--line); --border-certificate:var(--teal); --link:var(--teal-dark); --accent:var(--lime); --action-primary:var(--teal); --action-primary-hover:var(--teal-dark); --data-carvee:var(--teal); --data-carvee-alt:var(--teal-dark); --data-accent:var(--lime); --data-comparator:var(--comparator); --data-grid:var(--line); } /* ---------- TYPOGRAFIE ---------- */ :root{ --font-core:"Archivo","Carvee Core","Segoe UI",system-ui,-apple-system,sans-serif; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800; /* Scale — exact values from the shipped prototype */ --text-h1:38px; --text-h1-page:32px; --text-h1-mobile:29px; --text-h1-form:26px; --text-h2:25px; --text-h2-panel:20px; --text-h3:17px; --text-h3-card:16px; --text-card-title:15.5px; --text-lead:17px; --text-body:14.5px; --text-body-sm:14px; --text-body-xs:13.5px; --text-meta:12.5px; --text-label:12px; --text-footnote:12px; --text-micro:11px; --text-badge:11.5px; /* Numbers are the heroes */ --text-stat:28px; --text-soh-big:34px; --text-price:18px; --text-price-big:28px; --text-gap-number:26px; --text-calc-result:24px; --track-h1:-1px; --track-h2:-.5px; --track-card-title:-.2px; --track-label:.8px; --track-kicker:1.2px; --track-uppercase-tight:.6px; --leading-h1:1.15; --leading-body:1.55; --numeric-tabular:tabular-nums; /* @kind other */ } /* ---------- RUIMTE ---------- */ :root{ --space-0:0px; --space-1:4px; --space-2:6px; --space-3:8px; --space-4:10px; --space-5:12px; --space-6:14px; --space-7:16px; --space-8:18px; --space-9:20px; --space-10:22px; --space-11:24px; --space-12:32px; --space-13:36px; --space-14:48px; --space-15:60px; --container:1160px; --container-narrow:640px; --gutter:24px; --section-y:48px; --section-y-hero:60px; --grid-gap:16px; --grid-gap-wide:20px; --nav-height:64px; --sticky-offset:86px; --pad-card:24px; --pad-panel:22px; --pad-cert:18px; --pad-tile:16px; --pad-btn:10px 18px; --pad-btn-lg:14px 26px; --pad-input:11px 13px; --pad-cell:11px 12px; --pad-cell-cmp:12px 16px; --bp-tablet:900px; --bp-card:820px; --bp-mobile:560px; } /* ---------- VORM ---------- */ :root{ --radius-card:14px; --radius-panel:14px; --radius-tile:12px; --radius-stat:12px; --radius-btn:8px; --radius-input:8px; --radius-badge:8px; --radius-rate:10px; --radius-chip:16px; --radius-pill:20px; --radius-band:16px; --radius-round:50%; --border-width-hair:1px; --border-width-ghost:1.5px; --border-width-cert:2px; --border-hair:1px solid var(--line); --border-ghost:1.5px solid var(--line); --border-cert:2px solid var(--teal); --border-rule-dashed:1px dashed var(--line); --border-rule-dashed-mint:1px dashed var(--mint-line); --border-table-head:2px solid var(--line); /* Borders over shadows. Shadow only on hover and for floating elements. */ --shadow-card-hover:0 6px 20px rgba(14,124,102,.13); --shadow-badge:0 1px 4px rgba(0,0,0,.12); --shadow-float:0 1px 4px rgba(0,0,0,.15); } /* ---------- BEWEGING ---------- */ :root{ --duration-fast:.12s; /* @kind other */ --duration-base:.15s; /* @kind other */ --ease-standard:ease; /* @kind other */ --transition-card:box-shadow .15s ease; /* @kind other */ } /* ---- basis, overgenomen uit het ontwerp ---- */ html,body{height:100%;margin:0} body{margin:0;background:#F6F8F6;-webkit-font-smoothing:antialiased;} a{color:#0A5A4A;text-decoration:none;} a:hover{color:#0E7C66;} ::selection{background:#C8F04C;color:#0E1F1C;} .cv-card{transition:box-shadow .15s;} .cv-card:hover{box-shadow:0 6px 20px rgba(14,124,102,.13);} .cv-btn{transition:background .15s;cursor:pointer;} .cv-row:hover{background:#F2F7F5;} .vt a{color:#0A5A4A;text-decoration:none;} .vt a:hover{color:#0E7C66;} .vt-btn{transition:background .15s;cursor:pointer;border:0;font:inherit;} .vt-in{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;color:#0E1F1C;background:#fff;border:1px solid #E3EAE7;border-radius:8px;padding:12px 14px;width:100%;box-sizing:border-box;} .vt-in:focus{outline:none;border-color:#0E7C66;box-shadow:0 0 0 3px rgba(14,124,102,.12);} .vt-in::placeholder{color:#8AA39D;} .vt-in.is-invalid{border-color:#B3261E;background:#FFF7F6;} .vt .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .vt .is-busy{opacity:.6;cursor:default;} .vt :focus-visible{outline:2px solid #0E7C66;outline-offset:2px;} .cv-anchor:hover{color:#0A5A4A !important;border-color:#BFE0D5 !important;} .cv-rail{overflow-x:auto;min-width:0;scrollbar-width:thin;} .cv-scroll{overflow-x:auto;min-width:0;} .cv-scroll > div{min-width:900px;} html{scroll-behavior:smooth;} section{scroll-margin-top:120px;} .cv-in{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;color:#0E1F1C;background:#fff;border:1px solid #E3EAE7;border-radius:8px;padding:13px 14px;width:100%;box-sizing:border-box;} .cv-in:focus{outline:none;border-color:#0E7C66;box-shadow:0 0 0 3px rgba(14,124,102,.12);} .cv-in::placeholder{color:#8AA39D;} .cv-chip{cursor:pointer;user-select:none;font-size:15px;font-weight:500;border-radius:16px;padding:11px 16px;border:1px solid #E3EAE7;background:#fff;color:#3D5450;} .cv-chip:hover{background:#EEF4F1;} .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .cv-in.is-invalid{border-color:#B3261E;background:#FFF7F6;} .cv-in.is-invalid:focus{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12);} .err{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:13.5px;line-height:1.45;color:#B3261E;margin:7px 0 0;display:flex;gap:7px;align-items:baseline;} .is-busy{opacity:.6;cursor:default;} button.cv-btn{border:0;font:inherit;} :focus-visible{outline:2px solid #0E7C66;outline-offset:2px;} .jr-anchor{scroll-margin-top:120px;} .jr-tab{width:100%;border-collapse:collapse;} .jr-tab th{font-family:Archivo,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#3D5450;text-align:left;background:#EEF1F0;padding:12px 16px;border-bottom:1px solid #E3EAE7;} .jr-tab td{font-size:14.5px;line-height:1.55;color:#3D5450;padding:16px;border-bottom:1px solid #E3EAE7;vertical-align:top;} .jr-tab td:first-child{font-family:Archivo,sans-serif;font-size:14.5px;font-weight:700;color:#0E1F1C;} .jr-tab tr:last-child td{border-bottom:0;} @media (max-width:1000px){ .cv-contrast{grid-template-columns:1fr !important;} .cv-2{grid-template-columns:1fr !important;} .cv-side{position:static !important;} .cv-scroll > div{min-width:720px;} .cv-split{grid-template-columns:1fr !important;} } @media (max-width:900px){ .cv-hero{grid-template-columns:1fr !important;} .cv-3{grid-template-columns:1fr 1fr !important;} .cv-2{grid-template-columns:1fr !important;} .cv-h1{font-size:34px !important;} .cv-navlinks{display:none !important;} .vt-top{grid-template-columns:1fr !important;gap:36px !important;} .vt-links{grid-template-columns:1fr 1fr !important;} .vt-bar{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;} .cv-track{display:none !important;} .cv-5{grid-template-columns:1fr 1fr !important;} .cv-h1{font-size:32px !important;} .cv-4{grid-template-columns:1fr 1fr !important;} .jr-2{grid-template-columns:1fr !important;} .jr-h1{font-size:31px !important;letter-spacing:-1px !important;} .cv-wrap{padding-left:18px !important;padding-right:18px !important;} } @media (max-width:820px){ .cv-tl{grid-template-columns:1fr !important;} } @media (max-width:760px){ .jr-tab thead{display:none;} .jr-tab, .jr-tab tbody, .jr-tab tr, .jr-tab td{display:block;width:auto;} .jr-tab tr{border-bottom:1px solid #E3EAE7;padding:6px 0 14px;} .jr-tab tr:last-child{border-bottom:0;} .jr-tab td{border-bottom:0;padding:8px 16px 0;} .jr-tab td:first-child{font-size:17px;padding-top:16px;} .jr-tab td[data-label]::before{content:attr(data-label);display:block;font-family:Archivo,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#8AA39D;margin-bottom:4px;} } @media (max-width:640px){ .cv-3{grid-template-columns:1fr !important;} .cv-4{grid-template-columns:1fr !important;} .cv-h1{font-size:30px !important;letter-spacing:-1px !important;} .cv-h2{font-size:23px !important;} .cv-sec{padding-top:48px !important;} .cv-band{padding:56px 18px !important;} .cv-wrap{padding-left:18px !important;padding-right:18px !important;} .cv-cert-num{font-size:56px !important;} .cv-tablerow{grid-template-columns:1fr !important;} .cv-5{grid-template-columns:1fr !important;} .cv-big{font-size:64px !important;} .cv-trow{grid-template-columns:1fr !important;} .cv-score{grid-template-columns:1fr !important;} .cv-big{font-size:56px !important;} .cv-h1{font-size:29px !important;letter-spacing:-1px !important;} .cv-band{padding:52px 18px !important;} .cv-sec{padding-top:56px !important;} .cv-steps{gap:6px !important;} .cv-steplabel{display:none !important;} .cv-card{padding:22px 18px !important;} } @media (max-width:560px){ .vt-links{grid-template-columns:1fr !important;} } /* ---------- OVERLOOPBEVEILIGING ---------- Het ontwerp gebruikt brede tabellen in horizontaal scrollende panelen. Zonder min-width:0 duwen die het hele raster breder dan het scherm. */ .cv-wrap *{min-width:0} .cv-scroll,.cv-rail{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} img{max-width:100%;height:auto} @media (max-width:520px){ .cv-wrap,.vt-wrap{padding-left:16px !important;padding-right:16px !important} h1,h2,h3{overflow-wrap:anywhere} } /* scrollpanelen mogen hun ouder nooit oprekken */ .cv-scroll,.cv-rail{min-width:0 !important} .cv-sec > .cv-scroll,section > .cv-scroll{min-width:0 !important;max-width:100% !important} /* Chart.js zet een vaste pixelbreedte op het canvas */ canvas{max-width:100% !important} /* spamval echt buiten beeld, ook zijn kinderen */ .hp{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0);white-space:nowrap;padding:0;margin:0} .hp *{max-width:1px !important;overflow:hidden} /* lange woorden en 'auto 1fr'-rasters op smalle schermen */ @media (max-width:640px){ [style*="grid-template-columns: auto 1fr"]{grid-template-columns:1fr !important} p,span,li,dd,dt,td,th{overflow-wrap:anywhere} } /* het hidden-attribuut moet zwaarder wegen dan display uit het ontwerp */ [hidden]{display:none !important} /* voettekst: vier kolommen die netjes inklappen */ @media (max-width:900px){.vt-links{grid-template-columns:1fr 1fr !important;gap:26px !important}} @media (max-width:520px){.vt-links{grid-template-columns:1fr !important}}