/* * stijl.css — V7-bestelapp. * * HET IDEE: dit ís een menukaart, dus het ziet eruit als een menukaart. * De eerste opzet zette elk gerecht in een eigen wit doosje met een schaduwtje. Dat is de vorm die * elke webshop heeft, het kost enorm veel hoogte (zes regels op een telefoon) en het zegt niets * over waar je bent. Een gedrukte kaart doet het al honderd jaar anders: een lijst, naam links, * prijs rechts, stippellijn ertussen. Dat is compacter (veertien regels), meteen herkenbaar, en het * maakt de prijs -- waar je op besluit -- het rustpunt van elke regel. * * Daar komt één ding uit voort dat deze app zijn eigen maakt: DE PRIJS IS DE KNOP. Op een kaart * kijk je naar de prijs en dan besluit je. Hier tik je er ook op. Geen los plusje ernaast dat niets * betekent. * * De rest is bewust stil gehouden: papierwit als grond, haarlijnen als structuur, en één * accentkleur die de zaak zelf mag zetten (kassa.menuappCSS -> --accent). */ :root { /* Warm, want dit is een snackbar en geen bank. De grond heeft een gouden ondertoon in plaats van grijs; de tweede kleur (amber) is de kleur van gefrituurd eten en een warmhoudlamp en doet al het kleine werk -- merktekens, "gratis", de streep onder een kop. Het rood blijft voorbehouden aan de ene handeling die telt: bestellen. */ --papier: #fdf8ee; /* de kaart */ --grond: #f6eede; --bon: #f7f0dd; /* het papier van de bon zelf */ --inkt: #1c1710; --dof: #6f675a; --zacht: #a0968a; --lijn: #e7dcc6; --lijnDun: #f0e7d4; --accent: #c1361c; --accentDonker: #9a2a13; --amber: #d98613; --amberZacht: #fbeccd; --goed: #2f7d4f; --fout: #b3271a; --rond: 12px; --rondKlein: 8px; --kop: 'Bricolage', ui-sans-serif, system-ui, sans-serif; --tekst: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* De derde stem, en de belangrijkste voor het karakter: de letter van de kassabon. Kost niets (staat op elk toestel) en is precies wat een bon een bon maakt. */ --bonletter: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* De enige letter die we meesturen: 41 kB, variabel van 400 tot 800, van onze eigen server. Lopende tekst staat in de systeemletter -- die is er al, dus die kost geen milliseconde op 4G. */ @font-face { font-family: 'Bricolage'; src: url('bricolage.woff2') format('woff2-variations'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage'; src: url('bricolage-ext.woff2') format('woff2-variations'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* touch-action erft NIET over naar kind-elementen (geen "inherited" CSS-property) -- zetten op html/body alleen blokkeert dus pinch-/dubbeltik-zoom niet op een knop of ander interactief element (bv. de kalender-navigatieknoppen), die blijven zelf gewoon touch-action:auto. Vandaar op *, *::before, *::after i.p.v. alleen html/body. */ *, *::before, *::after { box-sizing: border-box; touch-action: pan-x pan-y; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papier); color: var(--inkt); font: 15px/1.45 var(--tekst); font-variant-numeric: tabular-nums; } img { max-width: 100%; display: block; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .overslaan { position: absolute; left: -9999px; background: var(--inkt); color: #fff; padding: 10px 16px; z-index: 100; } .overslaan:focus { left: 0; top: 0; } /* ============================== kop ============================== Scrollt gewoon weg. Alleen de categoriebalk blijft plakken; die heb je nodig, de naam van de zaak niet -- die weet je inmiddels wel. */ .zaak { padding: 20px 18px 0; padding-top: calc(18px + env(safe-area-inset-top)); } .zaakBinnen { display: flex; gap: 12px; align-items: center; max-width: 720px; margin: 0 auto; } .zaakLogo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } .zaakTekst { min-width: 0; } .zaak h1 { font-family: var(--kop); font-weight: 800; font-size: clamp(24px, 6.6vw, 31px); line-height: 1.04; letter-spacing: -.028em; margin: 0; overflow-wrap: anywhere; } .zaak p { margin: 4px 0 0; color: var(--zacht); font-size: 13px; } .modus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 720px; margin: 14px auto 0; padding: 8px 0 0; border-top: 1px solid var(--lijnDun); font-size: 13px; color: var(--dof); } .modusNu { font-weight: 600; color: var(--inkt); } .modusNu::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--goed); margin-right: 7px; vertical-align: 1px; } .modusAdres { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modusWissel { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; } /* ============================== hoofd ============================== */ main { max-width: 720px; margin: 0 auto; padding: 0 18px 128px; } .melding { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--rondKlein); background: #fdf3ec; border: 1px solid #f0d7c4; font-size: 14px; } .melding-fout { background: #fceceb; border-color: #f0c8c4; color: var(--fout); } .melding-goed { background: #edf6f0; border-color: #c9e2d3; color: var(--goed); } h2.sectie { font-family: var(--kop); font-weight: 700; letter-spacing: -.02em; font-size: 21px; margin: 26px 0 10px; } /* ---------- de startpagina: afhalen of bezorgen ---------- Dit is het eerste wat iemand ziet, dus hier mag de zaak zich even voorstellen. De twee keuzes zijn geen formulierknoppen maar twee panelen met een tekening, de tijden van vandaag erbij, en genoeg vlees om met een duim te raken. */ .zaakHero { text-align: center; padding-bottom: 4px; } .zaakHero .zaakBinnen { flex-direction: column; gap: 14px; } .zaakHero .zaakLogo { width: 72px; height: 72px; box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--lijn), 0 6px 18px rgba(28,23,16,.13); } .zaakHero h1 { font-size: clamp(28px, 8vw, 38px); } .zaakBoven { display: block; font-family: var(--bonletter); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 7px; } .kiesRij { display: grid; gap: 12px; margin: 26px 0 8px; } @media (min-width: 620px) { .kiesRij { grid-template-columns: 1fr 1fr; } } .kiesKaart { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; color: inherit; cursor: pointer; background: var(--papier); border: 1.5px solid var(--lijn); border-radius: 16px; padding: 16px 18px; text-decoration: none; transition: border-color .16s, transform .16s, box-shadow .16s; } .kiesKaart:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(28,23,16,.45); } .kiesTekst { min-width: 0; } .kiesKaart b { font-family: var(--kop); font-weight: 700; font-size: 21px; letter-spacing: -.02em; display: block; color: var(--inkt); } /* LET OP de volgorde: .kiesTekst span moet vóór .kiesBeeld staan en even zwaar zijn, anders kleurt de algemene span-regel de tekening ook grijs. Dat ging hier eerst mis. */ .kiesTekst span { display: block; color: var(--dof); font-size: 13.5px; line-height: 1.4; } .kiesKaart .kiesBeeld { flex: none; width: 62px; height: 62px; color: var(--accent); } .kiesKaart .kiesBeeld svg { width: 100%; height: 100%; } .kiesTijd { margin-top: 5px; font-family: var(--bonletter); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8a5a0c !important; } .kiesKaart.dicht { opacity: .55; pointer-events: none; } .kiesKaart.dicht .kiesBeeld { color: var(--zacht); } .kiesKaart.dicht b::after { content: ' · gesloten'; color: var(--fout); font-size: 15px; font-weight: 600; } /* ---------- categoriebalk ---------- */ .catBalk { position: sticky; top: 0; z-index: 30; margin: 14px -18px 0; padding: 7px 0; background: color-mix(in srgb, var(--papier) 90%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--lijn); } .catBalk ul { display: flex; gap: 5px; margin: 0; padding: 0 18px; list-style: none; overflow-x: auto; scrollbar-width: none; } .catBalk ul::-webkit-scrollbar { display: none; } .catBalk a { display: block; white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .01em; padding: 6px 11px; border-radius: 99px; color: var(--dof); } .catBalk a.nu { background: var(--accent); color: #fff; } /* ============================== DE KAART ============================== Een lijst, geen dozen. Naam links, prijs rechts, stippellijn ertussen. */ .catKop { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 6px; scroll-margin-top: 56px; } .catKop h2 { font-family: var(--kop); font-weight: 700; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; margin: 0; flex: none; color: var(--accent); } .catKop::after { content: ''; flex: 1; height: 2px; background: var(--amberZacht); border-radius: 2px; } .catKop p { flex-basis: 100%; margin: 4px 0 0; color: var(--dof); font-size: 13.5px; } .tussenkop { font-family: var(--kop); font-weight: 600; font-size: 14px; color: var(--accent); margin: 16px 0 2px; } .items { display: block; } .regel { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-bottom: 1px solid var(--lijnDun); padding: 9px 0; color: inherit; } .regel:last-child { border-bottom: 0; } .regel.metFoto { grid-template-columns: 62px 1fr auto; column-gap: 13px; } .regelFoto { grid-row: span 2; width: 62px; height: 62px; border-radius: 10px; object-fit: cover; align-self: center; background: var(--grond); /* Veel artikelfoto's zijn productshots op een zwarte ondergrond. Die zweven als postzegels op het papier; een warm randje en een zachte gloed eronder zetten ze in iets in plaats van erop. */ box-shadow: 0 0 0 1px var(--lijn), 0 2px 6px rgba(28,23,16,.10); } .regelKop { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .regelNaam { font-weight: 500; font-size: 15px; line-height: 1.3; } .regelVul { flex: 1; border-bottom: 1.5px dotted #ddd8cc; transform: translateY(-3px); min-width: 14px; } .regelAlg { flex: none; font-size: 11.5px; letter-spacing: .5px; opacity: .85; } /* De prijs is de knop. Daarom heeft hij een rand, een eigen vlak en een duimformaat. */ .regelPrijs { grid-column: -1; align-self: center; flex: none; white-space: nowrap; font-family: var(--kop); font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--inkt); background: var(--grond); border: 0; border-radius: 99px; padding: 6px 12px; box-shadow: inset 0 0 0 1px rgba(231,220,198,.9); transition: background .12s, color .12s; } /* De + verschijnt pas als je de regel aanraakt: op een kaart hoort de prijs te staan, niet een rij plusjes. Op een telefoon is er geen hover, dus daar is de hele regel het doelwit -- dat is groot genoeg en dat weet iedereen inmiddels van een bestelapp. */ .regelPrijs::after { content: ''; } @media (hover: hover) { .regel:hover .regelPrijs::after { content: ' +'; } } .regel:hover .regelPrijs, .regel:active .regelPrijs { background: var(--accent); border-color: var(--accent); color: #fff; } .regelBij { grid-column: 1 / -2; color: var(--dof); font-size: 13px; line-height: 1.4; margin-top: 3px; } .regel.metFoto .regelBij { grid-column: 2 / -2; } /* Een merkteken achter de naam, geen zin op een eigen regel. "Vandaag op" is informatie, geen alarm -- en het artikel is voor morgen gewoon te bestellen. */ .regelTag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5a0c; background: var(--amberZacht); border-radius: 4px; padding: 2px 6px; position: relative; top: -1px; } /* De kijk-kaart: geen knop, dus ook niet de vorm van een knop. De prijs is gewoon een prijs, en staat dan ook op dezelfde regel als de naam in plaats van in een eigen vlak eronder. */ .regel.kijk { cursor: default; padding: 7px 0; } .regel.kijk .regelPrijs { background: none; box-shadow: none; padding: 0; font-size: 15px; align-self: baseline; letter-spacing: 0; } .regel.kijk:hover .regelPrijs { background: none; color: var(--inkt); } .regel.kijk:hover .regelPrijs::after { content: ''; } .regel.op .regelNaam { text-decoration: line-through; color: var(--zacht); } .regel.op .regelPrijs { color: var(--zacht); } .regel.op .regelFoto { filter: grayscale(1); opacity: .55; } /* Foto groot (tik op een artikelfoto). Het beeld groeit vanaf zijn plek in de lijst; zie fotoZoom() in app.js. */ .regelFoto { cursor: zoom-in; } .fotoZoom { position: fixed; inset: 0; z-index: 9999; background: rgba(20,16,12,0); cursor: zoom-out; transition: background .26s ease; -webkit-tap-highlight-color: transparent; } .fotoZoom.aan { background: rgba(20,16,12,.72); } .fotoZoomBeeld { position: fixed; object-fit: contain; border-radius: 14px; transform-origin: center; transition: transform .26s cubic-bezier(.2,.8,.2,1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .fotoZoom, .fotoZoomBeeld { transition: none; } } /* ============================== het bonnetje ============================== */ .bon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); transform: translateY(150%); transition: transform .3s cubic-bezier(.2,.9,.3,1); pointer-events: none; } .bon.bonAan { transform: translateY(0); pointer-events: auto; } /* Onderin steekt de bon net boven de rand uit -- met dezelfde scheurrand als op de mandjespagina, zodat het zichtbaar hetzelfde vel papier is dat je omhoog trekt. */ /* Onderin steekt de bon net boven de rand uit, mét de scheurrand -- zichtbaar hetzelfde vel dat je omhoog trekt. In de accentkleur, want dit is ook de weg naar afrekenen en die moet je vinden zonder zoeken; op papierkleur was hij te bescheiden voor wat hij doet. */ .bonKnop { position: relative; display: flex; align-items: center; gap: 12px; max-width: 692px; margin: 0 auto; background: var(--accent); color: #fff; text-decoration: none; padding: 15px 16px 14px; box-shadow: 0 14px 34px -12px rgba(140,38,18,.7); } .bonKnop::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 9px; background: linear-gradient(-45deg, var(--accent) 50%, transparent 51%) 0 0 / 14px 9px repeat-x, linear-gradient(45deg, var(--accent) 50%, transparent 51%) 0 0 / 14px 9px repeat-x; } .bonAantal { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 3px; background: rgba(255,255,255,.22); color: #fff; display: grid; place-items: center; font-family: var(--bonletter); font-weight: 700; font-size: 12.5px; } .bonWoord { font-family: var(--bonletter); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); } .bonTotaal { margin-left: auto; font-family: var(--kop); font-weight: 800; font-size: 19px; letter-spacing: -.03em; } .bon.stoot .bonKnop { animation: stoot .34s ease; } @keyframes stoot { 40% { transform: translateY(-5px); } } .vliegt { position: fixed; z-index: 60; pointer-events: none; font-family: var(--kop); font-weight: 700; font-size: 14px; background: var(--inkt); color: var(--papier); padding: 5px 10px; border-radius: 99px; transition: transform .5s cubic-bezier(.4,0,.6,1), opacity .5s; } /* ============================== bladen ============================== */ .sluier { position: fixed; inset: 0; z-index: 50; background: rgba(20,19,15,.4); opacity: 0; transition: opacity .22s; } .sluier.aan { opacity: 1; } .blad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--papier); border-radius: 18px 18px 0 0; max-height: 90vh; display: flex; flex-direction: column; transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -20px 50px -20px rgba(20,19,15,.35); } .blad.aan { transform: translateY(0); } @media (min-width: 700px) { .blad { left: 50%; right: auto; width: 540px; transform: translate(-50%, 101%); } .blad.aan { transform: translate(-50%, 0); } } .bladKop { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--lijn); } .bladKop h2 { font-family: var(--kop); font-weight: 700; font-size: 20px; margin: 0; letter-spacing: -.02em; } .bladDicht { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); background: none; font-size: 15px; cursor: pointer; } .bladLijf { padding: 16px 18px; overflow-y: auto; } .bladVoet { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lijn); background: var(--grond); } .vraag { margin-bottom: 22px; } .vraag h3 { font-family: var(--kop); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 2px; } .vraag .vraagBij { color: var(--zacht); font-size: 12.5px; margin: 0 0 8px; } .optie { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--lijnDun); cursor: pointer; } .optie:last-child { border-bottom: 0; } .optie input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); } .optie .optieNaam { flex: 1; font-size: 15px; } .optie .optiePrijs { color: var(--dof); font-family: var(--bonletter); font-size: 12.5px; } .optie.op { opacity: .55; } .optie.op .optieNaam { text-decoration: line-through; } .stap { display: flex; align-items: center; gap: 2px; border: 1px solid var(--lijn); border-radius: 6px; padding: 1px; } .stap button { width: 30px; height: 30px; border-radius: 5px; cursor: pointer; border: 0; background: none; font-size: 17px; line-height: 1; } .stap button:disabled { opacity: .3; cursor: default; } .stap .stapNu { min-width: 26px; text-align: center; font-family: var(--bonletter); font-weight: 700; font-size: 15px; } /* ============================== DE BON ============================== * Dit is het hart van het ontwerp. Wat je bestelt wordt straks een kassabon; hier is hij dat al. * Een eigen vel papier op de kaart, met gescheurde randen, de letter van een bonprinter voor alles * wat cijfer is, en een dubbele regel boven het totaal. Het is de enige plek waar deze app iets * nabootst -- en het is precies wat de gast even later in zijn hand krijgt. */ .bonVel { background: var(--bon); margin: 18px 0 0; padding: 0 18px; filter: drop-shadow(0 1px 0 rgba(20,19,15,.06)) drop-shadow(0 14px 26px rgba(20,19,15,.07)); } /* De scheurrand: een rij driehoekjes, boven én onder, met de kleur van de kaart eronder. */ .bonScheur { height: 9px; background: linear-gradient(-45deg, var(--bon) 50%, transparent 51%) 0 0 / 14px 9px repeat-x, linear-gradient(45deg, var(--bon) 50%, transparent 51%) 0 0 / 14px 9px repeat-x; } .bonScheur.onder { transform: scaleY(-1); } .bonHoofd { font-family: var(--bonletter); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dof); text-align: center; padding: 16px 0 4px; } .bonZaak { font-family: var(--kop); font-weight: 800; font-size: 17px; letter-spacing: -.02em; text-align: center; padding-bottom: 12px; border-bottom: 1px dashed #cdc7b5; margin-bottom: 4px; } .mandLijst { list-style: none; margin: 0; padding: 0; } .mandRegel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed #ded8c6; } .mandRegel:last-child { border-bottom: 0; } .mandAantal { font-family: var(--bonletter); font-size: 13px; font-weight: 700; color: var(--dof); } .mandNaam { font-weight: 500; font-size: 15px; } .mandExtra { color: var(--dof); font-size: 12.5px; margin-top: 2px; } .mandPrijs { font-family: var(--bonletter); font-size: 14px; font-weight: 700; white-space: nowrap; } .mandKnoppen { display: flex; align-items: center; gap: 12px; margin-top: 7px; } .mandWeg { background: none; border: 0; color: var(--zacht); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 3px 0; } .telling { margin: 4px 0 0; padding-top: 10px; border-top: 3px double var(--inkt); } .telRegel { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-family: var(--bonletter); font-size: 12.5px; letter-spacing: .02em; } .telRegel .telNaam { flex: none; text-transform: uppercase; color: var(--dof); } .telRegel .telVul { flex: 1; border-bottom: 1px dotted #cdc7b5; transform: translateY(-3px); min-width: 16px; } .telRegel .telBedrag { flex: none; font-weight: 700; } .telRegel.telTotaal { font-size: 15px; padding: 8px 0 2px; } .telRegel.telTotaal .telNaam { color: var(--inkt); font-weight: 700; } .telRegel.telTotaal .telBedrag { font-family: var(--kop); font-size: 22px; font-weight: 800; letter-spacing: -.03em; } .telRegel.telKorting .telBedrag { color: var(--goed); } .bonVoet { font-family: var(--bonletter); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); text-align: center; padding: 14px 0 16px; } /* De kortingscode hoort niet naast de bestelknop om aandacht te vechten. Achter één regel tekst. */ .uitklap { margin: 16px 0 0; } .uitklap summary { cursor: pointer; color: var(--dof); font-size: 13.5px; list-style: none; } .uitklap summary::-webkit-details-marker { display: none; } .uitklap summary::before { content: '+ '; font-family: var(--bonletter); } .uitklap[open] summary::before { content: '– '; } .uitklap .veld { margin-top: 10px; } /* ============================== formulier ============================== */ .veld { margin-bottom: 14px; } .veld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--inkt); } .veld .bij { font-weight: 400; color: var(--zacht); } .invoer { width: 100%; padding: 12px 13px; border-radius: var(--rondKlein); border: 1.5px solid var(--lijn); background: #fff; font-size: 16px; } .invoer:focus { border-color: var(--inkt); outline: none; } .veldRij { display: grid; gap: 12px; } @media (min-width: 560px) { .veldRij { grid-template-columns: 1fr 1fr; } } .honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } form > .knop, .blok + .knop { margin-top: 24px; } .knop { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 18px; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font-family: var(--kop); font-size: 16px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; text-decoration: none; } .knop:hover { background: var(--accentDonker); } .knop:disabled { background: var(--zacht); cursor: default; } .knop.stil { background: none; color: var(--inkt); border: 1.5px solid var(--lijn); } .knop.stil:hover { border-color: var(--inkt); background: none; } /* Op het afrekenscherm dezelfde structuur als op de kaart: een kopje op een regel, en daaronder de velden. Geen dozen -- die zetten alles op afstand en maken het formulier langer dan het is. */ .blokKop { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px; font-family: var(--kop); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .blokKop::after { content: ''; flex: 1; height: 1px; background: var(--lijn); } .blok { margin-bottom: 4px; } .kaartBlok { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 16px; margin: 14px 0; background: #fff; } /* ============================== kalender (dagkeuze afrekenen, >10 dagen) ============================== * De