/* ==================================================================== JEDIA STUDIO — THEMA'S -------------------------------------------------------------------- Dit bestand bevat ALLE stijl-identiteit van de site: kleuren, lettertypes, hoekafrondingen en schaduwen. De rest van de CSS (style.css) gebruikt uitsluitend deze variabelen. HOE WERKT HET? bepaalt welk blok hieronder actief is. JS wisselt enkel dat attribuut — meer is niet nodig. ZELF EEN THEMA TOEVOEGEN? 1. Kopieer een [data-theme="..."] blok en geef het een nieuwe naam. 2. Voeg in index.html een knop toe in het thema-paneel met data-set-theme="jouwnaam" + een .swatch-jouwnaam in dit bestand. Klaar! BETEKENIS VAN DE VARIABELEN --bg : achtergrond van de pagina --bg-alt : afwisselende sectie-achtergrond (voor ritme) --surface : kaarten, formulier, paneel --ink : hoofdtekstkleur --ink-soft : gedempte tekst (bijschriften, intro's) --line : randen en scheidingslijnen --accent : dé merkkleur van het thema (knoppen, details) --accent-ink : tekstkleur BOVENOP de accentkleur --accent-soft : lichte/transparante versie van de accentkleur --font-display: lettertype voor koppen --font-body : lettertype voor lopende tekst --radius : hoekafronding klein (knoppen, velden) --radius-lg : hoekafronding groot (kaarten, foto's) --shadow : standaard schaduw voor kaarten --img-filter : kleurfilter op foto's (geeft elk thema z'n eigen look) ==================================================================== */ /* -------------------------------------------------------------------- THEMA 1 — STANDAARD (huisstijl) Donker en rustig, aansluitend bij het grijs/zwart/wit van het logo. Neutrale antraciettinten met een zacht zilver-champagne accent, en ruime, zachte afrondingen. -------------------------------------------------------------------- */ :root, [data-theme="standaard"] { --bg: oklch(0.17 0.006 260); --bg-alt: oklch(0.21 0.008 260); --surface: oklch(0.225 0.008 260); --ink: oklch(0.94 0.004 260); --ink-soft: oklch(0.70 0.008 260); --line: oklch(0.32 0.008 260); --accent: oklch(0.85 0.035 85); --accent-ink: oklch(0.18 0.008 260); --accent-soft: oklch(0.85 0.035 85 / 0.12); --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Figtree", sans-serif; --display-weight: 700; --display-spacing: -0.02em; --display-transform: none; --radius: 14px; --radius-lg: 28px; --shadow: 0 16px 44px oklch(0 0 0 / 0.35); --img-filter: none; } /* -------------------------------------------------------------------- THEMA 1b — LICHT Het vroegere lichte huisstijlthema: warm gebroken wit met terracotta. Blijft beschikbaar via het tandwiel. -------------------------------------------------------------------- */ [data-theme="licht"] { --bg: oklch(0.975 0.008 80); --bg-alt: oklch(0.945 0.014 75); --surface: oklch(0.995 0.004 80); --ink: oklch(0.24 0.015 60); --ink-soft: oklch(0.47 0.02 60); --line: oklch(0.88 0.015 75); --accent: oklch(0.62 0.13 50); --accent-ink: oklch(0.99 0.005 80); --accent-soft: oklch(0.62 0.13 50 / 0.12); --font-display: "Bricolage Grotesque", sans-serif; --font-body: "Figtree", sans-serif; --display-weight: 800; --display-spacing: -0.02em; --display-transform: none; --radius: 14px; --radius-lg: 28px; --shadow: 0 10px 30px oklch(0.3 0.03 60 / 0.10); --img-filter: none; } /* -------------------------------------------------------------------- THEMA 2 — ZAKELIJK Strak en betrouwbaar. Koel wit, diep staalblauw, scherpere hoeken en één geometrisch lettertype (Archivo) voor alles. -------------------------------------------------------------------- */ [data-theme="zakelijk"] { --bg: oklch(0.98 0.004 240); --bg-alt: oklch(0.945 0.008 240); --surface: oklch(1 0 0 / 0.9); --ink: oklch(0.25 0.03 250); --ink-soft: oklch(0.48 0.025 250); --line: oklch(0.88 0.01 240); --accent: oklch(0.48 0.11 250); --accent-ink: oklch(0.98 0.005 240); --accent-soft: oklch(0.48 0.11 250 / 0.10); --font-display: "Archivo", sans-serif; --font-body: "Archivo", sans-serif; --display-weight: 700; --display-spacing: -0.015em; --display-transform: none; --radius: 6px; --radius-lg: 12px; --shadow: 0 8px 24px oklch(0.3 0.04 250 / 0.10); --img-filter: saturate(0.92) contrast(1.04); } /* -------------------------------------------------------------------- THEMA 3 — ELEGANT Donker en verfijnd. Diepe houtskooltinten met champagne-goud, klassieke serif-koppen (Marcellus) en veel witruimte. -------------------------------------------------------------------- */ [data-theme="elegant"] { --bg: oklch(0.21 0.012 75); --bg-alt: oklch(0.25 0.014 75); --surface: oklch(0.27 0.015 75); --ink: oklch(0.93 0.015 85); --ink-soft: oklch(0.72 0.02 80); --line: oklch(0.38 0.02 78); --accent: oklch(0.78 0.09 85); --accent-ink: oklch(0.2 0.012 75); --accent-soft: oklch(0.78 0.09 85 / 0.14); --font-display: "Marcellus", serif; --font-body: "Mulish", sans-serif; --display-weight: 400; --display-spacing: 0.015em; --display-transform: none; --radius: 4px; --radius-lg: 8px; --shadow: 0 14px 40px oklch(0 0 0 / 0.4); --img-filter: saturate(0.85) sepia(0.12) contrast(1.02); } /* -------------------------------------------------------------------- THEMA 4 — KRACHTIG Gedurfd en opvallend. Bijna-zwart op licht, vurig oranjerood en grote condensed koppen in kapitalen (Anton). Nul afronding. -------------------------------------------------------------------- */ [data-theme="krachtig"] { --bg: oklch(0.965 0.006 90); --bg-alt: oklch(0.915 0.01 90); --surface: oklch(0.99 0.003 90); --ink: oklch(0.18 0.01 60); --ink-soft: oklch(0.42 0.015 60); --line: oklch(0.3 0.01 60); --accent: oklch(0.6 0.19 35); --accent-ink: oklch(0.98 0.005 90); --accent-soft: oklch(0.6 0.19 35 / 0.14); --font-display: "Anton", sans-serif; --font-body: "Figtree", sans-serif; --display-weight: 400; --display-spacing: 0.01em; --display-transform: uppercase; --radius: 0px; --radius-lg: 0px; --shadow: 6px 6px 0 oklch(0.18 0.01 60); --img-filter: saturate(1.1) contrast(1.06); } /* ==================================================================== PER-THEMA KARAKTER -------------------------------------------------------------------- Variabelen alleen (kleuren/lettertypes) maakten de thema's te veel "dezelfde site in een ander jasje". Hieronder krijgt elk thema ook een eigen VORMENTAAL: andere knopvormen, fotokaders, decoraties en typografische details. Alles netjes gescoped op [data-theme="..."], dus thema's kunnen elkaar nooit beïnvloeden. ==================================================================== */ /* ------------------ STANDAARD: donker, rond, rustig ---------------- */ [data-theme="standaard"] { --btn-radius: 99px; } /* pilvormige knoppen */ /* Rustig: foto recht, blob heel subtiel als zachte gloed */ [data-theme="standaard"] .hero-photo { rotate: 0deg; } [data-theme="standaard"] .hero-blob { opacity: .10; } /* ------------------ LICHT: rond, organisch, speels ----------------- */ [data-theme="licht"] { --btn-radius: 99px; } /* Hier mag het net iets speelser: licht gedraaide foto */ [data-theme="licht"] .hero-photo { rotate: 1.5deg; } /* ------------------ ZAKELIJK: recht, raster, zakelijk ridge -------- */ [data-theme="zakelijk"] { --btn-radius: 6px; } /* Geen speelse vormen: blob weg, foto perfect recht */ [data-theme="zakelijk"] .hero-blob { display: none; } [data-theme="zakelijk"] .hero-photo { rotate: 0deg; } /* Fijn technisch raster als hero-achtergrond */ [data-theme="zakelijk"] .hero { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; } /* Eyebrows krijgen een zakelijk streepje ervoor */ [data-theme="zakelijk"] .eyebrow::before { content: ""; display: inline-block; vertical-align: middle; width: 2rem; height: 2px; background: var(--accent); margin-right: .6rem; } /* Strakke, vlakke kaarten: schaduw minimaal, rand doet het werk */ [data-theme="zakelijk"] .dienst-kaart, [data-theme="zakelijk"] .pakket { box-shadow: none; } /* ------------------ ELEGANT: verfijnd, kaders, ademruimte ---------- */ [data-theme="elegant"] { --btn-radius: 0; } [data-theme="elegant"] .hero-blob { display: none; } [data-theme="elegant"] .hero-photo { rotate: 0deg; border: 1px solid var(--accent); outline: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); outline-offset: 10px; } /* Chique knoppen: dunne gouden rand, brede letterafstand, kapitalen */ [data-theme="elegant"] .btn { text-transform: uppercase; letter-spacing: .14em; font-size: .86rem; font-weight: 600; } [data-theme="elegant"] .btn-primary { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; } [data-theme="elegant"] .btn-primary:hover { background: var(--accent-soft); } /* Eyebrows: heel breed gespatieerd, met een lange dunne lijn erna */ [data-theme="elegant"] .eyebrow { letter-spacing: .3em; font-weight: 500; } [data-theme="elegant"] .eyebrow::after { content: ""; display: inline-block; vertical-align: middle; width: 3.5rem; height: 1px; background: var(--accent); margin-left: .8rem; opacity: .6; } /* Groot decoratief aanhalingsteken bij de klantenquote */ [data-theme="elegant"] .quote { position: relative; } [data-theme="elegant"] .quote::before { content: "\201C"; position: absolute; top: -0.55em; left: 50%; translate: -50% 0; font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--accent); opacity: .35; } /* De handgetekende onderstreping is te speels voor dit thema: vervang ze door een rustige rechte goudlijn */ [data-theme="elegant"] .underline-swash { display: none; } [data-theme="elegant"] .accent-word { border-bottom: 1px solid var(--accent); padding-bottom: .05em; } /* ------------------ KRACHTIG: brutalistisch, hard, luid ------------ */ [data-theme="krachtig"] { --btn-radius: 0; } /* Het sleutelwoord in de hero wordt een omtrek (outline-tekst) */ [data-theme="krachtig"] .accent-word { color: transparent; -webkit-text-stroke: 3px var(--accent); } /* Foto met harde offset-schaduw, licht gekanteld — posterstijl */ [data-theme="krachtig"] .hero-photo { rotate: -2deg; border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); } [data-theme="krachtig"] .hero-blob { opacity: .3; } /* Knoppen als stickers: dikke rand, harde schaduw die "indrukt" */ [data-theme="krachtig"] .btn { text-transform: uppercase; letter-spacing: .04em; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); } [data-theme="krachtig"] .btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); transform: none; } [data-theme="krachtig"] .btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--ink); } [data-theme="krachtig"] .btn-ghost { background: var(--bg); color: var(--ink); } /* Alles met een rand wordt hier dik en zwart */ [data-theme="krachtig"] .dienst-kaart, [data-theme="krachtig"] .pakket, [data-theme="krachtig"] .contact-form, [data-theme="krachtig"] .faq-item { border: 3px solid var(--ink); } /* Marquee: groter, luider, met accentkleur als vlak */ [data-theme="krachtig"] .marquee { background: var(--accent); color: var(--accent-ink); border-block: 3px solid var(--ink); } [data-theme="krachtig"] .marquee-track { font-size: 1.5rem; } [data-theme="krachtig"] .marquee-track i { color: var(--accent-ink); } /* Vierkante cursor-ring past bij de harde vormentaal */ [data-theme="krachtig"] .cursor-ring { border-radius: 0; border-width: 2px; } [data-theme="krachtig"] .cursor-dot { border-radius: 0; } /* Uitgelicht pakket: gedraaid "sticker"-badge */ [data-theme="krachtig"] .pakket-badge { rotate: -3deg; border-radius: 0; } /* -------------------------------------------------------------------- SWATCHES: de gekleurde voorbeeldbolletjes in het thema-paneel. Elk bolletje toont achtergrond + accent van zijn thema. -------------------------------------------------------------------- */ .swatch-standaard { background: linear-gradient(135deg, oklch(0.17 0.006 260) 50%, oklch(0.85 0.035 85) 50%); } .swatch-licht { background: linear-gradient(135deg, oklch(0.975 0.008 80) 50%, oklch(0.62 0.13 50) 50%); } .swatch-zakelijk { background: linear-gradient(135deg, oklch(0.98 0.004 240) 50%, oklch(0.48 0.11 250) 50%); } .swatch-elegant { background: linear-gradient(135deg, oklch(0.21 0.012 75) 50%, oklch(0.78 0.09 85) 50%); } .swatch-krachtig { background: linear-gradient(135deg, oklch(0.965 0.006 90) 50%, oklch(0.6 0.19 35) 50%); } /* -------------------------------------------------------------------- Vloeiende overgang bij het wisselen van thema. (Alleen kleuren — layout-eigenschappen animeren we nooit.) -------------------------------------------------------------------- */ body, .site-header, .pakket, .contact-form, .theme-panel, .dienst-kaart, .niet-doen, .faq-item { transition: background-color .45s ease, color .45s ease, border-color .45s ease; }