/* ============================================================ ULTIMATE PLAYOUT — SIGNAL GLOW ============================================================ Dit bestand wordt op twee plekken geladen: op de site en in de blokkeneditor. Daarom staan de klassen er telkens dubbel in — de kale naam (.card) en de blokstijl die WordPress ervan maakt (.is-style-card). Kies je de stijl in de zijbalk, dan schrijft WordPress is-style-card; typ je zelf een klasse, dan werkt die net zo goed. ============================================================ */ :root { --bg: #070d16; --fg: #eef3fa; --muted: #8b9aad; --dim: #5f6f81; --line: rgba(255, 255, 255, .1); --glass: rgba(255, 255, 255, .045); /* Het leesvlak. Niet --glass: dat is 4,5% wit en laat de vlekken en de fijne diagonaal van de achtergrond er gewoon doorheen komen. Deze kleur dekt af, zodat tekst overal op de pagina op hetzelfde rustige vlak ligt en niet toevallig boven een blauwe of amberkleurige vlek. */ --panel: rgba(13, 22, 32, .92); /* Tekstkleur voor lange stukken. --muted (#8b9aad) is gemaakt voor losse regels naast een kop, niet om alinea's lang achter elkaar te lezen: 6,4:1 tegen het leesvlak. Deze haalt 10:1 en blijft in dezelfde blauwgrijze familie. */ --read: #b4c2d2; --o1: #3d9bd4; --o2: #c8912a; --o3: #4a9e57; --o4: #8e44c8; --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace; --app-bg: #10202c; --app-line: #24404f; --app-fg: #cfe0ec; --app-muted: #7e97a8; --app-red: #e0655c; --onair: #d63a2f; --next: #37c46a; --shell: 1240px; --gutter: 28px; } * { box-sizing: border-box; } /* ============================================================ DE PAGINA ============================================================ */ html, body { background: #070d16; } /* De ruimte voor de schuifbalk staat altijd gereserveerd, ook op een pagina die niet schuift. Anders is de inhoudskolom op een korte pagina een paar pixels breder dan op een lange, en verspringt alles zichtbaar zodra je van de ene naar de andere gaat. */ html { scrollbar-gutter: stable; } body { color: var(--fg); font-family: var(--font-text); line-height: 1.6; margin: 0; color-scheme: dark; position: relative; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } /* Kolomindeling zodat de inhoud uitrekt en de voetband onderaan blijft plakken, ook als er weinig op de pagina staat. */ .wp-site-blocks { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .wp-site-blocks > main { flex: 1 0 auto; } .admin-bar .wp-site-blocks { min-height: calc(100vh - 32px); } @media screen and (max-width: 782px) { .admin-bar .wp-site-blocks { min-height: calc(100vh - 46px); } } /* ============================================================ DE ACHTERGROND Geen blok maar decoratie: functions.php zet hem na . ============================================================ */ .up-backdrop { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .up-no-backdrop .up-backdrop { display: none; } /* De breuklijn is een gedraaid blok, geen kleurstop in een verloop. Een stop in een verloop ligt op een percentage van de gradient-as, en waar die as loopt hangt af van de afmetingen van het vlak — onvoorspelbaar dus. Met een gedraaid blok is de bovenrand de lijn: top bepaalt de plek, de rotatie de hoek. Beide staan vast. De hoek is gelijk aan die van de fijne lijnen hieronder: 145deg in een verloop komt neer op 35 graden. */ .bg-break { position: absolute; left: -60%; right: -60%; top: min(70vh, 640px); height: 2600px; transform: rotate(-35deg); transform-origin: 50% 0; /* Een dunne lijn op de rand zelf, zodat de kleurovergang erachter wegvalt. */ border-top: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, rgba(61, 139, 253, .13) 0%, rgba(61, 139, 253, .07) 20%, rgba(245, 165, 36, .05) 42%, transparent 75%); } .up-backdrop::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(145deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 46px); } .orb { position: absolute; border-radius: 50%; filter: blur(80px); } .orb-1 { width: 520px; height: 520px; background: rgba(61, 155, 212, .26); top: -160px; left: -110px; } .orb-2 { width: 460px; height: 460px; background: rgba(200, 145, 42, .20); top: 220px; right: -150px; } .orb-3 { width: 400px; height: 400px; background: rgba(142, 68, 200, .15); bottom: -140px; left: 38%; } /* ============================================================ DE KOLOMBREEDTE theme.json houdt de blokken op 1240 px; de zijruimte staat hier, zodat de balken van de kop- en voettekst wél tot de rand doorlopen. ============================================================ */ .site-main { padding-inline: var(--gutter); } .nav-inner, .foot-inner { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } /* ============================================================ NAVIGATIE ============================================================ */ /* * De balk blijft in beeld tijdens het scrollen. * * Het plakken staat op het
-element en niet op .nav daarbinnen. Een * sticky element beweegt namelijk alleen binnen zijn ouder, en die header is * precies zo hoog als de balk zelf — dan is er nul ruimte om mee te lopen en * gebeurt er niets. Het
is wél een direct kind van .wp-site-blocks, * dat zo hoog is als de hele pagina. */ .wp-site-blocks > header { position: sticky; top: 0; z-index: 10; } /* de beheerbalk van WordPress staat er bovenop */ .admin-bar .wp-site-blocks > header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .wp-site-blocks > header { top: 46px; } } /* * De beheerbalk op een telefoon. * * Onder 600px zet WordPress `#wpadminbar` op `position: absolute` in plaats van * `fixed`, zodat de balk meescrolt en op een klein scherm geen 46px opslokt. * Dat levert hier twee dingen op die allebei fout gaan. * * Eén: een absoluut geplaatst element rekent zijn plek uit vanaf de dichtstbij- * zijnde geplaatste voorouder, en dat is hier — die staat op * `position: relative` voor de achtergronddecoratie hierboven. WordPress duwt * met `html { margin-top: 46px !important }` de pagina omlaag om ruimte voor de * balk te maken, dus body begint al op 46px. De balk landt daardoor op 46px in * plaats van op 0, precies bovenop de kop van de site. Dat is niet iets wat * WordPress verkeerd doet: core gaat ervan uit dat body niet geplaatst is. * De balk 46px terugtrekken zet hem in de ruimte die er al voor gereserveerd is. * * Twee: de kop plakt op `top: 46px`, en dat klopt zolang de balk vást staat. * Hier scrolt hij weg, dus blijft er onder die 46px een strook achtergrond * boven de kop hangen zolang je scrolt. Op nul, dan plakt hij tegen de rand. * * De 46 en de 600 zijn van WordPress zelf (admin-bar.css); het thema noemt die * maten hierboven al. */ @media screen and (max-width: 600px) { .admin-bar #wpadminbar { top: -46px; } .admin-bar .wp-site-blocks > header { top: 0; } } .nav { /* Het uitklappende menu hangt hieraan vast. */ position: relative; font-size: 13px; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, .06); background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .nav-inner { padding-block: 16px; } .nav-inner > * { margin-block: 0; } /* Het merk is één link: mark en beide woorden. */ .brand { flex: none; display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; } .brand:focus-visible { outline: 2px solid var(--o1); outline-offset: 3px; border-radius: 4px; } .brand-mark { width: 34px; height: 34px; display: block; flex: none; } .brand-text { display: flex; flex-direction: column; font-family: var(--font); line-height: 1.06; } .brand-1, .brand-2 { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .brand-1 { font-weight: 500; color: var(--muted); } .brand-2 { font-weight: 700; color: var(--fg); } .brand:hover .brand-2 { color: var(--o1); } .nav .wp-block-navigation { font-size: 13px; } .nav .wp-block-navigation a { color: inherit; text-decoration: none; } .nav .wp-block-navigation a:hover { color: var(--fg); } .nav .wp-block-navigation a:focus-visible { outline: 2px solid var(--o1); outline-offset: 3px; } /* * Alles ná het menu staat rechts. * * De vrije ruimte zit op het menu zelf, niet op de badge of de accountknop. * Dat scheelde eerder een bug: de auto-marge stond op de badge, en op smalle * schermen nam de accountknop die taak over — twee breekpunten die gelijk * moesten lopen. Zodra er eentje verschoof, zat er een reeks breedtes tussen * waar niemand de ruimte opeiste en de accountknop halverwege bleef hangen. * Op het menu werkt het bij elke breedte, ook als de badge er niet is. */ .nav-inner > .wp-block-navigation { margin-right: auto; } /* De badge en de accountknop staan daardoor uiterst rechts. */ .nav .dl { color: var(--o1); border: 1px solid rgba(61, 155, 212, .4); padding: 6px 14px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; } /* ============================================================ HET MENU OP EEN SMAL SCHERM ============================================================ De balk klapt zelf uit. Het menu zakt naar een tweede regel bínnen de balk, die daardoor hoger wordt en de pagina eronder vooruitduwt. Er hangt niets los boven de pagina, dus er is ook niets dat verkeerd kan komen te staan. Daarom staat het navigatieblok in parts/header.html op overlayMenu:"never". De schermvullende laag van WordPress is uit, en met die laag ook het script dat hem opent — de kern levert het alleen mee als het overlay-menu aanstaat. De knop die het hier wel doet is up/nav-toggle, aangestuurd door assets/js/ui.js. ============================================================ */ /* * Een vangnet, geen dagelijkse kost. * * Met overlayMenu:"never" schrijft WordPress de menulijst rechtstreeks in * de