/* =========================================================================
HuurBot — Design Tokens v1.0
Drop-in stylesheet. Importeer als eerste in je .
========================================================================= */
/* ── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');
:root {
/* ── COLOR · Palette · Scanner ─────────────────────────────────────── */
/* Primair (de drie pijlers) */
--ink: #111113; /* hoofdtekst, primaire knoppen */
--bone: #F4EFE6; /* hoofdachtergrond — warm, niet wit */
--lime: #FF6F4D; /* SIGNATURE — match-momenten, scan-hits, CTA's */
--mist: #EBE5D6; /* soft surface, hover states */
--stone: #C8C2B5; /* borders, dotted scan-lines */
/* Inkt-schaal (tekst hiërarchie) */
--ink-2: #2C2C30; /* body */
--ink-3: #6B6B70; /* secundair */
--ink-4: #9A9A9F; /* placeholder, tertiair */
/* Status */
--success: #2EAA56;
--warning: #F5A524;
--error: #D93838;
--info: #5A6BFF; /* iris — niet SaaS-blauw */
/* Surfaces (donkere modus / inverted secties) */
--ink-surface: #0B0B0D;
--ink-surface-2: #1A1A1D;
--ink-border: #2A2A2D;
/* Soft tint voor lime (backgrounds, error states) */
--lime-soft: #FFE3DA;
/* ── TYPOGRAPHY ────────────────────────────────────────────────────── */
--font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Mono', 'Roboto Mono', monospace;
/* Type scale (gebruik direct of via utility classes) */
--fs-display-xl: clamp(48px, 7vw, 96px);
--fs-display-l: clamp(36px, 5vw, 64px);
--fs-h1: clamp(28px, 3.5vw, 40px);
--fs-h2: clamp(22px, 2.5vw, 28px);
--fs-h3: 18px;
--fs-body-l: 17px;
--fs-body: 15px;
--fs-small: 13px;
--fs-mono-s: 12px;
--fs-caption: 11px;
--lh-tight: 1.0;
--lh-snug: 1.15;
--lh-normal: 1.35;
--lh-relaxed: 1.65;
--tracking-tighter: -0.04em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.08em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
--fw-bold: 700;
--fw-black: 800;
/* ── SPACING (4px base) ────────────────────────────────────────────── */
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
--space-8: 32px;
--space-9: 48px;
--space-10: 64px;
--space-11: 96px;
--space-12: 128px;
/* ── LAYOUT ────────────────────────────────────────────────────────── */
--container: 1200px;
--container-read: 720px;
--gutter: 28px;
--gutter-md: 40px;
/* ── RADIUS ────────────────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 6px;
--radius: 8px; /* default — buttons, inputs */
--radius-md: 12px; /* cards */
--radius-lg: 16px; /* feature cards */
--radius-xl: 24px; /* hero containers */
--radius-pill: 9999px; /* pills, status indicators */
/* ── BORDERS ───────────────────────────────────────────────────────── */
--border-1: 1px solid var(--stone);
--border-2: 1px solid var(--ink-3);
--border-dotted: 1px dotted var(--stone);
/* ── ELEVATION (gebruikt zelden — flat-by-default) ─────────────────── */
--elev-0: none;
--elev-1: 0 1px 0 rgba(17,17,19,0.04);
--elev-2: 0 4px 12px rgba(17,17,19,0.06);
--elev-3: 0 12px 32px rgba(17,17,19,0.08);
/* ── MOTION ────────────────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur: 200ms;
--dur-slow: 320ms;
/* ── FOCUS RING ────────────────────────────────────────────────────── */
--ring: 0 0 0 2px var(--bone), 0 0 0 4px var(--lime);
--ring-error: 0 0 0 2px var(--bone), 0 0 0 4px var(--error);
/* ── Z-INDEX ───────────────────────────────────────────────────────── */
--z-nav: 100;
--z-overlay: 900;
--z-modal: 1000;
--z-toast: 1100;
}
/* ── Optionele dark-mode override ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--bone: #0F0F11;
--mist: #1A1A1D;
--stone: #2A2A2D;
--ink: #F4EFE6;
--ink-2: #D6D2C8;
--ink-3: #8A857A;
--ink-4: #5A5650;
}
}
/* ── BASE RESETS & BODY ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
color: var(--ink-2);
background: var(--bone);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "ss02", "cv01"; /* Geist stylistic sets */
}
::selection { background: var(--lime); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button {
font: inherit;
cursor: pointer;
border: 0;
background: none;
color: inherit;
}
/* Headings — opt-in via utility classes; baseline is consistent */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
color: var(--ink);
letter-spacing: var(--tracking-tight);
line-height: var(--lh-snug);
font-weight: var(--fw-semi);
}
/* Tabular numerals voor data — gebruik op .tnum of [data-numeric] */
.tnum, [data-numeric] { font-variant-numeric: tabular-nums; }
/* ── MASCOT ─────────────────────────────────────────────────────────────── */
.bot {
--bot-bg: var(--ink);
--bot-eye: var(--lime);
--bot-size: 160px;
width: var(--bot-size);
height: calc(var(--bot-size) * 0.92); /* iets vierkanter dan voor, dichter bij het logo */
background: var(--bot-bg);
/* Afgeronde bovenkant, minder scherpe onderkant — logo-proporties */
border-radius: 20% 20% 16% 16% / 18% 18% 20% 20%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12%;
padding-top: 6%; /* ogen iets naar boven plaatsen */
/* drop-shadow volgt de uitgeknipt silhouet (incl. boog) */
filter: drop-shadow(0 16px 32px rgba(17,17,19,0.22));
flex-shrink: 0;
/* Boog onderin — spiegelt logo's Subtraction_1 uitsnijding */
-webkit-mask-image: radial-gradient(ellipse 28% 22% at 50% 100%, transparent 99%, black 100%);
mask-image: radial-gradient(ellipse 28% 22% at 50% 100%, transparent 99%, black 100%);
}
.bot::before,
.bot::after {
content: "";
display: block;
width: 18%; height: 18%;
background: var(--bot-eye);
border-radius: 50%;
transition: all 200ms var(--ease-out);
}
/* Rechter oog: lensvorming — spiegelt logo's Path_4 */
.bot::after {
border-radius: 48% 52% 50% 50% / 55% 55% 45% 45%;
}
/* States */
.bot.scanning::before { animation: scanL 1.6s ease-in-out infinite; }
.bot.scanning::after { animation: scanR 1.6s ease-in-out infinite; }
.bot.match { --bot-bg: var(--lime); --bot-eye: var(--ink); }
.bot.match::before,
.bot.match::after { transform: scale(1.05); }
.bot.sleeping::before,
.bot.sleeping::after { height: 6%; border-radius: 4px; }
.bot.confused::before { transform: scaleY(0.6); }
.bot.confused::after { border-radius: 50%; background: var(--lime); }
.bot.standby { /* default */ }
.bot.blink { animation: blink 5s ease-in-out infinite; }
/* Sizes */
.bot--sm { --bot-size: 32px; }
.bot--md { --bot-size: 64px; }
.bot--lg { --bot-size: 120px; }
/* Glow halo — child element */
.bot-glow {
position: absolute;
inset: -20px;
border-radius: 32%;
background: radial-gradient(circle, rgba(255,111,77,0.4), transparent 65%);
z-index: -1;
animation: botPulse 2s ease-in-out infinite;
}
/* Mascot keyframes */
@keyframes scanL {
0%,100% { transform: translateX(0); }
50% { transform: translateX(60%); }
}
@keyframes scanR {
0%,100% { transform: translateX(0); }
50% { transform: translateX(60%); }
}
@keyframes blink {
0%,90%,100% {}
93%,97% { transform: scaleY(0.1); }
}
@keyframes botPulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
/* ── BOT MARK (inline SVG — expressie-systeem) ──────────────────────────── */
/*
Gebruik:
States: standby · blink · scanning · sleeping · confused · match
CSS-variabelen: --bot-bg (body fill) · --bot-eye-c (oog fill)
*/
.bot-mark {
--bot-bg: var(--ink);
--bot-eye-c: var(--lime);
flex-shrink: 0;
overflow: visible;
}
/* Fills via CSS — SVG presentatie-attributen worden niet gebruikt
zodat CSS-variabelen en state-overrides correct werken */
.bot-mark .bot-body { fill: var(--bot-bg); }
.bot-mark .bot-eye { fill: var(--bot-eye-c); }
/* Alle oog-transforms vanuit eigen middelpunt */
.bot-mark .bot-eye {
transform-box: fill-box;
transform-origin: center;
transition: transform 200ms var(--ease-out),
fill 200ms var(--ease-out);
}
/* ── STANDBY (default) ── */
/* geen animatie — ogen staan stil */
/* ── BLINK ── willekeurig knipperen */
.bot-mark.blink .bot-eye {
animation: eyeBlink 5s ease-in-out infinite;
}
/* ── SCANNING ── ogen scannen heen en weer */
.bot-mark.scanning .bot-eye-l {
animation: eyeScanL 1.6s ease-in-out infinite;
}
.bot-mark.scanning .bot-eye-r {
animation: eyeScanR 1.6s ease-in-out infinite 0.1s;
}
/* ── SLEEPING ── ogen dicht (platte horizontale streepjes) */
.bot-mark.sleeping .bot-eye {
transform: scaleY(0.1);
}
/* ── CONFUSED ── linker oog geknepen, rechter oog koraal */
.bot-mark.confused .bot-eye-l {
transform: scaleY(0.5) scaleX(0.85);
}
.bot-mark.confused .bot-eye-r {
fill: var(--lime);
transform: scale(0.9);
}
/* ── MATCH ── lichaam licht op in lime, ogen worden ink */
.bot-mark.match {
--bot-bg: var(--lime);
--bot-eye-c: var(--ink);
}
.bot-mark.match .bot-eye {
transform: scale(1.15);
}
/* ── Keyframes ── */
@keyframes eyeBlink {
0%, 90%, 100% { transform: scaleY(1); }
93%, 97% { transform: scaleY(0.08); }
}
/* scan: ogen bewegen naar rechts en terug — waarde in px schaal mee met weergavegrootte */
@keyframes eyeScanL {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
@keyframes eyeScanR {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
/* ── NAV & FOOTER LOGO ──────────────────────────────────────────────────── */
.nav-logo,
.footer-logo {
display: flex;
align-items: center;
gap: 9px;
font-size: 18px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.4px;
text-decoration: none;
}
.nav-logo b,
.footer-logo b {
color: var(--lime);
background: var(--ink);
padding: 0 4px;
border-radius: 4px;
font-weight: 700;
}
/* In dark footer, use bone badge so it stays visible as a shape */
footer .footer-logo b {
background: rgba(244,239,230,0.12);
border: 1px solid rgba(244,239,230,0.15);
}
/* ── FOOTER GRID ────────────────────────────────────────────────────────── */
footer {
background: var(--ink-surface);
border-top: 1px solid var(--ink-border);
padding: 56px 28px 0;
color: rgba(244,239,230,0.7);
font-size: 14px;
}
.footer-grid {
max-width: 980px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
}
.footer-brand .footer-logo {
color: var(--bone);
margin-bottom: 12px;
}
.footer-tagline {
color: rgba(244,239,230,0.55);
line-height: 1.5;
margin-bottom: 16px;
font-size: 13px;
}
.footer-scanning {
font-family: var(--font-mono);
font-size: 11px;
color: var(--lime);
letter-spacing: 0.04em;
}
.footer-col h4 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244,239,230,0.35);
margin-bottom: 14px;
font-family: var(--font-mono);
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-col ul a {
color: rgba(244,239,230,0.65);
text-decoration: none;
transition: color 0.15s;
}
.footer-col ul a:hover { color: var(--bone); }
/* Bot-mark in donkere footer: bone body, ink ogen */
footer .bot-mark {
--bot-bg: var(--bone);
--bot-eye-c: var(--ink-surface);
}
/* Bot-mark in lichte page-footer (dashboard): ink body, lime ogen */
.page-footer .bot-mark {
--bot-bg: var(--ink);
--bot-eye-c: var(--lime);
}
.footer-bottom {
max-width: 980px;
margin: 0 auto;
padding: 20px 0 24px;
border-top: 1px solid var(--ink-border);
font-family: var(--font-mono);
font-size: 11px;
color: rgba(244,239,230,0.3);
}
@media (max-width: 700px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-brand {
grid-column: 1 / -1;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
SHARED PAGE UTILITIES
Canonieke definitie — wordt herladen in elke HTML pagina via tokens.css.
Definieer per-pagina NOOIT opnieuw: nav, btn, pill, section-label, container.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Root aliases (gebruikt door meerdere pagina's) ──────────────────────── */
:root {
--max-w: 980px;
--ink-soft: var(--ink-2);
--ink-muted: var(--ink-3);
}
/* ── Container ───────────────────────────────────────────────────────────── */
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 28px;
}
/* ── Section label ───────────────────────────────────────────────────────── */
.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 14px;
}
.section-label::before {
content: "";
display: inline-block;
width: 8px;
height: 1px;
background: var(--ink-3);
flex-shrink: 0;
}
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
padding: 9px 20px;
border-radius: var(--radius);
transition: background 0.15s, border-color 0.15s, color 0.15s;
cursor: pointer;
border: none;
line-height: 1;
font-family: inherit;
text-decoration: none;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--stone); }
.btn-secondary:hover { background: var(--mist); border-color: #ccc; }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: #E85B3D; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: #f0f0f0; }
.btn-lg { font-size: 16px; padding: 13px 28px; }
.btn-sm { font-size: 13px; padding: 7px 16px; }
.btn-full { width: 100%; justify-content: center; }
/* ── Pills ───────────────────────────────────────────────────────────────── */
@keyframes hb-breathe {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.35); }
}
@keyframes hb-pulse {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0; transform: scale(2.4); }
}
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--radius-pill);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pill-scanning {
background: transparent;
color: var(--ink-2);
border: 1px solid var(--stone);
}
.pill-scanning::before {
content: "";
width: 6px;
height: 6px;
background: var(--success);
border-radius: 50%;
flex-shrink: 0;
animation: hb-breathe 1.4s ease-in-out infinite;
}
/* ── NAV ─────────────────────────────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(244,239,230,0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--stone);
}
.nav-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}
.nav-links a {
font-size: 14px;
color: var(--ink-soft);
font-weight: 500;
transition: color 0.15s;
text-decoration: none;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 1.5px;
background: var(--lime);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.22s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right {
display: flex;
align-items: center;
gap: 8px;
}
/* ── Mobile nav ─────────────────────────────────────────────────────────── */
.nav-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 6px;
}
.nav-burger span {
display: block;
width: 18px;
height: 1.5px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
@media (max-width: 680px) {
.nav-links { display: none; }
.nav-right .btn-secondary { display: none; }
.nav-burger { display: flex; }
}
.mobile-menu {
position: fixed;
inset: 0;
background: var(--bone);
z-index: 200;
display: flex;
flex-direction: column;
padding: 20px 24px 40px;
gap: 0;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.mobile-menu-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--ink);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.mobile-menu-nav {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.mobile-menu-nav a {
font-size: 24px;
font-weight: 600;
color: var(--ink);
padding: 12px 0;
border-bottom: 1px solid var(--stone);
letter-spacing: -0.3px;
text-decoration: none;
}
.mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 199;
}
.mobile-overlay.open { display: block; }