/* ============================================================ * hogerheide.nl — thema "Blueprint" (dag/nacht) * Gescoopt op body.site-theme-hogerheide zodat het geen ander thema raakt. * Fonts hergebruikt uit _local_portal (IBM Plex Mono + Instrument Sans), * self-hosted en CSP-veilig; geen eigen @font-face nodig. * * Dag/nacht: het head-script zet data-theme="dag|nacht" op . De * kleuren komen 1-op-1 uit de goedgekeurde mockup en gelden voor de HELE * pagina (header, rails, content, banners én footer) via CSS-variabelen. * * Opbouw: * 1. Variabelen per stand (:root[data-theme=...]) * 2. Basis (body, typografie, links) * 3. Gedeelde header restyle (.site-header-v10) + dag/nacht-schakelaar * 4. Jumbotron (fundament; overige blokken komen in fase 2) * 5. Gedeelde footer — kleur-tokens meekoppelen (blueprint-styling: fase 3) * ============================================================ */ /* ── 0. Kleur-tokens registreren (robuuste dag/nacht-overgang) ── * De kleur-variabelen als echte registreren maakt de 0.25s-transitions * betrouwbaar: bij een data-theme-wissel worden var-gedreven background-/color- * properties correct opnieuw berekend én vloeiend geanimeerd (voorkomt het * Chromium-quirk waarbij een getransitionde property op de oude tint blijft * hangen). Verse loads zetten de vars sowieso expliciet, dus geen regressie op * browsers zonder @property-ondersteuning. --hh-schaduw blijft ongeregistreerd * (het is een box-shadow, geen kleur). */ @property --hh-bg { syntax: ""; inherits: true; initial-value: #0E2438; } @property --hh-band { syntax: ""; inherits: true; initial-value: #0B1E30; } @property --hh-grid { syntax: ""; inherits: true; initial-value: rgba(31,69,104,.35); } @property --hh-paneel { syntax: ""; inherits: true; initial-value: #132E47; } @property --hh-paneel2 { syntax: ""; inherits: true; initial-value: #0F273D; } @property --hh-lijn { syntax: ""; inherits: true; initial-value: #1F4568; } @property --hh-lijn-l { syntax: ""; inherits: true; initial-value: #2C577E; } @property --hh-tekst { syntax: ""; inherits: true; initial-value: #EAF2F9; } @property --hh-dim { syntax: ""; inherits: true; initial-value: #8FA9C0; } @property --hh-amber { syntax: ""; inherits: true; initial-value: #F0A82E; } @property --hh-cyaan { syntax: ""; inherits: true; initial-value: #57B8E8; } @property --hh-groen { syntax: ""; inherits: true; initial-value: #5FD08A; } @property --hh-foot-bg { syntax: ""; inherits: true; initial-value: #0A1B2B; } /* ── 1. Thema-standen ─────────────────────────────────────── */ :root[data-theme="nacht"] { --hh-bg:#0E2438; --hh-band:#0B1E30; --hh-grid:rgba(31,69,104,.35); --hh-paneel:#132E47; --hh-paneel2:#0F273D; --hh-lijn:#1F4568; --hh-lijn-l:#2C577E; --hh-tekst:#EAF2F9; --hh-dim:#8FA9C0; --hh-amber:#F0A82E; --hh-cyaan:#57B8E8; --hh-groen:#5FD08A; --hh-foot-bg:#0A1B2B; --hh-schaduw:0 10px 30px rgba(0,0,0,.35); } :root[data-theme="dag"] { --hh-bg:#F2F6FA; --hh-band:#E7EEF6; --hh-grid:rgba(44,87,126,.14); --hh-paneel:#FFFFFF; --hh-paneel2:#EDF3F9; --hh-lijn:#D3E0EC; --hh-lijn-l:#B3C8DB; --hh-tekst:#152A3D; --hh-dim:#5B7288; --hh-amber:#D9920F; --hh-cyaan:#1D7DB5; --hh-groen:#1E9955; --hh-foot-bg:#12283C; --hh-schaduw:0 8px 24px rgba(21,42,61,.10); } /* Terugval vóór het head-script gedraaid heeft (of bij uitgeschakeld JS): toon de nachtstand, zodat er nooit een ongestylede flits verschijnt. */ :root:not([data-theme]) body.site-theme-hogerheide { --hh-bg:#0E2438; --hh-band:#0B1E30; --hh-grid:rgba(31,69,104,.35); --hh-paneel:#132E47; --hh-paneel2:#0F273D; --hh-lijn:#1F4568; --hh-lijn-l:#2C577E; --hh-tekst:#EAF2F9; --hh-dim:#8FA9C0; --hh-amber:#F0A82E; --hh-cyaan:#57B8E8; --hh-groen:#5FD08A; --hh-foot-bg:#0A1B2B; --hh-schaduw:0 10px 30px rgba(0,0,0,.35); } /* ── 2. Basis ─────────────────────────────────────────────── */ /* De dubbele klasse (body heeft altijd site-body én site-theme-hogerheide) wint bewust van de gedeelde `body.site-body{background:var(--site-bg)}` uit het default-thema, zodat het blueprint-raster de hele achtergrond vult. */ body.site-body.site-theme-hogerheide { color:var(--hh-tekst); line-height:1.65; font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background: linear-gradient(var(--hh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hh-grid) 1px, transparent 1px), var(--hh-bg); background-size:36px 36px; background-attachment:fixed; transition:background-color .25s, color .25s; } body.site-theme-hogerheide [hidden] { display:none !important; } body.site-theme-hogerheide .hh-mono { font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } body.site-theme-hogerheide a { color:var(--hh-cyaan); } body.site-theme-hogerheide h1, body.site-theme-hogerheide h2, body.site-theme-hogerheide h3 { color:var(--hh-tekst); font-weight:700; line-height:1.2; } body.site-theme-hogerheide :focus-visible { outline:2px solid var(--hh-cyaan); outline-offset:2px; border-radius:6px; } /* De site-main-content houdt standaard witruimte; de blueprint vult de volle breedte. */ body.site-theme-hogerheide .site-main-content-v10 { background:transparent; } /* Verticale ademruimte tussen header, content en footer (de gedeelde layout zet de content-padding op 0 voor thema's). Analoog aan .bp-portal in het buurtpreventie-thema. */ body.site-theme-hogerheide .hh-wrap { padding:1.75rem 0 3rem; } /* Het drieluik (rails 25% · midden 50%) is ontworpen op ±1440px, maar de site vult de volle browserbreedte. Daarom stoppen de rails op hun ontwerpbreedte — de kolombreedte die 25% oplevert rond een 1440px-venster (±350px, plus kleine marge zodat 1440 zelf onaangeroerd blijft) — en vangt het midden al het meerdere op via flex-grow. Zolang 25% onder de cap blijft is er niets te groeien en is dit pixel-identiek aan de kale Bootstrap-verdeling; daarboven rekt uitsluitend het middendeel mee. */ @media (min-width:992px) { body.site-theme-hogerheide .hh-wrap .row > aside { max-width:354px; } body.site-theme-hogerheide .hh-wrap .row > .hh-midden { flex-grow:1; } } /* ── 3. Gedeelde header → blueprint-band ──────────────────── */ body.site-theme-hogerheide .site-header-v10 { background:var(--hh-band); border-bottom:1px solid var(--hh-lijn); transition:background-color .25s, border-color .25s; } body.site-theme-hogerheide .site-header-v10 .site-brand-title { color:var(--hh-tekst); font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; } body.site-theme-hogerheide .site-header-v10 .site-brand-copy-v1024 small { color:var(--hh-dim); } /* H-logoblokje met blueprint-hoekjes (vervangt de ronde merkletter). */ body.site-theme-hogerheide .site-header-v10 .site-brand-mark-v1024 { position:relative; background:var(--hh-paneel2); color:var(--hh-amber); border:1.5px solid var(--hh-lijn-l); border-radius:6px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; overflow:visible; } body.site-theme-hogerheide .site-header-v10 .site-brand-mark-v1024::before, body.site-theme-hogerheide .site-header-v10 .site-brand-mark-v1024::after { content:""; position:absolute; width:7px; height:7px; border:1.5px solid var(--hh-amber); } body.site-theme-hogerheide .site-header-v10 .site-brand-mark-v1024::before { top:-4px; left:-4px; border-right:0; border-bottom:0; } body.site-theme-hogerheide .site-header-v10 .site-brand-mark-v1024::after { bottom:-4px; right:-4px; border-left:0; border-top:0; } body.site-theme-hogerheide .site-header-v10 .nav-link { color:var(--hh-dim); font-weight:500; } body.site-theme-hogerheide .site-header-v10 .nav-link:hover, body.site-theme-hogerheide .site-header-v10 .nav-link:focus { color:var(--hh-cyaan); } body.site-theme-hogerheide .site-header-v10 .site-login-v10 { background:var(--hh-cyaan); color:var(--hh-bg); font-family:"IBM Plex Mono",ui-monospace,monospace; border:0; } body.site-theme-hogerheide .site-header-v10 .site-login-v10:hover { filter:brightness(1.1); color:var(--hh-bg); } body.site-theme-hogerheide .site-header-v10 .site-register-v10 { color:var(--hh-dim); } body.site-theme-hogerheide .site-header-v10 .site-register-v10:hover { color:var(--hh-tekst); } body.site-theme-hogerheide .site-header-v10 .portal-search-v20 { background:var(--hh-paneel2); border-color:var(--hh-lijn-l); } body.site-theme-hogerheide .site-header-v10 .portal-search-v20 input { color:var(--hh-tekst); } /* ── 3b. Dag/nacht-schakelaar (button-group, a11y) ────────── */ body.site-theme-hogerheide .hh-switch { display:inline-flex; border:1px solid var(--hh-lijn-l); border-radius:8px; overflow:hidden; align-self:center; } body.site-theme-hogerheide .hh-switch button { -webkit-appearance:none; appearance:none; background:transparent; border:0; margin:0; color:var(--hh-dim); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.76rem; padding:7px 12px; cursor:pointer; line-height:1.2; transition:background-color .15s, color .15s; } body.site-theme-hogerheide .hh-switch button + button { border-left:1px solid var(--hh-lijn-l); } body.site-theme-hogerheide .hh-switch button:hover { color:var(--hh-tekst); } body.site-theme-hogerheide .hh-switch button[aria-pressed="true"] { background:var(--hh-amber); color:var(--hh-bg); font-weight:600; } body.site-theme-hogerheide .hh-switch button:focus-visible { outline:2px solid var(--hh-cyaan); outline-offset:-2px; } /* ── 4. Jumbotron (fundament) ─────────────────────────────── */ body.site-theme-hogerheide .hh-jumbo { background:var(--hh-band); border:1px solid var(--hh-lijn); border-radius:14px; padding:44px; box-shadow:var(--hh-schaduw); position:relative; overflow:hidden; transition:background-color .25s, border-color .25s; } body.site-theme-hogerheide .hh-eyebrow { font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--hh-cyaan); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; } body.site-theme-hogerheide .hh-jumbo h1 { font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.15; margin-bottom:14px; max-width:640px; } body.site-theme-hogerheide .hh-jumbo h1 .hh-accent { color:var(--hh-amber); } body.site-theme-hogerheide .hh-intro { color:var(--hh-dim); max-width:560px; font-size:1rem; } body.site-theme-hogerheide .hh-cta { margin-top:24px; display:flex; gap:14px; flex-wrap:wrap; } body.site-theme-hogerheide .hh-cta a { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.85rem; text-decoration:none; padding:12px 24px; border-radius:6px; font-weight:600; } body.site-theme-hogerheide .hh-cta .hh-primair { background:var(--hh-amber); color:var(--hh-bg); } body.site-theme-hogerheide .hh-cta .hh-primair:hover { filter:brightness(1.08); } body.site-theme-hogerheide .hh-cta .hh-secundair { border:1px solid var(--hh-lijn-l); color:var(--hh-tekst); } body.site-theme-hogerheide .hh-cta .hh-secundair:hover { border-color:var(--hh-cyaan); color:var(--hh-cyaan); } /* ── 4b. Jumbotron met busfoto (spec-blok) ───────────────── */ body.site-theme-hogerheide .hh-jumbo.has-spec { padding-bottom:0; } body.site-theme-hogerheide .hh-jumbo .hh-jumbo-tekst { min-width:0; } /* Busfoto als spec-tekening (ontwerp: design/H4-werkplaats.html): label l1 top-links, l2 bottom-rechts met kleine connectorstreepjes, en een gestreepte "maatlijn"-caption onder de foto. De foto is vol-rounded en krijgt ruimte eronder zodat l2 + maatlijn niet onder de stats-strip verdwijnen. */ body.site-theme-hogerheide .hh-spec { position:relative; margin:34px -10px 52px auto; max-width:560px; } body.site-theme-hogerheide .hh-spec img { width:100%; height:auto; border-radius:10px; border:1px solid var(--hh-lijn-l); display:block; } body.site-theme-hogerheide .hh-spec .hh-spec-label { position:absolute; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; color:var(--hh-cyaan); background:var(--hh-bg); border:1px solid var(--hh-lijn-l); padding:3px 8px; border-radius:4px; white-space:nowrap; } body.site-theme-hogerheide .hh-spec .hh-spec-label::before { content:""; position:absolute; width:26px; height:1px; background:var(--hh-cyaan); } body.site-theme-hogerheide .hh-spec .l1 { top:-12px; left:8%; } body.site-theme-hogerheide .hh-spec .l1::before { top:100%; left:12px; transform:rotate(90deg); transform-origin:left; } body.site-theme-hogerheide .hh-spec .l2 { bottom:-12px; right:6%; } body.site-theme-hogerheide .hh-spec .l2::before { bottom:100%; right:12px; transform:rotate(90deg); transform-origin:right; } body.site-theme-hogerheide .hh-maatlijn { position:absolute; left:0; right:0; bottom:-34px; border-bottom:1px dashed var(--hh-lijn-l); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; color:var(--hh-dim); text-align:center; padding-bottom:4px; } @media (min-width:1000px) { body.site-theme-hogerheide .hh-jumbo.has-spec { display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:end; } body.site-theme-hogerheide .hh-jumbo.has-spec .hh-jumbo-tekst { padding-bottom:52px; } body.site-theme-hogerheide .hh-spec { margin:0 0 52px; } } /* ── 6. Hoofdgrid + rails ─────────────────────────────────── */ :root { --hh-kophoogte:61px; } body.site-theme-hogerheide .hh-midden { min-width:0; display:flex; flex-direction:column; gap:24px; } body.site-theme-hogerheide .hh-rail-sticky { position:sticky; top:calc(var(--hh-kophoogte) + 20px); max-height:calc(100vh - var(--hh-kophoogte) - 40px); overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; display:flex; flex-direction:column; gap:20px; } body.site-theme-hogerheide .hh-rail-sticky::-webkit-scrollbar { display:none; } body.site-theme-hogerheide .hh-zijblok { background:var(--hh-paneel); border:1px solid var(--hh-lijn); border-radius:10px; padding:22px; box-shadow:var(--hh-schaduw); transition:background-color .25s, border-color .25s; } body.site-theme-hogerheide .hh-zijblok h2 { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hh-cyaan); margin-bottom:16px; } body.site-theme-hogerheide .hh-zijblok h2::before { content:"// "; } /* Weerwidget in de rail: de zware mockup-schaduw van de kaart oogt op het lichte blueprint als een grijze waas — volg hier de eigen kaartschaduw van het thema (--hh-schaduw), die ook netjes meeschakelt tussen dag en nacht. */ body.site-theme-hogerheide .pw-widget { box-shadow:var(--hh-schaduw); } /* Snel naar-menu */ body.site-theme-hogerheide .hh-zijmenu { list-style:none; margin:0; padding:0; } body.site-theme-hogerheide .hh-zijmenu li + li { margin-top:2px; } body.site-theme-hogerheide .hh-zijmenu a { display:block; color:var(--hh-tekst); text-decoration:none; font-size:.92rem; padding:8px 10px; border-radius:6px; border-left:2px solid transparent; } body.site-theme-hogerheide .hh-zijmenu a:hover, body.site-theme-hogerheide .hh-zijmenu a:focus { background:var(--hh-paneel2); border-left-color:var(--hh-amber); color:var(--hh-amber); } /* Account-blok (mini-login) */ body.site-theme-hogerheide .hh-account p { font-size:.8rem; color:var(--hh-dim); margin-bottom:10px; } body.site-theme-hogerheide .hh-account a { display:block; text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.8rem; text-decoration:none; border:1px solid var(--hh-lijn-l); border-radius:6px; padding:8px; color:var(--hh-tekst); } body.site-theme-hogerheide .hh-account a:hover, body.site-theme-hogerheide .hh-account a:focus { border-color:var(--hh-cyaan); color:var(--hh-cyaan); } /* Systeemstatus-widget */ body.site-theme-hogerheide .hh-status .hh-status-regel { display:flex; justify-content:space-between; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.78rem; color:var(--hh-dim); padding:6px 0; border-bottom:1px dashed var(--hh-lijn); } body.site-theme-hogerheide .hh-status .hh-status-regel:last-child { border-bottom:0; } body.site-theme-hogerheide .hh-status .is-ok { color:var(--hh-groen); } body.site-theme-hogerheide .hh-status .is-warm { color:var(--hh-amber); } body.site-theme-hogerheide .hh-status .is-dim { color:var(--hh-dim); } /* Ontdek-lijst */ body.site-theme-hogerheide .hh-ontdek a { display:block; text-decoration:none; background:var(--hh-paneel2); border:1px solid var(--hh-lijn); border-radius:8px; padding:13px 14px; margin-bottom:10px; transition:border-color .15s; } body.site-theme-hogerheide .hh-ontdek a:last-child { margin-bottom:0; } body.site-theme-hogerheide .hh-ontdek a:hover, body.site-theme-hogerheide .hh-ontdek a:focus { border-color:var(--hh-cyaan); } body.site-theme-hogerheide .hh-ontdek a b { display:block; color:var(--hh-tekst); font-size:.92rem; } body.site-theme-hogerheide .hh-ontdek a span { color:var(--hh-dim); font-size:.78rem; font-family:"IBM Plex Mono",ui-monospace,monospace; } /* Weetje-blok */ body.site-theme-hogerheide .hh-weetje { border:1px dashed var(--hh-amber); border-radius:8px; padding:14px; } body.site-theme-hogerheide .hh-weetje .hh-weetje-kop { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem; color:var(--hh-amber); text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; } body.site-theme-hogerheide .hh-weetje p { font-size:.84rem; color:var(--hh-dim); margin:0; } body.site-theme-hogerheide .hh-weetje p b { color:var(--hh-tekst); } /* ── 7. Stats-strip ───────────────────────────────────────── */ body.site-theme-hogerheide .hh-stats { background:var(--hh-paneel); border:1px solid var(--hh-lijn-l); border-radius:12px; box-shadow:var(--hh-schaduw); display:grid; grid-template-columns:repeat(4,1fr); transition:background-color .25s, border-color .25s; } body.site-theme-hogerheide .hh-stat { padding:16px 20px; text-align:center; border-right:1px solid var(--hh-lijn); } body.site-theme-hogerheide .hh-stat:last-child { border-right:0; } body.site-theme-hogerheide .hh-stat b { display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--hh-amber); font-size:1.2rem; } body.site-theme-hogerheide .hh-stat span { font-size:.76rem; color:var(--hh-dim); font-family:"IBM Plex Mono",ui-monospace,monospace; } /* ── 8. Terminal ──────────────────────────────────────────── */ body.site-theme-hogerheide .hh-terminal { background:var(--hh-paneel); border:1px solid var(--hh-lijn); border-radius:10px; overflow:hidden; box-shadow:var(--hh-schaduw); transition:background-color .25s, border-color .25s; } body.site-theme-hogerheide .hh-terminal .hh-terminal-balk { background:var(--hh-paneel2); border-bottom:1px solid var(--hh-lijn); padding:9px 16px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; color:var(--hh-dim); } body.site-theme-hogerheide .hh-terminal .hh-terminal-body { padding:24px 26px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.88rem; line-height:1.95; } body.site-theme-hogerheide .hh-terminal .hh-t-prompt { color:var(--hh-groen); } body.site-theme-hogerheide .hh-terminal .hh-t-uitvoer { color:var(--hh-dim); } body.site-theme-hogerheide .hh-terminal .hh-t-highlight { color:var(--hh-amber); } body.site-theme-hogerheide .hh-terminal .hh-accent { color:var(--hh-amber); } /* ── 9. Module-kaarten ────────────────────────────────────── */ body.site-theme-hogerheide .hh-kaartrij { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; } body.site-theme-hogerheide .hh-kaart { background:var(--hh-paneel); border:1px solid var(--hh-lijn); border-radius:10px; padding:22px; box-shadow:var(--hh-schaduw); transition:border-color .15s, background-color .25s; } body.site-theme-hogerheide .hh-kaart:hover { border-color:var(--hh-cyaan); } body.site-theme-hogerheide .hh-kaart .hh-tag { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; color:var(--hh-cyaan); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:8px; } body.site-theme-hogerheide .hh-kaart h3 { font-size:1.02rem; margin-bottom:5px; } body.site-theme-hogerheide .hh-kaart p { font-size:.86rem; color:var(--hh-dim); margin:0; } /* ── 10. CMS-banner ───────────────────────────────────────── */ body.site-theme-hogerheide .hh-cmsbanner { border:1px solid var(--hh-amber); border-radius:12px; padding:30px; background:linear-gradient(135deg, rgba(240,168,46,.10), transparent 60%); display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; } body.site-theme-hogerheide .hh-cmsbanner h2 { font-size:1.35rem; margin-bottom:4px; } body.site-theme-hogerheide .hh-cmsbanner h2 .hh-accent { color:var(--hh-amber); font-family:"IBM Plex Mono",ui-monospace,monospace; } body.site-theme-hogerheide .hh-cmsbanner p { color:var(--hh-dim); font-size:.92rem; max-width:520px; margin:0; } body.site-theme-hogerheide .hh-cmsbanner a { font-family:"IBM Plex Mono",ui-monospace,monospace; background:var(--hh-amber); color:var(--hh-bg); font-weight:600; text-decoration:none; padding:12px 24px; border-radius:6px; font-size:.85rem; white-space:nowrap; } body.site-theme-hogerheide .hh-cmsbanner a:hover, body.site-theme-hogerheide .hh-cmsbanner a:focus { filter:brightness(1.08); } /* ── 11. Responsive ───────────────────────────────────────── */ @media (max-width:900px) { body.site-theme-hogerheide .hh-stats { grid-template-columns:1fr 1fr; } body.site-theme-hogerheide .hh-stat:nth-child(2) { border-right:0; } body.site-theme-hogerheide .hh-stat:nth-child(1), body.site-theme-hogerheide .hh-stat:nth-child(2) { border-bottom:1px solid var(--hh-lijn); } } @media (max-width:600px) { body.site-theme-hogerheide .hh-jumbo { padding:32px 26px 0; } } /* ── 5. Footer — blueprint-styling, dag/nacht ───────────────── * De gedeelde footer (partials/footer.php + shared/css/footer.css) leest vaste * inline --footer-*-kleuren. Voor de blueprint-look + dag/nacht overschrijven we * hier de échte properties met de --hh-*-variabelen (die per data-theme schakelen). * De footer blijft in beide standen donker (mockup); alleen de achtergrondtint * verschuift en de accenten (koppen, hoekjes, bovenrand) zijn amber. Content * (teksten, links, social) blijft via de bestaande footer-editor. */ /* Het default-thema forceert footer-achtergrond/kleur/bovenrand/h2 met !important; daarom overschrijven we die ook met !important (onze specificiteit is hoger). */ body.site-theme-hogerheide footer.site-footer-v10 { background:var(--hh-foot-bg) !important; border-top:2px solid var(--hh-amber) !important; box-shadow:none; transition:background-color .25s, border-color .25s; } /* Grid-scheidingslijnen mee in de blueprint-tint */ body.site-theme-hogerheide footer .site-footer-columns-v20 { border-bottom-color:var(--hh-lijn); } /* Tekst blijft licht (donkere footer in beide standen) */ body.site-theme-hogerheide footer .site-footer-brand-row-v20 h2 { color:#EAF2F9 !important; } body.site-theme-hogerheide footer p { color:#9FB4C8 !important; } body.site-theme-hogerheide footer .site-footer-bottom-v14516 { color:#9FB4C8; } /* De footer-linkkleur + hover komen uit de footer-editor (--footer-link/-hover, in de preset op de blueprint-tinten #D6E3EF / #F0A82E). Het default-thema forceert die met !important; we schrijven ze hier bewust NIET over, zodat links editor-bestuurd blijven. */ /* "Volg ons"/"Informatie"-koppen: amber, mono, uppercase (blueprint) */ body.site-theme-hogerheide footer .site-footer-connect-label-v20 { color:var(--hh-amber); font-family:"IBM Plex Mono",ui-monospace,monospace; letter-spacing:.14em; opacity:1; } /* H-logoblokje met blueprint-hoekjes (zoals in de header) */ body.site-theme-hogerheide footer .site-footer-logo-v14516 { background:var(--hh-paneel2); border:1.5px solid var(--hh-lijn-l); border-radius:6px; overflow:visible; position:relative; } body.site-theme-hogerheide footer .site-footer-logo-v14516 strong { color:var(--hh-amber); font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; font-size:1.4rem; } body.site-theme-hogerheide footer .site-footer-logo-v14516::before, body.site-theme-hogerheide footer .site-footer-logo-v14516::after { content:""; position:absolute; width:9px; height:9px; border:1.5px solid var(--hh-amber); } body.site-theme-hogerheide footer .site-footer-logo-v14516::before { top:-4px; left:-4px; border-right:0; border-bottom:0; } body.site-theme-hogerheide footer .site-footer-logo-v14516::after { bottom:-4px; right:-4px; border-left:0; border-top:0; } /* Social-knoppen in de blueprint-lijn */ body.site-theme-hogerheide footer .site-footer-social-v20 a { border-color:var(--hh-lijn-l); background:rgba(255,255,255,.06); }