/* ==========================================================================
Vindjeparfum.be — design tokens
Alle kleuren in oklch. Fallbacks in hex staan als commentaar bij elke waarde.
========================================================================== */
/* Fonts — plaats deze regel in , vóór deze stylesheet:
*/
:root {
/* --- Typografie ------------------------------------------------------- */
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--font-body: 'Manrope', -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Schaal desktop */
--text-hero: 88px; /* h1 homepage, line-height .94, tracking -.025em */
--text-h1: 60px; /* h1 pagina's, line-height 1.0, tracking -.02em */
--text-h2: 40px; /* sectiekop, line-height 1.05 */
--text-h3: 30px; /* blokkop, line-height 1.1 */
--text-lead: 19px; /* intro, line-height 1.55 */
--text-body: 16px; /* lopende tekst, line-height 1.6 */
--text-ui: 14.5px; /* nav, knoppen */
--text-sm: 13px;
--text-xs: 11.5px; /* merknaam op kaart, uppercase, tracking .04em */
--text-kicker: 11px; /* mono, uppercase, tracking .14em */
/* Schaal mobiel */
--text-hero-m: 44px;
--text-h1-m: 36px;
--text-h2-m: 30px;
/* --- Kleur: basis ----------------------------------------------------- */
--bg: oklch(0.975 0.008 85); /* #f8f5f0 warm off-white, pagina */
--bg-desk: oklch(0.92 0.006 80); /* #e9e5e0 canvas achter frames */
--surface: oklch(1 0 0); /* #ffffff kaarten, panelen */
--surface-sunken: oklch(0.985 0.006 85);/* #fbf9f6 inputs, subtiele vlakken */
--ink: oklch(0.2 0.015 60); /* #2b2621 primaire tekst */
--ink-2: oklch(0.45 0.02 65); /* #6f665c secundaire tekst */
--ink-3: oklch(0.55 0.02 70); /* #8b8177 metadata, labels */
--ink-4: oklch(0.62 0.012 70); /* #9e958c placeholder */
--line: oklch(0.91 0.012 75); /* #e5e0d9 standaard rand */
--line-soft: oklch(0.95 0.008 78); /* #f0ece7 rijscheiding */
--line-strong: oklch(0.86 0.014 75); /* #d7d1c8 input, knoprand */
/* --- Kleur: merk ------------------------------------------------------ */
--dark: oklch(0.26 0.02 60); /* #3a332c donker vlak, badge */
--dark-2: oklch(0.31 0.018 60); /* #47403a kaart op donker vlak */
--dark-line: oklch(0.39 0.02 60); /* #5a5249 rand op donker vlak */
--on-dark: oklch(0.96 0.01 85); /* #f5f1ec tekst op donker */
--on-dark-2: oklch(0.79 0.015 75); /* #c4bcb2 secundair op donker */
--accent: oklch(0.45 0.09 55); /* #8a4a24 primaire CTA, links */
--accent-hover: oklch(0.38 0.09 55); /* #713a18 */
--accent-soft: oklch(0.96 0.03 82); /* #f9efe2 actieve chip-vulling */
--accent-light: oklch(0.88 0.09 80); /* #f0c88f CTA op donker vlak */
--positive: oklch(0.45 0.09 150); /* #2f7350 laagste prijs, daling */
--positive-soft: oklch(0.94 0.05 150); /* #ddf0e4 badge-achtergrond */
--negative: oklch(0.52 0.1 30); /* #a45338 prijsstijging */
--warn-soft: oklch(0.95 0.04 45); /* #f8e9dc */
/* --- Kleur: fingerprint-assen (VASTE VOLGORDE) ------------------------ */
--fp-fresh: oklch(0.72 0.11 175); /* #37b3a4 Fris */
--fp-sweet: oklch(0.74 0.12 55); /* #d99a4e Zoet */
--fp-woody: oklch(0.55 0.07 70); /* #8a7150 Houtachtig */
--fp-floral: oklch(0.75 0.1 350); /* #e39bb4 Bloemig */
--fp-warm: oklch(0.66 0.13 35); /* #d1795c Warm */
/* --- Geurfamilies: alleen de hue verschilt --------------------------- */
/* Gebruik: oklch(0.78 0.09 var(--hue-x)) voor de stip,
oklch(0.985 0.012 var(--hue-x)) voor een vlak,
oklch(0.91 0.02 var(--hue-x)) voor de rand. */
--hue-citrus: 100;
--hue-fresh: 150;
--hue-aquatic: 235;
--hue-floral: 350;
--hue-fruity: 15;
--hue-woody: 70;
--hue-amber: 45;
--hue-gourmand: 55;
--hue-spicy: 30;
/* --- Seizoenen -------------------------------------------------------- */
--hue-lente: 140;
--hue-zomer: 175;
--hue-herfst: 55;
--hue-winter: 250;
/* --- Vorm ------------------------------------------------------------- */
--r-pill: 999px; /* knoppen, chips, badges */
--r-lg: 24px; /* grote blokken, hero-panelen */
--r-md: 20px; /* kaarten */
--r-sm: 14px; /* kleine vlakken, inputs */
--r-xs: 8px; /* thumbnails */
/* --- Ruimte ----------------------------------------------------------- */
--page-max: 1240px;
--page-pad: 44px;
--page-pad-m: 20px;
--gap-card: 20px;
--section-gap: 72px;
/* --- Elevatie (alleen zwevende elementen) ----------------------------- */
--shadow-pop: 0 24px 50px -28px oklch(0.4 0.04 60 / 0.55); /* dropdown, sheet */
--shadow-modal: 0 40px 80px -30px oklch(0.2 0.03 60 / 0.6); /* modal */
--shadow-search: 0 20px 46px -26px oklch(0.4 0.04 60 / 0.55);/* hero-zoekbalk */
/* --- Beweging --------------------------------------------------------- */
--ease: cubic-bezier(0.2, 0, 0.2, 1);
--dur: 160ms;
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400; /* Instrument Serif nooit vet */
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0;
}
h1 { font-size: var(--text-h1); line-height: 1.0; }
h2 { font-size: var(--text-h2); line-height: 1.05; }
h3 { font-size: var(--text-h3); line-height: 1.1; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
input, textarea, button, select { font: inherit; }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
::selection { background: oklch(0.88 0.06 75); }
/* ==========================================================================
Componenten
========================================================================== */
/* --- Kicker: mono, uppercase, gespatieerd ------------------------------- */
.kicker {
font-family: var(--font-mono);
font-size: var(--text-kicker);
letter-spacing: 0.14em;
text-transform: uppercase;
color: oklch(0.52 0.03 60);
}
/* --- Knoppen ------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
border-radius: var(--r-pill);
padding: 15px 26px;
font-size: var(--text-ui);
font-weight: 700;
cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--accent); color: oklch(0.98 0.01 85); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--dark { background: var(--dark); color: var(--on-dark); }
.btn--dark:hover { background: oklch(0.2 0.02 60); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: oklch(0.3 0.015 60); font-weight: 600; }
.btn--ghost:hover { border-color: oklch(0.7 0.03 70); }
.btn--sm { padding: 11px 16px; font-size: var(--text-sm); }
.btn--block { display: flex; width: 100%; justify-content: center; }
/* Mobiel: minimaal 44px hit target */
@media (max-width: 720px) {
.btn { padding: 17px 24px; }
}
/* --- Chip (filter, noot, link) ------------------------------------------ */
.chip {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 11px 17px;
font-size: var(--text-ui);
font-weight: 500;
color: oklch(0.36 0.015 62);
cursor: pointer;
transition: border-color var(--dur) var(--ease);
}
.chip:hover { border-color: oklch(0.7 0.04 65); }
.chip[aria-pressed="true"] {
background: var(--accent-soft);
border-color: var(--accent);
color: oklch(0.26 0.03 60);
}
.chip__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--line); }
.chip[aria-pressed="true"] .chip__dot { background: var(--accent); }
/* --- Scent fingerprint -------------------------------------------------- */
/* Compact: vijf verticale balkjes. Zet --v (0-1) per balk. */
.fp {
display: flex;
align-items: flex-end;
gap: 4px;
height: 32px;
}
.fp__bar {
flex: 1;
height: calc(var(--v) * 100%);
min-height: 3px;
border-radius: 3px;
}
.fp__bar--fresh { background: var(--fp-fresh); }
.fp__bar--sweet { background: var(--fp-sweet); }
.fp__bar--woody { background: var(--fp-woody); }
.fp__bar--floral { background: var(--fp-floral); }
.fp__bar--warm { background: var(--fp-warm); }
/* Uitgebreid: horizontale balken met label en score */
.fp-rows { display: flex; flex-direction: column; gap: 13px; }
.fp-row {
display: grid;
grid-template-columns: 84px 1fr 42px;
gap: 14px;
align-items: center;
font-size: 13.5px;
color: oklch(0.36 0.02 63);
}
.fp-row__track {
height: 7px;
border-radius: var(--r-pill);
background: oklch(0.94 0.01 80);
overflow: hidden;
}
.fp-row__fill { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: var(--r-pill); }
.fp-row__value { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); text-align: right; }
/* Overlay: twee fingerprints over elkaar (vergelijken) */
.fp-overlay { display: flex; flex-direction: column; gap: 4px; }
.fp-overlay .fp-row__fill--b { background: oklch(0.45 0.02 62); }
/* --- Parfumkaart -------------------------------------------------------- */
.card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
}
.card__media {
position: relative;
aspect-ratio: 4 / 5;
background-image: repeating-linear-gradient(135deg,
oklch(0.945 0.012 82) 0 9px, oklch(0.915 0.016 82) 9px 18px);
}
.card__body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.card__brand {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
margin-bottom: 4px;
}
.card__name { font-size: 17px; font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
.card__accords { font-size: 12.5px; color: oklch(0.5 0.02 66); margin-bottom: 12px; }
.card__foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
display: flex;
align-items: center;
justify-content: space-between;
}
.card__price { font-family: var(--font-mono); font-size: 14px; }
.badge-match {
position: absolute;
top: 12px;
left: 12px;
font-family: var(--font-mono);
font-size: var(--text-kicker);
background: var(--dark);
color: var(--on-dark);
border-radius: var(--r-pill);
padding: 6px 10px;
}
.btn-heart {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border-radius: var(--r-pill);
border: 1px solid var(--line-strong);
background: oklch(1 0 0 / 0.9);
color: var(--ink-3);
font-size: 14px;
cursor: pointer;
}
.btn-heart[aria-pressed="true"] { color: var(--accent); }
/* --- "Waarom deze match?" ----------------------------------------------- */
.why__toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: oklch(0.98 0.008 85);
border: 1px solid oklch(0.93 0.012 78);
border-radius: var(--r-sm);
padding: 12px 14px;
cursor: pointer;
text-align: left;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: oklch(0.42 0.05 60);
}
.why__toggle[aria-expanded="true"] {
background: oklch(0.97 0.02 82);
border-color: oklch(0.9 0.03 80);
border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.why__panel {
border: 1px solid oklch(0.92 0.02 80);
border-top: none;
border-radius: 0 0 var(--r-sm) var(--r-sm);
padding: 15px 14px 14px;
background: oklch(0.985 0.012 85);
font-size: 13.5px;
line-height: 1.55;
}
.why__reasons { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.why__reason { display: flex; gap: 9px; color: oklch(0.36 0.02 62); }
.why__reason::before { content: "✓"; color: oklch(0.55 0.09 150); }
.why__diff { border-top: 1px solid oklch(0.92 0.02 80); padding-top: 10px; }
.why__diff-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: oklch(0.55 0.03 60);
margin-bottom: 4px;
}
/* --- Zoekbalk ----------------------------------------------------------- */
.search {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
padding: 9px 9px 9px 24px;
box-shadow: var(--shadow-search);
}
.search:focus-within { border-color: oklch(0.72 0.05 60); }
.search__input { flex: 1; border: 0; outline: 0; background: none; font-size: 16.5px; padding: 12px 0; color: var(--ink); }
/* Autocomplete-dropdown: zoekbalk krijgt vierkante onderhoeken */
.search--open { border-radius: 22px 22px 0 0; border-bottom-color: oklch(0.93 0.012 78); box-shadow: none; }
.ac {
background: var(--surface);
border: 1px solid oklch(0.72 0.05 60);
border-top: none;
border-radius: 0 0 22px 22px;
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.ac__group-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
padding: 14px 22px 8px;
}
.ac__item {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
background: none;
border: 0;
padding: 11px 22px;
cursor: pointer;
}
.ac__item:hover, .ac__item[aria-selected="true"] { background: oklch(0.975 0.01 82); }
.ac__item--ai { background: var(--accent-soft); border-bottom: 1px solid oklch(0.94 0.012 78); padding: 18px 22px; }
/* --- Prijstabel --------------------------------------------------------- */
.offers { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.offers__row {
display: grid;
grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr 160px;
gap: 20px;
align-items: center;
padding: 20px 26px;
border-bottom: 1px solid var(--line-soft);
}
.offers__row--cheapest { background: oklch(0.98 0.02 150); }
.offers__badge {
font-family: var(--font-mono);
font-size: 10.5px;
background: var(--positive-soft);
color: oklch(0.34 0.07 150);
border-radius: var(--r-pill);
padding: 5px 9px;
}
.offers__price { font-family: var(--font-mono); font-size: 17px; font-weight: 500; }
/* --- Lege staat --------------------------------------------------------- */
.empty { display: flex; flex-direction: column; padding: 30px 26px 26px; }
.empty__icon {
width: 46px; height: 46px;
border-radius: var(--r-sm);
display: flex; align-items: center; justify-content: center;
font-size: 19px;
margin-bottom: 18px;
background: oklch(0.95 0.01 80);
color: var(--ink-2);
}
.empty__icon--warn { background: var(--warn-soft); color: oklch(0.48 0.1 40); }
.empty__icon--ok { background: var(--positive-soft); color: oklch(0.42 0.08 150); }
.empty__icon--accent { background: var(--accent-soft); color: oklch(0.45 0.08 58); }
/* --- Layout ------------------------------------------------------------- */
.vjp-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-card); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); }
.results { display: grid; grid-template-columns: 256px 1fr; gap: 40px; align-items: start; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .results { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
.vjp-page { padding: 0 var(--page-pad-m); }
.grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
h1 { font-size: var(--text-h1-m); }
h2 { font-size: var(--text-h2-m); }
}
/* --- Bottom sheet (mobiele filters) ------------------------------------- */
.sheet__scrim { position: fixed; inset: 0; background: oklch(0.2 0.02 60 / 0.42); display: flex; align-items: flex-end; }
.sheet {
width: 100%;
max-height: 80vh;
overflow-y: auto;
background: var(--surface-sunken);
border-radius: 26px 26px 0 0;
padding: 12px var(--page-pad-m) 24px;
}
.sheet__grip { width: 44px; height: 4px; border-radius: var(--r-pill); background: var(--line-strong); margin: 0 auto 12px; }
/* --- Vaste actiebalk mobiel --------------------------------------------- */
.actionbar {
position: sticky;
bottom: 0;
display: flex;
gap: 10px;
padding: 16px var(--page-pad-m) 22px;
background: linear-gradient(oklch(0.975 0.008 85 / 0), var(--bg) 40%);
}
/* --- Beeldplaceholder (verwijderen zodra echte foto's er zijn) ----------- */
.ph {
background-image: repeating-linear-gradient(135deg,
oklch(0.945 0.012 82) 0 9px, oklch(0.915 0.016 82) 9px 18px);
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}