/* ============================================================ Kleuropties, uitsluitend gebouwd op het logo uit het werkboek: groen #46703F blauw #3275AC navy #001C43 A is nu de standaard in tailwind.css. Zet data-palette="b|c|d" op om te wisselen. Alleen kleur: geen enkele wijziging in layout of typografie. ============================================================ */ /* ---------- B. Wit en scherp ---------- */ html[data-palette="b"] { --color-navy: #001c43; --color-navy-2: #0a2c5c; --color-navy-deep: #001330; --color-ink: #001c43; --color-body: #263330; --color-muted: #47534e; --color-cream: #ffffff; --color-paper: #ffffff; --color-mint: #e8efe2; --color-mint-2: #dae6d1; --color-hair: #d5dbd3; --color-hair-2: #bcc4ba; --color-sky: #3275ac; } html[data-palette="b"] body { background-color: #ffffff; } /* de secties die op cream leunden krijgen een lichte tint terug, anders vallen wit-op-wit blokken tegen elkaar weg */ html[data-palette="b"] .bg-cream { background-color: #f4f6f2; } /* ---------- C. Groen voorop ---------- */ html[data-palette="c"] { --color-navy: #001c43; --color-navy-2: #0a2c5c; --color-navy-deep: #001330; --color-ink: #001c43; --color-body: #2c3a34; --color-muted: #4e5b55; --color-forest: #3d6537; --color-forest-2: #33542e; --color-mint: #e4ecdb; --color-mint-2: #d5e2c9; --color-hair: #d9e0d6; --color-hair-2: #c2cabf; --color-sky: #3275ac; } /* de primaire knoppen worden groen in plaats van navy */ html[data-palette="c"] a.btn.bg-navy { background-color: var(--color-forest); } html[data-palette="c"] a.btn.bg-navy:hover { background-color: var(--color-forest-2); } /* ---------- D. Logoblauw als accent ---------- */ html[data-palette="d"] { --color-navy: #001c43; --color-navy-2: #0a2c5c; --color-navy-deep: #001330; --color-ink: #001c43; --color-body: #2c3a34; --color-muted: #4e5b55; --color-sky: #3275ac; --color-sky-soft: #e3eef7; --color-sky-ink: #235a86; --color-hair: #d9dee0; --color-hair-2: #c1c8cc; --color-mint: #e6eee6; } html[data-palette="d"] a.btn.bg-forest { background-color: #3275ac; } html[data-palette="d"] a.btn.bg-forest:hover { background-color: #285f8c; }