/* ============================================================================ stijl.css — Gedeelde Salubris-huisstijl voor het hele platform Gebaseerd op het Brandbook "Partner In Facility": navy #192643 · middenblauw #2989CA · cyaan #8CD1EA Museo Sans voor koppen en titels · Montserrat voor tekst · ronde hoeken ============================================================================ */ /* ── Lettertypes, op eigen server ────────────────────────────────────────── Geen Google Fonts meer: de lettertypes staan in /assets/lettertypes/. Dat bespaart bij elk bezoek twee verbindingen met een externe dienst en er gaat geen bezoekersinfo meer naar Google. De browser bewaart de bestanden een jaar (zie .htaccess) en toont de tekst meteen in een systeemletter tot het lettertype er is (font-display: swap), dus niets wacht erop. Montserrat (SIL Open Font License) is teruggebracht tot de tekens die we gebruiken, in twee delen: "latin" (Nederlands, Frans, Engels, €) en "latin-ext" (bv. č, ł, ő in namen). Dat tweede deel haalt de browser enkel op wanneer zo'n teken echt op de pagina staat. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/lettertypes/montserrat-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/lettertypes/montserrat-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/lettertypes/montserrat-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/lettertypes/montserrat-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/lettertypes/montserrat-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/lettertypes/montserrat-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/lettertypes/montserrat-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/lettertypes/montserrat-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/lettertypes/montserrat-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/lettertypes/montserrat-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Museo Sans 500 en 700 — het merkfont, voor koppen en titels (brandbook). Het zijn de gratis gewichten van exljbris; de licentie (zie /assets/lettertypes/MuseoSans-License.txt, punt 4.b.IV) laat @font-face toe met deze vermelding erbij, en verbiedt het bestand te wijzigen. Het staat hier daarom ongewijzigd als OpenType-bestand. */ /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ @font-face { font-family: 'Museo Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/lettertypes/MuseoSans_500.otf') format('opentype'); } /* A font by Jos Buivenga (exljbris) -> www.exljbris.com */ @font-face { font-family: 'Museo Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/lettertypes/MuseoSans_700.otf') format('opentype'); } :root { /* Salubristinten */ --salubris-navy: #192643; --salubris-blue: #2989CA; --salubris-cyan: #8CD1EA; --salubris-white: #FFFFFF; /* Afgeleide UI-tokens */ --color-text: var(--salubris-navy); --color-text-zacht: #56688A; --color-bg: #F5F8FB; --color-primary: var(--salubris-blue); --color-primary-dark: var(--salubris-navy); --color-accent: var(--salubris-cyan); --color-rand: #D8E4EE; --color-vlak: var(--salubris-white); /* vlak van een kaart of tabel */ --color-vlak-zacht: #EEF4FA; /* licht geaccentueerd vlak */ /* Signaalkleuren (afgestemd op het palet) */ --color-success: #2E7D5B; --color-warning: #E0A100; --color-danger: #C0392B; --color-paars: #7E57C2; /* enkel voor de status "Geblokkeerd", zoals in FITS */ /* Vormen */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; /* Typografie — Museo Sans voor koppen, Montserrat voor tekst (brandbook) */ --font-heading: 'Museo Sans', 'Montserrat', system-ui, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; --schaduw: 0 10px 30px rgba(25, 38, 67, 0.10); } /* ── Donkere modus ── */ html[data-thema="donker"] { --color-text: #E8EEF6; --color-text-zacht: #9FB0C7; --color-bg: #0F1726; --color-rand: #26344A; --color-vlak-zacht: #1C2942; --salubris-white: #16213A; /* "kaart"-achtergrond in donkere modus */ --schaduw: 0 10px 30px rgba(0, 0, 0, 0.35); } html[data-thema="donker"] body { background: var(--color-bg); } html[data-thema="donker"] h1, html[data-thema="donker"] h2, html[data-thema="donker"] h3, html[data-thema="donker"] h4 { color: #EAF1FA; } html[data-thema="donker"] .kaart { background: var(--salubris-white); border-color: var(--color-rand); } html[data-thema="donker"] input[type="text"], html[data-thema="donker"] input[type="email"], html[data-thema="donker"] input[type="password"], html[data-thema="donker"] select { background: #101A2C; color: var(--color-text); border-color: var(--color-rand); } html[data-thema="donker"] .knop-stil { background: #22314A; color: #DCE7F4; } html[data-thema="donker"] .knop-stil:hover { background: #2B3D5B; } html[data-thema="donker"] table.salubris-tabel th { background: #16223A; color: #EAF1FA; } html[data-thema="donker"] table.salubris-tabel td { border-top-color: #22314A; } html[data-thema="donker"] table.salubris-tabel tr:hover td { background: #16223A; } html[data-thema="donker"] .tabel-omhulsel { background: var(--salubris-white); border-color: var(--color-rand); } html[data-thema="donker"] .app-kaart { background: var(--salubris-white); border-color: var(--color-rand); color: var(--color-text); } html[data-thema="donker"] .app-kaart .omschrijving { color: var(--color-text-zacht); } html[data-thema="donker"] .icoon-knop { color: var(--color-text-zacht); } html[data-thema="donker"] .modal { background: var(--salubris-white); } html[data-thema="donker"] .pagina-centreer { background: radial-gradient(560px 420px at 100% 0%, rgba(41, 137, 202, .18), transparent 62%), radial-gradient(560px 420px at 0% 100%, rgba(140, 209, 234, .12), transparent 62%), var(--color-bg); } /* ── Dark/light-toggle op de publieke pagina's (login, wachtwoord, setup, machinepagina). Na het inloggen zit de schakelaar in het gebruikersmenu van de platformschil. ── */ .btn-thema { order: -1; /* uiterst links in de header */ flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, transform .06s ease; } .btn-thema:hover { border-color: #fff; } .btn-thema:active { transform: translateY(1px); } .thema-dot { width: 17px; height: 17px; border-radius: 999px; border: 2px solid #fff; background: linear-gradient(90deg, #fff 0 50%, transparent 50% 100%); transition: transform .3s ease; } html[data-thema="donker"] .thema-dot { transform: rotate(180deg); } /* Toggle op de centreer-pagina's (login, setup): donker bolletje op licht */ .btn-thema.op-licht { position: fixed; top: 16px; left: 16px; z-index: 20; border-color: var(--color-rand); background: var(--salubris-white); } .btn-thema.op-licht .thema-dot { border-color: var(--salubris-navy); background: linear-gradient(90deg, var(--salubris-navy) 0 50%, transparent 50% 100%); } html[data-thema="donker"] .btn-thema.op-licht .thema-dot { border-color: var(--salubris-cyan); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); font-weight: 400; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--salubris-navy); margin: 0 0 .5rem; } h5, h6 { font-family: var(--font-heading); font-weight: 500; margin: 0 0 .5rem; } p { line-height: 1.55; } a { color: var(--salubris-blue); } /* ── Handtekening-gradient van het merk ── */ .salubris-gradient { background: linear-gradient(135deg, var(--salubris-navy) 0%, var(--salubris-blue) 60%, var(--salubris-cyan) 100%); } /* ── Achtergrond met gradientaccenten in twee tegenovergestelde hoeken ── */ .pagina-centreer { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: radial-gradient(560px 420px at 100% 0%, rgba(41, 137, 202, .22), transparent 62%), radial-gradient(560px 420px at 0% 100%, rgba(140, 209, 234, .30), transparent 62%), var(--color-bg); } /* De "fade van het grid" uit het brandbook: dunne lijnvormen (banden van de S, cirkels, kwartcirkels) die uitvloeien, in dezelfde twee hoeken als de gradient. Een kleine vector in de stijl zelf, geen extra bestand. */ .pagina-centreer::before, .pagina-centreer::after { content: ""; position: fixed; z-index: 0; pointer-events: none; width: min(44vw, 360px); aspect-ratio: 1; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3CradialGradient id='f' cx='1' cy='0' r='1.2'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='240' height='240' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='none' stroke='%232989CA' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M180,0H240A60,60 0 0 1 180,60H120A60,60 0 0 1 180,0Z'/%3E%3Cpath d='M120,60H180A60,60 0 0 1 240,120H180A60,60 0 0 1 120,60Z'/%3E%3Ccircle cx='210' cy='150' r='30'/%3E%3Cpath d='M60,0A60,60 0 0 0 120,60'/%3E%3Cpath d='M120,120A60,60 0 0 1 180,180H120Z'/%3E%3Ccircle cx='90' cy='90' r='30'/%3E%3Cpath d='M240,180A60,60 0 0 0 180,240'/%3E%3Cpath d='M0,0H60V0A60,60 0 0 1 0,60Z'/%3E%3C/g%3E%3C/svg%3E"); opacity: .9; } .pagina-centreer::before { top: 0; right: 0; } .pagina-centreer::after { bottom: 0; left: 0; transform: rotate(180deg); } .pagina-centreer > .kaart { position: relative; z-index: 1; } /* ── Kaarten ── */ .kaart { background: var(--salubris-white); border: 1px solid var(--color-rand); border-radius: var(--radius-lg); box-shadow: var(--schaduw); padding: 2rem; } .kaart-smal { max-width: 420px; width: 100%; } /* ── Formulieren ── */ label.veldlabel { display: block; font-weight: 600; font-size: .85rem; margin: .9rem 0 .3rem; } input[type="text"], input[type="email"], input[type="password"], select { width: 100%; padding: .7rem .9rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: #fff; border: 1.5px solid var(--color-rand); border-radius: var(--radius-md); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus { border-color: var(--salubris-blue); box-shadow: 0 0 0 3px rgba(41, 137, 202, .18); } /* ── Knoppen ── */ .knop { display: inline-block; border: none; cursor: pointer; text-decoration: none; text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: .95rem; padding: .7rem 1.3rem; border-radius: var(--radius-md); transition: background .18s ease, transform .06s ease; } .knop:active { transform: translateY(1px); } .knop-primair { background: var(--salubris-blue); color: #fff; } .knop-primair:hover { background: var(--salubris-navy); } .knop-stil { background: #EAF2F9; color: var(--salubris-navy); } .knop-stil:hover { background: #DCE9F4; } .knop-gevaar { background: var(--color-danger); color: #fff; } .knop-gevaar:hover { background: #96271C; } .knop-breed { width: 100%; } /* ── Meldingen ── */ .melding { border-radius: var(--radius-md); padding: .75rem 1rem; font-size: .9rem; margin: .8rem 0; border: 1px solid transparent; } .melding-fout { background: #FBEAE8; color: #7C241B; border-color: #EFC4BF; } .melding-ok { background: #E7F4EE; color: #1E5A42; border-color: #BFE2D2; } .melding-info { background: #EAF3FB; color: #163B57; border-color: #C6E0F2; } /* ── Pictogrammen ───────────────────────────────────────────────────────── Het platform gebruikt geen emoji, maar fijne lijniconen uit /includes/iconen.php. Ze nemen de kleur van hun omgeving over en schalen mee met de tekst, zodat ze in elke context en in beide thema's kloppen. */ .ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.18em; } .ico-groot { width: 1.6em; height: 1.6em; } .ico-mini { width: 9px; height: 9px; vertical-align: 0; stroke-width: 2.6; } .ico-tegel { width: 22px; height: 22px; vertical-align: 0; } .ico-ok { color: var(--color-success); } .ico-gevaar { color: var(--color-danger); } .ico-stil { color: var(--color-text-zacht); } /* ── Rolbadges ── */ /* De rol wordt getoond als rustige, lichtgespatieerde tekst in kleinkapitaal. Geen gekleurde pillen: die maakten van elk scherm een kleurenwaaier en zeiden niets extra. Enkel de superadministrator krijgt een accent, omdat dat de enige rol met beheerrechten is. */ .badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-zacht); white-space: nowrap; } .badge-superadmin { color: var(--color-text); border-bottom: 2px solid var(--salubris-blue); padding-bottom: 1px; } /* ── Status van een artikel (uit FITS) ── */ /* Een klein bolletje in de kleur die FITS zelf gebruikt, in plaats van een gekleurde naam of pil: zo blijft het scherm rustig. Een actueel artikel krijgt niets. Gemaakt door /assets/salubris-status.js; in lijsten staat het woord erbij (.statusmerk), in tabellen enkel het bolletje met een tooltip. */ .statusbol { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--color-text-zacht); /* een status die we (nog) niet kennen */ } .statusbol-vervallen { background: var(--color-danger); } .statusbol-uitlopend { background: var(--color-warning); } .statusbol-geblokkeerd { background: var(--color-paars); } .statusbol-onvolledig { background: var(--color-success); } .statusmerk { display: inline-flex; align-items: center; white-space: nowrap; } .statusmerk .statusbol { margin-right: 5px; } /* ── Toestand van een onderdeel (Diagnose, Sleutelbeheer) ── */ /* «In orde», «2 aandachtspunten», «Ter info»: een bolletje met een woord in dezelfde rustige kleinkapitaal als de rolbadges, geen gekleurde pil. */ .stand { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .stand::before { content: ''; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; } .stand-ok { color: var(--color-success); } .stand-fout { color: var(--color-danger); } .stand-info { color: var(--color-text-zacht); } html[data-thema="donker"] .stand-ok { color: #6FCF9F; } /* leesbaar op de donkere kaart */ html[data-thema="donker"] .stand-fout { color: #F28B80; } /* Een kleinere knop, voor acties binnen een lijst. */ .knop-klein { padding: .45rem .85rem; font-size: .82rem; } /* Een knop die op de server wacht: niet nog eens aan te klikken. */ .knop.bezig { opacity: .7; pointer-events: none; cursor: progress; } /* ══════════════════════════════════════════════════════════════════════════ Merk — logo, bumper en laadanimatie -------------------------------------------------------------------------- Het logo staat als vector in de pagina (/includes/merk.php → merk_logo()). Op een donkere ondergrond en in de donkere weergave worden het woord en de navy band van de S wit; cyaan en middenblauw blijven altijd staan. ══════════════════════════════════════════════════════════════════════════ */ .sal-logo { display: block; height: auto; overflow: visible; } .merk-op-donker .merk-s3, .merk-op-donker .merk-woord, .merk-op-donker .merk-baseline, html[data-thema="donker"] .sal-logo .merk-s3, html[data-thema="donker"] .sal-logo .merk-woord, html[data-thema="donker"] .sal-logo .merk-baseline { fill: #fff; } /* De bumper als intro (loginpagina): de drie banden van de S verschijnen na elkaar — cyaan, middenblauw, navy — daarna het woord en de baseline. Het formulier is meteen bruikbaar; dit is louter een accent van ruim een seconde, en het speelt één keer per sessie (klasse merk-gezien op , gezet door een regeltje in de ). */ .merk-intro .merk-s1, .merk-intro .merk-s2, .merk-intro .merk-s3 { transform-box: fill-box; animation: merk-band-r .5s cubic-bezier(.2, .7, .2, 1) both; } .merk-intro .merk-s1 { animation-delay: .10s; } .merk-intro .merk-s2 { animation-name: merk-band-l; animation-delay: .32s; } .merk-intro .merk-s3 { animation-delay: .54s; } .merk-intro .merk-woord, .merk-intro .merk-baseline { animation: merk-woord .55s ease .85s both; } @keyframes merk-band-r { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } } @keyframes merk-band-l { from { opacity: 0; transform: translateX(-18%); } to { opacity: 1; transform: none; } } @keyframes merk-woord { from { opacity: 0; } to { opacity: 1; } } html.merk-gezien .merk-intro * { animation: none !important; } /* De bumper als laadanimatie: de S bouwt zich in een lus op. Standaard voor ELKE wachttijd op het platform (PDF opmaken, vertalen, opladen, lijsten laden). Gebruik: voor de tekst; op een gekleurde knop . Het is een afbeelding in de stijl zelf: geen JavaScript, geen extra bestand. */ .s-lader { display: inline-block; flex-shrink: 0; width: .82em; height: 1.07em; margin-right: .5em; vertical-align: -.2em; background: no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.36 59.25'%3E%3Cstyle%3Eg{animation:1.8s cubic-bezier(.3,0,.2,1) infinite both;transform-box:fill-box}.a{animation-name:r}.b{animation-name:l;animation-delay:.2s}.c{animation-name:r;animation-delay:.4s}%40keyframes r{0%25,100%25{opacity:.15;transform:translateX(10%25)}25%25,65%25{opacity:1;transform:none}}%40keyframes l{0%25,100%25{opacity:.15;transform:translateX(-10%25)}25%25,65%25{opacity:1;transform:none}}%3C/style%3E%3Cg class='a' fill='%238CD1EA'%3E%3Cpath d='M19.42,0h25.95v1.18c0,10.72-8.7,19.42-19.42,19.42H0v-1.18C0,8.7,8.7,0,19.42,0Z' transform='translate(45.36 20.59) rotate(-180)'/%3E%3C/g%3E%3Cg class='b' fill='%232989CA'%3E%3Cpath d='M0,20.51h25.38c10.72,0,19.42,8.7,19.42,19.42h-25.38C8.7,39.92,0,31.22,0,20.51H0Z'/%3E%3C/g%3E%3Cg class='c' fill='%23192643'%3E%3Cpath d='M19.42,39.83h25.38c0,10.72-8.7,19.42-19.42,19.42H0C0,48.53,8.7,39.83,19.42,39.83Z' transform='translate(44.8 99.09) rotate(-180)'/%3E%3C/g%3E%3C/svg%3E"); } html[data-thema="donker"] .s-lader, .s-lader-op-donker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.36 59.25'%3E%3Cstyle%3Eg{animation:1.8s cubic-bezier(.3,0,.2,1) infinite both;transform-box:fill-box}.a{animation-name:r}.b{animation-name:l;animation-delay:.2s}.c{animation-name:r;animation-delay:.4s}%40keyframes r{0%25,100%25{opacity:.15;transform:translateX(10%25)}25%25,65%25{opacity:1;transform:none}}%40keyframes l{0%25,100%25{opacity:.15;transform:translateX(-10%25)}25%25,65%25{opacity:1;transform:none}}%3C/style%3E%3Cg class='a' fill='%238CD1EA'%3E%3Cpath d='M19.42,0h25.95v1.18c0,10.72-8.7,19.42-19.42,19.42H0v-1.18C0,8.7,8.7,0,19.42,0Z' transform='translate(45.36 20.59) rotate(-180)'/%3E%3C/g%3E%3Cg class='b' fill='%232989CA'%3E%3Cpath d='M0,20.51h25.38c10.72,0,19.42,8.7,19.42,19.42h-25.38C8.7,39.92,0,31.22,0,20.51H0Z'/%3E%3C/g%3E%3Cg class='c' fill='%23FFFFFF'%3E%3Cpath d='M19.42,39.83h25.38c0,10.72-8.7,19.42-19.42,19.42H0C0,48.53,8.7,39.83,19.42,39.83Z' transform='translate(44.8 99.09) rotate(-180)'/%3E%3C/g%3E%3C/svg%3E"); } .s-lader.s-lader-wit, html[data-thema="donker"] .s-lader.s-lader-wit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.36 59.25'%3E%3Cstyle%3Eg{animation:1.8s cubic-bezier(.3,0,.2,1) infinite both;transform-box:fill-box}.a{animation-name:r}.b{animation-name:l;animation-delay:.2s}.c{animation-name:r;animation-delay:.4s}%40keyframes r{0%25,100%25{opacity:.15;transform:translateX(10%25)}25%25,65%25{opacity:1;transform:none}}%40keyframes l{0%25,100%25{opacity:.15;transform:translateX(-10%25)}25%25,65%25{opacity:1;transform:none}}%3C/style%3E%3Cg class='a' fill='%23FFFFFF'%3E%3Cpath d='M19.42,0h25.95v1.18c0,10.72-8.7,19.42-19.42,19.42H0v-1.18C0,8.7,8.7,0,19.42,0Z' transform='translate(45.36 20.59) rotate(-180)'/%3E%3C/g%3E%3Cg class='b' fill='%23FFFFFF'%3E%3Cpath d='M0,20.51h25.38c10.72,0,19.42,8.7,19.42,19.42h-25.38C8.7,39.92,0,31.22,0,20.51H0Z'/%3E%3C/g%3E%3Cg class='c' fill='%23FFFFFF'%3E%3Cpath d='M19.42,39.83h25.38c0,10.72-8.7,19.42-19.42,19.42H0C0,48.53,8.7,39.83,19.42,39.83Z' transform='translate(44.8 99.09) rotate(-180)'/%3E%3C/g%3E%3C/svg%3E"); } .s-lader-groot { width: 1.9rem; height: 2.5rem; margin: 0 auto .6rem; display: block; } @media (prefers-reduced-motion: reduce) { .merk-intro * { animation: none !important; } .s-lader { display: none; } } /* ══════════════════════════════════════════════════════════════════════════ Platformschil — /includes/schil.php + /assets/platform.js -------------------------------------------------------------------------- Eén kopbalk voor elke pagina na het inloggen: app-wisselaar, logo, naam van de app en het gebruikersmenu; daaronder (enkel wanneer nodig) een lichte balk met de deelpagina's en de eigen knoppen van de app. Elke eigenschap staat hier expliciet, ook marges, lettertype en regelhoogte: de apps hebben elk hun eigen basisregels (resets, lettergroottes), en die mogen niet doorlekken in de kop. Zo ziet de kop er overal identiek uit. ══════════════════════════════════════════════════════════════════════════ */ .schil-kop { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 60px; margin: 0; padding: 0 1rem; background: linear-gradient(120deg, var(--salubris-navy) 0%, #21406E 55%, var(--salubris-blue) 100%); color: #fff; font-family: var(--font-heading); font-size: 1rem; line-height: 1.2; } .schil-kop-links, .schil-kop-rechts { display: flex; align-items: center; gap: .7rem; min-width: 0; } .schil-kop .ico { width: 18px; height: 18px; vertical-align: 0; } .schil-knop { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: .45rem; height: 38px; margin: 0; padding: 0 .75rem; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font: 600 .85rem/1 var(--font-heading); letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .schil-knop:hover, .schil-knop[aria-expanded="true"] { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); } .schil-knop:focus-visible, .schil-merk:focus-visible, .schil-appnaam:focus-visible { outline: 2px solid var(--salubris-cyan); outline-offset: 2px; } .schil-merk { display: flex; flex-shrink: 0; border-radius: var(--radius-sm); } .schil-merk .sal-logo { height: 24px; width: auto; } .schil-scheiding { width: 1px; height: 24px; background: rgba(255,255,255,.3); flex-shrink: 0; } .schil-appnaam { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; border-radius: var(--radius-sm); } .schil-appnaam span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .schil-appnaam .ico { opacity: .85; } .schil-gebruikerknop { border-color: transparent; background: transparent; padding: 0 .5rem 0 .3rem; height: 42px; } .schil-naam { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; } .schil-pijl { transition: transform .15s ease; } .schil-kop .schil-pijl { width: 15px; height: 15px; } .schil-gebruikerknop[aria-expanded="true"] .schil-pijl { transform: rotate(180deg); } .schil-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--salubris-cyan); color: var(--salubris-navy); font: 700 .76rem/1 var(--font-heading); letter-spacing: .02em; } .schil-avatar-groot { width: 42px; height: 42px; font-size: .92rem; } /* Uitklappanelen (app-wisselaar links, gebruikersmenu rechts) */ .schil-paneel { position: absolute; top: calc(100% + 6px); z-index: 200; width: 300px; max-width: calc(100vw - 20px); max-height: calc(100vh - 90px); overflow-y: auto; margin: 0; padding: .45rem; background: var(--salubris-white); color: var(--color-text); border: 1px solid var(--color-rand); border-radius: var(--radius-md); box-shadow: 0 18px 44px rgba(25, 38, 67, .22); font-family: var(--font-body); font-size: .9rem; line-height: 1.35; text-align: left; } .schil-paneel[hidden] { display: none; } .schil-apps { left: .75rem; } .schil-menu { right: .75rem; width: 280px; } .schil-groep { margin: .8rem .6rem .3rem; padding: 0; font: 700 .66rem/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-zacht); } .schil-app, .schil-menu-item { display: flex; align-items: center; gap: .7rem; width: 100%; margin: 0; padding: .5rem .6rem; border: 0; border-radius: 10px; background: transparent; color: var(--color-text); font: 600 .88rem/1.25 var(--font-heading); text-align: left; text-decoration: none; cursor: pointer; } .schil-menu-item { font-weight: 500; font-family: var(--font-body); } .schil-app:hover, .schil-app:focus-visible, .schil-menu-item:hover, .schil-menu-item:focus-visible { background: var(--color-vlak-zacht); outline: none; } .schil-app.actief { background: rgba(41, 137, 202, .12); } .schil-app-icoon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; color: #fff; background: linear-gradient(135deg, var(--salubris-blue), var(--salubris-cyan)); border-radius: 60% 8px 60% 8px; /* de S-bladvorm uit het brandbook */ } .schil-app-icoon .ico { width: 17px; height: 17px; vertical-align: 0; } .schil-app.beheer .schil-app-icoon { background: var(--salubris-navy); } html[data-thema="donker"] .schil-app.beheer .schil-app-icoon { background: #2B3D5B; } .schil-menu-item .ico { width: 18px; height: 18px; vertical-align: 0; color: var(--color-text-zacht); } .schil-menu-wie { display: flex; align-items: center; gap: .75rem; margin: 0 0 .35rem; padding: .6rem .6rem .8rem; border-bottom: 1px solid var(--color-rand); } .schil-menu-wie > span:last-child { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .schil-menu-wie strong { font-family: var(--font-heading); font-size: .95rem; } .schil-menu-mail { font-size: .78rem; color: var(--color-text-zacht); overflow: hidden; text-overflow: ellipsis; } .schil-menu-wie .badge { align-self: flex-start; } /* Aan/uit-schakelaar voor de donkere weergave */ .schil-schakelaar { position: relative; flex-shrink: 0; margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: var(--color-rand); transition: background .15s ease; } .schil-schakelaar::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; } [aria-checked="true"] > .schil-schakelaar { background: var(--salubris-blue); } [aria-checked="true"] > .schil-schakelaar::after { transform: translateX(14px); } /* De balk onder de kop: deelpagina's links, eigen knoppen van de app rechts */ .schil-balk { display: flex; align-items: stretch; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; min-height: 50px; margin: 0; padding: 0 1rem; background: var(--salubris-white); border-bottom: 1px solid var(--color-rand); font-family: var(--font-heading); line-height: 1.2; } .schil-tabs { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; } .schil-tab { display: flex; align-items: center; margin: 0; padding: 0 .85rem; border-bottom: 3px solid transparent; border-top: 3px solid transparent; color: var(--color-text-zacht); font: 600 .86rem/1.2 var(--font-heading); text-decoration: none; white-space: nowrap; } .schil-tab:hover { color: var(--color-text); } .schil-tab.actief { color: var(--color-text); border-bottom-color: var(--salubris-blue); } .schil-tab:focus-visible { outline: 2px solid var(--salubris-blue); outline-offset: -4px; border-radius: 6px; } .schil-acties { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; padding: .45rem 0; } .schil-acties a { text-decoration: none; } @media (max-width: 640px) { .schil-kop { padding: 0 .6rem; gap: .4rem; } .schil-kop-links { gap: .45rem; } .schil-verberg-smal { display: none; } .schil-appknop { padding: 0 .6rem; } .schil-merk .sal-logo { height: 21px; } .schil-appnaam { font-size: .92rem; } .schil-appnaam .ico { display: none; } .schil-apps, .schil-menu { left: .6rem; right: .6rem; width: auto; } .schil-balk { padding: 0 .6rem; } } @media (max-width: 420px) { .schil-merk, .schil-scheiding { display: none; } } @media print { .schil-kop, .schil-balk { display: none !important; } } /* Algemene toetsenbordfocus: wie met Tab werkt, ziet altijd waar hij staat. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 2px solid var(--salubris-blue); outline-offset: 2px; } .inhoud { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } /* ── Startpagina ── */ .portaal-kop { margin: .5rem 0 1.5rem; } .portaal-kop h1 { font-size: 1.55rem; margin: 0 0 .25rem; } .portaal-kop p { margin: 0; color: var(--color-text-zacht); font-size: .92rem; } .app-groep { margin-top: 1.75rem; } .app-groep-titel { margin: 0 0 .75rem; font: 700 .72rem/1.2 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-zacht); } .app-groep .app-rooster { margin-top: 0; } /* ── App-kaarten op het portaal ── */ .app-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .app-kaart { background: #fff; border: 1px solid var(--color-rand); border-radius: var(--radius-lg); padding: 1.25rem; text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; gap: .55rem; box-shadow: 0 4px 14px rgba(25, 38, 67, .06); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .app-kaart:hover, .app-kaart:focus-visible { transform: translateY(-2px); box-shadow: var(--schaduw); border-color: var(--salubris-cyan); } .app-kaart .icoon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--salubris-blue), var(--salubris-cyan)); color: #fff; /* De S-bladvorm uit het brandbook: twee tegenovergestelde ronde hoeken */ border-radius: 60% 12px 60% 12px; } .app-kaart .icoon .ico { width: 22px; height: 22px; vertical-align: 0; stroke-width: 1.6; } .app-kaart .naam { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; } .app-kaart .omschrijving { font-size: .82rem; color: var(--color-text-zacht); line-height: 1.45; } .app-kaart.inactief { opacity: .55; pointer-events: none; } /* Systeemtools van de superadministrator: dezelfde tegel, donkere accenten. */ .app-kaart-beheer { border-color: var(--salubris-navy); } .app-kaart-beheer .icoon { background: var(--salubris-navy); } .app-kaart .status-migratie { font-size: .72rem; font-weight: 600; color: #7A6A1F; background: #FBF3D5; border-radius: var(--radius-pill); padding: .2rem .6rem; align-self: flex-start; } /* ── Tabellen ── */ .tabel-werkbalk { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 .8rem; } .tabel-werkbalk input[type="text"] { flex: 1; min-width: 200px; } .tabel-omhulsel { overflow-x: auto; background: #fff; border: 1px solid var(--color-rand); border-radius: var(--radius-lg); } table.salubris-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; } table.salubris-tabel th { font-family: var(--font-heading); font-weight: 600; text-align: left; padding: .8rem .9rem; background: #EFF5FA; color: var(--salubris-navy); cursor: pointer; user-select: none; white-space: nowrap; } table.salubris-tabel th .sorteer-pijl { display: inline-flex; margin-left: .3rem; opacity: .7; } .sorteer-pijl .ico { width: .85em; height: .85em; vertical-align: 0; } table.salubris-tabel td { padding: .7rem .9rem; border-top: 1px solid #E7EEF5; vertical-align: middle; } table.salubris-tabel tr:hover td { background: #F7FAFD; } .rij-acties { display: flex; gap: .35rem; } .icoon-knop { border: 1px solid var(--color-rand); background: transparent; color: var(--color-text-zacht); width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .12s ease, border-color .12s ease; } .icoon-knop:hover { color: var(--salubris-blue); border-color: var(--salubris-blue); } .icoon-knop:focus-visible { outline: 2px solid var(--salubris-cyan); outline-offset: 1px; } .icoon-knop.gevaar:hover { color: var(--color-danger); border-color: var(--color-danger); } .icoon-knop .ico { width: 17px; height: 17px; vertical-align: 0; } /* ── Modals ── */ .modal-achtergrond { position: fixed; inset: 0; background: rgba(25, 38, 67, .45); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 100; } .modal-achtergrond.open { display: flex; } .modal { background: #fff; border-radius: var(--radius-lg); max-width: 460px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 1.5rem; box-shadow: var(--schaduw); } .modal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; } .modal-kop h2 { margin: 0; font-size: 1.15rem; } .modal-sluit { border: none; background: #EAF2F9; width: 32px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; color: var(--salubris-navy); } .modal-voet { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; flex-wrap: wrap; } /* ── Mobiel ── */ @media (max-width: 640px) { .kaart { padding: 1.4rem; } .inhoud { padding: 1rem .9rem 2.5rem; } table.salubris-tabel { font-size: .82rem; } table.salubris-tabel th, table.salubris-tabel td { padding: .55rem .6rem; } } /* ══════════════════════════════════════════════════════════════════════════ Zoekbare keuzelijst (SalubrisKeuze) — /assets/salubris-keuze.js -------------------------------------------------------------------------- Eén uiterlijk voor elke keuzelijst in de hele app. Het tekstveld is een gewone , dus het erft vanzelf de vormgeving van de pagina waarop het staat; hier komt enkel bij wat een gewoon veld niet heeft. ══════════════════════════════════════════════════════════════════════════ */ .skz { position: relative; } /* Voor een keuzelijst die in een flexrij naast een knop staat. */ .skz-groei { flex: 1 1 auto; min-width: 0; } .skz-veld { position: relative; } .skz-veld input.skz-invoer { padding-right: 3.2rem; text-overflow: ellipsis; } /* De oorspronkelijke