/* themas.css - de drie looks. Een thema is een set waarden voor de tokens * die stijl.css leest, aangezet met data-* op (stijl.js zet ze). * * Vaste vorm, want site/proef/thema.test.mjs leest dit bestand: elk * kleurblok heeft als kop precies [data-thema="x"][data-modus="y"] en per * kleur een regel "--naam: #rrggbb;". De proef rekent elk tekstpaar na * tegen WCAG AA (4,5:1) en elke rand tegen 3:1. * * Letters: de families staan hier al; de bestanden komen in fonts/ (Task 8). * Tot die er zijn valt elke stapel terug op een systeemletter. */ /* ------------------------------------------------------------ Platenzaak -- */ /* Donker en warm, zoals een platenzaak om vijf uur 's middags. Het accent is de kleur van een prijssticker. */ [data-thema="platenzaak"][data-modus="donker"] { --pap: #16120e; --paneel: #211b15; --rand: #3a3027; --rand-fel: #7a6752; --tekst: #f1e8da; --zacht: #cbbca7; --zachter: #ad9c84; --accent: #e0a84a; --op-accent: #1d1307; --accent-tekst: #e8b560; --goed: #7fcf98; --twijfel: #e5b04e; --uitgave: #a9d2ab; --fout: #f0827a; --op-fout: #1d0b09; --focus: #f3c56b; --schaduw: 0 2px 10px rgb(0 0 0 / .4); } [data-thema="platenzaak"][data-modus="licht"] { --pap: #efe7d8; --paneel: #f8f2e7; --rand: #d8ccb8; --rand-fel: #8a7862; --tekst: #241b12; --zacht: #54463a; --zachter: #66563f; --accent: #a8610f; --op-accent: #fff8ec; --accent-tekst: #8a4d08; --goed: #1f6b3b; --twijfel: #7a4f00; --uitgave: #3b6444; --fout: #a3271d; --op-fout: #fff6f4; --focus: #8a4d08; --schaduw: 0 1px 2px rgb(60 40 20 / .12), 0 6px 18px rgb(60 40 20 / .10); } [data-thema="platenzaak"] { --radius: 6px; --radius-klein: 4px; /* Papierkorrel: ruis uit een SVG-filter, op een vaste laag (zie body::before in stijl.css). Geen afbeelding om op te halen. */ --textuur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); --textuur-sterkte: .08; } /* --------------------------------------------------------------- Galerij -- */ /* Licht en stil. De hoezen dragen de pagina; de rest doet een stap terug. */ [data-thema="galerij"][data-modus="licht"] { --pap: #f5f5f3; --paneel: #fcfcfb; --rand: #e2e2e0; --rand-fel: #8b8b91; --tekst: #18181b; --zacht: #4f4f57; --zachter: #606068; --accent: #2f55c8; --op-accent: #fbfbfd; --accent-tekst: #2a4db8; --goed: #1d6f40; --twijfel: #835400; --uitgave: #3a6645; --fout: #b0261e; --op-fout: #fff7f6; --focus: #2a4db8; --schaduw: 0 1px 2px rgb(24 24 27 / .08), 0 4px 14px rgb(24 24 27 / .06); } [data-thema="galerij"][data-modus="donker"] { --pap: #121214; --paneel: #1b1b1f; --rand: #2c2c32; --rand-fel: #6c6c75; --tekst: #ededee; --zacht: #b7b7be; --zachter: #9d9da6; --accent: #8aa4ff; --op-accent: #0c1333; --accent-tekst: #9bb2ff; --goed: #72d092; --twijfel: #e2b24e; --uitgave: #a3d2a9; --fout: #f28d86; --op-fout: #1f0a08; --focus: #9bb2ff; --schaduw: 0 2px 10px rgb(0 0 0 / .45); } [data-thema="galerij"] { --radius: 2px; --radius-klein: 2px; --textuur: none; --textuur-sterkte: 0; } /* ----------------------------------------------------------- Tijdschrift -- */ /* Crème papier, grote koppen, hard contrast. Alleen licht: het papier is het thema. */ [data-thema="tijdschrift"][data-modus="licht"] { --pap: #f2ecdf; --paneel: #faf6ee; --rand: #d6ccba; --rand-fel: #7d7465; --tekst: #121110; --zacht: #3b3833; --zachter: #55514a; --accent: #c2410c; --op-accent: #fffaf3; --accent-tekst: #a8380a; --goed: #1b6638; --twijfel: #744c00; --uitgave: #39643f; --fout: #a01f17; --op-fout: #fff6f4; --focus: #121110; --schaduw: none; } [data-thema="tijdschrift"] { --radius: 0px; --radius-klein: 0px; --textuur: none; --textuur-sterkte: 0; } /* ----------------------------------------------------------- letterparen -- */ /* Twee per thema (stijl.js: THEMAS[..].letters). De broodletter is overal Figtree (--font-tekst in stijl.css); alleen de koppen wisselen. */ [data-letter="klassiek"] { --font-kop: "Playfair Display", "Iowan Old Style", Georgia, serif; --kop-gewicht: 700; } [data-letter="letterzetter"] { --font-kop: "EB Garamond", Garamond, Georgia, serif; --kop-gewicht: 500; } [data-letter="stil"] { --font-kop: "Figtree", ui-sans-serif, system-ui, sans-serif; --kop-gewicht: 600; } [data-letter="catalogus"] { --font-kop: "IBM Plex Mono", ui-monospace, Consolas, monospace; --kop-gewicht: 500; } [data-letter="affiche"] { --font-kop: "Anton", Impact, "Arial Narrow", sans-serif; --kop-gewicht: 400; } [data-letter="redactie"] { --font-kop: "DM Serif Display", Georgia, serif; --kop-gewicht: 400; } /* -------------------------------------------------------------- hoesmaat -- */ [data-hoesmaat="groot"] { --tegel: 210px; --raster-gap: 20px; } [data-hoesmaat="middel"] { --tegel: 168px; --raster-gap: 16px; } [data-hoesmaat="muur"] { --tegel: 116px; --raster-gap: 6px; } /* Op 375 px: groot en middel geven twee kolommen, muur drie. */ @media (max-width: 640px) { [data-hoesmaat="groot"] { --tegel: 150px; } [data-hoesmaat="middel"] { --tegel: 132px; } [data-hoesmaat="muur"] { --tegel: 96px; --raster-gap: 4px; } }