/* ===================================================================== Stijl voor syncurity.nl. ALLE pagina's gebruiken dit ene bestand: de publieke pagina, het inlogscherm en de afgeschermde omgeving. Pagina-eigen regels staan achter een class op . Er is bewust maar EEN stylesheet. Eerder waren het er twee met dezelfde waarden erin, en die liepen uiteen: twaalf kleuren stonden dubbel en het logo was 96px op de ene pagina en 72px op de andere. Met een enkel bestand kan dat niet meer gebeuren. REGEL: hexkleuren en vaste maten horen ALLEEN in deel 1 thuis. Overal daarna gebruik je var(--...). De uitrolpoort controleert dat. ===================================================================== */ /* --------------------------------------------------------------------- 1. Ontwerpwaarden. De enige plek met losse kleuren en maten. --------------------------------------------------------------------- */ :root { /* licht thema, tevens de standaard */ --bg: #f7f8fa; --vlak: #ffffff; --ink: #14171c; --gedempt: #5a6270; --accent: #1d4ed8; --accent-ink: #ffffff; --lijn: #e3e6ec; --fout: #b3261e; /* De afgeschermde omgeving is altijd donker, ongeacht de systeeminstelling. Daarom eigen waarden en geen thema-afhankelijke. */ --donker-bg: #0e1116; --donker-vlak: #151a21; --donker-ink: #eef1f5; --donker-gedempt: #9aa4b2; --donker-accent: #8ab0ff; --donker-lijn: #232a34; /* maten */ --logo: 96px; --tik: 44px; /* kleinste comfortabele aanraakmaat */ --rond: 8px; --rond-vol: 999px; --rond-tik: 10px; /* typografie */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --klein: 0.8125rem; --normaal: 1rem; --lead: 1.0625rem; /* ritme */ --sp-1: 0.375rem; --sp-2: 0.75rem; --sp-3: 1.25rem; --sp-4: 1.75rem; } @media (prefers-color-scheme: dark) { :root { --bg: var(--donker-bg); --vlak: var(--donker-vlak); --ink: var(--donker-ink); --gedempt: var(--donker-gedempt); --accent: var(--donker-accent); --accent-ink: var(--donker-bg); --lijn: var(--donker-lijn); --fout: #f2857c; } } /* --------------------------------------------------------------------- 2. Basis --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; /* Het document zelf scrollt nooit. In een geinstalleerde app kan de layout-viewport hoger zijn dan het zichtbare deel, en dan krijg je een scrollbalk zonder dat er iets te zien valt. */ block-size: 100%; overflow: hidden; } body { margin: 0; block-size: 100%; min-block-size: 100dvh; overflow-y: auto; /* alleen scrollen als het echt niet past */ background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--normaal); line-height: 1.6; text-rendering: optimizeLegibility; } a { -webkit-tap-highlight-color: transparent; } @media (prefers-reduced-motion: no-preference) { a, button { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; } } /* --------------------------------------------------------------------- 3. Gedeelde onderdelen. Eén definitie, overal hetzelfde. --------------------------------------------------------------------- */ /* Het logo is overal even groot. Dat was precies het verschil dat opviel. */ .logo { display: block; inline-size: var(--logo); block-size: var(--logo); margin: 0 auto var(--sp-3); } /* Het woordmerk boven de kop. */ .mark { margin: 0 0 var(--sp-4); font-size: var(--klein); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } /* Volvlaks knop, gebruikt op het inlogscherm. */ .knop { inline-size: 100%; padding: var(--sp-2) 1rem; border: 0; border-radius: var(--rond); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; cursor: pointer; } .knop:hover { filter: brightness(1.08); } .knop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* Terughoudende knop met omlijning, gebruikt voor Inloggen op de site. */ .knop-rand { padding: 0.5rem 0.95rem; border: 1px solid var(--lijn); border-radius: var(--rond-vol); background: var(--vlak); color: var(--gedempt); font-size: 0.875rem; font-weight: 500; text-decoration: none; } .knop-rand:hover { color: var(--ink); border-color: var(--gedempt); } .knop-rand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Alleen een icoon, bijvoorbeeld uitloggen. */ .knop-icoon { display: grid; place-items: center; inline-size: var(--tik); block-size: var(--tik); padding: 0; border: 0; border-radius: var(--rond-tik); background: transparent; color: var(--donker-gedempt); cursor: pointer; } .knop-icoon:hover { color: var(--donker-ink); background: var(--donker-vlak); } .knop-icoon:focus-visible { outline: 2px solid var(--donker-accent); outline-offset: 2px; } /* Invoervelden. */ .veld { inline-size: 100%; margin-block-end: var(--sp-3); padding: 0.6875rem 0.875rem; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--vlak); color: var(--ink); font: inherit; font-size: var(--normaal); /* 16px, anders zoomt iOS in bij het aantikken */ } .veld:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .label { display: block; margin-block-end: var(--sp-1); font-size: var(--klein); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gedempt); } .fout { margin: 0 0 var(--sp-3); padding: 0.625rem 0.875rem; border: 1px solid var(--fout); border-radius: var(--rond); color: var(--fout); font-size: 0.9375rem; text-align: start; } /* --------------------------------------------------------------------- 4. De publieke pagina (body.site) --------------------------------------------------------------------- */ body.site { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; align-items: center; gap: clamp(1.5rem, 6vh, 3rem); padding-block-start: max(clamp(1rem, 4vh, 2rem), env(safe-area-inset-top)); /* Extra ruimte onderaan duwt het blok omhoog en laat plek voor de knop. */ padding-block-end: max(calc(clamp(1rem, 4vh, 2rem) + 9vh), env(safe-area-inset-bottom)); padding-inline-start: max(1.5rem, env(safe-area-inset-left)); padding-inline-end: max(1.5rem, env(safe-area-inset-right)); } body.site main { inline-size: 100%; max-inline-size: 34rem; text-align: center; } body.site h1 { margin: 0 0 clamp(0.75rem, 2.5vh, 1.25rem); font-size: clamp(2rem, 7vw, 3rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .lead { margin: 0 auto clamp(1.25rem, 5vh, 2.5rem); max-inline-size: 26rem; color: var(--gedempt); font-size: var(--lead); } .contact { margin: 0; padding-block-start: clamp(1rem, 4vh, 2rem); border-block-start: 1px solid var(--lijn); } .contact a { color: var(--accent); font-weight: 500; text-decoration: none; border-block-end: 1px solid currentColor; padding-block-end: 1px; } .contact a:hover, .contact a:focus-visible { color: var(--ink); } body.site footer { color: var(--gedempt); font-size: var(--klein); } body.site footer p { margin: 0; } .inloggen { position: fixed; inset-block-end: max(1.25rem, env(safe-area-inset-bottom)); inset-inline-end: max(1.25rem, env(safe-area-inset-right)); } /* --------------------------------------------------------------------- 5. Inlogscherm (body.inlog) --------------------------------------------------------------------- */ body.inlog { display: flex; justify-content: center; justify-content: safe center; align-items: center; padding-block-start: max(1.5rem, env(safe-area-inset-top)); padding-block-end: max(1.5rem, env(safe-area-inset-bottom)); padding-inline-start: max(1.5rem, env(safe-area-inset-left)); padding-inline-end: max(1.5rem, env(safe-area-inset-right)); } body.inlog main { inline-size: 100%; max-inline-size: 22rem; text-align: center; } body.inlog h1 { margin: 0 0 var(--sp-4); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; } body.inlog form { text-align: start; } .terug { margin: var(--sp-4) 0 0; text-align: center; font-size: 0.875rem; } .terug a { color: var(--gedempt); } /* --------------------------------------------------------------------- 6. Afgeschermde omgeving (body.app), altijd donker --------------------------------------------------------------------- */ body.app { background: var(--donker-bg); color: var(--donker-ink); } .uitlog { position: fixed; inset-block-start: max(1rem, env(safe-area-inset-top)); inset-inline-end: max(1rem, env(safe-area-inset-right)); margin: 0; }