/* Elke regel die var(--x) gebruikt staat er TWEE keer: eerst met de kleur uitgeschreven, dan met de variabele. Dat is geen slordigheid en mag niet "opgeruimd" worden. Een browser die CSS-variabelen niet kent — Opera Mini is de belangrijkste, en die haalt de site wél op omdat hij de TLS op zijn eigen servers doet — ziet var(...) als onzin en gooit de HELE regel weg. Dan verdwijnt `border:1px solid var(--line)` volledig: geen rand om een kaart, en een foutmelding in var(--warn) wordt zwart in plaats van rood. De pagina blijft leesbaar maar verliest zijn vorm en zijn betekenis. Een fallback BINNEN var() — var(--line,#2a2f36) — helpt daar niet: die springt alleen bij als de variabele niet gedefinieerd is, niet als de browser var() zelf niet snapt. Twee declaraties is de enige vorm die werkt: de oude browser neemt de eerste en negeert de tweede, de moderne browser overschrijft met de tweede. Kosten: ~150 bytes gecomprimeerd. */ :root { color-scheme:dark; --ink:#edf0f3; --mut:#a3abb5; --line:#2a2f36; --edge:#8b95a1; --bg:#0e1116; --card:#181c22; --acc:#4db2ff; --acc-ink:#08131c; --ok:#4cc38a; --warn:#ff7a70; } /* --mut passes WCAG AA on both backgrounds (5.07:1 on #181c22, 4.74:1 on --bg); the previous #8a8a8e measured 3.44:1 and failed for labels, captions, and off-day chips. */ /* Twee grijstinten voor twee verschillende dingen, en dat onderscheid is geen smaakkwestie. --line (#2a2f36) is de zachte scheidingslijn: de rand om een kaart, het streepje tussen twee rijen. Die lijn draagt geen betekenis — haal hem weg en je weet nog steeds wat er staat. Hij mag dus licht blijven. --edge (#8b95a1) is de rand van alles wat je kunt bedienen: een invoerveld, een witte knop, een dag- of tijdblokje. Die rand IS de knop — zonder rand is een wit vlak op een witte kaart geen knop meer. WCAG 2.2 eist daarom 3:1 (regel 1.4.11, niet-tekstueel contrast), en --line haalde daar bij lange na niet: relatieve helderheid L, volgens de WCAG-formule #2a2f36 L = 0,7179 #8b95a1 L = 0,2560 #181c22 L = 1,0000 (kaart) #0e1116 L = 0,9307 (pagina rondom de kaart) contrast = (lichtste + 0,05) / (donkerste + 0,05) oud, --line op wit (1,0000 + 0,05) / (0,7179 + 0,05) = 1,37:1 te weinig nieuw, --edge op wit (1,0000 + 0,05) / (0,2560 + 0,05) = 3,43:1 voldoet nieuw, --edge op #0e1116 (0,9307 + 0,05) / (0,2560 + 0,05) = 3,21:1 voldoet Beide ondergronden tellen mee omdat niet elke knop op een kaart staat: de hamburger van de kappersapp staat direct op de paginakleur. De donkerste van de twee sommen bepaalt de kleur. web/a11y_test.go rekent deze sommen na en gaat rood zodra iemand een van de twee kleuren verzacht. */ * { box-sizing:border-box; margin:0; } /* The hidden attribute must ALWAYS win: author display rules (.banner's flex, button's block) silently override the UA's [hidden]{display:none}, which made the banner's dismiss ✕ a no-op and kept "hidden" fallback buttons visible. !important restores the attribute's contract. */ [hidden] { display:none !important; } body { font-family:-apple-system,"Segoe UI",system-ui,sans-serif; background:#0e1116; background:var(--bg); color:#edf0f3; color:var(--ink); } main { max-width:28rem; margin:0 auto; padding:1rem; } header { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; } header h1 { font-size:1.25rem; padding:.5rem 0 1rem; } .card { background:#181c22; border:1px solid #2a2f36; border:1px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:.75rem; } label, h2 { display:block; font-size:.7rem; font-weight:600; color:#a3abb5; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; margin:.75rem 0 .25rem; } select,input,textarea { width:100%; font-size:1rem; padding:.7rem; border:1px solid #8b95a1; border:1px solid var(--edge); border-radius:10px; background:#181c22; color:#edf0f3; color:var(--ink); } /* textarea does not inherit the body font by default; vertical-only resize keeps the notes field from widening the single-column layout. */ textarea { font-family:inherit; resize:vertical; } .strip-cap { font-size:.85rem; color:#a3abb5; color:var(--mut); margin:-.15rem 0 .4rem; } .days { display:flex; gap:.4rem; overflow-x:auto; padding:.25rem 0; } .days a { position:relative; flex:0 0 3.2rem; text-align:center; border:1px solid #8b95a1; border:1px solid var(--edge); border-radius:10px; padding:.4rem 0; text-decoration:none; color:#edf0f3; color:var(--ink); background:#181c22; } .days a.on { background:#4db2ff; background:var(--acc); color:#08131c; color:var(--acc-ink); border-color:#4db2ff; border-color:var(--acc); } .days a.off { color:#a3abb5; color:var(--mut); } .days .dn { display:block; font-size:.65rem; color:inherit; opacity:.7; } /* On off days the muted color already carries the meaning — stacking the .dn opacity on top of it dropped the weekday name below AA contrast. */ .days a.off .dn { opacity:1; } .chips { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.5rem; } /* Direct children only: a chip may nest a .visually-hidden state span for screen readers, and that span must never inherit chip geometry. */ .chips > a, .chips > button, .chips > span { display:block; width:100%; text-align:center; font-size:1rem; border:1px solid #8b95a1; border:1px solid var(--edge); border-radius:10px; padding:.7rem 0; margin:0; text-decoration:none; color:#edf0f3; color:var(--ink); font-weight:600; background:#181c22; cursor:pointer; } .chips a.on { background:#4db2ff; background:var(--acc); color:#08131c; color:var(--acc-ink); border-color:#4db2ff; border-color:var(--acc); } .chips .gone { position:relative; color:#a3abb5; color:var(--mut); border-style:dashed; font-weight:400; cursor:default; } .chips .gone s { text-decoration:line-through; } button,.btn { display:block; width:100%; text-align:center; font-size:1rem; font-weight:600; padding:.85rem; margin-top:1rem; border:0; border-radius:12px; background:#4db2ff; background:var(--acc); color:#08131c; color:var(--acc-ink); text-decoration:none; cursor:pointer; } .btn.secondary { background:#181c22; color:#edf0f3; color:var(--ink); border:1px solid #8b95a1; border:1px solid var(--edge); } .btn.danger { background:#181c22; color:#ff7a70; color:var(--warn); border:1px solid #8b95a1; border:1px solid var(--edge); } .msg { padding:.5rem 0; } .msg.warn { color:#ff7a70; color:var(--warn); font-weight:600; } .msg.ok { color:#4cc38a; color:var(--ok); font-weight:600; } .meta { color:#a3abb5; color:var(--mut); font-size:.9rem; } .tel { font-weight:700; color:#edf0f3; color:var(--ink); } /* min-width/min-height:0 is de tegenhanger van de 24px-ondergrens onderaan dit bestand. Die geldt ook voor `button`, en booking.html heeft één knop die alleen voor een schermlezer bestaat — zonder deze nul zou die 24 bij 24 opeisen. Klassespecificiteit (0,1,0) wint van `button` (0,0,1), dus dit overrulet ongeacht de volgorde. */ .visually-hidden { position:absolute; width:1px; height:1px; min-width:0; min-height:0; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; } /* The chip/day containers are position:relative so these absolute boxes are contained locally and can never widen the document (horizontal-scroll regression caught in review). */ .row { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem 0; border-top:1px solid #2a2f36; border-top:1px solid var(--line); } .row:first-child { border-top:0; padding-top:0; } .row-main { flex:1 1 auto; min-width:0; } .row-main p { margin:0; } .row-main a { color:#edf0f3; color:var(--ink); } a.row { color:inherit; text-decoration:none; } .hero .brand { font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#a3abb5; color:var(--mut); margin:0 0 .3rem; } .usps { display:grid; grid-template-columns:1fr; gap:.9rem; } @media (min-width:34rem) { .usps { grid-template-columns:1fr 1fr; } } /* De zes verkooppunten zijn losse kopjes direct onder de h1 van de landingspagina, dus h2 en niet h3: wie met een schermlezer van kop naar kop springt mag geen niveau overslaan (WCAG 1.3.1), en h1 → h3 laat hem zoeken naar een tussenkop die er nooit was. De algemene `label, h2`-regel maakt van een h2 een klein grijs kapitaaltje — dat is bedoeld voor kopjes bóven een formulier. Hier moeten het gewone kopjes blijven, vandaar deze terugdraaiing. Alleen de tag verandert, het beeld niet. 25 juli 2026. */ .usp h2 { font-size:1.17rem; font-weight:700; text-transform:none; letter-spacing:0; color:#edf0f3; color:var(--ink); margin:0 0 .15rem; } .usp p { margin:0; } .row-actions { flex:0 0 auto; } .row-actions form { margin:0; } .btn-sm { display:inline-block; width:auto; font-size:.85rem; font-weight:600; padding:.5rem .9rem; margin:0; border:1px solid #8b95a1; border:1px solid var(--edge); border-radius:10px; background:#181c22; color:#edf0f3; color:var(--ink); cursor:pointer; } .btn-sm.danger { color:#ff7a70; color:var(--warn); } .daynav { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.5rem; } /* De pijltjes ← → waren kale links zonder padding: ongeveer 13 bij 19 pixels, en dat is het hele klikdoel waarmee de kapper door zijn dagen bladert. Padding maakt er een blokje van dat je met een duim raakt; text-align houdt het pijltje midden in dat blokje (de terug-naar-vandaag-link in het midden krijgt dezelfde behandeling en merkt er niets van). 25 juli 2026. */ .daynav a { color:#edf0f3; color:var(--ink); text-decoration:none; font-weight:600; padding:.35rem .5rem; text-align:center; } .daypick { display:flex; gap:.5rem; align-items:center; } .daypick input { width:auto; flex:1 1 auto; } .daypick button { width:auto; margin-top:0; padding:.7rem 1rem; } .msg.nudge { background:#262008; border:1px solid #6b5a20; border-radius:10px; padding:.6rem .8rem; } /* Notifications banner (Task 16): a non-interfering top bar the barber can keep working around or dismiss. Same warm tone as .msg.nudge. Flex row — message text, the enable button, and the ✕ pushed to the trailing edge; margin-inline-start:auto keeps that ✕ at the correct end in RTL (Arabic app pages) with no [dir] override. Base state is the HTML `hidden` attr; app.js decides whether to reveal it. */ .banner { display:flex; align-items:center; gap:.6rem; background:#262008; border:1px solid #6b5a20; border-radius:10px; padding:.6rem .8rem; margin-bottom:.75rem; } .banner-text { margin:0; font-size:.9rem; } .banner-text:empty { display:none; } .banner .btn-sm { flex:0 0 auto; } .banner-close { flex:0 0 auto; width:40px; height:40px; margin-inline-start:auto; padding:0; font-size:1.4rem; line-height:1; border:0; border-radius:8px; background:transparent; color:#a3abb5; color:var(--mut); cursor:pointer; } .tag { display:inline-block; font-size:.7rem; font-weight:600; color:#a3abb5; color:var(--mut); background:#0e1116; background:var(--bg); border:1px solid #2a2f36; border:1px solid var(--line); border-radius:6px; padding:.1rem .4rem; text-transform:none; } .badge { display:inline-block; min-width:1.4rem; text-align:center; font-size:.8rem; font-weight:700; color:#08131c; color:var(--acc-ink); background:#4db2ff; background:var(--acc); border-radius:999px; padding:.15rem .5rem; } label.radio { display:inline-block; text-transform:none; font-size:.9rem; font-weight:400; color:#edf0f3; color:var(--ink); margin:.5rem .75rem .5rem 0; } label.radio input { width:auto; } /* Settings notification toggles: same normal-case ink override as label.radio, but block — each checkbox+text pair is its own row. */ label.check { display:block; text-transform:none; font-size:.9rem; font-weight:400; color:#edf0f3; color:var(--ink); margin:.5rem 0; } label.check input { width:auto; } /* "Clear my details": a button that reads as an inline link, undoing the block/full-width button default above. */ /* display:inline-block en niet inline: op een niet-vervangen inline-element gooit de browser min-height weg, en dan zakt dit klikdoel terug naar de hoogte van zijn eigen regel (~17px). Zie de 24px-regel onderaan. */ .linklike { display:inline-block; width:auto; font-size:.9rem; font-weight:400; padding:0; margin:0; border:0; border-radius:0; background:none; color:#a3abb5; color:var(--mut); text-decoration:underline; cursor:pointer; } .forget-form { margin:0; } /* Barber-app hamburger: native details/summary — opens and closes with zero JS and is keyboard-operable out of the box. The summary is position:relative so its .visually-hidden label stays contained (same horizontal-scroll guard as the chip/day containers above). */ .menu { position:relative; flex:0 0 auto; margin-top:.25rem; } .menu summary { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; list-style:none; cursor:pointer; border:1px solid #8b95a1; border:1px solid var(--edge); border-radius:10px; background:#181c22; } .menu summary::-webkit-details-marker { display:none; } .menu .bars { position:relative; display:block; width:18px; height:2px; border-radius:1px; background:#edf0f3; background:var(--ink); } .menu .bars::before, .menu .bars::after { content:""; position:absolute; left:0; width:18px; height:2px; border-radius:1px; background:#edf0f3; background:var(--ink); } .menu .bars::before { top:-6px; } .menu .bars::after { top:6px; } /* inset-inline-end hangs the sheet from the icon's start-appropriate edge in both LTR and RTL (Arabic app pages) — no [dir="rtl"] override needed. */ .menu-sheet { position:absolute; top:calc(100% + .4rem); inset-inline-end:0; z-index:10; min-width:12rem; background:#181c22; border:1px solid #2a2f36; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.5); overflow:hidden; } .menu-sheet a { display:block; padding:.7rem 1rem; color:#edf0f3; color:var(--ink); text-decoration:none; font-weight:600; } .menu-sheet .logout-form { margin:0; border-top:1px solid #2a2f36; border-top:1px solid var(--line); } .menu-sheet .logout-form button { width:100%; text-align:start; font-size:1rem; font-weight:600; padding:.7rem 1rem; margin:0; border:0; border-radius:0; background:#181c22; color:#edf0f3; color:var(--ink); cursor:pointer; } .qr-code { display:block; width:100%; max-width:22rem; height:auto; margin:.75rem auto; } @media print { .menu { display:none; } .banner { display:none; } /* the notifications nudge never belongs on paper */ [data-print] { display:none; } /* the print button must not print itself */ .qr-code { max-width:100%; } /* QR flyer (Task 17): "Save as PDF" / print yields a clean one-page flyer — the shop name (base.html's header h1), the QR code, and the booking URL text, nothing else. Hide this page's own "QR code" heading, het kopje boven de link, and the mirror hint; the hamburger is already gone above. The header shop-name h1 lives outside .qr-page, so it stays. Dat kopje boven de link was tot 25 juli 2026 een