/* * Welkomgids V35 — terracotta. * * De waarden komen uit de ontwerphandoff. Kaarten zijn vlak met een rand van * 1px; er staat bewust geen schaduw op. Ontwerpbreedte 390px, maar de kolom * rekt gewoon mee op een breder toestel. * * Twee gronden. De warme zandgrond hieronder is de basis van het huismerk en * staat op drukwerk. De gids is een app en draait op de koele grond: zet * data-v35-surface="cool" op (dat doet views/layout.php). Alleen * vlakken, randen en tinten schuiven mee — terracotta, inkt en tekst niet, want * juist daardoor blijft het accent het enige warme op het scherm. */ /* ---------------------------------------------------------------- tokens */ :root { --bg: #F4EAE0; --bg-outer: #EBDDD0; --surface: #FFFCF8; --ink: #2E1D16; --ink-on-dark: #F7EDE4; --accent: #C24E2C; --accent-dark: #96371C; --accent-soft: #F6DCCF; --accent-light: #E08159; --accent-on: #FFF6F1; --note-ink: #8C3A1E; --error: #A8321A; --text-muted: #7A6153; --text-soft: #8A6F60; --text-faint: #9C8272; --text-label: #A18874; --text-disabled: #B49C8C; --divider: #D3BFB1; --border: rgba(46, 29, 22, .12); --border-input: rgba(46, 29, 22, .14); --border-soft: rgba(46, 29, 22, .09); --tint-ink: rgba(46, 29, 22, .06); --on-accent-div: rgba(255, 246, 241, .2); --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --pad: 20px; } /* De koele appgrond. Off-white met een groene ondertoon in plaats van zand, kaarten zuiver wit, en randen op koele inkt zodat ze niet roze uitslaan. */ [data-v35-surface="cool"] { --bg: #EDEFEC; --bg-outer: #DFE3DF; --surface: #FFFFFF; --border: rgba(30, 38, 34, .13); --border-input: rgba(30, 38, 34, .15); --border-soft: rgba(30, 38, 34, .10); --tint-ink: rgba(30, 38, 34, .06); } /* ------------------------------------------------------------ grondslag */ *, *::before, *::after { box-sizing: border-box; } /* Op een SVG leunt hidden anders op de browserstijl, en die is er niet altijd. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-outer); color: var(--ink); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } .app { max-width: 430px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; } @media (min-width: 460px) { .app { border-inline: 1px solid var(--border); } } .body { flex: 1; padding: 0 var(--pad) 28px; } a { color: var(--accent); } a:hover { color: var(--accent-dark); } button { font: inherit; color: inherit; cursor: pointer; } img, svg { vertical-align: middle; } /* Eén zichtbare focusring voor alles. De handoff vraagt hier expliciet om: de prototype-invoervelden hadden er geen. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .sr-only, .sr-only-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--ink); color: var(--ink-on-dark); padding: 10px 14px; border-radius: 0 0 12px 0; font: 700 12px/1 var(--mono); text-decoration: none; } .skip:focus { left: 0; } /* ------------------------------------------------------------ typografie */ .h1 { margin: 2px 0 8px; font: 800 30px/1.05 var(--sans); letter-spacing: -.02em; text-wrap: balance; } .h1--detail { font-size: 27px; line-height: 1.08; margin-top: 0; } .h1--faq { font-size: 26px; line-height: 1.08; margin: 0 0 14px; } .lead { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--text-muted); text-wrap: pretty; } .lead--home { margin-bottom: 16px; } .lead--detail { line-height: 1.55; margin-bottom: 18px; } .kicker { margin: 0; font: 700 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); } /* ------------------------------------------------------------------ kop */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px var(--pad) 12px; } .topbar__kicker { color: var(--text-soft); } .langswitch { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--mono); } .langswitch__on { color: var(--accent); } .langswitch__sep { color: var(--divider); } .langswitch__off { background: none; border: 0; padding: 4px 2px; margin: -4px 0; font: 700 11px/1 var(--mono); color: var(--text-label); } .langswitch__off:hover { color: var(--accent); } /* -------------------------------------------------------------- knoppen */ .btn { display: inline-block; border: 0; border-radius: 12px; padding: 13px 16px; font: 600 13.5px/1 var(--sans); text-align: center; text-decoration: none; } .btn--primary { background: var(--ink); color: var(--ink-on-dark); } .btn--primary:hover { background: #43291f; color: var(--ink-on-dark); } .pill { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 11px 13px; font: 700 11px/1 var(--mono); letter-spacing: .04em; /* De unitcode komt uit de wasruimte en is niet altijd een nummer: "beheer" stond eerder in kleine letters tussen hoofdletters. De opmaak hoort hier, niet in de taalbestanden. */ text-transform: uppercase; color: var(--text-muted); text-decoration: none; } .pill--dark { background: var(--ink); border-color: var(--ink); color: var(--ink-on-dark); } .btn--ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; } /* --------------------------------------------------- op het beginscherm */ .install { margin: 22px 0 0; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 16px; padding: 17px 18px; } .install__kicker { color: var(--accent); margin-bottom: 6px; } .install__title { margin: 0 0 6px; font: 700 18px/1.25 var(--sans); } .install__body { margin: 0; font: 400 13.5px/1.55 var(--sans); color: var(--text-muted); text-wrap: pretty; } .install__howto { margin-top: 8px; } .install__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .install__actions .btn { flex: 1 1 auto; } /* ------------------------------------------------------------- aanmelden */ .login { min-height: calc(100dvh - 200px); display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-bottom: 10px; } .login__icon { color: var(--accent); display: block; } .login__title { margin: 12px 0 8px; font-size: 28px; line-height: 1.06; } .login__hint { margin: 0; font: 400 12px/1.5 var(--sans); color: var(--text-label); } .pinform { display: flex; flex-direction: column; gap: 20px; } .pinfield { display: flex; flex-direction: column; gap: 9px; } .pinfield__label { font: 700 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-label); } .pinfield__input { width: 100%; background: var(--surface); border: 1px solid var(--border-input); border-radius: 12px; padding: 14px; font: 700 20px/1 var(--mono); letter-spacing: .3em; color: var(--ink); } /* Met JavaScript verhuist het veld naar buiten beeld, maar blijft het in de pagina staan: een fysiek toetsenbord moet blijven werken. */ .js .pinfield { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .js-only { display: none; } .js .js-only { display: initial; } .pindots { display: flex; gap: 9px; } .js .pindots { display: flex; } .pindots__cell { flex: 1; height: 52px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-input); display: flex; align-items: center; justify-content: center; font: 700 20px/1 var(--mono); color: var(--accent-on); } .pindots__cell--filled { background: var(--accent); border-color: var(--accent); } .pinerror { margin: -10px 0 -6px; font: 700 11px/1.4 var(--mono); letter-spacing: .1em; color: var(--error); } .pinerror[hidden] { display: none; } .keypad { grid-template-columns: repeat(3, 1fr); gap: 9px; } .js .keypad { display: grid; } .key { height: 60px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; font: 700 22px/1 var(--mono); color: var(--ink); transition: border-color .15s, color .15s; } .key:hover { border-color: var(--accent); color: var(--accent); } .key--blank { background: none; border: 0; } .key--back { background: none; border: 0; color: var(--text-soft); } .key--back:hover { background: var(--tint-ink); color: var(--text-soft); } /* ------------------------------------------------------------- checklist */ .checklist { background: var(--accent); color: var(--accent-on); border-radius: 16px; padding: 14px 16px 10px; margin: 0 0 12px; } .checklist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .checklist__kicker { color: rgba(255, 246, 241, .72); } .checklist__close { flex: none; width: 30px; height: 30px; margin: -7px -6px 0 0; background: none; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: rgba(255, 246, 241, .75); } .checklist__close:hover { background: rgba(255, 246, 241, .16); color: var(--accent-on); } .checklist__title { margin: 5px 0 8px; font: 700 17px/1.25 var(--sans); } .checklist__list { list-style: none; margin: 0; padding: 0; } .checklist__row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 0; background: none; border: 0; border-top: 1px solid var(--on-accent-div); color: inherit; text-align: left; } .checkbox { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid rgba(255, 246, 241, .55); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--sans); } .checkbox--done { background: var(--accent-on); border-color: var(--accent-on); color: var(--accent); } .checklist__label { font: 500 14px/1.3 var(--sans); transition: opacity .15s; } /* Afgevinkt hoort ook zichtbaar afgevinkt te zijn. De knop draagt al aria-pressed, dus daar hangen we het aan: dan kan de opmaak nooit uit de pas lopen met wat een schermlezer voorleest. */ .checklist__row[aria-pressed="true"] .checklist__label { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .65; } .checklist-restore { margin: 0 0 12px; } .checklist-restore__btn { display: block; width: 100%; padding: 12px 14px; background: var(--surface); border: 1px dashed rgba(194, 78, 44, .4); border-radius: 12px; font: 700 10px/1 var(--mono); letter-spacing: .12em; color: var(--accent); text-align: left; } /* ---------------------------------------------------------------- zoeken */ .searchbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin: 0 0 16px; } .searchbar__icon { color: var(--accent); flex: none; } .searchbar__input, .searchform__input { width: 100%; min-width: 0; background: none; border: 0; padding: 0; font: 400 13.5px/1.2 var(--sans); color: var(--ink); } .searchbar__input::placeholder, .searchform__input::placeholder { color: var(--text-label); } /* De ring hoort om de hele balk, niet om het veldje erin: het veld heeft geen eigen rand, dus een outline daarbinnen zweeft. De handoff vraagt hier expliciet om — het prototype had helemaal geen zichtbare focus. */ .searchbar__input:focus { outline: none; } .searchbar:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; } .searchform__input { background: var(--surface); border: 1px solid var(--border-input); border-radius: 12px; padding: 13px 14px; font-size: 14px; margin-bottom: 14px; } .topics__kicker { margin: 0 0 10px; } /* ---------------------------------------------------------------- tegels */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 13px 14px; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; } .tile:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); } .tile__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .tile__arrow { font: 400 14px/1 var(--sans); color: var(--divider); } .tile__title { display: block; font: 700 15.5px/1.15 var(--sans); letter-spacing: -.01em; margin-bottom: 3px; } .tile__sub { display: block; font: 400 11.5px/1.35 var(--sans); color: var(--text-faint); } .tile--featured { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink); color: var(--ink-on-dark); border-radius: 14px; padding: 15px 16px; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; } .tile--featured:hover { color: var(--ink-on-dark); border-color: var(--accent); } .tile--featured__title { display: block; font: 700 17px/1.15 var(--sans); letter-spacing: -.01em; } .tile--featured__sub { display: block; margin-top: 2px; font: 400 12px/1.35 var(--sans); color: rgba(247, 237, 228, .72); } .tile--featured__icon { flex: none; color: var(--accent-light); } .chip { display: inline-block; font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 7px; border-radius: 5px; } .chip--on-dark { background: none; padding: 0; color: rgba(247, 237, 228, .6); margin-bottom: 8px; } /* Op een detailpagina staat het chipje op zijn eigen regel, onder de terugknop. Die knop is inline-flex, dus zonder dit gaat het chipje ernaast hangen en botst het met het label. Blok met fit-content houdt de pil om haar tekst heen en dwingt toch een nieuwe regel af. */ .chip--standalone { display: block; width: fit-content; margin: 0 0 10px; } /* ------------------------------------------------------------ onderwerp */ /* De terugknop. Het vlak is bewust 38 x 34 en dus iets breder dan hoog: dat leest rustiger naast een label dan een perfect vierkant. De padding brengt de hele link op 40px, want 34 is voor een duim aan de krappe kant. */ .back { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-bottom: 14px; padding: 3px 0; } .back i { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 34px; border-radius: 10px; background: var(--accent-soft); transition: background .15s; } .back svg { display: block; width: 19px; height: 19px; fill: var(--accent); transition: fill .15s; } .back:hover { color: var(--ink); } .back:hover i { background: var(--accent); } .back:hover svg { fill: var(--accent-on); } /* Zonder onderstreping en zonder knopvorm is dit kader het enige dat verraadt waar de toetsenbordfocus staat. */ .back:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .spec { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .spec__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 15px; border-top: 1px solid var(--border-soft); } .spec__row:first-child { border-top: 0; } .spec__label { flex: none; max-width: 118px; font: 700 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-label); } .spec__value { margin: 0; font: 500 13.5px/1.4 var(--sans); text-align: right; } /* Een link in een waarde is meestal een telefoonnummer of een app. Op een telefoon moet dat een fatsoenlijk aanraakdoel zijn, geen regel tekst van 13 px. */ .spec__value a { display: inline-block; padding: 6px 0; margin: -6px 0; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(194, 78, 44, .35); } .spec__value a:hover { border-bottom-color: var(--accent); } /* Een kop binnen een onderwerp. Alleen voor onderwerpen die echt uitleg nodig hebben; de meeste hebben genoeg aan één tabel. */ .section { margin: 22px 0 8px; font: 700 17px/1.25 var(--sans); letter-spacing: -.01em; } .section:first-of-type { margin-top: 18px; } .prose { margin: 0 0 12px; font: 400 13.5px/1.55 var(--sans); color: var(--text-muted); text-wrap: pretty; } /* Een raster van drie kolommen of meer. Past het niet, dan schuift de tabel zelf horizontaal; de pagina eronder blijft stilstaan. */ .gridtable__scroll { margin: 0 0 14px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; } .gridtable { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--sans); } .gridtable th, .gridtable td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--border-soft); white-space: nowrap; } .gridtable thead th { border-top: 0; font: 700 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-label); } .gridtable tbody th { font: 700 12px/1.4 var(--mono); color: var(--ink); } .gridtable tbody td { color: var(--text-muted); } /* Een kaart met een kopje en uitleg: één ding per kaart, zodat de lezer kan stoppen zodra hij het zijne gevonden heeft. */ .factcard { margin: 0 0 8px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 13px; padding: 12px 15px; } .factcard__title { margin: 0; font: 700 13.5px/1.35 var(--sans); } .factcard__text { margin: 4px 0 0; font: 400 13px/1.5 var(--sans); color: var(--text-muted); text-wrap: pretty; } .note { margin: 12px 0 14px; background: var(--accent-soft); border-radius: 14px; padding: 14px 15px; font: 400 13px/1.5 var(--sans); color: var(--note-ink); } /* Een waarschuwing is een opmerking met gevolgen. Zelfde familie, duidelijk zwaarder: een streep, een driehoekje en de foutkleur uit de handoff. */ .note--warning { display: flex; align-items: flex-start; gap: 10px; border-left: 3px solid var(--error); color: var(--error); font-weight: 500; } .note__icon { flex: none; margin-top: 1px; } .actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--ink-on-dark); border-radius: 14px; padding: 15px 16px; text-decoration: none; } .actionbar:hover { color: var(--ink-on-dark); } .actionbar__label { font: 500 13.5px/1.35 var(--sans); } .actionbar__cta { flex: none; background: var(--accent); border-radius: 999px; padding: 9px 12px; font: 700 10px/1 var(--mono); letter-spacing: .1em; white-space: nowrap; } /* --------------------------------------------------------- zoekresultaat */ .results__count { margin: 0 0 10px; } .results { display: flex; flex-direction: column; gap: 8px; } .result { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; } .result__q { font: 600 13.5px/1.35 var(--sans); cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .result__q::-webkit-details-marker { display: none; } .result__q::after { content: "+"; flex: none; font: 400 15px/1 var(--sans); color: var(--divider); } .result[open] .result__q::after { content: "–"; } .result__a { margin-top: 7px; } .result__text { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--text-muted); } .result__rows { margin: 8px 0 0; } .result__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--border-soft); } .result__label { flex: none; max-width: 118px; font: 700 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-label); } .result__value { margin: 0; font: 500 13px/1.4 var(--sans); text-align: right; } .result__link { display: inline-block; margin-top: 10px; font: 700 10px/1 var(--mono); letter-spacing: .12em; text-decoration: none; } .result__link:hover { text-decoration: underline; } .emptystate { margin: 4px 0 0; font: 400 13.5px/1.55 var(--sans); color: var(--text-muted); text-wrap: pretty; } /* -------------------------------------------------------------- meldingen */ .notice { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; } .notice--stop { border: 1.5px solid var(--accent); } .notice__title { margin: 0 0 6px; font: 700 16px/1.25 var(--sans); } .notice__body { margin: 0; font: 400 13.5px/1.55 var(--sans); color: var(--text-muted); } .errorpage { padding-top: 24px; } .errorpage__back { margin: 20px 0 0; } /* ------------------------------------------------------------- beweging */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .tile:hover { transform: none; } } /* ------------------------------------------------------- einde huurperiode */ .tenancynote { margin: 10px 0 0; font: 700 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-label); } /* ------------------------------------------------------ breder dan een gsm */ /* De gids is voor een telefoon ontworpen en wordt daar ook bijna altijd gelezen. Maar een kolom van 430px midden op een laptopscherm leest als een vergissing, niet als een keuze. Dus: één stap breder, en niet meer dan dat. De tekstmaten zijn voor een telefoon gekozen; een regel van negentig tekens leest slechter dan een smalle kolom, hoe veel ruimte er ook is. 600px houdt de regel rond de vijfenzeventig tekens. De tegels gaan van twee naar drie kolommen. Dat is de winst: bij 600px in drieën is een tegel even groot als bij 430px in tweeën, dus de verhoudingen blijven kloppen en er passen er meer op een scherm. */ @media (min-width: 768px) { :root { --pad: 26px; } .app { max-width: 600px; } .tiles { grid-template-columns: repeat(3, 1fr); } /* Het toetsenblok niet. Toetsen van 190px breed zijn geen toetsen meer, en wie op een laptop aanmeldt tikt toch op zijn eigen toetsenbord. */ .login { width: 100%; max-width: 360px; margin-inline: auto; } }