/* ============================================================ Sinterklaas-Elst — Design tokens Heritage Dutch holiday. Warm, storybook, candle-lit, regal. ============================================================ */ /* Webfonts — sourced from Google Fonts. Display: Cormorant Garamond → elegant transitional serif; reads like an antique gift-book title page. Script: Tangerine → flourished script for "Sinterklaas" wordmark and decorative accents (use SPARINGLY). Body: Lora → warm, readable serif for body copy. UI: Inter → clean sans for form fields, buttons, small UI labels where serif feels off. */ /* NB: de fonts worden geladen via in de van de pagina's (met preconnect) — dat rendert sneller dan een blokkerende @import hier. */ :root { /* ----------------------------------------------------------- COLOURS ----------------------------------------------------------- */ /* Primary — Sint's mantle. Deep festive red with a touch of warmth. */ --sint-rood: #B5202E; /* primary brand */ --sint-rood-donker: #7A1620; /* pressed / dark surface */ --sint-rood-licht: #D24757; /* hover / accent */ /* Secondary — antique gold, mijter trim, staff, book details. */ --mijter-goud: #C9A24A; --mijter-goud-donker: #97742C; --mijter-goud-licht: #E2C078; /* Neutrals — parchment, candle wax, ink. */ --perkament: #F6ECD6; /* page bg */ --perkament-diep: #ECDCB8; /* card bg, surfaces */ --kaars: #FBF6EA; /* lightest surface */ --inkt: #2A1810; /* primary text — dark sepia, not pure black */ --inkt-zacht: #5C432F; /* secondary text, captions */ --roetveeg: #8C7158; /* tertiary, dividers */ /* Supporting — chestnut wood, leather book cover. */ --hout: #6B4423; --hout-donker: #3F2A1D; --leer: #4E2A1C; /* Sint's night — for evening hero, magical scenes. */ --nacht: #1F2547; --nacht-diep: #0F1430; --schemering: #3D2F5F; /* Semantic */ --bg-page: var(--perkament); --bg-surface: var(--kaars); --bg-elevated: #FFFFFF; --bg-inverse: var(--nacht-diep); --fg-1: var(--inkt); --fg-2: var(--inkt-zacht); --fg-3: var(--roetveeg); --fg-on-rood: var(--kaars); --fg-on-nacht: var(--perkament); --border-subtle: rgba(42, 24, 16, 0.12); --border-strong: rgba(42, 24, 16, 0.28); --border-goud: rgba(201, 162, 74, 0.55); --accent: var(--sint-rood); --accent-soft: #F4D9CF; --success: #4F7A3C; /* "pakje aangekomen" green */ --warning: #C97A2C; /* warm amber */ /* ----------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------- */ --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-script: 'Tangerine', 'Pinyon Script', cursive; --font-body: 'Lora', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale — major-third (1.25) on a 16px base */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 88px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.7; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.12em; /* eyebrows, label caps */ /* ----------------------------------------------------------- SPACING — 4px base ----------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ----------------------------------------------------------- RADII — generous, storybook ----------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 9999px; /* ----------------------------------------------------------- SHADOWS — soft, warm; like candlelight on parchment. Never neutral grey — always tinted with sepia. ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(63, 42, 29, 0.08); --shadow-sm: 0 2px 6px rgba(63, 42, 29, 0.10); --shadow-md: 0 6px 18px rgba(63, 42, 29, 0.14); --shadow-lg: 0 14px 36px rgba(63, 42, 29, 0.18); --shadow-xl: 0 24px 60px rgba(63, 42, 29, 0.22); --shadow-inset: inset 0 1px 0 rgba(255, 248, 230, 0.6), inset 0 -1px 0 rgba(63, 42, 29, 0.10); /* Gold glow — used on hover for primary CTAs */ --shadow-goud: 0 0 0 4px rgba(201, 162, 74, 0.25), 0 8px 20px rgba(181, 32, 46, 0.20); /* ----------------------------------------------------------- MOTION ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* gift unwrap */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --dur-slower: 800ms; } /* ============================================================ SEMANTIC ELEMENTS ============================================================ */ body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-page); } h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--sint-rood-donker); } h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--inkt); } h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--inkt); } h4, .h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--inkt); } .display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-5xl); line-height: 0.95; letter-spacing: -0.025em; color: var(--sint-rood-donker); } .wordmark-script { font-family: var(--font-script); font-weight: 700; font-size: var(--fs-4xl); line-height: 1; color: var(--sint-rood); } .eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--mijter-goud-donker); } p, .body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--fg-1); } .lead { font-family: var(--font-body); font-style: italic; font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--fg-2); } .caption { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--fg-3); } /* UI helpers — for buttons, form labels, badges */ .ui-label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em; color: var(--fg-1); }