/* ============================================================================ MORRAPARK THEME 2.0 — "Emerald & Champagne" ---------------------------------------------------------------------------- Canoniek kleur- en typografie-thema van Morrapark, één-op-één overgenomen uit het narrowcasting-scherm (reserveringsoverzicht). Hang dit bestand voor je eigen CSS en style met de tokens hieronder — nooit losse hex-waarden. Twee standen: licht (standaard) donker Beeldmerk-goud = #cbb18e (bestandsnaam "... CBB18E.png"). Accent-token volgt dezelfde kleur, zodat logo en accenten altijd kloppen. ============================================================================ */ /* Poppins — zelf-gehost (geen Google-CDN → geen AVG/GDPR-lek, geen render-block). Latin + Latin-Ext, 5 gewichten. Bestanden: assets/fonts/. */ @font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/poppins-300-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:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/poppins-300-latinext.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:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400-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:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400-latinext.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:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-500-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:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-500-latinext.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:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-600-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:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-600-latinext.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:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700-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:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700-latinext.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; } /* --------------------------------------------------------------------------- 1. MERK-TOKENS (dag — standaard) Exact de waarden uit morrapark-narrowcasting-emerald.html. --------------------------------------------------------------------------- */ :root, [data-theme="day"] { /* Kern */ --brand: #0d2e22; /* diepgroen — koppen, balken, voettekst */ --accent: #cbb18e; /* champagne — labels, accenten, beeldmerk */ --surface: #ffffff; /* kaart / paneel */ --canvas: #faf8f4; /* paginacanvas (warm papier) */ /* Tekst */ --ink: #16241d; /* primaire tekst — 15.6:1 op --surface */ --ink-2: #6b756f; /* secundaire tekst — 5.1:1 op --surface */ --done: #8d9a91; /* gedimd/afgerond — zachter, nog leesbaar */ /* Lijnen & vlakken */ --line: rgba(13,46,34,.08); --zebra: #faf8f4; /* Status "nu bezig" — het enige luide element */ --now-bg: rgba(203,177,142,.16); --now-ink: var(--ink); --now-accent: var(--accent); --now-progress: rgba(203,177,142,.5); --now-badge-bg: #143a2b; --now-badge-ink:#eaf3ec; --now-badge-dot:#7fbf9a; /* Schaduw */ --shadow: 0 .5rem 1.5rem rgba(13,46,34,.08); /* Fout/validatie */ --error: #b3261e; /* fouttekst/rand — 6.5:1 op wit */ --error-strong: #8c1d18; /* status-fouttekst, donkerder (9.4:1) */ /* ------------------------------------------------------------------------- 2. SEMANTISCHE ALIASSEN Handige, doel-gerichte namen voor sites/slides/documenten. Verwijzen naar de merk-tokens hierboven, dus één plek om te wijzigen. ------------------------------------------------------------------------- */ --color-primary: var(--brand); --color-accent: var(--accent); --color-bg: var(--canvas); --color-card: var(--surface); --color-text: var(--ink); --color-text-muted: var(--ink-2); --color-border: var(--line); --color-on-primary: #eaf3ec; /* tekst op --brand */ --color-on-accent: #16241d; /* tekst op --accent */ /* ------------------------------------------------------------------------- 3. TYPOGRAFIE ------------------------------------------------------------------------- */ --font-sans: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: var(--font-sans); --font-head: var(--font-sans); --weight-light: 300; /* grote koppen, tijden */ --weight-regular: 400; --weight-medium: 500; /* labels, namen */ --weight-semibold: 600; --weight-bold: 700; /* Type-schaal — WEB. Stond hier eerder als de narrowcasting-schaal (--text-base: 1.7rem enz.). Die maten zijn voor een scherm dat je van vier meter afstand leest; op een website werd geen enkele ervan gebruikt, en ondertussen stonden er 26 losse font-sizes in de stylesheets — vijftien daarvan tussen .72rem en 1.0625rem, waar het oog er hooguit drie ziet. De bordmaten staan nu in het bord zelf (Reserveringsoverzicht/morrapark-narrowcasting-emerald.html); hieronder de schaal die deze site echt gebruikt. Stappen ~1.2, behalve het paar sm/base (1.13): dat is de klassieke body-vs-bijschrift-verhouding en hoort dicht op elkaar te liggen. */ --text-2xs: .75rem; /* 12px — fine print, eyebrow, tag, badge */ --text-sm: .9375rem; /* 15px — secundair, meta, footer, bijschrift */ --text-base: 1.0625rem; /* 17px — lopende tekst */ --text-lg: clamp(1.15rem, 1.5vw, 1.35rem); /* leads */ --text-xl: clamp(1.25rem, 1.8vw, 1.5rem); /* h3 */ --text-2xl: clamp(1.9rem, 3.4vw, 2.7rem); /* h2 */ --text-3xl: clamp(2.4rem, 5.2vw, 4rem); /* h1 */ --tracking-eyebrow: .2em; /* letterspacing voor eyebrows/labels */ /* ------------------------------------------------------------------------- 4. VORM & RUIMTE ------------------------------------------------------------------------- */ --radius: .5rem; --radius-pill: 999px; /* Ruimte-ladder. --space-1 t/m 5 stonden hier al maar werden nergens gebruikt; 6 en 7 zijn toegevoegd zodat sectie-ritme ook uit de ladder kan komen in plaats van uit losse waarden. */ --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.25rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; /* Sectie-ritme: één bron voor het verticale luchtniveau van een blok. */ --section-y: clamp(3.4rem, 6vw, 5.4rem); --band-y: clamp(2.8rem, 5vw, 4rem); /* ------------------------------------------------------------------------- 5. VOETTEKST De footer is in beide standen hetzelfde donkergroene anker — dat is bewust: hij sluit de pagina af, en een meeschakelende footer zou dat anker weghalen. Daarom staan deze waarden hier als eigen tokens en niet als dag/nacht-paar. ------------------------------------------------------------------------- */ --footer-bg: #0a231a; --footer-ink: #cfe0d5; /* 9.7:1 op --footer-bg */ --footer-ink-2: #9db3a6; /* 5.6:1 — tijden, copyright */ --footer-ink-soft: #b9cabf; /* 7.5:1 — merkparagraaf */ --footer-strong: #ffffff; --footer-line: rgba(255,255,255,.1); --footer-tile: rgba(255,255,255,.06); } /* --------------------------------------------------------------------------- NACHT — donkere set. Merkgroen (--brand) blijft hier gelijk, want het is een merkkleur: als vlak (knop, balk, CTA-band) klopt het in beide standen. Maar het is 's nachts géén leeskleur meer — gemeten haalt #0d2e22 op --canvas 1,2:1. Hier stond eerder "het leest op een donker canvas net zo goed als op wit"; dat was niet nagemeten en het klopte niet. Gebruik daarom --site-accent (base.css) voor alles wat tékst is: groen overdag, champagne 's nachts. --brand alleen als ondergrond. --------------------------------------------------------------------------- */ [data-theme="night"] { --surface: #142019; --canvas: #0a1310; --ink: #eef3ef; /* 15.1:1 op --surface */ --ink-2: #9fb0a5; /* 7.2:1 */ --done: #71847a; --line: rgba(255,255,255,.08); --zebra: #101c17; --now-badge-bg: #1b4d30; --now-badge-ink:#eef3ef; --now-badge-dot:#5fd68d; --shadow: none; --color-on-primary: #eef3ef; --color-on-accent: #14231c; --error: #f2b8b5; --error-strong: #f2b8b5; } /* --------------------------------------------------------------------------- BASIS-HELPERS — verwijderd. Hier stond een tweede knop-/kaartsysteem (.morra, .morra-eyebrow, .morra-card, .morra-btn en drie modifiers). Geen enkele pagina in deze site gebruikte het; de site heeft .btn / .kicker / .review in base.css. Twee knopsystemen in één themabestand is precies hoe een ontwerpsysteem uit elkaar loopt, dus het is eruit. De narrowcasting-borden hebben hun eigen stijlen inline staan en zijn hier niet van afhankelijk. --------------------------------------------------------------------------- */