/* ===================================================================== Lodewijk.FRL — shared.css Gedeelde basis voor alle vier thema's. Definieert CSS-variabelen, de shell-indeling (topbalk, linker sidebar, hoofdpaneel, rechter sidebar, footer) en herbruikbare componenten. Kleuren en maten worden per thema overschreven in theme-*.css. ===================================================================== */ /* --------------------------------------------------------------------- 1. Design tokens — centrale variabelen (CMS-instelbaar) --------------------------------------------------------------------- */ :root { /* Typografie */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --fs-root: 15px; /* Afstanden */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Shell-maten */ --topbar-h: 46px; --sidebar-w: 248px; --rightbar-w: 240px; --panel-radius: 4px; --border-w: 1px; /* Statuskleuren (consistent over alle thema's) */ --st-ok: #1f9d55; --st-ok-bg: rgba(31,157,85,.12); --st-warn: #d98211; --st-warn-bg: rgba(217,130,17,.14); --st-alert: #cf3a2f; --st-alert-bg: rgba(207,58,47,.12); --st-info: #2563c9; --st-info-bg: rgba(37,99,201,.12); --st-idle: #7a8391; --st-idle-bg: rgba(122,131,145,.14); /* Semantische kleuren — lichte basis (thema's overschrijven dit) */ --bg: #eef1f5; --bg-2: #e3e8ef; --panel: #ffffff; --panel-2: #f6f8fb; --ink: #1a2230; --ink-2: #47546a; --ink-3: #6b7688; --border: #d3dae4; --border-strong: #b7c1cf; --accent: #1f4e8c; --accent-2: #2f6fd0; --accent-ink: #ffffff; --shadow-1: 0 1px 2px rgba(20,30,48,.06); --shadow-2: 0 4px 14px rgba(20,30,48,.10); --focus-ring: 0 0 0 3px rgba(47,111,208,.45); } /* --------------------------------------------------------------------- 2. Reset & basis --------------------------------------------------------------------- */ * { box-sizing: border-box; } html { font-size: var(--fs-root); scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--ink); line-height: 1.5; /* Integratie-fix: 'hidden' maakt de body een scrollcontainer waardoor de sticky topbar nergens tegen plakt; 'clip' knipt horizontaal net zo hard maar laat het scrollen (en dus sticky) aan de viewport. */ overflow-x: clip; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.18; margin: 0; letter-spacing: -.01em; } p { margin: 0; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; } img { max-width: 100%; display: block; } code, .mono { font-family: var(--font-mono); } /* Toegankelijke focus */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 4px 0; font-weight: 600; } .skip-link:focus { left: 0; } /* --------------------------------------------------------------------- 3. Topbalk --------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); background: var(--panel); border-bottom: var(--border-w) solid var(--border); font-size: 13px; } .topbar__group { display: flex; align-items: center; gap: var(--sp-3); } .topbar__group--right { margin-left: auto; } .topbar__item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; } .topbar__item i { font-size: 15px; } .topbar a.topbar__item:hover { color: var(--accent); text-decoration: none; } .topbar__sep { width: 1px; height: 22px; background: var(--border); } .system-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--st-ok-bg); color: var(--st-ok); font-weight: 600; font-size: 12px; } .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--st-ok); position: relative; flex: none; } .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--st-ok); animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } } /* icon knop */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink-2); border-radius: 4px; cursor: pointer; font-size: 16px; transition: background .15s, color .15s, border-color .15s; } .icon-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } /* Account/inloggen in de topbar: ingelogd = fotootje + naam (naar /admin), uitgelogd = het icon-btn-knopje (naar /admin/login). Zelfde patroon als de andere portalthema's. */ .topbar__account { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--ink-2); text-decoration: none; font-size: 12px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; } .topbar__account:hover { border-color: var(--accent); color: var(--accent); } .topbar__account-avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--accent); color: #fff; font-size: 15px; } .topbar__account-avatar img { width: 100%; height: 100%; object-fit: cover; } .topbar__account-name { white-space: nowrap; } /* Theme switcher segmented control */ .theme-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .theme-switch button { border: 0; background: var(--panel-2); color: var(--ink-2); padding: 0 10px; height: 32px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; border-right: 1px solid var(--border); } .theme-switch button:last-child { border-right: 0; } .theme-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; } .theme-switch button:hover:not([aria-pressed="true"]) { background: var(--bg-2); } .theme-switch .label { font-size: 12px; } /* Tekstgrootte-schakelaar (A A A) */ .fontsize-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; } .fontsize-switch button { border: 0; background: var(--panel-2); color: var(--ink-2); padding: 0 10px; height: 32px; cursor: pointer; border-right: 1px solid var(--border); display: inline-flex; align-items: center; line-height: 1; font-weight: 700; } .fontsize-switch button:last-child { border-right: 0; } .fontsize-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; } .fontsize-switch button:hover:not([aria-pressed="true"]) { background: var(--bg-2); } /* Schaal de inhoud (px-teksten schalen mee via zoom) */ [data-fontsize="sm"] .shell, [data-fontsize="sm"] .site-footer-v10 { zoom: .93; } [data-fontsize="lg"] .shell, [data-fontsize="lg"] .site-footer-v10 { zoom: 1.14; } /* --------------------------------------------------------------------- 4. Shell-indeling --------------------------------------------------------------------- */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rightbar-w); align-items: stretch; } .shell--no-aside { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } /* Footer-positie (Content → Footer, footer_position_mode). Lodewijk laadt themes/default/theme.css niet, dus dezelfde mechaniek als de portalthema's staat hier expliciet. De body-class (footer-mode-bottom|sticky|normal) wordt in layout.php gezet. - bottom (default): footer onderaan het venster, ook bij korte pagina's. De shell groeit mee, zodat de sidebar-achtergrond doorloopt tot aan de footer. - sticky: vaste balk onderaan; de inhoud krijgt onderruimte zodat er niets achter valt. Op smalle schermen valt hij terug op normaal (een vaste balk kost daar te veel hoogte). - normal: geen extra CSS — de footer volgt gewoon de inhoud. */ body.footer-mode-bottom { min-height: 100vh; display: flex; flex-direction: column; } body.footer-mode-bottom .shell { flex: 1 0 auto; } body.footer-mode-bottom .site-footer-v10 { margin-top: auto; } body.footer-mode-sticky .site-footer-v10 { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; box-shadow: 0 -12px 30px rgba(20, 32, 51, .10); } body.footer-mode-sticky .main { padding-bottom: 200px; } @media (max-width: 991.98px) { body.footer-mode-sticky .site-footer-v10 { position: static; box-shadow: none; } body.footer-mode-sticky .main { padding-bottom: 0; } } /* Menu-achtergrond doortrekken tot de footer: de sidebar is position:sticky en rekt dus niet mee. Een verloop op de shell kleurt de linkerkolom (paneelkleur + scheidingslijn) over de volle hoogte, ook onder de sticky sidebar. Alleen op desktop — onder 992px is de sidebar verborgen. */ @media (min-width: 992.02px) { body.footer-mode-bottom .shell { background: linear-gradient(to right, var(--panel) 0, var(--panel) calc(var(--sidebar-w) - var(--border-w)), var(--border) calc(var(--sidebar-w) - var(--border-w)), var(--border) var(--sidebar-w), transparent var(--sidebar-w)); } } /* Reviews-band (homepage) */ .reviews-band { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; } .reviews-band .rating-box { text-align: center; padding-right: var(--sp-5); border-right: 1px solid var(--border); } .reviews-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); transition: opacity .4s ease; } .reviews-quotes.fade { opacity: 0; } .reviews-quotes blockquote { margin: 0; font-size: 13.5px; color: var(--ink-2); border-left: 3px solid var(--accent-2); padding-left: 12px; } .reviews-quotes blockquote .who { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } /* Hulp-strip */ .help-strip { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; } .help-strip__title { display: flex; align-items: center; gap: 10px; font-weight: 600; } .help-strip__title i { font-size: 20px; color: var(--accent-2); } .help-strip__actions { display: flex; flex-wrap: wrap; gap: 8px; } .help-strip__note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); } @media (max-width: 900px) { .reviews-band { grid-template-columns: 1fr; } .reviews-band .rating-box { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 var(--sp-4); } .reviews-quotes { grid-template-columns: 1fr; } } .sidebar-left { background: var(--panel); border-right: var(--border-w) solid var(--border); display: flex; flex-direction: column; } .sidebar-top { position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .sidebar-top::-webkit-scrollbar { width: 0; height: 0; display: none; } .main { min-width: 0; padding: var(--sp-5); } .sidebar-right { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; background: var(--panel); border-left: var(--border-w) solid var(--border); padding: var(--sp-4); } /* Merkkop in sidebar */ .brand { display: flex; align-items: center; gap: 10px; padding: var(--sp-4); border-bottom: 1px solid var(--border); } .brand__mark { width: 34px; height: 34px; flex: none; border-radius: 5px; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-family: var(--font-mono); letter-spacing: -1px; } .brand__name { font-weight: 700; font-size: 16px; letter-spacing: -.02em; } .brand__name small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; } /* Navigatie */ .nav-section { padding: var(--sp-3) var(--sp-3) 0; } .nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 600; padding: 0 var(--sp-2) var(--sp-2); } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .nav-list a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; color: var(--ink-2); font-size: 14px; font-weight: 500; border-left: 3px solid transparent; transition: background .12s, color .12s; } .nav-list a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; } .nav-list a i { font-size: 17px; width: 20px; text-align: center; color: var(--ink-3); flex: none; } .nav-list a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-left-color: var(--accent-2); font-weight: 600; } .nav-list a[aria-current="page"] i { color: var(--accent-ink); } .nav-list a .nav-badge { margin-left: auto; font-size: 10px; font-family: var(--font-mono); background: var(--st-ok-bg); color: var(--st-ok); padding: 1px 6px; border-radius: 3px; } /* Inklapbare navigatiegroep */ .nav-group { border: 0; } .nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; color: var(--ink-2); font-size: 14px; font-weight: 500; border-left: 3px solid transparent; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary > i:first-child { font-size: 17px; width: 20px; text-align: center; color: var(--ink-3); flex: none; } .nav-group > summary:hover { background: var(--panel-2); color: var(--ink); } .nav-group > summary .chev { margin-left: auto; font-size: 12px; color: var(--ink-3); transition: transform .2s ease; } .nav-group[open] > summary .chev { transform: rotate(180deg); } .nav-group[open] > summary { color: var(--ink); font-weight: 600; } .nav-group .nav-list { margin: 1px 0 4px; } .nav-group .nav-list a { padding-left: 33px; font-size: 13.5px; } .nav-group[open] > .nav-list { animation: navSlide .42s cubic-bezier(.22,.61,.36,1); } @keyframes navSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* Zachte in- én uitklap waar de browser dit ondersteunt (Chrome 129+, e.d.) */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .nav-group::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.22,.61,.36,1), content-visibility .4s allow-discrete; } .nav-group[open]::details-content { block-size: auto; } .nav-group[open] > .nav-list { animation: none; } } @media (prefers-reduced-motion: reduce) { .nav-group[open] > .nav-list { animation: none; } } /* Sidebar-voet */ .sidebar-foot { margin-top: auto; padding: var(--sp-4); border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: var(--sp-3); } .sidebar-foot .kv { display: flex; justify-content: space-between; gap: 8px; } .sidebar-foot .kv b { font-weight: 600; color: var(--ink); } .sidebar-foot .ver { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } /* --------------------------------------------------------------------- 5. Panelen & kaarten --------------------------------------------------------------------- */ .panel { background: var(--panel); border: var(--border-w) solid var(--border); border-radius: var(--panel-radius); box-shadow: var(--shadow-1); } .panel + .panel { margin-top: var(--sp-5); } .panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--panel-2); } .panel__head h2, .panel__head h3 { font-size: 15px; } .panel__head .panel__meta { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); } .panel__body { padding: var(--sp-4); } .panel__title-ico { color: var(--accent-2); font-size: 18px; } .section-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-4); } .section-title h2 { font-size: 20px; } .section-title .hint { font-size: 12.5px; color: var(--ink-3); } .section-title .rule { flex: 1; height: 1px; background: var(--border); } /* Statuslabel */ .status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 3px; font-family: var(--font-mono); letter-spacing: .01em; } .status i { font-size: 12px; } .status--ok { color: var(--st-ok); background: var(--st-ok-bg); } .status--warn { color: var(--st-warn); background: var(--st-warn-bg); } .status--alert { color: var(--st-alert); background: var(--st-alert-bg); } .status--info { color: var(--st-info); background: var(--st-info-bg); } .status--idle { color: var(--st-idle); background: var(--st-idle-bg); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; } .dot--ok { background: var(--st-ok); } .dot--warn { background: var(--st-warn); } .dot--alert { background: var(--st-alert); } .dot--info { background: var(--st-info); } .dot--idle { background: var(--st-idle); } /* --------------------------------------------------------------------- 6. Hero --------------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; } .hero__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; } .hero__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); display: inline-flex; align-items: center; gap: 8px; } .hero h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; } .hero__sub { font-size: 16px; color: var(--ink-2); max-width: 54ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); } .hero__media { position: relative; min-height: 260px; border-left: 1px solid var(--border); background: var(--panel-2); min-width: 0; overflow: hidden; } .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); } .hero__stats--4 { grid-template-columns: repeat(4, 1fr); } .hero__stats .stat { padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--border); } .hero__stats .stat:last-child { border-right: 0; } .stat__num { font-size: 26px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -.02em; } .stat__label { font-size: 12.5px; color: var(--ink-3); } /* Buttons */ .btn { --bs-btn-border-radius: 4px; font-weight: 600; } .btn-brand { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); } .btn-brand:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; } .btn-ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--ink); } .btn-ghost:hover { background: var(--panel-2); color: var(--ink); border-color: var(--ink-3); } /* --------------------------------------------------------------------- 7. Diensten-tegels --------------------------------------------------------------------- */ .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .service-tile { --tile: var(--accent-2); position: relative; display: flex; flex-direction: column; gap: 8px; padding: var(--sp-5) var(--sp-4) var(--sp-4); background: var(--panel); overflow: hidden; border: 1px solid var(--border); border-radius: var(--panel-radius); color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; } /* getinte hoeklijn bovenaan in de huiskleur van de dienst */ .service-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border-strong); opacity: .9; } .service-tile:hover, .service-tile:focus-visible { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); } .service-tile__ico { position: relative; overflow: hidden; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-size: 29px; margin-bottom: 4px; color: var(--tile); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tile) 20%, var(--panel)), color-mix(in srgb, var(--tile) 7%, var(--panel))); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tile) 55%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--tile) 10%, transparent); transition: transform .18s ease, box-shadow .18s ease; } /* fijne technische rastertextuur achter het icoon (zelfgemaakt) */ .service-tile__ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--tile) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--tile) 22%, transparent) 1px, transparent 1px); background-size: 9px 9px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%); opacity: .5; } .service-tile__ico > i { position: relative; z-index: 3; transition: transform .3s cubic-bezier(.34,1.56,.64,1); } /* Diensttegel met grafisch ontwerp (line-art in huiskleur, geen foto) */ .service-tile__img { height: 120px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; padding: 10px; transition: border-color .15s; } .service-tile__graphic { width: 100%; height: 100%; display: block; color: var(--tile); transform: scale(1.14); transform-origin: center; } .service-tile__graphic .ln { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .service-tile__graphic .tn { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6; stroke-linecap: round; } .service-tile__graphic .fl { fill: currentColor; } .service-tile__graphic .du { fill: currentColor; opacity: .34; } .service-tile__graphic .du2 { fill: currentColor; opacity: .6; } .service-tile__graphic .dw { fill: none; stroke: #fff; stroke-opacity: .85; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .service-tile__graphic .fw { fill: #fff; fill-opacity: .9; } /* Isometrische illustratie (drawn, 3D-look) */ .service-tile__graphic .iso-t { fill: currentColor; } .service-tile__graphic .iso-l { fill: currentColor; opacity: .66; } .service-tile__graphic .iso-r { fill: currentColor; opacity: .42; } .service-tile__graphic .iso-d { fill: none; stroke: #fff; stroke-opacity: .62; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .service-tile:hover .service-tile__img { border-color: var(--border-strong); } /* roterende lichtsweep bij hover (premium, geen afbeelding) */ .service-tile__ico::after { content: ""; position: absolute; inset: -35%; z-index: 2; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 62%, color-mix(in srgb, var(--tile) 42%, transparent) 80%, color-mix(in srgb, #fff 65%, transparent) 88%, transparent 92% 100%); opacity: 0; transition: opacity .3s ease; } .service-tile:hover .service-tile__ico { transform: scale(1.06); box-shadow: inset 0 0 0 2px var(--tile), inset 0 0 0 6px color-mix(in srgb, var(--tile) 14%, transparent), 0 6px 18px color-mix(in srgb, var(--tile) 30%, transparent); } .service-tile:hover .service-tile__ico::after { opacity: .9; animation: icoSweep 2.8s linear infinite; } .service-tile:hover .service-tile__ico > i { transform: translateY(-2px) scale(1.08); } @keyframes icoSweep { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .service-tile:hover .service-tile__ico::after { animation: none; } } .service-tile__ico img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: #fff; } .service-tile h3 { font-size: 18px; color: var(--ink); } .service-tile p { font-size: 15px; color: var(--ink-2); line-height: 1.55; } .service-tile .service-tile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; } .service-tile .go { color: var(--ink-2); font-weight: 600; } /* Stat-band / KPI */ .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .kpi { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); display: flex; flex-direction: column; gap: 4px; } .kpi__num { font-size: 30px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -.02em; } .kpi__label { font-size: 13px; color: var(--ink-2); } .kpi i { color: var(--accent-2); font-size: 18px; } /* Statuslijst */ .status-list { display: flex; flex-direction: column; } .status-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .status-row:last-child { border-bottom: 0; } .status-row .name { display: flex; align-items: center; gap: 8px; } .status-row .name i { color: var(--ink-3); font-size: 15px; } .status-row .status { margin-left: auto; } /* Progress / kleine grafiek helper */ .bar { height: 8px; background: var(--panel-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); } .bar > span { display: block; height: 100%; background: var(--st-ok); } /* --------------------------------------------------------------------- Blueprint-illustraties (technische line-art, kleurt mee per thema) --------------------------------------------------------------------- */ .blueprint { width: 100%; height: 100%; display: block; color: var(--accent-2); background-color: var(--panel-2); background-image: linear-gradient(color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px, 22px 22px; } .blueprint .bp-line { stroke: currentColor; fill: none; stroke-width: 2; opacity: .8; } .blueprint .bp-thin { stroke: currentColor; fill: none; stroke-width: 1.2; opacity: .45; } .blueprint .bp-fill { fill: currentColor; opacity: .8; } .blueprint .bp-soft { fill: color-mix(in srgb, var(--accent-2) 12%, transparent); stroke: none; } .blueprint .bp-logo path { fill: color-mix(in srgb, var(--accent-2) 22%, transparent); stroke: currentColor; stroke-width: 1.2; } .blueprint .bp-label { fill: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; } .blueprint .bp-note { fill: var(--ink-3); font-family: var(--font-mono); font-size: 9px; opacity: .7; } /* stromende leidingen */ .blueprint .bp-flow { stroke: var(--accent-2); fill: none; stroke-width: 3; stroke-dasharray: 5 7; animation: bpFlow 1.5s linear infinite; opacity: .7; } @keyframes bpFlow { to { stroke-dashoffset: -24; } } /* pulserende meetpunten */ .blueprint .bp-hot { fill: var(--st-ok); } .blueprint .bp-hot-ring { fill: none; stroke: var(--st-ok); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: bpPulse 2.4s ease-out infinite; } @keyframes bpPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } } .blueprint .bp-hot-2 { animation-delay: .8s; } .blueprint .bp-hot-3 { animation-delay: 1.6s; } /* rondgaande diensten-tour (hero) */ .blueprint .bp-dot { fill: var(--st-ok); stroke: var(--panel-2); stroke-width: 1.5; opacity: .35; transition: opacity .35s ease; } .blueprint .bp-dot.active { opacity: 1; } .blueprint .bp-tour-glow { fill: var(--st-ok); opacity: .16; transition: cx .5s ease, cy .5s ease; } .blueprint .bp-tour-ring { fill: none; stroke: var(--st-ok); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: cx .5s ease, cy .5s ease; animation: bpTourPulse 2.6s ease-out infinite; } @keyframes bpTourPulse { 0% { transform: scale(.5); opacity: .85; } 75% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } .blueprint .bp-tour-caption { transition: opacity .3s ease; } /* extra scene-animaties */ .blueprint .bp-spin { transform-box: fill-box; transform-origin: center; animation: bpSpin 7s linear infinite; } @keyframes bpSpin { to { transform: rotate(360deg); } } .blueprint .bp-blink { animation: bpBlink 1.8s ease-in-out infinite; } @keyframes bpBlink { 0%,100% { opacity: .9; } 50% { opacity: .2; } } @media (prefers-reduced-motion: reduce) { .blueprint .bp-spin, .blueprint .bp-blink { animation: none; } } /* hero-diavoorstelling */ .hero__media { display: flex; flex-direction: column; } .hero-slides { position: relative; width: 100%; flex: 1; min-height: 240px; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; } .hero-slide.active { opacity: 1; } .hero-slide .blueprint { width: 100%; height: 100%; } .hero-slide .bp-note { font-size: 12px; opacity: .9; fill: var(--ink-2); font-weight: 500; } /* bus-foto slide */ .bus-photo { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px 14px 24px; background-color: var(--panel-2); background-image: linear-gradient(color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; } .bus-photo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); } .bus-photo .bus-cap { position: absolute; left: 16px; bottom: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } /* bediening + tijdlijn */ .hero-controls { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--panel); min-width: 0; } .hero-controls .nav-btn { flex: none; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--panel-2); color: var(--ink-2); border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .12s, color .12s, border-color .12s; } .hero-controls .nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .hero-timeline { display: flex; gap: 8px; flex: 1; min-width: 0; } .hero-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 4px 0 0; cursor: pointer; text-align: left; } .hero-seg .seg-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; } .hero-seg .seg-bar > i { display: block; position: absolute; inset: 0; width: 0; background: var(--accent-2); } .hero-seg .seg-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; } .hero-seg:hover .seg-label { color: var(--ink); } .hero-seg.active .seg-label { color: var(--accent-2); font-weight: 600; } .hero-seg.active .seg-bar { background: color-mix(in srgb, var(--accent-2) 22%, var(--border)); } @media (max-width: 680px) { .hero-seg .seg-label { display: none; } .hero-seg { padding-top: 0; } } /* Projecten subtieler op de homepage */ .project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-card__media { aspect-ratio: 16 / 10; } .project-card__media .blueprint { opacity: .82; } .project-card__media .blueprint .bp-flow { animation: none; opacity: .35; } .project-card__media .blueprint .bp-line { stroke-width: 1.6; opacity: .7; } .project-card__media .blueprint .bp-label { opacity: .8; } .project-card h3 { font-size: 14px; } /* Roulerende review (compact) */ .review-rot { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--accent-2); padding: 2px 0 2px 10px; min-height: 46px; opacity: 1; transition: opacity .4s ease; } .review-rot.fade { opacity: 0; } .review-rot .who { display: block; margin-top: 5px; color: var(--ink-3); font-size: 11px; font-family: var(--font-mono); } @media (prefers-reduced-motion: reduce) { .blueprint .bp-flow, .blueprint .bp-hot-ring, .blueprint .bp-tour-ring { animation: none; } } /* --------------------------------------------------------------------- 8. Projecten --------------------------------------------------------------------- */ /* Projecten */ .section-band { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--panel-radius); padding: var(--sp-5); } /* projectillustraties: papier-look, past zich aan dag/nacht aan */ .project-card__media .blueprint { background-color: var(--panel); } .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); } .chip { border: 1px solid var(--border); background: var(--panel); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); font-weight: 500; transition: all .12s; } .chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } .chip:hover:not([aria-pressed="true"]) { border-color: var(--accent-2); color: var(--ink); } .project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .project-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--panel-radius); overflow: hidden; background: var(--panel); transition: box-shadow .15s, border-color .15s; } .project-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); } .project-card__media { aspect-ratio: 16/10; } .project-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 6px; } .project-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); } .project-card h3 { font-size: 15px; color: var(--ink); } .project-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } /* SVG placeholder (gestreept) */ .ph { width: 100%; height: 100%; min-height: 120px; display: block; background: repeating-linear-gradient(45deg, var(--panel-2) 0 10px, var(--bg-2) 10px 20px); position: relative; } .ph::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 8px; } /* --------------------------------------------------------------------- 9. Waarom / features --------------------------------------------------------------------- */ .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } .why-item { display: flex; gap: 12px; padding: var(--sp-3) 0; } .why-item i { color: var(--st-ok); font-size: 20px; flex: none; margin-top: 2px; } .why-item h3 { font-size: 14.5px; color: var(--ink); margin-bottom: 2px; } .why-item p { font-size: 13px; color: var(--ink-2); } /* Waarom-accordeon (compact, uitklapbaar) */ details.why-item { display: block; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); overflow: hidden; padding: 0; } details.why-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--ink); } details.why-item > summary::-webkit-details-marker { display: none; } details.why-item > summary > i:first-child { color: var(--st-ok); font-size: 18px; flex: none; margin-top: 0; } details.why-item > summary > span { flex: 1; } .why-item .why-chev { margin-left: auto; color: var(--ink-3); font-size: 13px; transition: transform .2s ease; } details.why-item[open] .why-chev { transform: rotate(180deg); } details.why-item[open] > summary { border-bottom: 1px solid var(--border); } details.why-item > p { margin: 0; padding: 12px 14px 14px 42px; font-size: 13px; color: var(--ink-2); } /* Certificeringen */ .cert-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .cert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); font-size: 13px; font-weight: 600; } .cert i { font-size: 20px; color: var(--accent-2); } .cert small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11px; } /* Merken */ .brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); } .brand-badge { display: grid; place-items: center; min-height: 66px; padding: 10px; border: 1px solid var(--brand-chip-border, var(--border)); border-radius: var(--panel-radius); background: var(--brand-chip, #ffffff); cursor: pointer; transition: all .12s; text-align: center; } .brand-badge:hover { border-color: var(--brand, var(--accent-2)); box-shadow: var(--shadow-1); transform: translateY(-1px); } .brand-badge .wm { font-weight: 800; font-size: 17px; letter-spacing: -.02em; line-height: 1; color: var(--brand, #1a2230); white-space: nowrap; } .brand-badge small { display: block; margin-top: 5px; font-weight: 500; font-size: 10.5px; color: #6b7688; letter-spacing: .02em; } [data-resolved-theme="dark"] .brand-badge { --brand-chip: var(--panel-2); --brand-chip-border: var(--border); } [data-resolved-theme="dark"] .brand-badge .wm { color: color-mix(in srgb, var(--brand) 45%, white); } [data-resolved-theme="dark"] .brand-badge small { color: var(--ink-3); } /* Rechter-sidebar blokken */ .aside-block { margin-bottom: var(--sp-5); } .aside-block > h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: var(--sp-3); font-weight: 700; display: flex; align-items: center; gap: 8px; } .help-actions { display: flex; flex-direction: column; gap: 8px; } .help-actions a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 13.5px; transition: all .12s; } .help-actions a:hover { text-decoration: none; border-color: var(--accent-2); transform: translateX(2px); } .help-actions a i { font-size: 18px; width: 22px; text-align: center; } .help-actions .a-call i { color: var(--st-ok); } .help-actions .a-wa i { color: #25d366; } .help-actions .a-spoed i { color: var(--st-alert); } .help-actions .a-storing i { color: var(--st-warn); } /* --- Spoed aan/uit-schakelaar ------------------------------------- Zet data-spoed="on" of "off" op het -element. Eén plek, werkt door op alle spoed/storing-onderdelen tegelijk. */ [data-spoed="off"] .spoed-on { display: none !important; } [data-spoed="on"] .spoed-off { display: none !important; } /* veilige standaard: zonder attribuut geldt 'off' */ html:not([data-spoed="on"]) .spoed-on { display: none !important; } .rating { display: flex; align-items: baseline; gap: 8px; } .rating__num { font-size: 32px; font-weight: 700; font-family: var(--font-mono); } .rating__stars i { color: var(--st-warn); font-size: 14px; } .opening-list { font-size: 13px; } .opening-list .row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border); } .opening-list .row:last-child { border-bottom: 0; } .opening-list .row.today { font-weight: 700; color: var(--accent); } .region-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 10px; border: 1px solid var(--st-warn); border-radius: var(--panel-radius); background: var(--st-warn-bg); color: var(--ink); } .region-note i { color: var(--st-warn); font-size: 16px; flex: none; } /* --------------------------------------------------------------------- 10. Footer — de lodewijk-site gebruikt de gedeelde standaard CMS-footer (assets/shared/css/footer.css, geladen in layout.php), 1-op-1 gevoed uit Content → Footer. Geen thema-eigen footer-markup/CSS meer. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 11. Offcanvas / mobiele nav trigger --------------------------------------------------------------------- */ .mobile-only { display: none; } .nav-toggle { display: none; align-items: center; gap: 8px; } /* --------------------------------------------------------------------- 12. Tooltip (eenvoudig, data-tip) --------------------------------------------------------------------- */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--ink); color: #fff; font-size: 11px; padding: 5px 9px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 50; font-family: var(--font-sans); font-weight: 500; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* Count-up helper */ .counter { font-variant-numeric: tabular-nums; } /* Subpagina's: prose + prijstabellen */ .prose p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.65; } .prose h3 { margin: 20px 0 8px; font-size: 16px; color: var(--ink); } .prose ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; } .prose ul li { margin-bottom: 4px; } .prose strong { color: var(--ink); } .price-table { width: 100%; border-collapse: collapse; font-size: 14.5px; table-layout: fixed; } .price-table th, .price-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } /* Vaste laatste kolom: bedragen in opeenvolgende tabellen lijnen zo uit. */ .price-table th:not(:first-child), .price-table td:not(:first-child) { width: 190px; } .price-table.cols-4 th:not(:first-child), .price-table.cols-4 td:not(:first-child) { width: 160px; } .price-table.cols-5 th:not(:first-child), .price-table.cols-5 td:not(:first-child) { width: 145px; } .price-table th:last-child, .price-table td:last-child, .price-table.cols-4 th:last-child, .price-table.cols-4 td:last-child, .price-table.cols-5 th:last-child, .price-table.cols-5 td:last-child { width: 190px; } /* Bedragen krijgen .mono en breken niet af; tekstwaarden mogen dat juist wel. */ .price-table td.mono, .price-table td[data-tarief] { font-variant-numeric: tabular-nums; } .price-table td:last-child { text-align: right; font-family: var(--font-mono); white-space: normal; color: var(--ink); overflow-wrap: break-word; } .price-table td.mono:last-child { white-space: nowrap; } .price-table.spec td:last-child { text-align: left; font-family: inherit; } .price-table.spec td.mono:last-child, .price-table.spec td.mono { text-align: right; font-family: var(--font-mono); } .price-table.spec th:not(:first-child) { text-align: right; } .price-table.spec.cols-4 th:nth-child(2), .price-table.spec.cols-4 td:nth-child(2) { text-align: left; } .price-table tbody tr:last-child td { border-bottom: 0; } .price-table thead th, .price-table th[colspan] { background: var(--panel-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; } .note-line { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; } .page-lede { font-size: 16px; color: var(--ink-2); max-width: 66ch; line-height: 1.6; } /* Subpagina sub-navigatie + productkaarten */ .subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); } .subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .subnav a:hover, .subnav a[aria-current="page"] { border-color: var(--accent-2); color: var(--ink); background: var(--panel-2); text-decoration: none; } .subnav a i { color: var(--accent-2); font-size: 15px; } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .product { border: 1px solid var(--border); border-radius: var(--panel-radius); padding: var(--sp-3); background: var(--panel); display: flex; flex-direction: column; gap: 3px; } .product .p-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; } .product .p-art { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); } .product .p-price { font-family: var(--font-mono); font-weight: 700; color: var(--accent); margin-top: 6px; } @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .product-grid { grid-template-columns: 1fr; } } /* Contactformulier */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 5px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 600; color: var(--ink); } .field input, .field textarea, .field select { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink); width: 100%; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); } .field .hint { font-size: 11.5px; color: var(--ink-3); } .radio-set { display: flex; flex-wrap: wrap; gap: 10px; } .radio-opt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--panel-radius); cursor: pointer; font-size: 13.5px; color: var(--ink); } .radio-opt:hover { border-color: var(--accent-2); } .radio-opt input { accent-color: var(--accent); } .info-list { font-size: 14.5px; } .info-list .row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); margin: 0; } .info-list .row:last-child { border-bottom: 0; } /* Bootstrap zet .row op display:grid met eigen gutters; die neutraliseren we hier. */ .info-list .row > span { width: auto; max-width: none; flex: 0 1 auto; padding: 0; margin: 0; } .info-list .row span:first-child { color: var(--ink-3); } .info-list .row span:last-child { font-family: var(--font-mono); color: var(--ink); text-align: right; } @media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } } /* Meter / gauge rij (Machinekamer e.a.) */ .meter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .meter { border: 1px solid var(--border); border-radius: var(--panel-radius); padding: var(--sp-3) var(--sp-4); background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; } .meter__label { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .meter__val { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; } .meter__val small { font-size: 13px; color: var(--ink-3); font-weight: 500; } /* Kaart (regiokaart-thema) */ .map-wrap { position: relative; border-radius: var(--panel-radius); overflow: hidden; } .map-point { cursor: pointer; transition: transform .15s; transform-box: fill-box; transform-origin: center; } .map-point:hover, .map-point:focus-visible { transform: scale(1.35); outline: none; } .map-pop { position: absolute; z-index: 20; width: 240px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--panel-radius); box-shadow: var(--shadow-2); padding: var(--sp-3) var(--sp-4); } .map-pop h4 { font-size: 14px; margin-bottom: 4px; } .map-pop .close { position: absolute; top: 6px; right: 8px; cursor: pointer; color: var(--ink-3); border: 0; background: none; font-size: 16px; } .data-note { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 6px; } /* --------------------------------------------------------------------- 13. Responsive --------------------------------------------------------------------- */ @media (max-width: 1200px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0,1fr); } .sidebar-right { position: static; grid-column: 1 / -1; max-height: none; border-left: 0; border-top: var(--border-w) solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding: var(--sp-5); } .sidebar-right .aside-block { margin-bottom: 0; } .service-grid { grid-template-columns: repeat(3, 1fr); } .brand-grid { grid-template-columns: repeat(4, 1fr); } .project-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 992px) { .shell { grid-template-columns: minmax(0, 1fr); } .sidebar-left { display: none; } .nav-toggle { display: inline-flex; } .hero { grid-template-columns: 1fr; } .hero__media { min-height: 0; display: block; border-left: 0; border-top: 1px solid var(--border); } .hero-slides { flex: none; height: auto; min-height: 0; aspect-ratio: 16 / 9; } .service-grid { grid-template-columns: repeat(2, 1fr); } .project-grid { grid-template-columns: repeat(2, 1fr); } .kpi-grid { grid-template-columns: repeat(3, 1fr); } .sidebar-right { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { :root { --topbar-h: auto; } .topbar { flex-wrap: wrap; height: auto; padding: 8px var(--sp-3); gap: 8px 12px; } .topbar .hide-sm { display: none; } /* Naam verborgen op mobiel → symmetrische padding zodat het avatar-pilletje rond blijft. */ .topbar__account { padding-right: 4px; } .sidebar-left { top: 0; height: 100vh; } .main { padding: var(--sp-4); } .hero__body { padding: var(--sp-4); } .hero__stats { grid-template-columns: 1fr; } .hero__stats .stat { border-right: 0; border-bottom: 1px solid var(--border); } .service-grid { grid-template-columns: 1fr; } .project-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } .brand-grid { grid-template-columns: repeat(3, 1fr); } .sidebar-right { grid-template-columns: 1fr; } } /* Offcanvas paneel styling (Bootstrap offcanvas body krijgt sidebar-look) */ .offcanvas .sidebar-left { display: flex; height: auto; border-right: 0; position: static; } .offcanvas-body { padding: 0; } /* --------------------------------------------------------------------- CMS-integratie: mobiele topbar opgeschoond (verzoek Theo). De tekstgrootte-/dag-nacht-schakelaars en het werkgebied verhuizen op kleine schermen naar het uitschuifmenu; de topbar houdt hamburger, telefoonnummer en account. --------------------------------------------------------------------- */ @media (max-width: 680px) { .topbar .fontsize-switch, .topbar .theme-switch, .topbar .system-status { display: none; } } .drawer-tools { margin-top: auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .drawer-tools .system-status { align-self: flex-start; } .drawer-tools-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* ============================================================ AUTH — inloggen, registreren, wachtwoord, tweestapscode ============================================================ Sinds v014.10.431 renderen de auth-pagina's in Lodewijks eigen schil (topbar + sidebar + main) in plaats van in de gedeelde portal-layout. Het SJABLOON is nog steeds het gedeelde _local_portal/auth_*.php — bewust: één sjabloon per pagina. Die markup gebruikt portal-klassen, en de opmaak daarvoor staat in _local_portal/theme.css, die dit thema niet laadt. Vandaar dit blok: dezelfde klassen, maar in Lodewijks paneelvorm en met zijn tokens. Werk je aan de auth-sjablonen: elke nieuwe portal-klasse die daar bijkomt, heeft hier een tegenhanger nodig. ThemeShellServiceTest bewaakt de CSS-keten, niet de dekking van losse klassen. ============================================================ */ /* Spam-honeypot uit de gedeelde formulieren (registratie, contact). Staat in de referentie in themes/default/css/theme.css, en dit thema laadt dat bestand niet — zonder deze regel ziet een echte bezoeker een veld "Website" staan, vult het in, en wordt als bot geweigerd. Niet onder .lw-auth scopen: contact gebruikt hem ook. */ .hp-field{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important} .lw-auth { display: flex; justify-content: center; padding-top: var(--sp-2); } /* Het gedeelde sjabloon rendert naast de kaart ook de portal-navigatie: het mobiele switchboard en de twee zijpanelen ("Snel naar" / "Ontdek"). In de portal-layout is dat de enige navigatie die een uitgelogde bezoeker heeft. Hier niet: Lodewijk heeft zijn eigen sidebar op desktop en zijn eigen drawer op mobiel, dus die blokken zijn dubbel — en zonder de portal-CSS staan ze bovendien uitgeklapt boven het formulier. */ .lw-auth .portal-mobile-switchboard-v147, .lw-auth .portal-quick-panel-v147, .lw-auth .portal-local-panel-v147 { display: none; } .lw-auth .portal-auth-v148 { width: 100%; max-width: 460px; } /* De kaart is een gewoon Lodewijk-paneel: vlak, dunne rand, kleine radius. */ .lw-auth .portal-auth-card-v148 { padding: var(--sp-5); border: var(--border-w) solid var(--border); border-radius: var(--panel-radius); background: var(--panel); box-shadow: var(--shadow-1); } .lw-auth .portal-auth-brand-v148 { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } /* Zonder display:block lopen merknaam en ondertitel aan elkaar vast. */ .lw-auth .portal-auth-brand-v148 strong, .lw-auth .portal-auth-brand-v148 small { display: block; line-height: 1.15; } .lw-auth .portal-auth-brand-v148 strong { color: var(--ink); font-size: 14px; } .lw-auth .portal-auth-brand-v148 small { color: var(--ink-3); font-size: 12px; } .lw-auth .portal-auth-brand-v148 .admin-logo-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--panel-radius); background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; } .lw-auth .portal-section-label-v147 { display: block; margin-bottom: var(--sp-1); color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .lw-auth .portal-auth-card-v148 h1 { margin: 0 0 var(--sp-2); color: var(--ink); font-size: 21px; } .lw-auth .portal-auth-card-v148 .lead { margin: 0 0 var(--sp-4); color: var(--ink-2); font-size: 14px; } .lw-auth .portal-auth-form-v148 { display: grid; gap: var(--sp-3); } .lw-auth .portal-auth-form-v148 label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink); } .lw-auth .portal-auth-form-v148 input { width: 100%; min-height: 42px; padding: 9px var(--sp-3); border: var(--border-w) solid var(--border); border-radius: var(--panel-radius); background: var(--panel); color: var(--ink); font-family: var(--font-sans); font-size: 14px; } .lw-auth .portal-auth-form-v148 input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(47, 111, 208, .16); } /* Verificatiecode in zes vakjes (v014.10.510). Lodewijk heeft een eigen schil en laadt _local_portal/theme.css niet, dus de indeling staat hier apart. De vakjes zelf erven de rand, achtergrond en focusring van de inputregel hierboven. */ .lw-auth .portal-otp-v160 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; } .lw-auth .portal-auth-form-v148 input.portal-otp-vak-v160 { padding: 9px 0; text-align: center; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Niet display:none: de herstelcode-stand haalt dit veld weer tevoorschijn en moet het kunnen focussen. */ .lw-auth .portal-auth-form-v148 input.portal-otp-echt-v160 { position: absolute; width: 1px; min-width: 0; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lw-auth .portal-otp-onder-v160 { display: grid; gap: 2px; justify-items: start; } .lw-auth .portal-otp-status-v160 { min-height: 1.2em; margin: 0; } .lw-auth .portal-auth-form-v148 button.portal-otp-wissel-v160 { justify-self: start; min-height: auto; padding: 0; border: 0; background: none; color: var(--accent-2); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; } @media (max-width: 400px) { .lw-auth .portal-otp-v160 { gap: 6px; } .lw-auth .portal-auth-form-v148 input.portal-otp-vak-v160 { font-size: 18px; padding: 8px 0; } } /* Knoppen volgen .btn-brand; de sjablonen zetten geen klasse op de submit-knop. */ .lw-auth .portal-auth-form-v148 button, .lw-auth .portal-auth-button-v148, .lw-auth .portal-passkey-btn-v159 { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-1); border: var(--border-w) solid var(--accent); border-radius: var(--panel-radius); background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-decoration: none; /* .portal-auth-button-v148 is een ; Bootstrap onderstreept die. */ cursor: pointer; } .lw-auth .portal-auth-form-v148 button:hover, .lw-auth .portal-auth-button-v148:hover, .lw-auth .portal-passkey-btn-v159:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); } .lw-auth .portal-passkey-btn-v159:disabled { opacity: .6; cursor: default; } .lw-auth .portal-passkey-2fa-v159 { display: grid; gap: var(--sp-3); } .lw-auth .portal-passkey-btn-v159 i { font-size: 17px; } /* Op de 2FA-pagina staat de hint in een ; zonder display:block pakt de marge niet. */ .lw-auth .portal-auth-hint-v148 { display: block; } .lw-auth .portal-auth-divider-v159 { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-1) 0; color: var(--ink-3); font-size: 12px; font-weight: 600; } .lw-auth .portal-auth-divider-v159::before, .lw-auth .portal-auth-divider-v159::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* label.-selector nodig: de algemene labelregel hierboven is even specifiek plus een elementnaam, en zonder dit wint zijn display:grid en staat het vinkje bovén de tekst in plaats van ernaast. */ .lw-auth .portal-auth-card-v148 label.portal-remember-v149 { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--ink-2); font-size: 13px; line-height: 1.4; } .lw-auth .portal-auth-card-v148 label.portal-remember-v149 input { width: auto; min-height: 0; flex: 0 0 auto; margin-top: 2px; } .lw-auth .portal-auth-links-v148 { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: 13px; } .lw-auth .portal-auth-links-v148 a, .lw-auth .portal-auth-links-v148 button { color: var(--accent-2); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; } .lw-auth .portal-auth-links-v148 a:hover, .lw-auth .portal-auth-links-v148 button:hover { text-decoration: underline; } .lw-auth .portal-auth-logout-form-v148 { display: contents; } .lw-auth .portal-auth-hint-v148 { margin-top: var(--sp-3); color: var(--ink-3); font-size: 12.5px; } /* Meldingen: Bootstrap laadt hier wel, maar de kleuren volgen Lodewijks statustokens. */ .lw-auth .alert { padding: var(--sp-3); border: var(--border-w) solid transparent; border-radius: var(--panel-radius); font-size: 13.5px; } .lw-auth .alert-danger { border-color: var(--st-alert); background: var(--st-alert-bg); color: var(--st-alert); } /* .success staat in auth_forgot_password.php als LOSSE klasse, niet als .alert.success. */ .lw-auth .alert.success, .lw-auth .success { border-color: var(--st-ok); background: var(--st-ok-bg); color: var(--st-ok); } @media (max-width: 720px) { .lw-auth { padding-top: 0; } .lw-auth .portal-auth-card-v148 { padding: var(--sp-4); } } /* ===================================================================== ONTWERP-UPGRADE: bouwstenen voor de subpagina's Samengevoegd uit het ontwerppakket (augustus 2026). Deze onderdelen stonden daar deels in losse