/* Emmie — self-hosted webfonts (geen Google Fonts: AVG + performance) */
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/karla-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/karla-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Signika";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/signika-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Signika";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/signika-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@layer ds {
/* ============================================================
EMMIE — Foundations: kleur, type & motief
------------------------------------------------------------
Eén bron van waarheid voor het hele systeem. Emmie is een
Nederlands zorg-platform (care-management SaaS).
HET VERHAAL — "Warme zorg, rustig systeem."
Eén kleurenfamilie (saliegroen = vertrouwen, klei = warmte) op
een warme off-white canvas. Eén fontpaar (Inter voor UI, Space
Grotesk voor display). Eén beeldmerk: de raat — drie
honingraatcellen waarin een bij verschijnt (twee gevuld, één open).
TWEE REGISTERS, ÉÉN FAMILIE
• Product (.emmie) — compact, functioneel, data-dicht.
• Marketing(.emmie-mkt) — expressief, royaal, verhalend.
Ze delen kleur, font en motief; ze verschillen alleen in schaal,
dichtheid en hoe nadrukkelijk het motief wordt ingezet.
============================================================ */
/* @import Google Fonts verwijderd — fonts worden self-hosted (zie styles/fonts.css). */
:root {
/* ---------- MERK ---------- */
--emmie-primary: #2F6E5A; /* salie — vertrouwen, structuur, koppen */
--emmie-primary-light: #3E8770; /* hover */
--emmie-primary-dark: #245443; /* active / diepe vlakken */
--emmie-primary-soft: #E7EFEA; /* zachte saliegroene vulling */
--emmie-accent: #DE7356; /* klei — de signatuur: CTA's, actie, warmte */
--emmie-accent-light: #E98A6F; /* hover */
--emmie-accent-dark: #BE5942; /* active / leesbare tekstkleur */
--emmie-accent-soft: #FBEAE3; /* zachte klei-vulling */
/* ---------- DISABLED (knop-vlakken) ---------- */
--emmie-primary-disabled: #A9C3B9; /* uitgeschakelde primaire knop — ontzadigde salie */
--emmie-secondary-disabled: #E7BEB2; /* uitgeschakelde secundaire knop — ontzadigde klei */
/* ---------- NEUTRALEN (warm) ---------- */
--emmie-ink: #1F2B26; /* hoofdtekst — warm, groen-getint zwart */
--emmie-text-muted: #6E7B74; /* secundaire tekst */
--emmie-text-light: #9AA39C; /* meta, definitielijst-keys, placeholders */
--emmie-canvas: #F6F2EA; /* app-achtergrond — warme off-white */
--emmie-surface: #FFFFFF; /* kaarten, primaire content */
--emmie-surface-sunken: #FBF8F2; /* iets verdiepte vlakken */
--emmie-hairline: #EBE5DA; /* fijne scheidingslijnen */
--emmie-border: #E1DACE; /* zichtbare randen, inputs */
/* ---------- SEMANTISCH ---------- */
--emmie-success: #2F8F6B;
--emmie-success-soft: #E1F0EA;
--emmie-info: #3A8FB0;
--emmie-info-soft: #E2F0F5;
--emmie-warning: #D98A3D; /* solide accent */
--emmie-warning-bg: #FBF3DF;
--emmie-warning-text: #8A6A1E;
--emmie-warning-border: #ECC766;
--emmie-danger: #D45F52;
--emmie-danger-soft: #F8E4E1;
/* ---------- SIGNALERING — 5 severities × (kleur · vulling · rand) ----------
De volledige palet-set achter de Signalering-component. Elke severity
heeft een vaste tekst/icoon-kleur (-color), een zachte achtergrond (-bg)
en een randkleur (-edge). Lokaal bruikbaar zonder de component:
b.v. color: var(--emmie-sig-warning-color);
background: var(--emmie-sig-warning-bg);
border-color: var(--emmie-sig-warning-edge); */
--emmie-sig-info-color: var(--emmie-info); /* #3A8FB0 */
--emmie-sig-info-bg: var(--emmie-info-soft); /* #E2F0F5 */
--emmie-sig-info-edge: #C2DDE8;
--emmie-sig-success-color: var(--emmie-success); /* #2F8F6B */
--emmie-sig-success-bg: var(--emmie-success-soft);/* #E1F0EA */
--emmie-sig-success-edge: #B8DCCB;
--emmie-sig-warning-color: #B9742A; /* leesbaar oker (donkerder dan --emmie-warning) */
--emmie-sig-warning-bg: var(--emmie-warning-bg); /* #FBF3DF */
--emmie-sig-warning-edge: var(--emmie-warning-border); /* #ECC766 */
--emmie-sig-danger-color: var(--emmie-danger); /* #D45F52 */
--emmie-sig-danger-bg: var(--emmie-danger-soft); /* #F8E4E1 */
--emmie-sig-danger-edge: #EDC2BB;
--emmie-sig-neutral-color: var(--emmie-text-muted); /* #6E7B74 */
--emmie-sig-neutral-bg: var(--emmie-surface-sunken);/* #FBF8F2 */
--emmie-sig-neutral-edge: var(--emmie-border); /* #E1DACE */
/* ---------- ZORGTYPES (domein-codering) ---------- */
--emmie-care-ambulant: #D98A3D; /* ambulatoir — warm oker */
--emmie-care-dagbesteding: #3A8FB0; /* dagbesteding — helder teal-blauw */
--emmie-care-vervoer: #2F6E5A; /* vervoer — salie */
--emmie-care-overig: #A86BA0; /* overig — gedempt pruim */
/* ---------- STATUS & WAARDERING ---------- */
--emmie-status-active: #2F8F6B;
--emmie-status-pending: #3A8FB0;
--emmie-status-inactive: #B7B2A8;
--emmie-star: #E0A23C; /* gouden ster */
--emmie-star-empty: #E7E1D6;
/* ============================================================
TYPOGRAFIE — Inter (UI) + Space Grotesk (display), gedeeld
============================================================ */
--emmie-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* @kind font */
--emmie-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* @kind font */ /* koppen & display */
--emmie-fw-light: 300; /* @kind font */
--emmie-fw-normal: 400; /* @kind font */
--emmie-fw-medium: 500; /* @kind font */
--emmie-fw-semibold: 600; /* @kind font */
--emmie-fw-bold: 700; /* @kind font */
/* Product-schaal — compact (basis 14px) */
--emmie-text-xs: 0.75rem; /* 12px — badges, meta */
--emmie-text-sm: 0.8125rem; /* 13px — tabel, dichte UI */
--emmie-text-base: 0.875rem; /* 14px — body / default */
--emmie-text-h3: 1rem; /* 16px — kaart/sectiekop */
--emmie-text-h2: 1.5rem; /* 24px — subkop */
--emmie-text-h1: 1.75rem; /* 28px — paginatitel */
/* Marketing-schaal — expressief (basis 18px) */
--emmie-mkt-text-meta: 0.75rem; /* 12px */
--emmie-mkt-text-small: 0.9375rem; /* 15px */
--emmie-mkt-text-body: 1.125rem; /* 18px */
--emmie-mkt-text-lead: 1.375rem; /* 22px */
--emmie-mkt-text-h4: 1.5rem; /* 24px */
--emmie-mkt-text-h3: 2rem; /* 32px */
--emmie-mkt-text-h2: 2.625rem; /* 42px */
--emmie-mkt-text-hero: 3.75rem; /* 60px */
/* ============================================================
RADII — rond & functioneel
============================================================ */
--emmie-radius-sm: 8px; /* kleine elementen, badges-vierkant */
--emmie-radius: 12px; /* inputs, kleine kaarten */
--emmie-radius-card: 14px; /* standaard kaart */
--emmie-radius-lg: 22px; /* marketing-kaart, grote vlakken */
--emmie-radius-xl: 32px; /* hero-panelen */
--emmie-radius-pill: 9999px; /* volledig rond — knoppen, badges, pills, avatars */
/* ============================================================
SPACING — 4/8 baseline
============================================================ */
--emmie-space-1: 4px;
--emmie-space-2: 8px;
--emmie-space-3: 12px;
--emmie-space-4: 16px;
--emmie-space-5: 20px;
--emmie-space-6: 24px;
--emmie-space-8: 32px;
--emmie-space-10: 40px;
--emmie-space-12: 48px;
--emmie-space-16: 64px;
--emmie-space-20: 80px;
--emmie-space-24: 112px;
/* ============================================================
SCHADUWEN — zacht, gelaagd, warm ink-getint
============================================================ */
--emmie-shadow-xs: 0 1px 2px rgba(31,43,38,0.05); /* @kind shadow */
--emmie-shadow-sm: 0 2px 6px rgba(31,43,38,0.05), 0 8px 18px -10px rgba(31,43,38,0.12); /* @kind shadow */
--emmie-shadow-md: 0 2px 6px rgba(31,43,38,0.05), 0 14px 30px -16px rgba(31,43,38,0.16); /* @kind shadow */
--emmie-shadow-lg: 0 4px 10px rgba(31,43,38,0.05), 0 30px 60px -22px rgba(31,43,38,0.2); /* @kind shadow */
--emmie-shadow-accent: 0 8px 20px -8px rgba(222,115,86,0.45); /* @kind shadow */ /* primaire CTA */
--emmie-focus-ring: 0 0 0 3px rgba(222,115,86,0.28); /* @kind shadow */ /* klei focus-ring */
}
/* ============================================================
PRODUCT-REGISTER — scope met class="emmie"
============================================================ */
.emmie {
font-family: var(--emmie-font-ui);
font-size: var(--emmie-text-base);
color: var(--emmie-ink);
background: var(--emmie-canvas);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.emmie h1, .emmie .h1 {
font-family: var(--emmie-font-display);
font-size: var(--emmie-text-h1);
font-weight: var(--emmie-fw-bold);
line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: var(--emmie-primary);
}
.emmie h2, .emmie .h2 {
font-family: var(--emmie-font-display);
font-size: var(--emmie-text-h2);
font-weight: var(--emmie-fw-semibold);
line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--emmie-ink);
}
.emmie h3, .emmie .h3 {
font-family: var(--emmie-font-display);
font-size: var(--emmie-text-h3);
font-weight: var(--emmie-fw-semibold);
line-height: 1.3; margin: 0; color: var(--emmie-ink);
}
.emmie p { margin: 0 0 0.5rem; }
.emmie label, .emmie .form-label { font-weight: var(--emmie-fw-semibold); font-size: var(--emmie-text-sm); }
.emmie small, .emmie .text-muted { color: var(--emmie-text-muted); }
.emmie a { color: var(--emmie-accent-dark); text-decoration: none; }
.emmie a:hover { color: var(--emmie-accent); }
/* ============================================================
VORMTAAL — DE RAAT (het beeldmerk als motief)
------------------------------------------------------------
Het beeldmerk is de raat: drie cellen op het honingraat-raster
waarin een bij verschijnt — twee gevulde cellen, een open cel en
vier strepen als lijf. Altijd monochroom, in precies vier vaste
combinaties: klei op licht (standaard) · wit op salie ·
klei-donker op klei-soft · klei op ink. De complete raat is
voorbehouden aan logo-plekken: header/footer, AppShell, app-icoon.
Als DECORATIE bestaat alleen DE CEL (.em-cell): één raatcel,
uitvergroot. Vier vaste regels:
1. alleen een open (outline) óf gevulde zeshoek — niets anders;
2. altijd zwaar ingezoomd: de cel is groter dan de helft van
zijn vlak;
3. altijd afgesneden door minstens één rand — nooit volledig
in beeld;
4. altijd één cel per vlak — nooit meerdere bij elkaar, nooit
een raster of patroon.
De oude stippen-taal (constellatie) is volledig vervallen.
============================================================ */
/* De cel — plaatsing: de ouder krijgt position:relative en
overflow:hidden; de cel krijgt alleen een width plus negatieve
offsets (top/right/bottom/left); de hoogte volgt de verhouding.
Content die eroverheen ligt: position:relative + z-index:1. */
.em-cell {
position: absolute; z-index: 0; pointer-events: none;
aspect-ratio: 50 / 44.4; /* vaste verhouding van de logo-cel */
background: url("data:image/svg+xml,") center/contain no-repeat;
}
.em-cell--fill { /* gevulde cel op licht — klei-soft */
background-image: url("data:image/svg+xml,");
}
.em-cell--dark { /* open cel op salie/donker — wit 18% */
background-image: url("data:image/svg+xml,");
}
.em-cell--fill-dark { /* gevulde cel op salie/donker — wit 7% */
background-image: url("data:image/svg+xml,");
}
/* Label / eyebrow — schoon tekst-pill (de stippen-marker is vervallen) */
.em-pill {
display: inline-flex; align-items: center;
padding: 7px 16px;
background: var(--emmie-surface);
border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-pill);
color: var(--emmie-primary);
font-weight: 600; font-size: var(--emmie-text-sm);
box-shadow: var(--emmie-shadow-xs);
}
.em-pill--dark {
background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18);
color: #fff; box-shadow: none;
}
/* VERVALLEN: .em-connect (stippen-marker). Rendert bewust niets
meer — verwijder hem uit bestaande markup. */
.em-connect { display: none; }
/* Klei-veeg achter tekst (highlight) */
.em-hl { position: relative; white-space: nowrap; z-index: 0; }
.em-hl::after {
content: ""; position: absolute; left: -0.14em; right: -0.14em; bottom: 0.04em;
height: 0.32em; background: var(--emmie-accent); border-radius: 9999px; z-index: -1;
}
/* ============================================================
EMMIE — Componenten (product-register)
Scope met class="emmie". Bouwt op de tokens in colors_and_type.css.
Saliegroen = chrome/structuur, klei = actie/signatuur.
============================================================ */
/* ---------- Knoppen (capsule) ---------- */
.emmie .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--emmie-font-ui); font-weight: 500; font-size: var(--emmie-text-base);
line-height: 1.1; white-space: nowrap; cursor: pointer;
padding: 10px 20px; border: 1px solid transparent; border-radius: var(--emmie-radius-pill);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.emmie .btn:active { transform: translateY(1px); }
.emmie .btn:disabled { opacity: .45; cursor: default; }
.emmie .btn-primary { background: var(--emmie-accent); color: #fff; box-shadow: var(--emmie-shadow-accent); }
.emmie .btn-primary:hover { background: var(--emmie-accent-light); }
.emmie .btn-secondary { background: var(--emmie-primary); color: #fff; }
.emmie .btn-secondary:hover { background: var(--emmie-primary-light); }
.emmie .btn-primary:disabled, .emmie .btn-primary[disabled] { background: var(--emmie-secondary-disabled); box-shadow: none; opacity: 1; }
.emmie .btn-secondary:disabled, .emmie .btn-secondary[disabled] { background: var(--emmie-primary-disabled); opacity: 1; }
.emmie .btn-outline { background: var(--emmie-surface); color: var(--emmie-accent-dark); border-color: var(--emmie-accent); }
.emmie .btn-outline:hover { background: var(--emmie-accent); color: #fff; }
.emmie .btn-ghost { background: transparent; color: var(--emmie-primary); border-color: var(--emmie-border); }
.emmie .btn-ghost:hover { border-color: var(--emmie-primary); background: var(--emmie-primary-soft); }
.emmie .btn-link { background: transparent; color: var(--emmie-text-muted); padding: 6px 8px; }
.emmie .btn-link:hover { color: var(--emmie-accent-dark); }
.emmie .btn-sm { padding: 7px 14px; font-size: var(--emmie-text-sm); }
.emmie .btn-lg { padding: 13px 26px; font-size: 1rem; }
.emmie .btn-block { width: 100%; }
.emmie .btn-icon { padding: 9px; aspect-ratio: 1; background: var(--emmie-surface-sunken); color: var(--emmie-ink); border-color: var(--emmie-border); }
.emmie .btn-icon:hover { background: var(--emmie-primary-soft); color: var(--emmie-primary); border-color: transparent; }
/* ---------- Badges ---------- */
.emmie .badge {
display: inline-flex; align-items: center; gap: 5px; line-height: 1.3;
font-size: var(--emmie-text-xs); font-weight: 500; padding: 3px 11px; border-radius: var(--emmie-radius-pill);
}
.emmie .badge .led { width: 6px; height: 6px; border-radius: 9999px; }
.emmie .badge-accent { background: var(--emmie-accent-soft); color: var(--emmie-accent-dark); }
.emmie .badge-primary { background: var(--emmie-primary-soft); color: var(--emmie-primary-dark); }
.emmie .badge-success { background: var(--emmie-success-soft); color: var(--emmie-success); }
.emmie .badge-info { background: var(--emmie-info-soft); color: var(--emmie-info); }
.emmie .badge-danger { background: var(--emmie-danger-soft); color: var(--emmie-danger); }
.emmie .badge-warning { background: var(--emmie-warning-bg); color: var(--emmie-warning-text); border: 1px solid var(--emmie-warning-border); }
.emmie .badge-neutral { background: var(--emmie-surface-sunken); color: var(--emmie-text-muted); border: 1px solid var(--emmie-border); }
/* Zorgtype-badges — solide, domeingekleurd */
.emmie .care { display: inline-flex; align-items: center; color: #fff; font-size: var(--emmie-text-xs); font-weight: 500; padding: 3px 11px; border-radius: var(--emmie-radius-pill); white-space: nowrap; }
.emmie .care-ambulant { background: var(--emmie-care-ambulant); }
.emmie .care-dagbesteding { background: var(--emmie-care-dagbesteding); }
.emmie .care-vervoer { background: var(--emmie-care-vervoer); }
.emmie .care-overig { background: var(--emmie-care-overig); }
/* ---------- Kaarten ---------- */
.emmie .card {
background: var(--emmie-surface); border-radius: var(--emmie-radius-card);
box-shadow: var(--emmie-shadow-sm); overflow: hidden;
}
.emmie .card-pad { padding: var(--emmie-space-4); }
.emmie .card-head {
display: flex; align-items: center; justify-content: space-between; padding: var(--emmie-space-4);
}
.emmie .card-head h3 { display: flex; align-items: center; gap: 9px; }
.emmie .card-head .link { font-size: var(--emmie-text-xs); color: var(--emmie-accent-dark); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* Info-rijen — hairline-scheiding */
.emmie .info-row { display: flex; gap: 12px; padding: 12px var(--emmie-space-4); border-top: 1px solid var(--emmie-hairline); align-items: flex-start; }
.emmie .info-row .dt { width: 150px; flex-shrink: 0; color: var(--emmie-text-light); font-weight: 600; font-size: var(--emmie-text-sm); }
.emmie .info-row .dd { flex: 1; font-size: var(--emmie-text-sm); }
.emmie .info-row .em { margin-right: 6px; }
.emmie .info-row .count { color: var(--emmie-accent-dark); font-weight: 600; cursor: pointer; }
/* KPI / stat */
.emmie .kpi { background: var(--emmie-surface); border-radius: var(--emmie-radius-card); padding: var(--emmie-space-4); box-shadow: var(--emmie-shadow-sm); }
.emmie .kpi .kpi-title { font-family: var(--emmie-font-display); font-size: var(--emmie-text-h3); font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.emmie .kpi .big-num { font-family: var(--emmie-font-display); font-size: 30px; font-weight: 700; color: var(--emmie-primary); line-height: 1; }
.emmie .kpi .big-num small { font-size: var(--emmie-text-sm); font-weight: 400; color: var(--emmie-text-muted); font-family: var(--emmie-font-ui); margin-left: 6px; }
.emmie .kpi .kpi-row { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--emmie-hairline); font-size: var(--emmie-text-sm); }
.emmie .kpi .kpi-row:first-of-type { border-top: 0; }
.emmie .kpi .kpi-row .v { font-weight: 600; }
/* ============================================================
FORMULIEREN
------------------------------------------------------------
Eén veld-taal: warme surface, 12px-radius, 1px border, klei
focus-ring. Alle controls delen dezelfde hoogte (40px / sm 34
/ lg 46) zodd ze naast elkaar uitlijnen. States via één extra
class op het veld (.is-invalid / .is-valid / disabled-attr).
Scaffolding .field .field__label .field__hint .field__msg
Tekstvelden .input (input/textarea/select) + .input--sm/lg
Select .select (wrapper met chevron)
Met icoon .input-affix (.input-affix__icon left/right)
Addons .input-group (.input-group__addon prepend/append)
Stepper .stepper
Keuze .choice (checkbox/radio) .switch (toggle)
Knopgroepen .segmented .btn-group .btn-icon
Slider .range .range-dual
Tags/mention .tags-field .tag .tag--mention
Wysiwyg .wysiwyg (.wysiwyg__toolbar .wysiwyg__content)
Upload .dropzone .file-trigger
Datum .input[type=date] .daterange
============================================================ */
/* ---- Veld-scaffolding ---- */
.emmie .field { margin-bottom: var(--emmie-space-4); }
.emmie .field:last-child { margin-bottom: 0; }
.emmie .field__label, .emmie .field > label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: var(--emmie-fw-semibold); font-size: var(--emmie-text-sm); color: var(--emmie-ink); }
.emmie .field__req { color: var(--emmie-accent); }
.emmie .field__opt { color: var(--emmie-text-light); font-weight: 400; }
.emmie .field__hint { margin: 6px 0 0; font-size: var(--emmie-text-xs); color: var(--emmie-text-muted); line-height: 1.45; }
.emmie .field__msg { margin-top: 6px; } /* gebruik .signal-msg erin (data-sig) */
.emmie .field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.emmie .field__count { font-size: var(--emmie-text-xs); color: var(--emmie-text-light); font-variant-numeric: tabular-nums; }
/* ---- Tekstvelden / select / textarea ---- */
.emmie .input,
.emmie .field input:where(:not([type=checkbox],[type=radio],[type=range])),
.emmie .field select, .emmie .field textarea {
width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--emmie-text-base);
min-height: 40px; padding: 9px 13px; background: var(--emmie-surface);
border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius);
outline: none; color: var(--emmie-ink); transition: border-color .15s, box-shadow .15s, background .15s;
}
.emmie textarea.input, .emmie .field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.emmie .input:hover:not(:disabled):not(:focus),
.emmie .field input:hover:not(:disabled):not(:focus), .emmie .field textarea:hover:not(:disabled):not(:focus), .emmie .field select:hover:not(:disabled) { border-color: var(--emmie-text-light); }
.emmie .input:focus,
.emmie .field input:focus, .emmie .field select:focus, .emmie .field textarea:focus {
border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring);
}
.emmie .input::placeholder, .emmie .field input::placeholder, .emmie .field textarea::placeholder { color: var(--emmie-text-light); }
.emmie .input:disabled, .emmie .input[disabled], .emmie .field :disabled,
.emmie .input[readonly] { background: var(--emmie-surface-sunken); color: var(--emmie-text-muted); cursor: not-allowed; box-shadow: none; }
.emmie .input[readonly] { cursor: default; }
.emmie .input.input--sm { min-height: 34px; padding: 6px 11px; font-size: var(--emmie-text-sm); border-radius: var(--emmie-radius-sm); }
.emmie .input.input--lg { min-height: 46px; padding: 12px 16px; font-size: 1rem; }
/* State-modifiers — zet op het veld of direct op de control */
.emmie .input.is-invalid, .emmie .is-invalid .input, .emmie .is-invalid input, .emmie .is-invalid textarea, .emmie .is-invalid select { border-color: var(--emmie-danger); }
.emmie .input.is-invalid:focus, .emmie .is-invalid .input:focus, .emmie .is-invalid input:focus { box-shadow: 0 0 0 3px var(--emmie-danger-soft); }
.emmie .input.is-valid, .emmie .is-valid .input, .emmie .is-valid input { border-color: var(--emmie-success); }
.emmie .input.is-valid:focus, .emmie .is-valid .input:focus { box-shadow: 0 0 0 3px var(--emmie-success-soft); }
/* ---- Select — eigen chevron ---- */
.emmie .select { position: relative; display: block; }
.emmie .select select, .emmie select.input {
-webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7B74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 13px center;
}
/* ---- Veld met icoon (leading/trailing) ---- */
.emmie .input-affix { position: relative; display: flex; align-items: center; }
.emmie .input-affix__icon + .input { padding-left: 38px; }
.emmie .input-affix.input-affix--trailing .input { padding-left: 13px; padding-right: 38px; }
.emmie .input-affix__icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--emmie-text-light); pointer-events: none; display: inline-flex; }
.emmie .input-affix__icon svg { width: 100%; height: 100%; display: block; }
.emmie .input-affix--trailing .input-affix__icon { left: auto; right: 13px; }
.emmie .input-affix .input:focus ~ .input-affix__icon { color: var(--emmie-accent); }
/* klikbaar trailing-icoon (b.v. wachtwoord tonen, wissen) */
.emmie .input-affix__btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--emmie-radius-sm); color: var(--emmie-text-light); cursor: pointer; transition: background .15s, color .15s; }
.emmie .input-affix__btn:hover { background: var(--emmie-surface-sunken); color: var(--emmie-ink); }
.emmie .input-affix:has(.input-affix__btn) .input { padding-right: 40px; }
/* ---- Input-group — prepend / append addons ---- */
.emmie .input-group { display: flex; align-items: stretch; }
.emmie .input-group > .input { border-radius: 0; position: relative; z-index: 1; }
.emmie .input-group > .input:focus { z-index: 2; }
.emmie .input-group > :first-child { border-top-left-radius: var(--emmie-radius); border-bottom-left-radius: var(--emmie-radius); }
.emmie .input-group > :last-child { border-top-right-radius: var(--emmie-radius); border-bottom-right-radius: var(--emmie-radius); }
.emmie .input-group__addon {
display: inline-flex; align-items: center; gap: 6px; padding: 0 13px;
background: var(--emmie-surface-sunken); border: 1px solid var(--emmie-border);
color: var(--emmie-text-muted); font-size: var(--emmie-text-sm); white-space: nowrap;
}
.emmie .input-group__addon + .input, .emmie .input + .input-group__addon { border-left: 0; }
.emmie .input-group > .input + .input-group__addon { border-left: 0; }
.emmie .input-group__addon:has(.btn), .emmie .input-group__addon.input-group__addon--btn { padding: 0; background: transparent; border: 0; }
.emmie .input-group .btn { border-radius: 0; }
.emmie .input-group > .btn:last-child { border-top-right-radius: var(--emmie-radius); border-bottom-right-radius: var(--emmie-radius); }
/* ---- Number-stepper ---- */
.emmie .stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius); overflow: hidden; background: var(--emmie-surface); }
.emmie .stepper:focus-within { border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring); }
.emmie .stepper button { width: 38px; border: 0; background: var(--emmie-surface-sunken); color: var(--emmie-ink); font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.emmie .stepper button:hover { background: var(--emmie-primary-soft); color: var(--emmie-primary); }
.emmie .stepper button:disabled { color: var(--emmie-text-light); cursor: not-allowed; background: var(--emmie-surface-sunken); }
.emmie .stepper input { width: 54px; min-height: 38px; border: 0; border-left: 1px solid var(--emmie-hairline); border-right: 1px solid var(--emmie-hairline); border-radius: 0; text-align: center; background: var(--emmie-surface); font-family: inherit; font-size: var(--emmie-text-base); color: var(--emmie-ink); outline: none; -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.emmie .stepper input::-webkit-outer-spin-button, .emmie .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ---- Keuze — checkbox & radio (custom) ---- */
.emmie .choice { display: inline-flex; align-items: flex-start; gap: 9px; font-size: var(--emmie-text-base); color: var(--emmie-ink); cursor: pointer; line-height: 1.4; }
.emmie .choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.emmie .choice__box { position: relative; flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; background: var(--emmie-surface); border: 1.5px solid var(--emmie-border); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, border-color .15s, box-shadow .15s; }
.emmie .choice--radio .choice__box { border-radius: 50%; }
.emmie .choice__box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.emmie .choice__box .choice__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.4); transition: opacity .12s, transform .12s; }
.emmie .choice input:checked ~ .choice__box { background: var(--emmie-accent); border-color: var(--emmie-accent); }
.emmie .choice input:checked ~ .choice__box svg, .emmie .choice input:checked ~ .choice__box .choice__dot { opacity: 1; transform: scale(1); }
.emmie .choice input:focus-visible ~ .choice__box { box-shadow: var(--emmie-focus-ring); }
.emmie .choice:hover input:not(:disabled) ~ .choice__box { border-color: var(--emmie-accent); }
.emmie .choice input:indeterminate ~ .choice__box { background: var(--emmie-accent); border-color: var(--emmie-accent); }
.emmie .choice input:indeterminate ~ .choice__box::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 2px; border-radius: 2px; background: #fff; }
.emmie .choice input:disabled ~ .choice__box { background: var(--emmie-surface-sunken); border-color: var(--emmie-border); }
.emmie .choice input:checked:disabled ~ .choice__box, .emmie .choice input:indeterminate:disabled ~ .choice__box { background: var(--emmie-text-light); border-color: var(--emmie-text-light); }
.emmie .choice input:disabled ~ .choice__label, .emmie .choice:has(input:disabled) { color: var(--emmie-text-muted); cursor: not-allowed; }
.emmie .choice__label .sub { display: block; font-size: var(--emmie-text-xs); color: var(--emmie-text-muted); font-weight: 400; margin-top: 1px; }
/* Keuze als kaart (selectable card) */
.emmie .choice-card { align-items: center; padding: 12px 14px; border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius); background: var(--emmie-surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.emmie .choice-card:hover { border-color: var(--emmie-text-light); }
.emmie .choice-card:has(input:checked) { border-color: var(--emmie-accent); background: var(--emmie-accent-soft); box-shadow: var(--emmie-shadow-xs); }
/* ---- Toggle / switch ---- */
.emmie .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--emmie-text-base); color: var(--emmie-ink); }
.emmie .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.emmie .switch__track { flex-shrink: 0; width: 40px; height: 23px; border-radius: var(--emmie-radius-pill); background: var(--emmie-border); position: relative; transition: background .18s; }
.emmie .switch__track::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--emmie-shadow-xs); transition: transform .18s; }
.emmie .switch input:checked ~ .switch__track { background: var(--emmie-accent); }
.emmie .switch input:checked ~ .switch__track::after { transform: translateX(17px); }
.emmie .switch input:focus-visible ~ .switch__track { box-shadow: var(--emmie-focus-ring); }
.emmie .switch:has(input:disabled) { color: var(--emmie-text-muted); cursor: not-allowed; opacity: .6; }
/* ---- Segmented control (tab/multi-keuze, één actief) ---- */
.emmie .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--emmie-surface-sunken); border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius-pill); }
.emmie .segmented button { border: 0; background: transparent; padding: 6px 15px; border-radius: var(--emmie-radius-pill); font-family: inherit; font-size: var(--emmie-text-sm); font-weight: 500; color: var(--emmie-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.emmie .segmented button:active { transform: scale(.96); }
.emmie .segmented button:hover:not(.on) { color: var(--emmie-ink); }
.emmie .segmented button.on { background: var(--emmie-surface); color: var(--emmie-primary); font-weight: 600; box-shadow: var(--emmie-shadow-xs); animation: em-control-pop .2s ease; }
.emmie .segmented--block { display: flex; }
.emmie .segmented--block button { flex: 1; justify-content: center; }
/* ---- Button-group (gekoppelde knoppen, multi-select) ---- */
.emmie .btn-group { display: inline-flex; }
.emmie .btn-group .btn { border-radius: 0; border: 1px solid var(--emmie-border); background: var(--emmie-surface); color: var(--emmie-text-muted); box-shadow: none; font-weight: 500; }
.emmie .btn-group .btn + .btn { margin-left: -1px; }
.emmie .btn-group .btn:first-child { border-top-left-radius: var(--emmie-radius-pill); border-bottom-left-radius: var(--emmie-radius-pill); padding-left: 18px; }
.emmie .btn-group .btn:last-child { border-top-right-radius: var(--emmie-radius-pill); border-bottom-right-radius: var(--emmie-radius-pill); padding-right: 18px; }
.emmie .btn-group .btn:hover { color: var(--emmie-primary); background: var(--emmie-primary-soft); z-index: 1; }
.emmie .btn-group .btn.on { background: var(--emmie-primary); border-color: var(--emmie-primary); color: #fff; z-index: 2; animation: em-control-pop .2s ease; }
@keyframes em-control-pop { from { transform: scale(.9); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .emmie .segmented button.on, .emmie .btn-group .btn.on { animation: none; } }
/* ---- Range-slider ---- */
.emmie .range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--emmie-radius-pill); background: var(--emmie-border); outline: none; }
.emmie .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--emmie-accent); border: 3px solid #fff; box-shadow: var(--emmie-shadow-sm); cursor: pointer; transition: transform .12s; }
.emmie .range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--emmie-accent); border: 3px solid #fff; box-shadow: var(--emmie-shadow-sm); cursor: pointer; }
.emmie .range::-webkit-slider-thumb:active { transform: scale(1.12); }
.emmie .range:focus-visible::-webkit-slider-thumb { box-shadow: var(--emmie-focus-ring); }
/* Gevulde track via achtergrond-gradient (JS zet --val %) */
.emmie .range--fill { background: linear-gradient(to right, var(--emmie-accent) 0 var(--val,50%), var(--emmie-border) var(--val,50%) 100%); }
/* Dubbele (range) slider */
.emmie .range-dual { position: relative; height: 20px; display: flex; align-items: center; }
.emmie .range-dual__track { position: absolute; left: 0; right: 0; height: 6px; border-radius: var(--emmie-radius-pill); background: var(--emmie-border); }
.emmie .range-dual__fill { position: absolute; height: 6px; border-radius: var(--emmie-radius-pill); background: var(--emmie-accent); }
.emmie .range-dual input { position: absolute; left: 0; width: 100%; margin: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; height: 20px; }
.emmie .range-dual input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--emmie-accent); border: 3px solid #fff; box-shadow: var(--emmie-shadow-sm); cursor: pointer; }
.emmie .range-dual input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--emmie-accent); border: 3px solid #fff; box-shadow: var(--emmie-shadow-sm); cursor: pointer; }
/* ---- Tags / mention-tokens (multi-value input) ---- */
.emmie .tags-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; min-height: 40px; background: var(--emmie-surface); border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius); cursor: text; transition: border-color .15s, box-shadow .15s; }
.emmie .tags-field:focus-within { border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring); }
.emmie .tags-field input { flex: 1; min-width: 90px; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: var(--emmie-text-sm); color: var(--emmie-ink); padding: 4px 2px; }
.emmie .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; background: var(--emmie-primary-soft); color: var(--emmie-primary); border-radius: var(--emmie-radius-pill); font-size: var(--emmie-text-sm); font-weight: 500; white-space: nowrap; }
.emmie .tag__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .6; transition: opacity .15s, background .15s; }
.emmie .tag__x:hover { opacity: 1; background: rgba(31,43,38,.1); }
.emmie .tag__x svg { width: 13px; height: 13px; }
.emmie .tag--mention { background: var(--emmie-accent-soft); color: var(--emmie-accent-dark); padding-left: 5px; }
.emmie .tag--mention .tag__avatar { width: 17px; height: 17px; border-radius: 50%; background: var(--emmie-accent); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* Mention-suggesties (popover) */
.emmie .mention-list { background: var(--emmie-surface); border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius); box-shadow: var(--emmie-shadow-md); padding: 5px; }
.emmie .mention-list__item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--emmie-radius-sm); font-size: var(--emmie-text-sm); cursor: pointer; }
.emmie .mention-list__item:hover, .emmie .mention-list__item.on { background: var(--emmie-accent-soft); color: var(--emmie-accent-dark); }
.emmie .mention-list__item .avatar { width: 24px; height: 24px; font-size: 10px; }
.emmie .mention-list__head { padding: 7px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--emmie-text-light); }
.emmie .mention-list__div { height: 1px; background: var(--emmie-hairline); margin: 5px 6px; }
.emmie .mention-list__empty { padding: 12px 11px; font-size: var(--emmie-text-sm); color: var(--emmie-text-muted); }
.emmie .mention-list__item .role { margin-left: auto; padding-left: 12px; font-size: var(--emmie-text-xs); color: var(--emmie-text-light); }
.emmie .mention-list__item.on .role { color: var(--emmie-accent-dark); }
/* Inline mention-token binnen lopende tekst */
.emmie .mention-inline { color: var(--emmie-accent-dark); background: var(--emmie-accent-soft); border-radius: 5px; padding: 1px 5px; font-weight: 600; white-space: nowrap; }
/* Popover-anker — menu zweeft onder de cursor */
.emmie .mention-anchor { position: relative; }
.emmie .mention-pop { position: absolute; z-index: 40; min-width: 240px; max-height: 230px; overflow-y: auto; }
/* ---- Multi-select — dropdown met meervoudige keuze ---- *
Trigger gedraagt zich als een .input: warme surface, 12px radius, klei
focus-ring, gelijke hoogte (40 / sm 34 / lg 46). Selectie toont als chips
binnen het veld. Bij veel selectie blijft het veld één regel: de chips die
passen blijven staan, de rest klapt samen in een "+N"-pil (JS rekent uit).
Variant .multiselect--count toont i.p.v. chips één samenvatting ("8 gekozen").
Trigger .multiselect__control .multiselect__chips .multiselect__more
.multiselect__placeholder .multiselect__count .multiselect__tools
Paneel .multiselect__panel .multiselect__search .multiselect__bulk
.multiselect__list .multiselect__opt .multiselect__group
.multiselect__check .multiselect__empty */
.emmie .multiselect { position: relative; }
.emmie .multiselect__control {
display: flex; align-items: center; gap: 7px; width: 100%; box-sizing: border-box;
min-height: 40px; padding: 5px 9px 5px 11px; background: var(--emmie-surface);
border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius);
cursor: pointer; font-family: inherit; font-size: var(--emmie-text-base); color: var(--emmie-ink);
text-align: left; transition: border-color .15s, box-shadow .15s;
}
.emmie .multiselect__control:hover { border-color: var(--emmie-text-light); }
.emmie .multiselect.is-open .multiselect__control,
.emmie .multiselect__control:focus-visible { outline: none; border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring); }
.emmie .multiselect.is-invalid .multiselect__control { border-color: var(--emmie-danger); }
.emmie .multiselect.is-invalid.is-open .multiselect__control { box-shadow: 0 0 0 3px var(--emmie-danger-soft); }
.emmie .multiselect[aria-disabled="true"] .multiselect__control { background: var(--emmie-surface-sunken); color: var(--emmie-text-muted); cursor: not-allowed; box-shadow: none; }
/* chips-rij — één regel, overflow verdwijnt achter de "+N"-pil */
.emmie .multiselect__chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.emmie .multiselect__chips .tag { flex: none; padding: 2px 5px 2px 10px; font-size: var(--emmie-text-xs); max-width: 170px; }
.emmie .multiselect__chips .tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emmie .multiselect__chips .tag__x { width: 19px; height: 19px; }
.emmie .multiselect__chips .tag.is-hidden { display: none; }
.emmie .multiselect__more { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--emmie-radius-pill); background: var(--emmie-surface-sunken); border: 1px solid var(--emmie-border); color: var(--emmie-text-muted); font-size: var(--emmie-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emmie .multiselect__more[hidden] { display: none; }
.emmie .multiselect__placeholder { flex: 1; color: var(--emmie-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emmie .multiselect__count { flex: 1; color: var(--emmie-ink); font-weight: 500; }
.emmie .multiselect__count em { color: var(--emmie-accent-dark); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
/* rechter gereedschap — wissen + chevron */
.emmie .multiselect__tools { flex: none; display: inline-flex; align-items: center; gap: 2px; align-self: center; }
.emmie .multiselect__clear { width: 24px; height: 24px; display: none; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 50%; color: var(--emmie-text-light); cursor: pointer; transition: background .15s, color .15s; }
.emmie .multiselect__clear:hover { background: var(--emmie-surface-sunken); color: var(--emmie-ink); }
.emmie .multiselect__clear svg { width: 13px; height: 13px; }
.emmie .multiselect.has-value .multiselect__clear { display: inline-flex; }
.emmie .multiselect__caret { display: inline-flex; color: var(--emmie-text-light); transition: transform .2s ease, color .15s; }
.emmie .multiselect__caret svg { width: 17px; height: 17px; }
.emmie .multiselect.is-open .multiselect__caret { transform: rotate(180deg); color: var(--emmie-accent); }
/* maten — uitlijnen met .input--sm / --lg */
.emmie .multiselect--sm .multiselect__control { min-height: 34px; border-radius: var(--emmie-radius-sm); font-size: var(--emmie-text-sm); }
.emmie .multiselect--lg .multiselect__control { min-height: 46px; }
/* ---- Dropdown-paneel ---- */
.emmie .multiselect__panel {
position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius); box-shadow: var(--emmie-shadow-lg, var(--emmie-shadow-md));
padding: 6px; display: flex; flex-direction: column; max-height: 320px;
transform-origin: top; animation: em-ms-pop .14s ease;
}
@keyframes em-ms-pop { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .emmie .multiselect__panel { animation: none; } }
.emmie .multiselect__panel[hidden] { display: none; }
.emmie .multiselect__search { position: relative; margin-bottom: 4px; }
.emmie .multiselect__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--emmie-text-light); pointer-events: none; }
.emmie .multiselect__search input { width: 100%; box-sizing: border-box; min-height: 36px; padding: 7px 12px 7px 33px; border: 1px solid var(--emmie-hairline); border-radius: var(--emmie-radius-sm); background: var(--emmie-surface-sunken); font-family: inherit; font-size: var(--emmie-text-sm); color: var(--emmie-ink); outline: none; transition: border-color .15s, background .15s; }
.emmie .multiselect__search input:focus { border-color: var(--emmie-accent); background: var(--emmie-surface); }
.emmie .multiselect__search input::placeholder { color: var(--emmie-text-light); }
/* bulk-balk — alles selecteren / wissen + teller */
.emmie .multiselect__bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 6px; }
.emmie .multiselect__bulk-count { font-size: var(--emmie-text-xs); color: var(--emmie-text-muted); font-variant-numeric: tabular-nums; }
.emmie .multiselect__bulk-act { border: 0; background: transparent; padding: 2px 4px; font-family: inherit; font-size: var(--emmie-text-xs); font-weight: 600; color: var(--emmie-accent-dark); cursor: pointer; border-radius: var(--emmie-radius-sm); }
.emmie .multiselect__bulk-act:hover { text-decoration: underline; }
.emmie .multiselect__bulk-act:disabled { color: var(--emmie-text-light); cursor: not-allowed; text-decoration: none; }
/* opties-lijst (scroll) */
.emmie .multiselect__list { overflow-y: auto; flex: 1; margin: 0 -2px; padding: 0 2px; }
.emmie .multiselect__group { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--emmie-text-light); }
.emmie .multiselect__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--emmie-radius-sm); font-size: var(--emmie-text-sm); color: var(--emmie-ink); cursor: pointer; }
.emmie .multiselect__opt:hover, .emmie .multiselect__opt.is-active { background: var(--emmie-accent-soft); }
.emmie .multiselect__opt[aria-selected="true"] { color: var(--emmie-accent-dark); font-weight: 500; }
.emmie .multiselect__opt[hidden] { display: none; }
.emmie .multiselect__check { position: relative; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--emmie-border); border-radius: 6px; background: var(--emmie-surface); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, border-color .15s; }
.emmie .multiselect__check svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.emmie .multiselect__opt:hover .multiselect__check { border-color: var(--emmie-accent); }
.emmie .multiselect__opt[aria-selected="true"] .multiselect__check { background: var(--emmie-accent); border-color: var(--emmie-accent); }
.emmie .multiselect__opt[aria-selected="true"] .multiselect__check svg { opacity: 1; transform: scale(1); }
.emmie .multiselect__opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emmie .multiselect__opt-sub { color: var(--emmie-text-light); font-weight: 400; margin-left: 6px; font-size: var(--emmie-text-xs); }
.emmie .multiselect__opt .care { flex: none; }
.emmie .multiselect__empty { padding: 16px 11px; text-align: center; font-size: var(--emmie-text-sm); color: var(--emmie-text-muted); }
/* ---- WYSIWYG-editor ---- */
.emmie .wysiwyg { border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius); background: var(--emmie-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.emmie .wysiwyg:focus-within { border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring); }
.emmie .wysiwyg__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; background: var(--emmie-surface-sunken); border-bottom: 1px solid var(--emmie-hairline); }
.emmie .wysiwyg__btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--emmie-radius-sm); color: var(--emmie-text-muted); cursor: pointer; transition: background .15s, color .15s; }
.emmie .wysiwyg__btn:hover { background: var(--emmie-surface); color: var(--emmie-ink); }
.emmie .wysiwyg__btn.on { background: var(--emmie-primary-soft); color: var(--emmie-primary); }
.emmie .wysiwyg__btn svg { width: 16px; height: 16px; }
.emmie .wysiwyg__sep { width: 1px; height: 18px; background: var(--emmie-border); margin: 0 5px; }
.emmie .wysiwyg__content { padding: 13px 15px; min-height: 110px; font-size: var(--emmie-text-base); line-height: 1.6; color: var(--emmie-ink); outline: none; }
.emmie .wysiwyg__content:empty::before { content: attr(data-placeholder); color: var(--emmie-text-light); }
.emmie .wysiwyg__content p { margin: 0 0 .6em; }
.emmie .wysiwyg__content ul, .emmie .wysiwyg__content ol { margin: 0 0 .6em; padding-left: 1.3em; }
/* ---- Upload — dropzone & file-trigger ---- */
.emmie .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px; text-align: center; background: var(--emmie-sunken, var(--emmie-surface-sunken)); border: 1.5px dashed var(--emmie-border); border-radius: var(--emmie-radius-card); color: var(--emmie-text-muted); font-size: var(--emmie-text-sm); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.emmie .dropzone:hover, .emmie .dropzone.is-drag { border-color: var(--emmie-accent); background: var(--emmie-accent-soft); color: var(--emmie-accent-dark); }
.emmie .dropzone__icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--emmie-surface); color: var(--emmie-primary); box-shadow: var(--emmie-shadow-xs); }
.emmie .dropzone__icon svg { width: 18px; height: 18px; }
.emmie .dropzone strong { color: var(--emmie-ink); font-weight: 600; }
.emmie .dropzone__cta { color: var(--emmie-accent-dark); font-weight: 600; text-decoration: underline; }
/* Geüpload bestand-rijtje */
.emmie .file-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--emmie-surface); border: 1px solid var(--emmie-hairline); border-radius: var(--emmie-radius); font-size: var(--emmie-text-sm); }
.emmie .file-item__icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--emmie-radius-sm); background: var(--emmie-primary-soft); color: var(--emmie-primary); display: inline-flex; align-items: center; justify-content: center; }
.emmie .file-item__meta { flex: 1; min-width: 0; }
.emmie .file-item__meta b { font-weight: 600; display: block; }
.emmie .file-item__meta span { color: var(--emmie-text-muted); font-size: var(--emmie-text-xs); }
/* ---- Datum & date-range ---- */
.emmie .input[type=date], .emmie .input[type=time], .emmie .field input[type=date], .emmie .field input[type=time] { font-variant-numeric: tabular-nums; }
.emmie .input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.emmie .input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Date-range trigger — knop die het kalender-paneel opent */
.emmie .daterange { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 14px; background: var(--emmie-surface); border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius); font-family: inherit; font-size: var(--emmie-text-base); color: var(--emmie-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.emmie .daterange:hover { border-color: var(--emmie-text-light); }
.emmie .daterange:focus-visible, .emmie .daterange.is-open { outline: none; border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring); }
.emmie .daterange__icon { color: var(--emmie-text-light); display: inline-flex; }
.emmie .daterange__icon svg { width: 16px; height: 16px; }
.emmie .daterange__sep { color: var(--emmie-text-light); }
.emmie .daterange__caret { margin-left: 4px; color: var(--emmie-text-light); display: inline-flex; }
/* legacy alias behouden */
.emmie .checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: var(--emmie-text-sm); cursor: pointer; }
/* ---------- Tabel ---------- */
.emmie .table-wrap { background: var(--emmie-surface); border-radius: var(--emmie-radius-card); overflow: hidden; box-shadow: var(--emmie-shadow-sm); }
.emmie table.emmie-table { width: 100%; border-collapse: collapse; }
.emmie .emmie-table thead th { text-align: left; font-size: var(--emmie-text-xs); color: var(--emmie-text-light); font-weight: 600; padding: 12px 16px; white-space: nowrap; user-select: none; }
.emmie .emmie-table thead th .sort { color: var(--emmie-border); margin-left: 5px; }
.emmie .emmie-table tbody td { padding: 12px 16px; font-size: var(--emmie-text-sm); border-top: 1px solid var(--emmie-hairline); }
.emmie .emmie-table tbody tr { transition: background .15s; }
.emmie .emmie-table tbody tr:hover { background: var(--emmie-surface-sunken); }
.emmie .name-cell { display: flex; align-items: center; gap: 10px; }
.emmie .name-cell b { font-weight: 600; }
.emmie .name-cell .sub { color: var(--emmie-text-muted); font-size: var(--emmie-text-xs); }
/* ---------- Filterbar ---------- */
.emmie .filterbar { background: var(--emmie-surface); border-radius: var(--emmie-radius-card); padding: var(--emmie-space-3); box-shadow: var(--emmie-shadow-sm); margin-bottom: var(--emmie-space-4); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.emmie .search-field { position: relative; flex: 1; min-width: 220px; }
.emmie .search-field input { width: 100%; font-family: inherit; font-size: var(--emmie-text-sm); padding: 9px 14px 9px 38px; background: var(--emmie-surface); border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius-pill); outline: none; }
.emmie .search-field input:focus { border-color: var(--emmie-accent); box-shadow: var(--emmie-focus-ring); }
.emmie .search-field .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--emmie-text-light); }
.emmie .chip { border: 1px solid var(--emmie-border); background: var(--emmie-surface); border-radius: var(--emmie-radius-pill); padding: 7px 15px; font-size: var(--emmie-text-sm); cursor: pointer; color: var(--emmie-text-muted); display: inline-flex; gap: 7px; align-items: center; transition: all .15s; }
.emmie .chip:hover { border-color: var(--emmie-primary); color: var(--emmie-primary); }
.emmie .chip.on { background: var(--emmie-accent-soft); border-color: var(--emmie-accent); color: var(--emmie-accent-dark); font-weight: 600; }
/* ============================================================
SIGNALERING — alerts, panels, inline-meldingen & toasts
------------------------------------------------------------
Duidelijke interface-elementen vóór decoratie. Eén structuur,
vijf vaste severities (elk een vaste kleur + vast lijn-icoon),
in vier form factors:
.signal inline alert (banner in de pagina)
.signal.signal--panel groter vlak met titel, tekst & acties
.signal-msg compacte inline-melding (bij veld/rij)
.toast tijdelijke melding (hoek van het scherm)
Severity zet je met één data-attribuut: data-sig="info" /
"success" / "warning" / "danger" / "neutral". Dat zet alléén de
--sig-* variabelen (op een [data-*]-scope, geen thema-tokens),
dus dezelfde waarde werkt op alert, panel, inline-melding én
toast — consequente herkenning overal.
Herkenning = vaste kleur + vast icoon + (bij banners) een
3px-accentrand links. Vorm volgt severity, niet andersom.
============================================================ */
/* ---- Inline alert (banner) ---- */
.emmie .signal {
display: flex; gap: 11px; align-items: flex-start;
padding: 12px 14px;
background: var(--sig-bg, var(--emmie-info-soft));
border: 1px solid var(--sig-edge, #C2DDE8);
border-left: 3px solid var(--sig-color, var(--emmie-info));
border-radius: var(--emmie-radius);
font-size: var(--emmie-text-sm);
color: var(--emmie-ink);
}
.emmie .signal__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--sig-color, var(--emmie-info)); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.emmie .signal__icon svg { width: 100%; height: 100%; display: block; }
.emmie .signal__body { flex: 1; min-width: 0; }
.emmie .signal__title { font-weight: 600; font-size: var(--emmie-text-sm); color: var(--emmie-ink); margin: 0; line-height: 1.4; }
.emmie .signal__text { color: var(--emmie-text-muted); margin: 3px 0 0; line-height: 1.5; }
.emmie .signal__title + .signal__text { margin-top: 3px; }
.emmie .signal__body > .signal__text:only-child { margin: 0; color: var(--emmie-ink); }
.emmie .signal__text strong { color: var(--emmie-ink); font-weight: 600; }
.emmie .signal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.emmie .signal__actions .btn-sm { padding: 6px 13px; }
.emmie .signal__close {
flex-shrink: 0; width: 26px; height: 26px; margin: -3px -4px 0 2px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: var(--emmie-radius-sm);
color: var(--emmie-text-light); cursor: pointer; transition: background .15s, color .15s;
}
.emmie .signal__close:hover { background: rgba(31,43,38,0.08); color: var(--emmie-ink); }
.emmie .signal__close svg { width: 15px; height: 15px; }
/* ---- Vlak / panel — meer presentie, icoon in een ronde chip ---- */
.emmie .signal--panel {
gap: 14px; padding: 16px 18px;
border-left-width: 1px;
border-radius: var(--emmie-radius-card);
box-shadow: var(--emmie-shadow-xs);
}
.emmie .signal--panel .signal__icon {
width: 38px; height: 38px; margin-top: 0; padding: 9px;
border-radius: var(--emmie-radius-pill);
background: var(--emmie-surface);
box-shadow: inset 0 0 0 1px var(--sig-edge, #C2DDE8);
}
.emmie .signal--panel .signal__title { font-size: var(--emmie-text-h3); font-family: var(--emmie-font-display); }
/* ---- Solid — voor de meest urgente meldingen (danger/warning) ---- */
.emmie .signal--solid { background: var(--sig-color, var(--emmie-info)); border-color: transparent; color: #fff; }
.emmie .signal--solid .signal__title { color: #fff; }
.emmie .signal--solid .signal__text { color: rgba(255,255,255,0.9); }
.emmie .signal--solid .signal__text strong { color: #fff; }
.emmie .signal--solid .signal__icon { color: #fff; background: rgba(255,255,255,0.16); box-shadow: none; }
.emmie .signal--solid .signal__close { color: rgba(255,255,255,0.8); }
.emmie .signal--solid .signal__close:hover { background: rgba(255,255,255,0.18); color: #fff; }
/* ---- Compacte inline-melding (bij een veld of tabelrij) ---- */
.emmie .signal-msg {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--emmie-text-xs); font-weight: 500; line-height: 1.4;
color: var(--sig-color, var(--emmie-danger));
}
.emmie .signal-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
/* ---- Toast — tijdelijk, hoek van het scherm, stapelbaar ---- */
.emmie-toasts {
position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 10px;
width: 380px; max-width: calc(100vw - 32px); pointer-events: none;
}
.emmie-toasts[data-pos="top-right"] { top: 16px; right: 16px; }
.emmie-toasts[data-pos="top-left"] { top: 16px; left: 16px; }
.emmie-toasts[data-pos="bottom-right"] { bottom: 16px; right: 16px; flex-direction: column-reverse; }
.emmie-toasts[data-pos="bottom-left"] { bottom: 16px; left: 16px; flex-direction: column-reverse; }
.emmie .toast {
pointer-events: auto; position: relative; overflow: hidden;
display: flex; gap: 11px; align-items: flex-start;
padding: 13px 14px 13px 15px;
background: var(--emmie-surface);
border: 1px solid var(--emmie-hairline);
border-left: 3px solid var(--sig-color, var(--emmie-info));
border-radius: var(--emmie-radius);
box-shadow: var(--emmie-shadow-lg);
font-size: var(--emmie-text-sm);
}
.emmie .toast__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--sig-color, var(--emmie-info)); display: inline-flex; margin-top: 1px; }
.emmie .toast__icon svg { width: 100%; height: 100%; display: block; }
.emmie .toast__body { flex: 1; min-width: 0; }
.emmie .toast__title { font-weight: 600; color: var(--emmie-ink); line-height: 1.4; margin: 0; }
.emmie .toast__text { color: var(--emmie-text-muted); margin: 2px 0 0; line-height: 1.45; }
.emmie .toast__actions { display: flex; gap: 14px; margin-top: 9px; }
.emmie .toast__action { background: 0; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: var(--emmie-text-sm); color: var(--sig-color, var(--emmie-info)); }
.emmie .toast__action:hover { text-decoration: underline; }
.emmie .toast__action--mute { color: var(--emmie-text-muted); }
.emmie .toast__close { flex-shrink: 0; width: 24px; height: 24px; margin: -2px -3px 0 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: 0; border: 0; border-radius: var(--emmie-radius-sm); color: var(--emmie-text-light); cursor: pointer; transition: background .15s, color .15s; }
.emmie .toast__close:hover { background: rgba(31,43,38,0.08); color: var(--emmie-ink); }
.emmie .toast__close svg { width: 14px; height: 14px; }
/* Severity-waarden op pure [data-*]-scope (component-intern, geen
thema-tokens). De var() wordt alleen binnen .emmie-vormen gelezen. */
[data-sig="info"] { --sig-color: var(--emmie-sig-info-color); --sig-bg: var(--emmie-sig-info-bg); --sig-edge: var(--emmie-sig-info-edge); }
[data-sig="success"] { --sig-color: var(--emmie-sig-success-color); --sig-bg: var(--emmie-sig-success-bg); --sig-edge: var(--emmie-sig-success-edge); }
[data-sig="warning"] { --sig-color: var(--emmie-sig-warning-color); --sig-bg: var(--emmie-sig-warning-bg); --sig-edge: var(--emmie-sig-warning-edge); }
[data-sig="danger"] { --sig-color: var(--emmie-sig-danger-color); --sig-bg: var(--emmie-sig-danger-bg); --sig-edge: var(--emmie-sig-danger-edge); }
[data-sig="neutral"] { --sig-color: var(--emmie-sig-neutral-color); --sig-bg: var(--emmie-sig-neutral-bg); --sig-edge: var(--emmie-sig-neutral-edge); }
/* Auto-verdwijn-balk (loopt leeg) */
.emmie .toast__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: var(--sig-color, var(--emmie-info)); opacity: .55; }
/* Laad-toast — spinner i.p.v. severity-icoon */
.emmie .toast__spinner { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--sig-edge, var(--emmie-border)); border-top-color: var(--sig-color, var(--emmie-text-muted)); animation: emmie-spin .7s linear infinite; }
@keyframes emmie-spin { to { transform: rotate(360deg); } }
/* In-/uitgangsanimatie */
@keyframes emmie-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.emmie-toasts[data-pos^="bottom"] .toast { animation: emmie-toast-in-b .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes emmie-toast-in-b { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.emmie .toast { animation: emmie-toast-in .22s cubic-bezier(.22,1,.36,1) both; }
.emmie .toast.is-leaving { animation: emmie-toast-out .18s ease forwards; }
@keyframes emmie-toast-out { to { opacity: 0; transform: translateX(12px) scale(.97); height: 0; margin: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }
@media (prefers-reduced-motion: reduce) {
.emmie .toast, .emmie-toasts[data-pos^="bottom"] .toast { animation: none; }
.emmie .toast__spinner { animation-duration: 1.4s; }
}
/* ---- Navigeerbare signaal-banner (klikbaar, met chevron) ---- */
.emmie a.signal, .emmie button.signal { width: 100%; text-align: left; font: inherit; color: var(--emmie-ink); }
.emmie .signal--nav { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.emmie .signal--nav:hover { border-color: var(--sig-color, var(--emmie-info)); box-shadow: var(--emmie-shadow-xs); }
.emmie .signal--nav:active { transform: translateY(1px); }
.emmie .signal__nav { flex-shrink: 0; align-self: center; margin-left: 4px; color: var(--sig-color, var(--emmie-info)); display: inline-flex; opacity: .7; transition: transform .15s, opacity .15s; }
.emmie .signal--nav:hover .signal__nav { opacity: 1; transform: translateX(2px); }
.emmie .signal__nav svg { width: 18px; height: 18px; display: block; }
/* ---------- Alerts (legacy — gebruik liever .signal) ---------- */
.emmie .alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--emmie-radius); padding: 12px 16px; font-size: var(--emmie-text-sm); }
.emmie .alert-warning { background: var(--emmie-warning-bg); color: var(--emmie-warning-text); }
.emmie .alert-info { background: var(--emmie-info-soft); color: var(--emmie-info); }
.emmie .alert-success { background: var(--emmie-success-soft); color: var(--emmie-success); }
/* ---------- Avatar ---------- */
.emmie .avatar { border-radius: 9999px; object-fit: cover; background: linear-gradient(135deg, var(--emmie-primary-soft), var(--emmie-accent-soft)); box-shadow: inset 0 0 0 1px rgba(31,43,38,.06); display: inline-block; }
/* ---------- App-shell ---------- */
.emmie .topnav { background: var(--emmie-primary); display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; box-shadow: var(--emmie-shadow-md); position: relative; z-index: 30; }
.emmie .topnav .brand img { height: 24px; display: block; }
.emmie .topnav .search { flex: 1; max-width: 420px; margin: 0 26px; position: relative; }
.emmie .topnav .search input { width: 100%; border: 0; border-radius: var(--emmie-radius-pill); padding: 9px 16px 9px 38px; font-size: var(--emmie-text-sm); background: rgba(255,255,255,.95); outline: none; }
.emmie .topnav .search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--emmie-text-light); }
.emmie .topnav .profile { display: flex; align-items: center; gap: 10px; color: #fff; cursor: pointer; }
.emmie .topnav .profile .avatar { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.55); }
.emmie .topnav .profile .who b { font-weight: 600; display: block; font-size: var(--emmie-text-sm); line-height: 1.2; }
.emmie .topnav .profile .who span { opacity: .85; font-size: var(--emmie-text-xs); }
.emmie .sidenav { background: var(--emmie-surface); width: 244px; flex-shrink: 0; overflow-y: auto; padding: 24px 14px; transition: width .2s ease; border-right: 1px solid var(--emmie-hairline); }
.emmie .sidenav.collapsed { width: 74px; }
.emmie .sidenav .navitem { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--emmie-radius); color: var(--emmie-text-muted); font-size: var(--emmie-text-base); text-decoration: none; cursor: pointer; white-space: nowrap; border: 0; background: transparent; width: 100%; text-align: left; margin-bottom: 2px; transition: background .15s, color .15s; }
.emmie .sidenav .navitem .ico { width: 20px; text-align: center; color: var(--emmie-text-light); flex-shrink: 0; }
.emmie .sidenav .navitem:hover { background: var(--emmie-surface-sunken); color: var(--emmie-ink); }
.emmie .sidenav .navitem.active { background: var(--emmie-accent-soft); color: var(--emmie-accent-dark); font-weight: 600; }
.emmie .sidenav .navitem.active .ico { color: var(--emmie-accent); }
.emmie .sidenav hr { border: 0; border-top: 1px solid var(--emmie-hairline); margin: 14px 4px; }
.emmie .sidenav .nav-group { display: block; }
.emmie .sidenav .navitem .nav-caret { margin-left: auto; color: var(--emmie-text-light); transition: transform .18s ease; flex-shrink: 0; }
.emmie .sidenav .nav-group.open > .navitem[data-expand] .nav-caret { transform: rotate(90deg); }
.emmie .sidenav .nav-sub { display: none; flex-direction: column; padding: 2px 0 6px; }
.emmie .sidenav .nav-group.open > .nav-sub { display: flex; }
.emmie .sidenav .navitem.navsub { padding: 7px 12px 7px 44px; font-size: var(--emmie-text-sm); color: var(--emmie-text-muted); }
.emmie .sidenav .navitem.navsub:hover { color: var(--emmie-ink); }
.emmie .sidenav .navitem.nav-inklappen { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--emmie-hairline); border-radius: 0; color: var(--emmie-text-light); font-size: var(--emmie-text-sm); }
.emmie .sidenav .navitem.nav-inklappen:hover { background: transparent; color: var(--emmie-text-muted); }
.emmie .sidenav.collapsed { width: 74px; }
.emmie .sidenav.collapsed .nav-label,
.emmie .sidenav.collapsed .nav-caret,
.emmie .sidenav.collapsed .nav-sub { display: none; }
.emmie .sidenav.collapsed .navitem { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
/* ---------- Content / pagina ---------- */
.emmie .content { padding: 24px 28px; }
.emmie .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.emmie .page-title { font-family: var(--emmie-font-display); font-size: var(--emmie-text-h1); font-weight: 700; color: var(--emmie-primary); letter-spacing: -0.02em; margin: 0; }
.emmie .page-subtitle { color: var(--emmie-text-muted); margin: 6px 0 18px; max-width: 64ch; }
/* ---------- Layout-helpers ---------- */
.emmie .stack { display: flex; flex-direction: column; gap: var(--emmie-space-4); }
.emmie .row { display: flex; gap: var(--emmie-space-3); align-items: center; }
.emmie .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--emmie-space-4); }
.emmie .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--emmie-space-4); }
/* ============================================================
EMMIE — Marketing-register (huisstijl voor de website)
------------------------------------------------------------
Zelfde familie als het product: dezelfde kleuren (salie + klei),
hetzelfde fontpaar (Space Grotesk + Inter) en dezelfde raat-taal:
als decoratie één uitvergrote, afgesneden cel (.em-cell) per vlak —
nooit het complete beeldmerk; dat blijft voorbehouden aan het logo
in header/footer. Verschil: marketing is EXPRESSIEF — grotere
type-schaal, royale witruimte, ruime radii en gelaagde
schaduwen. Het motief (de cel) mag hier aanwezig zijn; in het
product blijft het weg.
Scope marketing-surfaces met class="emmie-mkt".
Kleur/merk-tokens komen uit colors_and_type.css (geen duplicaten).
============================================================ */
.emmie-mkt {
font-family: var(--emmie-font-ui);
font-size: var(--emmie-mkt-text-body);
line-height: 1.65;
color: var(--emmie-ink);
background: var(--emmie-canvas);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- Koppen — Space Grotesk ---------- */
.emmie-mkt h1, .emmie-mkt .h1 {
font-family: var(--emmie-font-display); font-size: var(--emmie-mkt-text-hero);
font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; margin: 0; color: var(--emmie-primary);
}
.emmie-mkt h2, .emmie-mkt .h2 {
font-family: var(--emmie-font-display); font-size: var(--emmie-mkt-text-h2);
font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0; color: var(--emmie-primary);
}
.emmie-mkt h3, .emmie-mkt .h3 {
font-family: var(--emmie-font-display); font-size: var(--emmie-mkt-text-h3);
font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--emmie-ink);
}
.emmie-mkt h4, .emmie-mkt .h4 {
font-family: var(--emmie-font-display); font-size: var(--emmie-mkt-text-h4);
font-weight: 600; line-height: 1.3; margin: 0; color: var(--emmie-ink);
}
.emmie-mkt .lead { font-size: var(--emmie-mkt-text-lead); line-height: 1.55; color: var(--emmie-text-muted); }
.emmie-mkt p { margin: 0 0 1rem; }
.emmie-mkt small, .emmie-mkt .text-muted { color: var(--emmie-text-muted); }
.emmie-mkt a { color: var(--emmie-accent-dark); text-decoration: none; }
.emmie-mkt a:hover { color: var(--emmie-accent); }
/* ---------- Label / eyebrow ---------- */
.emmie-mkt .pill-label {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 18px;
background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-pill); color: var(--emmie-primary);
font-weight: 600; font-size: var(--emmie-mkt-text-small);
box-shadow: var(--emmie-shadow-xs);
}
.emmie-mkt .pill-label--dark { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); color: #fff; box-shadow: none; }
/* cel-decoratie (.em-cell + varianten) staat centraal in colors_and_type.css */
/* ---------- Buttons (rond, royaal) ---------- */
.emmie-mkt .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 0.95rem 1.7rem; border: none; border-radius: var(--emmie-radius-pill);
font-family: var(--emmie-font-ui); font-weight: 600; font-size: var(--emmie-mkt-text-body);
line-height: 1; cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.emmie-mkt .btn--accent { background: var(--emmie-accent); color: #fff; box-shadow: var(--emmie-shadow-accent); }
.emmie-mkt .btn--accent:hover { background: var(--emmie-accent-light); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(222,115,86,.5); }
.emmie-mkt .btn--primary { background: var(--emmie-primary); color: #fff; }
.emmie-mkt .btn--primary:hover { background: var(--emmie-primary-light); transform: translateY(-2px); }
.emmie-mkt .btn--ghost { background: transparent; color: var(--emmie-primary); box-shadow: inset 0 0 0 1.5px var(--emmie-border); }
.emmie-mkt .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--emmie-primary); transform: translateY(-2px); }
.emmie-mkt .btn--white { background: #fff; color: var(--emmie-primary); }
.emmie-mkt .btn--white:hover { transform: translateY(-2px); box-shadow: var(--emmie-shadow-md); }
/* ---------- Cards ---------- */
.emmie-mkt .card {
background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-lg); padding: 32px; box-shadow: var(--emmie-shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.emmie-mkt .card:hover { transform: translateY(-5px); box-shadow: var(--emmie-shadow-lg); border-color: transparent; }
/* ---------- Highlight-veeg ---------- */
.emmie-mkt .hl { position: relative; white-space: nowrap; z-index: 0; }
.emmie-mkt .hl::after { content: ""; position: absolute; left: -0.14em; right: -0.14em; bottom: 0.04em; height: 0.28em; background: var(--emmie-accent); border-radius: 9999px; z-index: -1; }
/* ---------- Ingetogen float-animatie ---------- */
@media (prefers-reduced-motion: no-preference) {
@keyframes emmie-mkt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.emmie-mkt .is-floating { animation: emmie-mkt-float 7s ease-in-out infinite; }
}
}
/* ============================================================
EMMIE — site-laag bovenop het design system.
Bevat de opmaak van de marketingpagina's (voorheen inline in
het Claude Design-bestand) plus de responsive laag: het design
system zelf kent geen breakpoints.
============================================================ */
:root {
--hdr: 78px;
--gut: 40px;
--maxw: 1220px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; }
body { overflow-x: clip; background: var(--emmie-surface); }
img { max-width: 100%; }
/* ---------- typografie: typeset "rond" (Signika + Karla) ---------- */
.emmie-mkt {
--emmie-font-ui: 'Karla', 'Helvetica Neue', Arial, sans-serif;
--emmie-font-display: 'Signika', 'Karla', sans-serif;
text-rendering: optimizeLegibility;
}
/* Donkere tekst op licht rendert met subpixel-antialiasing (auto) steviger en
leesbaarder. Alleen de hero is wit-op-donker; daar is grayscale juist beter,
anders wordt de kop te zwaar. */
.emmie-mkt { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.emmie-mkt [data-hero-copy] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.emmie-mkt p, .emmie-mkt .lead, .emmie-mkt h1, .emmie-mkt h2 { text-wrap: pretty; }
.emmie-mkt h1 { font-weight: 600; line-height: 1.08; letter-spacing: -0.014em; }
.emmie-mkt h2 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.emmie-mkt h3, .emmie-mkt h4 { font-weight: 600; letter-spacing: 0; }
/* Productmockups binnen marketing lenen het UI-font, zoals in het ontwerp. */
.emmie-mkt .emmie { --emmie-font-display: var(--emmie-font-ui); }
.balance { text-wrap: balance; }
/* Alleen de grootte aanpassen, niet de kleur: een h2 op h3-formaat blijft
saliegroen, precies zoals in het ontwerp. De design-system-classes .h2/.h3
zouden ook de kleur meenemen en zijn hier dus niet bruikbaar. */
.t-h2 { font-size: var(--emmie-mkt-text-h2); }
.t-h3 { font-size: var(--emmie-mkt-text-h3); }
/* ---------- focus ---------- */
:where(a, button, summary, [tabindex]):focus-visible {
outline: 3px solid var(--emmie-accent);
outline-offset: 3px;
border-radius: 6px;
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--emmie-surface); color: var(--emmie-primary);
padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip:focus { left: 0; }
/* ---------- layout-primitieven ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 860px; }
.wrap--mid { max-width: 940px; }
.sec { position: relative; }
.sec--surface { background: var(--emmie-surface); }
.sec--canvas { background: var(--emmie-canvas); }
.sec--clip { overflow: hidden; }
.sec--ruled { border-block: 1px solid var(--emmie-hairline); }
.sec--top-rule { border-top: 1px solid var(--emmie-hairline); }
.sec--bottom-rule { border-bottom: 1px solid var(--emmie-hairline); }
.sec__pad { padding-block: 96px; }
.sec__intro { max-width: 42ch; margin-bottom: 44px; }
.sec__intro .lead { margin: 14px 0 0; }
.sec__intro h2 + .lead { margin-top: 14px; }
.sec__after { margin-top: 34px; }
.sec__h2 { font-size: var(--emmie-mkt-text-h2); margin-bottom: 32px; }
.eyebrow { display: block; font-size: 18px; font-weight: 600; color: var(--emmie-accent-dark); margin-bottom: 20px; }
.tick { flex: none; margin-top: 3px; color: var(--emmie-accent); display: inline-flex; }
/* ============================================================
HEADER
============================================================ */
.mk-header {
position: sticky; top: 0; z-index: 60;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border-bottom: 1px solid var(--emmie-hairline);
transition: box-shadow 240ms ease, background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
.mk-header__inner {
max-width: var(--maxw); margin: 0 auto;
padding: 14px var(--gut); min-height: var(--hdr);
display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
}
.mk-header[data-scrolled="yes"] { box-shadow: 0 1px 0 rgba(31, 43, 38, 0.04), 0 8px 16px -8px rgba(31, 43, 38, 0.07), 0 20px 40px -24px rgba(31, 43, 38, 0.12); }
.mk-logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.mk-logo img { display: block; height: 30px; width: auto; }
.mk-logo .mk-logo__word { height: 19px; }
/* Let op: `.mk-logo img` is specifieker dan een losse class — de wissel tussen
het donkere en lichte logo moet dus altijd via `.mk-logo ` lopen. */
.mk-logo .mk-logo-light { display: none; }
.mk-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.mk-nav__group { position: relative; }
.mk-nav__link {
display: inline-flex; align-items: center; gap: 5px;
padding: 9px 15px; border-radius: 9999px;
font-size: 15px; font-weight: 500; white-space: nowrap;
color: var(--emmie-ink);
transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.mk-nav__link:hover { background: var(--emmie-surface-sunken); color: var(--emmie-accent-dark); }
/* Actief: de pil van de cliënttabs in de app zelf (ClientNavBar's tab-indicator) —
wit, een ring van 1.5px klei en een zachte klei-gloed eronder. */
.mk-nav__link.is-on {
color: var(--emmie-accent-dark); font-weight: 600; background: var(--emmie-surface);
box-shadow: inset 0 0 0 1.5px var(--emmie-accent), 0 2px 7px -3px rgba(222, 115, 86, 0.45);
}
.mk-nav__link.is-on:hover { background: var(--emmie-surface); color: var(--emmie-accent-dark); }
/* Ouder › kind in de actieve pil, zoals de Begeleiding-tab in de app: de ouder
gedimd, de chevron kleiner en lichter, het kind op vol gewicht. */
.mk-nav__parent { font-weight: 500; opacity: 0.6; }
.mk-nav__sep { display: inline-flex; opacity: 0.45; margin-inline: -2px; }
.mk-nav__caret { display: inline-flex; transition: transform 180ms ease; }
[aria-expanded="true"] .mk-nav__caret { transform: rotate(180deg); }
.mk-mega {
position: absolute; top: calc(100% + 10px); left: 0; width: 560px;
background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-lg); box-shadow: var(--emmie-shadow-lg);
padding: 14px; z-index: 70;
animation: emmieMegaIn 170ms cubic-bezier(.2, .7, .3, 1) both;
}
/* onzichtbare brug zodat de muis het menu haalt */
.mk-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mk-mega[hidden] { display: none; }
.mk-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mk-mega__grid a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--emmie-ink); }
.mk-mega__grid a:hover { background: var(--emmie-surface-sunken); }
/* De actieve rij in het menu krijgt de gloed van de app (pillBackground → glow). */
.mk-mega__grid a.is-on, .mk-mega__grid a.is-on:hover { background: var(--emmie-accent-soft); }
.mk-mega__grid a.is-on b { color: var(--emmie-accent-dark); }
.mk-mega__grid b { display: block; font-family: var(--emmie-font-display); font-size: 15px; color: var(--emmie-primary); }
.mk-mega__grid span { font-size: 14px; color: var(--emmie-text-muted); }
.mk-mega__foot {
display: flex; gap: 22px; align-items: center;
border-top: 1px solid var(--emmie-hairline); margin-top: 12px;
padding: 14px 14px 4px; font-size: 15px;
}
.mk-mega__foot a { font-weight: 600; }
.mk-actions { display: flex; gap: 16px; align-items: center; flex: none; margin-left: auto; }
.mk-login { color: var(--emmie-primary); font-weight: 600; font-size: 15px; white-space: nowrap; }
.mk-cta { padding: 0.7rem 1.35rem; font-size: 15px; white-space: nowrap; }
/* hamburger */
.mk-burger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; margin-left: auto; padding: 0 10px;
background: transparent; border: none; cursor: pointer; border-radius: 10px;
}
.mk-burger span {
display: block; height: 2px; width: 100%; border-radius: 2px;
background: var(--emmie-primary);
transition: transform 220ms cubic-bezier(.2, .7, .3, 1), opacity 160ms ease, background 240ms ease;
}
.mk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mk-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mk-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mk-mobile {
border-top: 1px solid var(--emmie-hairline);
background: var(--emmie-surface);
padding: 18px var(--gut) 26px;
max-height: calc(100dvh - var(--hdr)); overflow-y: auto;
animation: emmieMegaIn 200ms cubic-bezier(.2, .7, .3, 1) both;
}
.mk-mobile[hidden] { display: none; }
.mk-mobile nav { display: flex; flex-direction: column; }
.mk-mobile nav a {
padding: 13px 0; font-size: 17px; font-weight: 600;
color: var(--emmie-primary); border-bottom: 1px solid var(--emmie-hairline);
}
/* Actieve rij: de gloed uit het app-menu, met negatieve marge zodat de tekst
gewoon uitlijnt met de rest van de lijst. */
.mk-mobile nav a.is-on {
padding-inline: 12px; margin-inline: -12px; border-radius: 10px;
background: var(--emmie-accent-soft); color: var(--emmie-accent-dark);
border-bottom-color: transparent;
}
.mk-mobile__label {
font-size: 13px; font-weight: 700; color: var(--emmie-text-muted);
margin: 18px 0 4px; letter-spacing: 0.01em;
}
.mk-mobile__label:first-child { margin-top: 0; }
.mk-mobile__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.mk-mobile__actions .btn { width: 100%; }
/* Header boven de hero: transparant met wit logo, tot je scrollt.
`:not(.is-open)` zorgt dat het open mobiele menu terugvalt op de normale,
leesbare header — anders staat er een wit logo op een witte balk. */
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) {
background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom-color: transparent; box-shadow: none;
}
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) .mk-logo .mk-logo-dark { display: none; }
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) .mk-logo .mk-logo-light { display: block; }
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) .mk-nav__link,
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) .mk-login { color: #fff; }
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) .mk-nav__link:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.mk-header[data-over-hero="yes"][data-scrolled="no"]:not(.is-open) .mk-burger span { background: #fff; }
.mk-header[data-over-hero="yes"][data-scrolled="no"][data-hero-glass="yes"]:not(.is-open) {
background: rgba(22, 34, 29, 0.66);
backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.6);
}
/* mobiel menu open: altijd een dichte, leesbare balk */
.mk-header.is-open {
background: var(--emmie-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom-color: var(--emmie-hairline);
}
@keyframes emmieMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ============================================================
HERO
============================================================ */
.hero {
position: sticky; top: 0; z-index: 0;
overflow: hidden; isolation: isolate;
background: #1A1A19;
margin-top: calc(-1 * var(--hdr) - 1px);
min-height: 100svh; display: flex; align-items: center;
}
.hero__photo {
position: absolute; top: -17%; left: 0; right: 0; height: 136%; z-index: 0;
will-change: transform; transform: translate3d(0, 0, 0);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; display: block; }
/* Vier lagen over de foto, uit het ontwerp. De sluier is bewust lichter dan een
vlakke overlay: het vignet doet het donkere werk aan de randen, de tekst
krijgt leesbaarheid van de schuine sluier plus een text-shadow. Neutrale
tint (20,20,19) in plaats van saliegroen — dat houdt de foto fris. */
.hero__vignette {
position: absolute; inset: 0; z-index: 1;
background: radial-gradient(128% 104% at 72% 40%,
rgba(20,20,19,0) 22%, rgba(20,20,19,0.3) 62%, rgba(20,20,19,0.66) 100%);
}
/* Exact zoals ontworpen. De leesbaarheid komt niet uit een zware sluier maar
uit de breedte van de tekstkolom: die stopt vóór het lichte deel van de foto
(zie .hero__title / .hero__lead). */
.hero__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(97deg,
rgba(20,20,19,0.80) 0%,
rgba(20,20,19,0.64) 26%,
rgba(20,20,19,0.34) 52%,
rgba(20,20,19,0.02) 78%,
rgba(20,20,19,0) 100%);
}
.hero__pool {
position: absolute; inset: 0; z-index: 1;
background: radial-gradient(62% 58% at 6% 93%, rgba(20,20,19,0.4) 0%, rgba(20,20,19,0) 100%);
}
.hero__scrim--top {
inset: 0 0 auto 0; height: 190px;
background: linear-gradient(180deg, rgba(20,20,19,0.4) 0%, rgba(20,20,19,0.14) 58%, rgba(20,20,19,0) 100%);
}
.hero__scrim--bottom {
inset: auto 0 0 0; height: 250px;
background: linear-gradient(180deg, rgba(20,20,19,0) 0%, rgba(20,20,19,0.5) 100%);
}
.hero__cell { width: 520px; right: -150px; bottom: -215px; z-index: 2; }
.hero__copy {
position: relative; z-index: 3; width: 100%;
padding: 120px 0 318px; will-change: opacity, transform;
}
.hero__inner { max-width: 680px; }
/* Twee schaduwen in plaats van één: een strakke voor de contour, een wijde als
halo. Dat tilt de leesbaarheid op de lichte plekken van de foto zonder de
sluier te verzwaren — precies wat het ontwerp fris houdt. */
/* Sluier vrijwel exact het ontwerp (mid-stops 0.80/0.64/0.34 i.p.v.
0.76/0.58/0.26 — nauwelijks zichtbaar, maar het geeft marge op de norm).
De leesbaarheid komt vooral uit de kolombreedte.
Gemeten op 1440px: de foto is donker genoeg tot x≈670 voor de kop (3:1) en
x≈550 voor de lead (4,5:1). De kolom stopt daar dus vóór, in plaats van de
hele linkerhelft te verdonkeren — zo blijft de foto zo licht als ontworpen. */
.hero__title {
max-width: min(22ch, 500px); font-size: clamp(40px, 4.4vw, 60px); color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.5);
}
.hero__lead {
max-width: min(52ch, 400px); margin: 26px 0 0; color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.5);
}
.hero__actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__badges {
display: flex; gap: 10px 24px; margin-top: 36px; flex-wrap: wrap;
color: rgba(255, 255, 255, 0.9); font-size: 15px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.5);
}
.hero__badges a, .hero__badges span {
display: inline-flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, 0.9);
}
.hero__badges a:hover { color: #fff; }
.hero__badges svg { color: var(--emmie-accent-light); }
.over-hero { position: relative; z-index: 2; }
/* ============================================================
SCHERMEN — echte schermafbeeldingen in een browservenster
============================================================ */
.schermen__wrap { padding-block: 1px 92px; }
.mockwrap { position: relative; margin-top: -208px; z-index: 5; }
/* pil-houder, gecentreerd boven het venster */
.mock__tabs {
position: absolute; top: -58px; left: 50%; transform: translateX(-50%); z-index: 6;
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 5px; width: max-content; max-width: 100%;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 9999px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mock__tab {
padding: 10px 20px; border-radius: 9999px; border: 1px solid transparent;
font-family: var(--emmie-font-ui); font-weight: 600; font-size: 15px;
cursor: pointer; white-space: nowrap;
background: transparent; color: rgba(255, 255, 255, 0.86);
transition: background 170ms ease, color 170ms ease;
}
.mock__tab:hover { color: #fff; }
.mock__tab.is-on { background: #fff; color: var(--emmie-primary); box-shadow: var(--emmie-shadow-sm); }
.mock__tab.is-on:hover { color: var(--emmie-primary); }
.mock__panel[hidden] { display: none; }
/* Het browservenster: een balk met drie stippen en een adresbalk, daaronder
het scherm. De slagschaduw is bewust wijd en licht — het venster moet van
de pagina loskomen, niet erop drukken. */
.shot { margin: 0; position: relative; z-index: 1; }
.shot__frame {
border: 1px solid var(--emmie-border); border-radius: 14px; overflow: hidden;
background: var(--emmie-surface);
box-shadow:
0 1px 2px rgba(28, 42, 36, 0.06),
0 6px 12px -4px rgba(28, 42, 36, 0.08),
0 16px 32px -12px rgba(28, 42, 36, 0.14),
0 32px 64px -24px rgba(28, 42, 36, 0.2),
0 56px 96px -40px rgba(28, 42, 36, 0.26);
}
.shot__bar {
display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px;
background: #F3EFE7; border-bottom: 1px solid var(--emmie-hairline);
}
.shot__dots { display: inline-flex; gap: 6px; flex: none; }
.shot__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #DCD5C8; }
.shot__url {
flex: 1; max-width: 440px; margin-inline: auto; height: 22px; padding-inline: 12px;
border-radius: 7px; background: #fff; border: 1px solid var(--emmie-hairline);
font-family: var(--emmie-font-ui); font-size: 12px; line-height: 20px; text-align: center;
color: var(--emmie-text-light); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.shot__url b { font-weight: 500; color: var(--emmie-text-muted); }
.shot__frame img { display: block; width: 100%; height: auto; }
/* Bijschrift als museumbordje: een eigen vlakje dat de onderrand van het
venster net overlapt. Zo ligt het óp de slagschaduw in plaats van erin. */
.shot__cap {
position: relative; z-index: 2;
display: flex; align-items: flex-start; gap: 10px;
width: fit-content; max-width: calc(100% - 40px);
margin: -18px 0 0 20px; padding: 11px 17px 12px 14px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(14px) saturate(1.5);
-webkit-backdrop-filter: blur(14px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 4px 12px 12px 12px; /* strakke hoek aan de vensterkant */
box-shadow:
0 0 0 1px rgba(31, 43, 38, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 6px 14px -6px rgba(31, 43, 38, 0.14),
0 16px 32px -18px rgba(31, 43, 38, 0.18);
font-size: 13.5px; font-weight: 500; line-height: 1.5;
letter-spacing: 0.005em; color: rgba(31, 43, 38, 0.78);
}
.shot__cap::before {
content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px;
border-radius: 50%; background: var(--emmie-accent);
box-shadow: 0 0 0 3px var(--emmie-accent-soft);
}
/* telefoon: een donkere bezel, geen adresbalk */
.shot--phone { max-width: 300px; margin-inline: auto; }
.shot--phone .shot__frame {
border-radius: 42px; border: 10px solid #24272B; background: #24272B;
box-shadow:
0 2px 4px rgba(20, 23, 21, 0.12),
0 10px 20px -8px rgba(20, 23, 21, 0.18),
0 28px 56px -20px rgba(20, 23, 21, 0.3),
0 56px 100px -40px rgba(20, 23, 21, 0.36);
}
.shot--phone .shot__frame img { border-radius: 32px; }
.shot--phone .shot__cap { margin: -20px auto 0; border-radius: 12px; }
/* Het bordje volgt het om-en-om-ritme van de rijen: gespiegelde rijen dragen
het rechts, telefoons in het midden — geen metronoom van linkse bordjes. */
.benefit--flip .shot:not(.shot--phone) .shot__cap { margin: -18px 20px 0 auto; border-radius: 12px 4px 12px 12px; }
/* het grote venster op de home */
.home-shots .shot__frame {
border-radius: 16px;
box-shadow:
0 1px 2px rgba(28, 42, 36, 0.06),
0 8px 16px -6px rgba(28, 42, 36, 0.09),
0 24px 48px -16px rgba(28, 42, 36, 0.15),
0 48px 96px -32px rgba(28, 42, 36, 0.24),
0 88px 150px -48px rgba(28, 42, 36, 0.3);
}
.home-shots .shot__bar { height: 40px; }
.home-shots .shot__url { font-size: 13px; }
.schermen__note { max-width: 52ch; margin: 56px 0 0 auto; }
.schermen__lead { margin: 0; font-size: 22px; color: var(--emmie-primary); font-family: var(--emmie-font-display); font-weight: 600; }
.schermen__body { margin: 8px 0 0; font-size: 18px; color: var(--emmie-text-muted); }
/* ============================================================
HOME — telefoons
============================================================ */
.onderweg { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr); gap: 64px; align-items: center; }
.onderweg__text h2 { max-width: 16ch; }
.onderweg__text .lead { margin: 18px 0 0; max-width: 48ch; }
.onderweg__text .benefit__points { margin-top: 24px; }
.onderweg__phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: end; }
.onderweg__phones .shot--phone { max-width: 260px; }
.onderweg__phones .shot--phone:first-child { margin-bottom: 48px; }
/* ============================================================
HOME — mensen & bento
============================================================ */
.mensen { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 24px; }
.mensen__photo {
border-radius: var(--emmie-radius-lg); overflow: hidden;
aspect-ratio: 4 / 5; background: var(--emmie-surface-sunken);
}
.mensen__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mensen__title { font-family: var(--emmie-font-display); font-size: 22px; font-weight: 600; color: var(--emmie-ink); margin: 18px 0 6px; }
.mensen__body { font-size: 18px; color: var(--emmie-text-muted); margin: 0; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento__item {
grid-column: span 2; background: var(--emmie-surface);
border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius-lg);
padding: 28px; display: block; color: var(--emmie-ink);
transition: transform 200ms cubic-bezier(.2, .7, .3, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.bento__item:hover { transform: translateY(-3px); box-shadow: var(--emmie-shadow-md); border-color: var(--emmie-accent-soft); color: var(--emmie-ink); }
.bento__item--wide { grid-column: span 3; padding: 32px; }
.bento__title { font-family: var(--emmie-font-display); font-size: 22px; font-weight: 600; color: var(--emmie-primary); margin-bottom: 9px; }
.bento__item--wide .bento__title { margin-bottom: 10px; }
.bento__body { margin: 0; font-size: 18px; color: var(--emmie-text-muted); }
/* ============================================================
FAQ (native )
============================================================ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-card); overflow: hidden;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
.faq__q {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 24px; cursor: pointer; list-style: none;
font-family: var(--emmie-font-display); font-weight: 600; font-size: 18px; color: var(--emmie-ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chevron { flex: none; color: var(--emmie-accent); display: inline-flex; transition: transform 200ms ease; }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__a { margin: 0; padding: 0 24px 22px; font-size: 18px; line-height: 1.6; color: var(--emmie-text-muted); }
.faq__more { margin: 26px 0 0; font-size: 18px; color: var(--emmie-text-muted); }
.faq__more a { font-weight: 600; }
.faq--plus .faq__item { border-radius: var(--emmie-radius-lg); }
.faq--plus .faq__item[open] { border-color: var(--emmie-accent-soft); box-shadow: var(--emmie-shadow-md); }
.faq__q--lg { padding: 22px 24px; font-size: 22px; color: var(--emmie-primary); gap: 20px; }
.faq__plus {
flex: none; width: 34px; height: 34px; border-radius: 9999px;
background: var(--emmie-surface-sunken); color: var(--emmie-primary);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 240ms cubic-bezier(.2, .7, .3, 1), background 200ms ease, color 200ms ease;
}
.faq--plus .faq__item[open] .faq__plus { transform: rotate(45deg); background: var(--emmie-accent); color: #fff; }
.faq__a--lg { padding: 0 24px 24px; font-size: 18px; max-width: 68ch; }
/* ============================================================
PRIJZEN
============================================================ */
.prijs {
position: relative; z-index: 1;
padding-block: 84px 88px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 64px; align-items: center;
}
.prijs__cell { width: 300px; top: 12px; right: -76px; }
.prijs__lead { margin: 16px 0 26px; max-width: 44ch; }
.prijs__punten {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px 24px; font-size: 18px; color: var(--emmie-ink);
}
.prijs__punten li { display: flex; gap: 10px; align-items: flex-start; }
.prijs__card {
justify-self: stretch; background: var(--emmie-surface);
border: 1px solid var(--emmie-border); border-radius: var(--emmie-radius-xl);
box-shadow: var(--emmie-shadow-lg); padding: 40px;
}
.prijs__seg {
display: flex; padding: 5px; background: var(--emmie-surface-sunken);
border: 1px solid var(--emmie-border); border-radius: 9999px;
width: fit-content; margin-bottom: 26px;
}
.prijs__seg button {
padding: 8px 18px; border-radius: 9999px; border: none; background: transparent;
color: var(--emmie-text-muted); font-family: var(--emmie-font-ui);
font-weight: 600; font-size: 14px; cursor: pointer; transition: all 160ms ease;
}
.prijs__seg button.is-on { background: var(--emmie-primary); color: #fff; }
.prijs__amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prijs__price {
font-family: var(--emmie-font-display); font-weight: 700; font-size: 60px;
line-height: 1; color: var(--emmie-primary);
font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}
.prijs__unit { font-size: 18px; color: var(--emmie-text-muted); white-space: nowrap; flex: none; }
.prijs__note { font-size: 15px; color: var(--emmie-text-muted); margin: 12px 0 28px; }
.prijs__actions { display: flex; flex-direction: column; gap: 11px; }
.prijs__actions .btn { width: 100%; }
.prijs__fine { margin: 20px 0 0; font-size: 14px; color: var(--emmie-text-muted); text-align: center; }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.qa__item {
background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-lg); padding: 26px;
}
.qa__q { font-family: var(--emmie-font-display); font-size: 18px; font-weight: 600; color: var(--emmie-primary); margin-bottom: 8px; }
.qa__a { margin: 0; font-size: 18px; color: var(--emmie-text-muted); }
/* ============================================================
FEATURE-PAGINA
============================================================ */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--emmie-text-muted); margin-bottom: 28px; flex-wrap: wrap; }
.crumbs a { color: var(--emmie-text-muted); }
.crumbs a:hover { color: var(--emmie-accent-dark); }
.crumbs [aria-current] { color: var(--emmie-ink); }
.feat__hero { position: relative; z-index: 1; padding-block: 68px 76px; }
.feat__herogrid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.9fr); gap: 60px; align-items: center; }
.feat__title { max-width: 22ch; }
.feat__lead { margin: 18px 0 0; max-width: 52ch; }
.feat__actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.feat__image {
border-radius: var(--emmie-radius-xl); aspect-ratio: 4 / 3; overflow: hidden;
background-color: var(--emmie-surface-sunken);
box-shadow: var(--emmie-shadow-lg);
}
.media { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat__value { position: relative; z-index: 1; padding-block: 100px; text-align: center; }
.feat__valuebody { margin: 24px auto 0; max-width: 60ch; }
.feat__valuecell { width: 360px; left: -118px; bottom: -146px; }
.feat__benefits { padding-block: 112px; display: flex; flex-direction: column; gap: 120px; }
.benefit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 76px; align-items: center; }
.benefit__text { order: 1; }
.benefit__media { order: 2; position: relative; }
.benefit--flip .benefit__text { order: 2; }
.benefit--flip .benefit__media { order: 1; }
.benefit__text h3 { font-size: var(--emmie-mkt-text-h3); max-width: 24ch; }
.benefit__body { margin: 16px 0 0; font-size: 18px; line-height: 1.62; color: var(--emmie-text-muted); max-width: 52ch; }
.benefit__points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.benefit__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; color: var(--emmie-ink); }
.feat__faq { padding-block: 100px; display: grid; grid-template-columns: minmax(250px, 0.66fr) minmax(320px, 1.34fr); gap: 64px; align-items: start; }
.feat__faqnote { margin: 14px 0 0; font-size: 18px; color: var(--emmie-text-muted); }
.feat__faqnote a { font-weight: 600; }
.feat__ctawrap { padding-block: 0 100px; }
.benefit--text { grid-template-columns: minmax(0, 1fr); }
.benefit--text .benefit__text { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px 72px; align-items: start; padding: 40px 44px; background: var(--emmie-surface-sunken); border: 1px solid var(--emmie-hairline); border-radius: var(--emmie-radius-xl); }
.benefit--text .benefit__points { margin-top: 6px; }
.benefit__tag { display: inline-block; margin-bottom: 14px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--emmie-accent-dark); background: var(--emmie-accent-soft); }
.benefit__tag--later { color: var(--emmie-primary); background: var(--emmie-primary-soft); }
.feat__herogrid--solo { grid-template-columns: minmax(0, 1fr); }
.feat__herogrid--solo .feat__title { max-width: 26ch; }
.feat__more { padding-block: 88px; display: grid; grid-template-columns: minmax(240px, 0.66fr) minmax(320px, 1.34fr); gap: 64px; align-items: start; }
.feat__morebody { margin: 12px 0 0; font-size: 18px; color: var(--emmie-text-muted); }
.feat__morelist { margin: 0; }
.bento__item--soon { background: var(--emmie-accent-soft); border-color: transparent; }
.bento__item--soon .bento__title { color: var(--emmie-accent-dark); }
/* ============================================================
CTA-BAND
============================================================ */
.band__wrap { padding-block: 92px; }
.band {
position: relative; overflow: hidden;
background: var(--emmie-primary); border-radius: var(--emmie-radius-xl);
padding: 72px 56px;
}
.band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; }
.band__logo { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.band__logo img { display: block; height: 30px; width: auto; }
.band__logo img + img { height: 19px; }
.band__title { color: #fff; max-width: 20ch; }
.band__title--lg { font-size: var(--emmie-mkt-text-h2); max-width: 24ch; }
.band__body { color: rgba(255, 255, 255, 0.88); font-size: 18px; margin: 0 0 28px; max-width: 46ch; }
.band__title--lg + .band__body, .band .lead { margin-top: 16px; }
.band__actions { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.band__stack { display: flex; flex-direction: column; gap: 12px; justify-self: end; min-width: 264px; }
.band__link { color: rgba(255, 255, 255, 0.9); font-weight: 600; font-size: 18px; }
.band__link:hover { color: #fff; text-decoration: underline; }
.band__phone { color: rgba(255, 255, 255, 0.72); font-size: 14px; text-align: center; }
.band__phone a { color: rgba(255, 255, 255, 0.9); }
.band__phone a:hover { color: #fff; }
.btn--on-dark { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.42); }
.emmie-mkt .btn--on-dark:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
/* ============================================================
GENERIEKE PAGINA
============================================================ */
.gen__hero { position: relative; z-index: 1; padding-block: 76px 72px; }
.gen__grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.9fr); gap: 60px; align-items: center; }
.gen__grid--quick { grid-template-columns: minmax(320px, 1fr) minmax(260px, 0.62fr); }
.gen__title { max-width: 22ch; }
.gen__lead { margin: 18px 0 0; max-width: 52ch; }
.gen__actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.gen__image {
border-radius: var(--emmie-radius-xl); aspect-ratio: 4 / 3; overflow: hidden;
background-color: var(--emmie-surface-sunken);
box-shadow: var(--emmie-shadow-lg);
}
.gen__quick { background: var(--emmie-canvas); border-radius: var(--emmie-radius-lg); padding: 28px 30px; }
.gen__quicklabel { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--emmie-text-muted); margin-bottom: 18px; }
.gen__quicklist { display: flex; flex-direction: column; }
.gen__quicklist a {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 14px 0; border-top: 1px solid var(--emmie-hairline);
color: var(--emmie-primary); font-family: var(--emmie-font-display);
font-weight: 600; font-size: 18px; transition: color 150ms ease;
}
.gen__quicklist a:hover { color: var(--emmie-accent-dark); }
.gen__blocks { padding-block: 80px 40px; display: flex; flex-direction: column; gap: 64px; }
.block--sep { border-top: 1px solid var(--emmie-hairline); padding-top: 60px; }
.block__text { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: start; }
.block__text h2 { font-size: var(--emmie-mkt-text-h3); max-width: 24ch; }
.block__text p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--emmie-text-muted); max-width: 56ch; }
.block__h { font-size: var(--emmie-mkt-text-h3); margin-bottom: 26px; }
.block__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 40px; }
.block__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; color: var(--emmie-ink); }
.block__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.block__cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block__card {
display: block; background: var(--emmie-surface); border: 1px solid var(--emmie-border);
border-radius: var(--emmie-radius-lg); padding: 26px; color: var(--emmie-ink);
transition: transform 200ms cubic-bezier(.2, .7, .3, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.block__card:hover { transform: translateY(-3px); box-shadow: var(--emmie-shadow-md); border-color: var(--emmie-accent-soft); color: var(--emmie-ink); }
.block__cardtitle { font-family: var(--emmie-font-display); font-size: 22px; font-weight: 600; color: var(--emmie-primary); margin-bottom: 8px; }
.block__card p { margin: 0; font-size: 18px; color: var(--emmie-text-muted); }
.block__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.block__contactitem { background: var(--emmie-canvas); border-radius: var(--emmie-radius-lg); padding: 28px; }
.block__contactlabel { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--emmie-text-muted); margin-bottom: 10px; }
.block__contactvalue { font-family: var(--emmie-font-display); font-size: 22px; font-weight: 600; color: var(--emmie-primary); overflow-wrap: anywhere; }
.block__contactvalue a { color: var(--emmie-primary); }
.block__contactvalue a:hover { color: var(--emmie-accent-dark); text-decoration: underline; }
.block__contactnote { margin: 8px 0 0; font-size: 15px; color: var(--emmie-text-muted); }
.gen__verder { padding-block: 40px 88px; }
.gen__verderinner { border-top: 1px solid var(--emmie-hairline); padding-top: 32px; }
.gen__verderlabel { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--emmie-text-muted); margin-bottom: 18px; }
.gen__verderlinks { display: flex; gap: 12px; flex-wrap: wrap; }
.gen__verderlinks a {
display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
border-radius: 9999px; border: 1px solid var(--emmie-border); background: var(--emmie-surface);
color: var(--emmie-primary); font-weight: 600; font-size: 15px;
transition: border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.2, .7, .3, 1);
}
.gen__verderlinks a:hover { border-color: var(--emmie-accent); color: var(--emmie-accent-dark); transform: translateY(-2px); }
/* ============================================================
JURIDISCH DOCUMENT — /algemene-voorwaarden
Eén lange leestekst met een meelopende inhoudsopgave. De maat
van de kolom (68ch) is bewust smaller dan de rest van de site:
dit is tekst om te lézen, niet om te scannen.
============================================================ */
.doc__hero { padding-block: 76px 60px; max-width: 900px; }
.doc__stamp { margin: 24px 0 0; font-size: 15px; color: var(--emmie-text-muted); }
.doc__grid { padding-block: 68px 96px; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 64px; align-items: start; }
/* De inhoudsopgave blijft staan tijdens het scrollen; bij 16 artikelen is
terugscrollen naar boven anders de enige manier om te navigeren. */
/* Zestien regels passen niet op elk scherm; zonder de max-height zou de top van
de lijst boven de viewport blijven hangen en waren artikel 1–5 tijdens het
lezen onbereikbaar. */
.doc__toc {
position: sticky; top: calc(var(--hdr) + 24px);
max-height: calc(100vh - var(--hdr) - 48px); overflow-y: auto; overscroll-behavior: contain;
background: var(--emmie-canvas); border-radius: var(--emmie-radius-lg); padding: 26px 24px;
}
.doc__toclabel { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--emmie-text-muted); margin-bottom: 16px; }
.doc__toclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.doc__toclist a { display: flex; gap: 10px; color: var(--emmie-text-muted); line-height: 1.35; }
.doc__toclist a:hover { color: var(--emmie-accent-dark); }
.doc__tocn { flex: none; width: 18px; text-align: right; font-weight: 700; color: var(--emmie-accent); font-variant-numeric: tabular-nums; }
.doc__body { max-width: 68ch; }
.doc__intro { margin: 0; font-size: 19px; line-height: 1.62; color: var(--emmie-ink); }
.doc__art { margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--emmie-hairline); scroll-margin-top: calc(var(--hdr) + 24px); }
.doc__artnum { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emmie-accent-dark); margin-bottom: 10px; }
.doc__arth { margin: 0; }
.doc__lid { margin-top: 28px; scroll-margin-top: calc(var(--hdr) + 24px); }
.doc__lidh { margin: 0 0 10px; font-size: 18px; display: flex; gap: 10px; align-items: baseline; color: var(--emmie-ink); }
.doc__lidn { flex: none; font-weight: 700; color: var(--emmie-accent-dark); font-variant-numeric: tabular-nums; }
.doc__lid p { margin: 0 0 10px; font-size: 17px; line-height: 1.62; color: var(--emmie-text-muted); }
.doc__lid p:last-child { margin-bottom: 0; }
.doc__list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc__list li { font-size: 17px; line-height: 1.62; color: var(--emmie-text-muted); }
.doc__list li::marker { color: var(--emmie-accent); }
.doc__defs { margin: 24px 0 0; display: grid; gap: 18px; }
.doc__def { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 20px; }
.doc__def dt { font-family: var(--emmie-font-display); font-size: 18px; font-weight: 600; color: var(--emmie-primary); }
.doc__def dd { margin: 0; font-size: 17px; line-height: 1.62; color: var(--emmie-text-muted); }
.doc__slot { margin: 52px 0 0; padding-top: 26px; border-top: 1px solid var(--emmie-hairline); font-size: 15px; color: var(--emmie-text-muted); }
.doc__slot a { color: var(--emmie-accent-dark); }
.doc__slot a:hover { text-decoration: underline; }
/* ============================================================
FOOTER
============================================================ */
.mk-foot { background: var(--emmie-canvas); border-top: 1px solid var(--emmie-hairline); }
.mk-foot__grid { padding-block: 64px 40px; display: grid; grid-template-columns: 1.6fr repeat(4, minmax(110px, 1fr)); gap: 40px 32px; }
.mk-foot__brand { max-width: 280px; }
.mk-foot__brand p { font-size: 15px; color: var(--emmie-text-muted); margin: 0; }
.mk-foot__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mk-foot__logo img { display: block; height: 26px; width: auto; }
.mk-foot__logo img + img { height: 17px; }
.mk-foot__label { font-size: 13px; letter-spacing: 0.01em; color: var(--emmie-text-muted); font-weight: 700; margin-bottom: 16px; }
.mk-foot__links { display: flex; flex-direction: column; gap: 11px; font-size: 15px; overflow-wrap: anywhere; }
.mk-foot__links a { color: var(--emmie-text-muted); }
.mk-foot__links a:hover { color: var(--emmie-accent-dark); }
.mk-foot__bar { border-top: 1px solid var(--emmie-hairline); }
.mk-foot__bar-inner {
padding-block: 22px; display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 14px; color: var(--emmie-text-muted); font-size: 14px;
}
.mk-foot__bar-inner a { color: var(--emmie-text-muted); }
.mk-foot__bar-inner a:hover { color: var(--emmie-accent-dark); }
/* ============================================================
MOTION — alleen actief als JS het aanzet (data-anim)
============================================================ */
[data-anim] [data-reveal] { transform: translate3d(0, 15px, 0); transition: transform 640ms cubic-bezier(.2, .7, .3, 1); }
[data-anim] [data-reveal][data-in] { transform: none; }
[data-anim] [data-mock] {
transform: perspective(1800px) translate3d(0, 30px, 0) rotateX(3.2deg) scale(0.994);
transform-origin: 50% 0; transition: transform 950ms cubic-bezier(.2, .7, .3, 1);
}
[data-anim] [data-mock][data-in] { transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-anim] [data-reveal], [data-anim] [data-mock] { transform: none !important; transition: none !important; }
.mk-mega, .mk-mobile { animation: none !important; }
}
/* ============================================================
RESPONSIVE
============================================================ */
/* --- tot 1240px: de kruimel in de pil kost te veel breedte --- */
@media (max-width: 1240px) {
.mk-nav__sep, .mk-nav__sub { display: none; }
.mk-nav__parent { font-weight: inherit; opacity: 1; }
}
/* --- tot 1100px: bento en week krimpen --- */
@media (max-width: 1100px) {
.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento__item, .bento__item--wide { grid-column: span 1; }
.feat__benefits { gap: 88px; }
.benefit { gap: 48px; }
.feat__faq { gap: 40px; }
}
/* --- tot 960px: mobiel menu, gestapelde hero's --- */
@media (max-width: 960px) {
:root { --gut: 24px; }
.mk-nav, .mk-actions { display: none; }
.mk-burger { display: flex; }
.feat__herogrid,
.gen__grid, .gen__grid--quick { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.feat__image, .gen__image { max-width: 640px; }
.feat__faq, .feat__more, .onderweg, .benefit--text .benefit__text { grid-template-columns: minmax(0, 1fr); }
.benefit { grid-template-columns: minmax(0, 1fr); }
.benefit__text, .benefit--flip .benefit__text { order: 1; }
.benefit__media, .benefit--flip .benefit__media { order: 2; }
.band__stack { justify-self: stretch; min-width: 0; }
.prijs { gap: 40px; }
/* Geen kolom meer naast de tekst: de inhoudsopgave gaat erboven staan en
wordt tweekoloms, anders duwt hij het document 16 regels naar beneden. */
.doc__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 48px 72px; }
.doc__toc { position: static; max-height: none; overflow: visible; }
.doc__toclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.doc__body { max-width: none; }
.mk-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-foot__brand { grid-column: 1 / -1; max-width: 46ch; }
}
/* --- tot 860px: mockup vereenvoudigen --- */
@media (max-width: 860px) {
/* Op smalle schermen loopt de tekst over de volle breedte, dus een
horizontaal verloop dekt hem niet. Hier kantelt de sluier naar verticaal:
donker waar de kop staat, oplopend lichter naar de onderrand. */
.hero__scrim {
background: linear-gradient(178deg,
rgba(20,20,19,0.78) 0%,
rgba(20,20,19,0.72) 58%,
rgba(20,20,19,0.58) 84%,
rgba(20,20,19,0.42) 100%);
}
/* Het vignet en de hoekplas zijn op de kolom van de desktop gemikt; op een
smal scherm maken ze het beeld alleen maar donkerder zonder iets toe te
voegen, want de verticale sluier hierboven doet het werk al. */
.hero__vignette, .hero__pool { display: none; }
.hero__copy { padding: 104px 0 240px; }
.mockwrap { margin-top: -168px; }
.schermen__note { margin: 36px 0 0; max-width: none; }
.schermen__wrap { padding-bottom: 72px; }
.qa, .block__contact, .block__cards--two { grid-template-columns: minmax(0, 1fr); }
.sec__pad { padding-block: 72px; }
.feat__benefits { padding-block: 80px; gap: 72px; }
.feat__value { padding-block: 72px; }
.feat__faq { padding-block: 72px; }
.band { padding: 48px 32px; }
.band__wrap { padding-block: 72px; }
.feat__ctawrap { padding-bottom: 72px; }
.gen__hero, .doc__hero { padding-block: 56px 52px; }
.feat__hero { padding-block: 52px 60px; }
.prijs { padding-block: 60px 68px; }
.prijs__card { padding: 32px 26px; }
}
/* --- telefoon --- */
@media (max-width: 640px) {
:root { --gut: 20px; --hdr: 68px; }
.mk-logo img { height: 26px; }
.mk-logo .mk-logo__word { height: 17px; }
.hero { min-height: 0; position: relative; }
.hero__copy { padding: 92px 0 180px; }
.hero__title { font-size: clamp(32px, 8.4vw, 44px); }
.hero__lead { font-size: 17px; margin-top: 20px; }
.hero__badges { gap: 10px 18px; font-size: 14px; }
.hero__actions .btn { width: 100%; }
.hero__cell { width: 320px; right: -110px; bottom: -140px; }
.mockwrap { margin-top: -128px; }
.mock__tabs { top: -52px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mock__tabs::-webkit-scrollbar { display: none; }
.onderweg__phones { gap: 14px; }
.onderweg__phones .shot--phone:first-child { margin-bottom: 24px; }
.shot__bar { height: 30px; padding: 0 10px; }
.shot__url { font-size: 11px; height: 20px; line-height: 18px; }
.mock__tab { padding: 8px 14px; font-size: 14px; }
.mensen { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.mensen__photo { aspect-ratio: 16 / 11; }
.bento { grid-template-columns: minmax(0, 1fr); }
.bento__item, .bento__item--wide { padding: 26px 24px; }
.bento__item--wide .bento__title { font-size: 20px; }
.sec__pad { padding-block: 60px; }
.sec__intro { margin-bottom: 32px; }
.faq__q { padding: 17px 20px; font-size: 17px; }
.faq__a { padding: 0 20px 20px; }
.faq__q--lg { padding: 18px 20px; font-size: 17px; gap: 14px; }
.faq__a--lg { padding: 0 20px 20px; font-size: 16px; }
.faq__plus { width: 30px; height: 30px; }
.prijs__price { font-size: 46px; }
.prijs__punten { grid-template-columns: minmax(0, 1fr); }
.block__list { grid-template-columns: minmax(0, 1fr); }
.block__cards { grid-template-columns: minmax(0, 1fr); }
.block__text { gap: 20px; }
.block--sep { padding-top: 44px; }
.gen__blocks { gap: 44px; padding-block: 56px 32px; }
.doc__toclist { grid-template-columns: minmax(0, 1fr); }
.doc__def { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.doc__art { margin-top: 40px; padding-top: 32px; }
.band { padding: 40px 24px; border-radius: var(--emmie-radius-lg); }
.band__grid { gap: 32px; }
.band__actions .btn, .band__stack .btn { width: 100%; }
.band__actions { flex-direction: column; align-items: stretch; }
.band__link { text-align: center; }
.mk-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: 48px 32px; }
.mk-foot__bar-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 380px) {
.mk-foot__grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- wat is nieuw (release notes) ---------- */
/* Leunt op het documentraster van de voorwaarden (doc__grid/doc__toc), zodat de
inhoudsopgave links plakt en de tekst rechts op leesbreedte blijft. Schermen
uit de app mogen breder dan de tekst: ze hebben een eigen kolombreedte. */
.rel__grid { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
.rel__body { max-width: 760px; }
.rel__toclist { gap: 7px; }
.rel__toclist a { gap: 0; }
.rel__toclabel { margin-top: 28px; }
.rel + .rel { margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--emmie-hairline); }
.rel { scroll-margin-top: calc(var(--hdr) + 24px); }
.rel__version { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--emmie-accent-dark); margin-bottom: 12px; }
.rel__tag { font-size: 12px; letter-spacing: 0.02em; text-transform: none; font-weight: 700; color: var(--emmie-primary); background: var(--emmie-primary-soft); border-radius: 999px; padding: 3px 10px; }
.rel__title { margin: 0; }
.rel__date { margin: 10px 0 0; font-size: 15px; color: var(--emmie-text-muted); }
.rel__intro { margin: 22px 0 0; max-width: 60ch; }
.rel__cards { margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.rel__card { background: var(--emmie-canvas); border-radius: var(--emmie-radius-lg); padding: 20px 22px; }
.rel__cardtitle { font-family: var(--emmie-font-display); font-size: 18px; font-weight: 600; color: var(--emmie-primary); margin-bottom: 6px; }
.rel__card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--emmie-text-muted); }
.rel__sec { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--emmie-hairline); scroll-margin-top: calc(var(--hdr) + 24px); }
.rel__h2 { margin: 0 0 18px; }
.rel__h3 { margin: 36px 0 12px; font-size: 20px; color: var(--emmie-primary-dark); scroll-margin-top: calc(var(--hdr) + 24px); }
.rel__sec p { margin: 0 0 16px; font-size: 17px; line-height: 1.62; color: var(--emmie-text-muted); max-width: 68ch; }
.rel__sec p strong { color: var(--emmie-ink); font-weight: 700; }
.rel__list { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; max-width: 68ch; }
.rel__list li { font-size: 17px; line-height: 1.6; color: var(--emmie-text-muted); }
.rel__list li strong { color: var(--emmie-ink); }
.rel__list li::marker { color: var(--emmie-accent); }
.rel__shot { margin: 8px 0 28px; }
.rel__shot img { display: block; width: 100%; height: auto; border-radius: var(--emmie-radius-lg); border: 1px solid var(--emmie-hairline); box-shadow: 0 10px 30px rgba(31, 43, 38, 0.10); background: var(--emmie-surface); }
.rel__shot figcaption { margin-top: 10px; font-size: 14px; color: var(--emmie-text-muted); }
@media (max-width: 960px) {
.rel__grid { grid-template-columns: minmax(0, 1fr); }
.rel__body { max-width: none; }
.rel + .rel { margin-top: 72px; padding-top: 56px; }
}
/* ============================================================
HIGH-END LAAG — kaarten, gloed en dynamiek (2026-08-31)
Gradiënt en glas alleen in eigen klei/salie, en alleen waar de
aandacht heen moet; de rest van de site blijft vlak en rustig.
============================================================ */
/* --- moderne kaarten: warm gradiëntoppervlak, ring bij hover, pijl --- */
.bento__item, .block__card {
position: relative;
background: linear-gradient(165deg, #FFFFFF 0%, #FEFCF8 55%, #FAF5EB 100%);
border-color: rgba(225, 218, 206, 0.75);
box-shadow: var(--emmie-shadow-xs);
}
.bento__item:hover, .block__card:hover {
border-color: transparent;
box-shadow: var(--emmie-shadow-md), 0 0 0 1.5px var(--emmie-accent-soft);
}
.bento__item::after, .block__card::after {
content: "\2192"; position: absolute; right: 24px; bottom: 20px;
font-size: 19px; line-height: 1; color: var(--emmie-accent);
opacity: 0; transform: translateX(-8px);
transition: opacity 220ms ease, transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.bento__item:hover::after, .block__card:hover::after { opacity: 1; transform: none; }
/* Binnenkort: de enige kaart met een echte gloed — klei-gradiënt plus een
zachte lichtvlek, als teaser voor wat eraan komt. */
.bento__item--soon {
background: linear-gradient(150deg, #FFF9F5 0%, var(--emmie-accent-soft) 82%);
border: 1px solid rgba(222, 115, 86, 0.24);
overflow: hidden;
}
.bento__item--soon::before {
content: ""; position: absolute; top: -55%; right: -20%; width: 75%; height: 130%;
background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), transparent 72%);
transform: rotate(16deg); pointer-events: none;
}
.bento__item--soon:hover { box-shadow: var(--emmie-shadow-md), 0 0 0 1.5px rgba(222, 115, 86, 0.35); }
/* --- uitgelicht: de geavanceerde functies krijgen een gloedpaneel --- */
.benefit--spot {
position: relative; border-radius: 30px; padding: 48px 52px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(251, 246, 236, 0.6) 100%);
border: 1px solid rgba(225, 218, 206, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 4px -2px rgba(31, 43, 38, 0.05),
0 12px 24px -12px rgba(31, 43, 38, 0.09),
0 32px 64px -32px rgba(31, 43, 38, 0.18);
}
.benefit--spot::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(420px 240px at 10% 0%, rgba(222, 115, 86, 0.09), transparent 70%),
radial-gradient(380px 220px at 96% 100%, rgba(47, 110, 90, 0.08), transparent 72%);
}
.benefit--spot .benefit__text { position: relative; z-index: 1; }
.benefit--spot .benefit__cell { display: none; }
/* het tekstpaneel van /binnenkort heeft dan geen eigen kaart meer nodig */
.benefit--spot.benefit--text .benefit__text { background: transparent; border: 0; padding: 0; border-radius: 0; }
/* een pagina die (bijna) alleen uit panelen bestaat, mag dichter op elkaar */
.feat__benefits:has(> .benefit--spot:first-child) { gap: 56px; }
.benefit__tag { background: linear-gradient(135deg, #FBEAE3, #F6DCD1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.benefit__tag--later { background: linear-gradient(135deg, #E7EFEA, #DBE8E1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
/* --- hero: donkere glaschips voor de certificeringen --- */
.hero__badges a, .hero__badges span {
padding: 7px 14px; border-radius: 9999px;
background: rgba(20, 20, 19, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
transition: background 180ms ease, border-color 180ms ease;
}
.hero__badges a:hover { background: rgba(20, 20, 19, 0.44); border-color: rgba(255, 255, 255, 0.36); color: #fff; }
/* --- het grote venster op de home: zachte kleurgloed eronder --- */
.home-shots::after {
content: ""; position: absolute; left: -70px; right: -70px; bottom: -90px; height: 360px;
z-index: -1; pointer-events: none; filter: blur(8px);
background:
radial-gradient(46% 60% at 20% 62%, rgba(222, 115, 86, 0.13), transparent 70%),
radial-gradient(48% 62% at 80% 58%, rgba(47, 110, 90, 0.12), transparent 72%);
}
/* --- band: diepe salie-gradiënt met een warme lichtinval --- */
.band { background: linear-gradient(140deg, #224E3F 0%, var(--emmie-primary) 55%, #38795F 100%); }
.band::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(560px 280px at 86% -12%, rgba(222, 115, 86, 0.16), transparent 70%);
}
/* --- megamenu en prijskaart: een klein beetje glas en licht --- */
.mk-mega { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.prijs__card {
background: linear-gradient(170deg, #FFFFFF 0%, #FDFAF4 100%);
box-shadow: var(--emmie-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* --- dynamiek: rasters onthullen gestaffeld, schermen antwoorden op de muis --- */
@keyframes emmieRise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
[data-anim] [data-in] .bento__item,
[data-anim] [data-in] .mensen__item,
[data-anim] [data-in] .block__card,
[data-anim] [data-in] .block__contactitem { animation: emmieRise 600ms cubic-bezier(.18, .8, .26, 1) backwards; }
[data-anim] [data-in] .bento__item:nth-child(2), [data-anim] [data-in] .mensen__item:nth-child(2),
[data-anim] [data-in] .block__card:nth-child(2), [data-anim] [data-in] .block__contactitem:nth-child(2) { animation-delay: 70ms; }
[data-anim] [data-in] .bento__item:nth-child(3), [data-anim] [data-in] .mensen__item:nth-child(3),
[data-anim] [data-in] .block__card:nth-child(3), [data-anim] [data-in] .block__contactitem:nth-child(3) { animation-delay: 140ms; }
[data-anim] [data-in] .bento__item:nth-child(4), [data-anim] [data-in] .mensen__item:nth-child(4),
[data-anim] [data-in] .block__card:nth-child(4), [data-anim] [data-in] .block__contactitem:nth-child(4) { animation-delay: 210ms; }
[data-anim] [data-in] .bento__item:nth-child(5) { animation-delay: 280ms; }
[data-anim] [data-in] .bento__item:nth-child(6) { animation-delay: 350ms; }
[data-anim] [data-in] .bento__item:nth-child(7) { animation-delay: 420ms; }
[data-anim] [data-in] .bento__item:nth-child(8) { animation-delay: 490ms; }
.benefit__media .shot { transition: transform 500ms cubic-bezier(.2, .8, .25, 1); }
.benefit:hover .benefit__media .shot { transform: translateY(-5px); }
@keyframes emmieShotIn { from { opacity: 0; transform: translateY(6px); } }
.home-shots .mock__panel:not([hidden]) .shot { animation: emmieShotIn 320ms ease; }
@media (max-width: 860px) {
.benefit--spot { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.bento__item, .mensen__item, .block__card, .block__contactitem,
.benefit__media .shot, .home-shots .mock__panel .shot { animation: none !important; transition: none !important; }
}
/* --- demo: de afspraakkaart, het halfuur en het bewijs --- */
.demo__hero { position: relative; z-index: 1; padding-block: 68px 84px; }
.demo__grid { display: grid; grid-template-columns: minmax(320px, 1.12fr) minmax(300px, 0.88fr); gap: 72px; align-items: center; }
.demo__title { max-width: 22ch; }
.demo__lead { margin: 18px 0 0; max-width: 50ch; }
.demo__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 30px 0 0; }
.demo__chips li {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
border-radius: 9999px; font-size: 15px; font-weight: 600; color: var(--emmie-ink);
background: linear-gradient(160deg, #FFFFFF, #FAF5EB);
border: 1px solid rgba(225, 218, 206, 0.85);
box-shadow: var(--emmie-shadow-xs);
}
.demo__chips .tick { margin-top: 0; }
.demo__card {
position: relative; border-radius: 30px; padding: 42px 46px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(251, 246, 236, 0.62) 100%);
border: 1px solid rgba(225, 218, 206, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 2px 4px -2px rgba(31, 43, 38, 0.06),
0 14px 28px -14px rgba(31, 43, 38, 0.1),
0 36px 72px -36px rgba(31, 43, 38, 0.2);
}
.demo__card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(360px 220px at 8% 0%, rgba(222, 115, 86, 0.1), transparent 70%),
radial-gradient(340px 200px at 96% 100%, rgba(47, 110, 90, 0.08), transparent 72%);
}
.demo__cardlabel { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--emmie-accent-dark); margin-bottom: 14px; }
.demo__phone {
position: relative; display: inline-block;
font-family: var(--emmie-font-display); font-size: clamp(28px, 2.6vw, 35px); font-weight: 700;
color: var(--emmie-primary); letter-spacing: 0.01em; white-space: nowrap;
}
.demo__phone:hover { color: var(--emmie-accent-dark); }
.demo__mail { position: relative; font-family: var(--emmie-font-display); font-size: 22px; font-weight: 600; color: var(--emmie-primary); overflow-wrap: anywhere; }
.demo__mail:hover { color: var(--emmie-accent-dark); }
.demo__cardnote { position: relative; margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--emmie-text-muted); }
.demo__cardsep { position: relative; height: 1px; background: var(--emmie-hairline); margin: 26px 0; }
.demo__cardfoot { position: relative; margin: 26px 0 0; padding-top: 20px; border-top: 1px dashed var(--emmie-border); font-size: 14.5px; line-height: 1.55; color: var(--emmie-text-muted); }
.demo__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.demo__step {
position: relative; border-radius: var(--emmie-radius-lg); padding: 28px 26px 30px;
background: linear-gradient(165deg, #FFFFFF 0%, #FEFCF8 55%, #FAF5EB 100%);
border: 1px solid rgba(225, 218, 206, 0.75);
box-shadow: var(--emmie-shadow-xs);
}
.demo__num {
display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
border-radius: 13px; margin-bottom: 16px;
background: linear-gradient(140deg, var(--emmie-accent-soft), #F6DCD1);
color: var(--emmie-accent-dark);
font-family: var(--emmie-font-display); font-size: 19px; font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.demo__step:last-child .demo__num { background: linear-gradient(140deg, var(--emmie-primary-soft), #DCE9E2); color: var(--emmie-primary); }
.demo__step h3 { margin: 0 0 8px; font-size: 20px; }
.demo__step p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--emmie-text-muted); }
[data-anim] [data-in] .demo__step { animation: emmieRise 600ms cubic-bezier(.18, .8, .26, 1) backwards; }
[data-anim] [data-in] .demo__step:nth-child(2) { animation-delay: 70ms; }
[data-anim] [data-in] .demo__step:nth-child(3) { animation-delay: 140ms; }
[data-anim] [data-in] .demo__step:nth-child(4) { animation-delay: 210ms; }
.demo__proof { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(320px, 1.18fr); gap: 72px; align-items: center; }
.demo__proofbody { margin: 16px 0 0; font-size: 18px; line-height: 1.62; color: var(--emmie-text-muted); max-width: 46ch; }
.demo__proof .feat__actions { margin-top: 28px; }
@media (max-width: 1100px) {
.demo__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.demo__grid, .demo__proof { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.demo__hero { padding-block: 52px 60px; }
}
@media (max-width: 640px) {
.demo__steps { grid-template-columns: minmax(0, 1fr); }
.demo__card { padding: 30px 26px; }
}
@media (prefers-reduced-motion: reduce) {
.demo__step { animation: none !important; }
}
/* --- home: gestaffelde hero-entree --- */
[data-anim] .hero__inner[data-reveal] { opacity: 1; transform: none; transition: none; }
[data-anim] .hero__inner > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 640ms ease, transform 720ms cubic-bezier(.16, .84, .28, 1); }
[data-anim] .hero__inner[data-in] > * { opacity: 1; transform: none; }
[data-anim] .hero__inner[data-in] > :nth-child(2) { transition-delay: 100ms; }
[data-anim] .hero__inner[data-in] > :nth-child(3) { transition-delay: 200ms; }
[data-anim] .hero__inner[data-in] > :nth-child(4) { transition-delay: 300ms; }
/* --- home: de telefoon over het grote venster --- */
.home-shots__phone {
position: absolute; right: -14px; bottom: -74px; width: 198px; z-index: 7;
transform: rotate(2.5deg);
animation: emmieFloat 7s ease-in-out infinite alternate;
pointer-events: none;
}
.home-shots__phone .shot--phone { max-width: none; }
.home-shots__phone .shot--phone .shot__frame { border-width: 7px; border-radius: 34px; }
.home-shots__phone .shot--phone .shot__frame img { border-radius: 26px; }
@keyframes emmieFloat { from { transform: rotate(2.5deg) translateY(0); } to { transform: rotate(2.5deg) translateY(-9px); } }
.schermen__note { margin: 56px auto 0 0; }
@media (max-width: 1100px) { .home-shots__phone { display: none; } }
/* --- home: het statement --- */
.statement { position: relative; overflow: hidden; }
.statement__cell { width: 460px; left: -160px; top: -180px; }
.statement__wrap { position: relative; padding-block: 128px; text-align: center; }
.statement__wrap::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(520px 300px at 24% 30%, rgba(222, 115, 86, 0.07), transparent 70%),
radial-gradient(560px 320px at 78% 70%, rgba(47, 110, 90, 0.06), transparent 72%);
}
.statement__line {
position: relative; margin: 0; font-family: var(--emmie-font-display);
font-size: clamp(38px, 5vw, 58px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06;
color: var(--emmie-primary);
}
.statement__line em { font-style: normal; color: var(--emmie-accent-dark); }
.statement__body { position: relative; margin: 24px auto 0; max-width: 52ch; font-size: 19px; line-height: 1.62; color: var(--emmie-text-muted); }
.statement__link { position: relative; margin-top: 28px; }
/* --- home: introregel met link, en foto's die antwoorden --- */
.sec__intro--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.sec__intro--row > div { max-width: 46ch; }
.sec__introlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--emmie-accent-dark); white-space: nowrap; margin-bottom: 6px; }
.sec__introlink svg { transition: transform 200ms cubic-bezier(.2, .7, .3, 1); }
.sec__introlink:hover svg { transform: translateX(4px); }
.mensen__photo img { transition: transform 700ms cubic-bezier(.2, .7, .25, 1); }
.mensen__item:hover .mensen__photo img { transform: scale(1.045); }
@media (max-width: 860px) {
.statement__wrap { padding-block: 84px; }
.sec__intro--row { flex-direction: column; align-items: flex-start; }
.sec__introlink { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
.home-shots__phone { animation: none !important; }
[data-anim] .hero__inner > * { transition: none !important; opacity: 1 !important; transform: none !important; }
.mensen__photo img { transition: none !important; }
}
/* --- prijzen: de kaart is de hoofdrol, de vragen zijn kaarten --- */
.prijs__card { position: relative; border-color: rgba(222, 115, 86, 0.22); }
.prijs__card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background:
radial-gradient(340px 200px at 10% 0%, rgba(222, 115, 86, 0.1), transparent 70%),
radial-gradient(320px 190px at 96% 100%, rgba(47, 110, 90, 0.08), transparent 72%);
}
.prijs__card > * { position: relative; }
.qa__item {
position: relative; border-radius: var(--emmie-radius-lg); padding: 28px 28px 30px;
background: linear-gradient(165deg, #FFFFFF 0%, #FEFCF8 55%, #FAF5EB 100%);
border: 1px solid rgba(225, 218, 206, 0.75);
box-shadow: var(--emmie-shadow-xs);
transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(.2, .7, .3, 1);
}
.qa__item:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--emmie-shadow-md), 0 0 0 1.5px var(--emmie-accent-soft); }
.qa__q { font-family: var(--emmie-font-display); font-size: 20px; font-weight: 600; color: var(--emmie-primary); margin-bottom: 10px; }
.qa__q::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 999px; margin-bottom: 16px; background: linear-gradient(90deg, var(--emmie-accent), var(--emmie-accent-soft)); }
.qa__a { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--emmie-text-muted); }
[data-anim] [data-in] .qa__item { animation: emmieRise 600ms cubic-bezier(.18, .8, .26, 1) backwards; }
[data-anim] [data-in] .qa__item:nth-child(2) { animation-delay: 70ms; }
[data-anim] [data-in] .qa__item:nth-child(3) { animation-delay: 140ms; }
[data-anim] [data-in] .qa__item:nth-child(4) { animation-delay: 210ms; }
[data-anim] [data-in] .prijs__punten li { animation: emmieRise 560ms cubic-bezier(.18, .8, .26, 1) backwards; }
[data-anim] [data-in] .prijs__punten li:nth-child(2) { animation-delay: 50ms; }
[data-anim] [data-in] .prijs__punten li:nth-child(3) { animation-delay: 100ms; }
[data-anim] [data-in] .prijs__punten li:nth-child(4) { animation-delay: 150ms; }
[data-anim] [data-in] .prijs__punten li:nth-child(5) { animation-delay: 200ms; }
[data-anim] [data-in] .prijs__punten li:nth-child(6) { animation-delay: 250ms; }
@media (prefers-reduced-motion: reduce) {
.qa__item, .prijs__punten li { animation: none !important; transition: none !important; }
}
/* ============================================================
SCHADUWLAAG — gelaagd en getint (2026-08-31)
Eén lichtbron van boven. Elke schaduw is een stapel: een strakke
contactlaag plus bredere omgevingslagen die zwakker worden, in de
warme inktkleur — nooit puur zwart. Gekleurde objecten werpen een
schaduw in hun eigen kleur: klei onder de CTA, salie onder de band.
Deze :root wint van de ds-tokens omdat hij later komt en ongelaagd is.
============================================================ */
:root {
--emmie-shadow-xs:
0 1px 1px rgba(31, 43, 38, 0.03),
0 2px 4px -1px rgba(31, 43, 38, 0.04),
0 6px 12px -6px rgba(31, 43, 38, 0.05);
--emmie-shadow-sm:
0 1px 1px rgba(31, 43, 38, 0.04),
0 3px 6px -2px rgba(31, 43, 38, 0.05),
0 10px 20px -8px rgba(31, 43, 38, 0.08);
--emmie-shadow-md:
0 1px 2px rgba(31, 43, 38, 0.05),
0 6px 12px -4px rgba(31, 43, 38, 0.06),
0 18px 36px -14px rgba(31, 43, 38, 0.12);
--emmie-shadow-lg:
0 1px 2px rgba(31, 43, 38, 0.05),
0 8px 16px -6px rgba(31, 43, 38, 0.07),
0 24px 48px -16px rgba(31, 43, 38, 0.12),
0 48px 88px -32px rgba(31, 43, 38, 0.16);
--emmie-shadow-accent:
0 1px 2px rgba(190, 89, 66, 0.18),
0 4px 10px -3px rgba(222, 115, 86, 0.28),
0 12px 26px -8px rgba(222, 115, 86, 0.34);
}
.emmie-mkt .btn--accent:hover, .emmie-mkt .btn--accent:focus-visible {
box-shadow:
0 2px 3px rgba(190, 89, 66, 0.18),
0 8px 18px -5px rgba(222, 115, 86, 0.32),
0 22px 44px -12px rgba(222, 115, 86, 0.4);
}
/* de band werpt salie op het canvas */
.band {
box-shadow:
0 12px 24px -16px rgba(34, 78, 63, 0.3),
0 32px 64px -32px rgba(34, 78, 63, 0.32),
0 64px 120px -48px rgba(34, 78, 63, 0.28);
}
/* de Binnenkort-kaart werpt een vleug klei */
.bento__item--soon {
box-shadow:
0 1px 2px rgba(190, 89, 66, 0.06),
0 12px 28px -16px rgba(222, 115, 86, 0.24);
}
/* zwevende telefoon op de home: iets losser van het venster */
.home-shots__phone .shot--phone .shot__frame {
box-shadow:
0 3px 6px rgba(20, 23, 21, 0.14),
0 14px 28px -10px rgba(20, 23, 21, 0.22),
0 36px 72px -24px rgba(20, 23, 21, 0.34),
0 72px 130px -44px rgba(20, 23, 21, 0.4);
}
/* ============================================================
FOOTER — diep salie, het anker van de site (2026-08-31)
============================================================ */
.mk-foot {
position: relative; overflow: hidden; border-top: 0;
border-radius: 26px 26px 0 0;
background: linear-gradient(160deg, #1F4638 0%, #245443 48%, #2A614F 100%);
color: rgba(255, 255, 255, 0.78);
}
.mk-foot__cell { width: 560px; right: -170px; top: -230px; }
.mk-foot__grid { position: relative; padding-block: 76px 52px; }
.mk-foot__brand p { color: rgba(255, 255, 255, 0.72); }
.mk-foot__label { color: rgba(255, 255, 255, 0.62); text-transform: uppercase; letter-spacing: 0.07em; font-size: 12.5px; }
.mk-foot__links a { color: rgba(255, 255, 255, 0.85); transition: color 150ms ease; }
.mk-foot__links a:hover { color: var(--emmie-accent-light); }
.mk-foot__certs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mk-foot__certs a {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
border-radius: 9999px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.mk-foot__certs a:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.32); color: #fff; }
.mk-foot__certs .tick { margin-top: 0; color: var(--emmie-accent-light); }
.mk-foot__bar { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.12); background: rgba(17, 37, 30, 0.35); }
.mk-foot__bar-inner { color: rgba(255, 255, 255, 0.62); }
.mk-foot__bar-inner a { color: rgba(255, 255, 255, 0.78); }
.mk-foot__bar-inner a:hover { color: var(--emmie-accent-light); }
/* ============================================================
VORMEN — de raatcel, scherp (2026-09-01)
Binnen de merkregels (één cel per vlak, open óf gevuld, altijd
afgesneden) in twee gewichten: de gevulde cel krijgt een dun
randje dat licht vangt, en er zijn hairline-ringen voor licht,
donker en klei. Streekbreedtes in viewBox-eenheden (50 breed):
0.2 ≈ 1–2px op de gebruikte formaten, 0.3 voor de vulrand.
============================================================ */
.em-cell--fill {
background-image: url("data:image/svg+xml,");
}
.em-cell--fill-dark {
background-image: url("data:image/svg+xml,");
}
.em-cell--line {
background-image: url("data:image/svg+xml,");
}
.em-cell--line-dark {
background-image: url("data:image/svg+xml,");
}
.em-cell--line-accent {
background-image: url("data:image/svg+xml,");
}
/* plaatsing — afsnijden mag alleen aan een logische rand: de schermrand of
een gesloten container (hero, footer). Op open secties hangt de cel dus
aan de zijkant van het scherm, verticaal vrij binnen zijn vlak.
De maten lopen bewust uiteen (340 → 1040) en op twee rustige plekken
draait de cel tergend langzaam om zijn as. */
.hero__cell { width: 720px; right: -270px; bottom: -330px; transform: rotate(6deg); }
.feat__valuecell { width: 1500px; left: 50%; top: 50%; bottom: auto; transform: translate(-54%, -50%) rotate(-9deg); }
.prijs__cell { width: 560px; top: 50%; right: -225px; transform: translateY(-50%) rotate(-5deg); }
.statement__cell {
width: 540px; left: -220px; top: 50%; transform: translateY(-50%);
rotate: 9deg; --turn-to: 369deg;
animation: emmieSlowTurn 360s linear infinite;
}
.mk-foot__cell {
width: 800px; right: -290px; top: -350px;
rotate: -6deg; --turn-to: 354deg;
animation: emmieSlowTurn 480s linear infinite;
}
@keyframes emmieSlowTurn { to { rotate: var(--turn-to); } }
@media (prefers-reduced-motion: reduce) {
.statement__cell, .mk-foot__cell { animation: none !important; }
}
/* --- reuzen-hairlines: her en der over de pagina's, een stuk of drie ---
Grijs, breder dan het scherm, dwars door de sectie. De vullingen houden de
strenge afsnijregel; deze fluisterlijnen mogen overal doorheen lopen. */
.feat__benefitscell { width: 1200px; right: -420px; top: 340px; transform: rotate(-14deg); }
.feat__ctacell { width: 1000px; left: -380px; bottom: -320px; transform: rotate(10deg); }
.home__menscell { width: 1300px; right: -480px; top: -300px; transform: rotate(-9deg); }
.home__faqcell { width: 1100px; left: -420px; bottom: -260px; transform: rotate(7deg); }
.gen__blockscell { width: 1300px; right: -460px; top: -140px; transform: rotate(-8deg); }
.prijs__qacell { width: 1200px; left: -430px; top: 140px; transform: rotate(6deg); }
.demo__stepscell { width: 1250px; right: -450px; top: -260px; transform: rotate(-7deg); }
.demo__proofcell { width: 1100px; left: -400px; bottom: -300px; transform: rotate(9deg); }
/* content boven de lijnen */
.feat__benefits, .feat__ctawrap, .gen__blocks, .demo__proof { position: relative; z-index: 1; }
#mensen > .wrap, .home-faq > .wrap, .prijs-qa > .wrap, .demo-steps > .wrap { position: relative; z-index: 1; }