/* ============================================================================ Leergilde — hoofdstijlblad /public/style/main.css Bewust het tegenovergestelde van de Jolmers-sites: die zijn koel marineblauw met oranje, donkere balken en overal Segoe UI. Leergilde is warm perkament met diepgroen en messing, lichte vlakken, haarlijnen in plaats van schaduwen, en een schreefletter in de koppen. Geen externe fonts en geen CDN: dat houdt de CSP in .htaccess kort en voorkomt dat een vergeten uitzondering iets stilletjes blokkeert. De twee kleurvariabelen worden per opleider overschreven op het - element (zie header.php), zodat een white-labelcursist zijn eigen kleuren ziet zonder tweede stylesheet. ============================================================================ */ :root { --primair: #1f4739; --primair-donker: #163429; --primair-licht: #ecf1ee; --accent: #a8762c; --accent-licht: #f6efe2; --perkament: #faf7f2; --vlak: #fffdfa; --inkt: #22271f; --zacht: #6a6a5e; --rand: #e4ded2; --rand-sterk:#cfc7b6; --fout: #9b2c2c; --fout-bg: #fbeeee; --goed: #2f6b46; --goed-bg: #edf5f0; --schreef: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; --schreefloos: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --breedte: 1080px; --radius: 4px; } /* ─── Basis ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--schreefloos); font-size: 16px; line-height: 1.65; color: var(--inkt); background: var(--perkament); display: flex; flex-direction: column; min-height: 100vh; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primair); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--accent); } h1, h2, h3, h4 { font-family: var(--schreef); font-weight: 700; line-height: 1.2; color: var(--primair-donker); letter-spacing: -0.01em; } h1 { font-size: 2.35rem; } h2 { font-size: 1.65rem; } h3 { font-size: 1.2rem; } p + p, p + ul, p + ol { margin-top: 0.85rem; } ul, ol { padding-left: 1.25rem; } li + li { margin-top: 0.3rem; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .omhulsel { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 1.5rem; } /* Direct naar de inhoud — zichtbaar zodra hij focus krijgt. */ .overslaan { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--primair); color: #fff; padding: 0.6rem 1rem; } .overslaan:focus { left: 0; } /* ─── Kop ─────────────────────────────────────────────────────────────── */ .kop { background: var(--vlak); border-bottom: 1px solid var(--rand); } .kop-binnen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; padding-top: 0.75rem; padding-bottom: 0.75rem; } .kop-logo { display: flex; align-items: center; text-decoration: none; } .kop-logo img { height: 40px; width: auto; } .hoofdmenu { display: flex; align-items: center; gap: 0.25rem; list-style: none; } .hoofdmenu a { display: block; padding: 0.5rem 0.8rem; font-size: 0.94rem; color: var(--inkt); text-decoration: none; border-radius: var(--radius); } .hoofdmenu a:hover { background: var(--primair-licht); color: var(--primair-donker); } .hoofdmenu a[aria-current="page"] { color: var(--primair-donker); box-shadow: inset 0 -2px 0 var(--accent); } .menu-knop { display: none; background: none; border: 1px solid var(--rand-sterk); border-radius: var(--radius); padding: 0.45rem 0.6rem; cursor: pointer; } .menu-knop span { display: block; width: 20px; height: 2px; background: var(--inkt); margin: 4px 0; } /* ─── Knoppen ─────────────────────────────────────────────────────────── */ .knop { display: inline-block; padding: 0.7rem 1.4rem; font-size: 0.97rem; font-weight: 600; font-family: var(--schreefloos); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .knop-primair { background: var(--primair); color: #fff; } .knop-primair:hover { background: var(--primair-donker); color: #fff; } .knop-accent { background: var(--accent); color: #fff; } .knop-accent:hover { background: #8f6323; color: #fff; } .knop-rand { background: transparent; color: var(--primair); border-color: var(--rand-sterk); } .knop-rand:hover { border-color: var(--primair); background: var(--primair-licht); color: var(--primair-donker); } .knop-klein { padding: 0.4rem 0.85rem; font-size: 0.88rem; } /* ─── Hero ────────────────────────────────────────────────────────────── */ .hero { background: var(--perkament); border-bottom: 1px solid var(--rand); padding: 4.5rem 0 4rem; } .hero-binnen { max-width: 720px; } /* links uitgelijnd, niet gecentreerd */ .hero-etiket { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; } .hero-tekst { font-size: 1.15rem; color: #4a4a41; max-width: 60ch; } .hero-knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } /* ─── Secties ─────────────────────────────────────────────────────────── */ .sectie { padding: 3.5rem 0; } .sectie-licht { background: var(--vlak); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); } .sectie-kop { max-width: 62ch; margin-bottom: 2rem; } .sectie-kop p { color: var(--zacht); margin-top: 0.5rem; } /* ─── Kaarten ─────────────────────────────────────────────────────────── */ .raster { display: grid; gap: 1.25rem; } .raster-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .raster-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .kaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; /* Geen slagschaduw: de haarlijn doet het werk. */ } a.kaart { text-decoration: none; color: inherit; transition: border-color 0.15s; } a.kaart:hover { border-color: var(--accent); } .kaart h3 { margin-bottom: 0.4rem; } .kaart p { color: var(--zacht); font-size: 0.94rem; } .kaart-voet { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; } .kaart-prijs { font-weight: 700; color: var(--primair-donker); } .etiket { display: inline-block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 2px; background: var(--accent-licht); color: #7d5a20; } .etiket-groen { background: var(--primair-licht); color: var(--primair-donker); } /* Cursuspagina: tekst links, de kaart met prijs en kenmerken rechts. Onder de 900 px valt de kaart onder de tekst — een kolom van 320 px naast lopende tekst wordt op een telefoon onleesbaar smal. */ .cursus-indeling { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .cursus-zijkaart { position: sticky; top: 1.5rem; } @media (max-width: 900px) { .cursus-indeling { grid-template-columns: 1fr; gap: 2rem; } .cursus-zijkaart { position: static; } } /* ─── Kruimelpad ──────────────────────────────────────────────────────── */ .kruimels { background: var(--vlak); border-bottom: 1px solid var(--rand); padding: 0.6rem 0; } .kruimels ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; font-size: 0.85rem; } .kruimels li { display: flex; gap: 0.4rem; align-items: center; } .kruimels li + li::before { content: "›"; color: var(--rand-sterk); } .kruimels a { color: var(--zacht); text-decoration: none; } .kruimels a:hover { color: var(--primair); text-decoration: underline; } .kruimels [aria-current] { color: var(--inkt); } /* ─── Formulieren ─────────────────────────────────────────────────────── */ .veld { margin-bottom: 1.1rem; } .veld label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; } .veld .uitleg { font-size: 0.85rem; color: var(--zacht); margin-bottom: 0.35rem; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="number"], input[type="search"], select, textarea { width: 100%; padding: 0.65rem 0.8rem; font-family: inherit; font-size: 1rem; color: var(--inkt); background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: var(--radius); } input:focus, select:focus, textarea:focus { border-color: var(--primair); outline: 2px solid rgba(31,71,57,0.15); outline-offset: 0; } textarea { min-height: 140px; resize: vertical; } .selectievak { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.94rem; } .selectievak input { margin-top: 0.3rem; } /* Honeypot: onzichtbaar voor mensen, ingevuld door bots. */ .wachtveld { position: absolute; left: -9999px; opacity: 0; height: 0; } /* ─── Meldingen ───────────────────────────────────────────────────────── */ .melding { padding: 0.9rem 1.1rem; border: 1px solid var(--rand-sterk); border-left-width: 4px; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.95rem; } .melding-fout { background: var(--fout-bg); border-color: var(--fout); color: #6d2020; } .melding-goed { background: var(--goed-bg); border-color: var(--goed); color: #1f4a30; } .melding-let { background: var(--accent-licht); border-color: var(--accent); color: #6f4f1c; } /* ─── Tabellen ────────────────────────────────────────────────────────── */ .tabel-omhulsel { overflow-x: auto; } table.lijst { width: 100%; border-collapse: collapse; font-size: 0.94rem; background: var(--vlak); } table.lijst th, table.lijst td { padding: 0.7rem 0.8rem; text-align: left; border-bottom: 1px solid var(--rand); } table.lijst th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); font-weight: 600; } table.lijst tbody tr:hover { background: var(--primair-licht); } /* ─── Voortgang ───────────────────────────────────────────────────────── */ .balk { height: 8px; background: var(--rand); border-radius: 99px; overflow: hidden; } .balk span { display: block; height: 100%; background: var(--primair); } /* ─── Voet ────────────────────────────────────────────────────────────── */ .voet { margin-top: auto; background: var(--primair-donker); color: #cfd8d2; padding: 3rem 0 1.5rem; font-size: 0.92rem; } .voet h4 { color: #fff; font-size: 0.95rem; font-family: var(--schreefloos); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.8rem; } .voet a { color: #cfd8d2; text-decoration: none; } .voet a:hover { color: #fff; text-decoration: underline; } .voet ul { list-style: none; padding: 0; } .voet-raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .voet-logo img { height: 38px; margin-bottom: 1rem; } .voet-onder { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.85rem; color: #a8b5ad; } /* ─── Klein scherm ────────────────────────────────────────────────────── */ @media (max-width: 820px) { .menu-knop { display: block; } .hoofdmenu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--vlak); border-bottom: 1px solid var(--rand); padding: 0.5rem 1.5rem 1rem; z-index: 50; } .hoofdmenu.open { display: flex; } .hoofdmenu a { padding: 0.7rem 0; border-radius: 0; } .kop-binnen { position: relative; } .hero { padding: 3rem 0 2.5rem; } .hero h1 { font-size: 2.1rem; } h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ─── Afdrukken ───────────────────────────────────────────────────────── */ @media print { .kop, .voet, .kruimels, .hero-knoppen { display: none; } body { background: #fff; } }