/* ========================================================================= WaysBusiness — Design System Wit canvas, donker-navy primair, goud accent. Inter + JetBrains Mono. Pas de :root-tokens hieronder aan voor je eigen merk — de componenten (buttons, cards, forms, tables, chips) rekenen alleen op de tokens. ========================================================================= */ /* Fonts zijn self-hosted: includes/fonts/*.woff2 + fonts.css, geladen in de layout-head (geen extern font-CDN — GDPR-proof en past binnen CSP font-src 'self'). */ /* Tokens (:root) staan in tokens.css, de ene bron; elke layout laadt dat bestand vóór dit bestand. */ /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] uit het UA-stylesheet verliest van elke author-declaratie met display (.badge { display: inline-flex } toonde de zijpaneel-badge op ELKE regel; interne review dertiende ronde). Een reset met !important wint altijd. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: var(--canvas); color: var(--ink); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } h1, h2, h3, h4, p { margin: 0; } ::selection { background: var(--primary-light); color: var(--ink); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); } /* Skip-to-content link: off-screen tot toetsenbord-focus (WCAG 2.4.1 Bypass Blocks). */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font: 600 14px/1 var(--font-sans); text-decoration: none; } .skip-link:focus { left: 0; } .mono { font-family: var(--font-mono); } .lead { font: 400 18px/1.6 var(--font-sans); color: var(--body); } .muted { color: var(--muted); } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; cursor: pointer; border-radius: var(--r-sm); font: 600 15px/1 var(--font-sans); height: 40px; padding: 0 18px; transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--elev-brand); } .btn--primary:hover { background: var(--primary-hover); } .btn--secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); } .btn--secondary:hover { background: var(--soft); border-color: var(--hairline-strong); } .btn--ghost { background: transparent; color: var(--ink); box-shadow: none; } .btn--ghost:hover { background: var(--soft); } .btn--block { width: 100%; } .btn--sm { height: 36px; padding: 0 14px; font-size: 13px; } .btn svg { width: 18px; height: 18px; } .btn--sm svg { width: 16px; height: 16px; } /* ===== Logo ===== */ .logo { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } .logo__word { font: 700 19px/1 var(--font-sans); letter-spacing: -.4px; color: var(--ink); } .logo__word b { color: var(--accent); font-weight: 700; } /* ===== Badges / pills ===== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font: 600 11px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; } .badge--primary { background: var(--primary-light); color: var(--primary); } .badge--accent { background: var(--accent); color: var(--ink); } .badge--success { background: var(--success-light); color: var(--success); } .badge--soft-accent { background: var(--accent-light); color: var(--accent-deep); } /* Elfde review (belangrijk 10): de varianten die acht views als inline style bouwden; contrast per paar getest (CssTokensTest). */ .badge--warning { background: var(--warning-light); color: var(--warning); } .badge--error { background: var(--error-light); color: var(--error); } .badge--info { background: var(--info-light); color: var(--info); } .badge--soft { background: var(--soft); color: var(--body); } .badge--muted { background: var(--soft); color: var(--muted-soft); } .badge .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; } /* ===== Status chips ===== */ .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font: 600 11px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; } .status .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; } .status--sent { background: var(--success-light); color: var(--success); } .status--pending { background: var(--warning-light); color: var(--warning); } .status--pending .dot { animation: if-pulse 1.1s ease infinite; } .status--error { background: var(--error-light); color: var(--error); } .status--active { background: var(--success-light); color: var(--success); } .status--trial { background: var(--info-light); color: var(--info); } .status--paused { background: var(--medium); color: var(--muted-soft); } /* ===== Cards ===== */ .card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 24px; } .card--hover { transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base); } .card--hover:hover { box-shadow: var(--elev-hover); border-color: var(--hairline-strong); transform: translateY(-2px); } /* ===== Nav (marketing) ===== */ .nav { position: sticky; top: 0; z-index: 50; background: var(--dark-raise-3); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hairline); } .lang-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--hairline); border-radius: var(--r-pill); } .lang-toggle button { border: 0; background: transparent; cursor: pointer; padding: 4px 11px; border-radius: var(--r-pill); font: 500 13px/1.25 var(--font-sans); color: var(--muted); transition: all var(--t-base); } .lang-toggle button.on { background: var(--primary-light); color: var(--primary); } /* ===== Hero ===== */ .hero { position: relative; overflow: hidden; } .hero h1 { margin: 0 0 18px; max-width: 600px; } .hero .lead { max-width: 520px; margin-bottom: 28px; } .step { position: relative; padding: 26px; } .step h3 { margin-bottom: 8px; } .step p { font: 400 14px/1.55 var(--font-sans); color: var(--body); } .faq { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px 22px; cursor: pointer; transition: border-color var(--t-base); } .faq.open { border-color: var(--hairline-strong); } /* ===== Footer ===== */ .footer { background: var(--soft); border-top: 1px solid var(--hairline); } /* ========================================================================= AUTH (login / signup) ========================================================================= */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .auth__switch { text-align: center; margin-top: 22px; font: 400 14px/1.4 var(--font-sans); color: var(--muted); } .auth__switch a { color: var(--primary); font-weight: 600; cursor: pointer; } /* ===== Forms ===== */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .field__label { font: 600 13px/1.4 var(--font-sans); color: var(--ink); display: flex; justify-content: space-between; align-items: center; } .field__label a { font: 500 12px/1 var(--font-sans); color: var(--primary); cursor: pointer; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap > svg { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--muted-soft); pointer-events: none; } .input-wrap.has-icon .input { padding-left: 42px; } .input { width: 100%; height: 44px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink); font: 400 15px/1 var(--font-sans); padding: 0 13px; outline: none; transition: border-color var(--t-base), box-shadow var(--t-base); } .input::placeholder { color: var(--muted-soft); } .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .input.error { border-color: var(--error); } /* Rollback van een winkelwagen-mutatie (shop.js): de stepper-input heeft geen .input-klasse, dus een eigen anker. */ .qty-step input.error { box-shadow: inset 0 0 0 2px var(--error); } .input.error:focus { box-shadow: 0 0 0 3px var(--error-light); } textarea.input { height: auto; min-height: 96px; padding: 11px 13px; resize: vertical; } select.input { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; } .field.invalid .input { border-color: var(--error); } /* ========================================================================= ONBOARDING ========================================================================= */ .ob { min-height: 100vh; background: var(--soft); display: flex; flex-direction: column; } .ob h2 { font: 700 24px/1.25 var(--font-sans); letter-spacing: -.4px; margin-bottom: 8px; } /* ========================================================================= APP SHELL ========================================================================= */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--dark); padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar__nav { display: flex; flex-direction: column; gap: 3px; } .sidebar__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); font: 500 14px/1 var(--font-sans); color: var(--on-dark-soft); cursor: pointer; transition: background var(--t-base), color var(--t-base); } /* Review belangrijk 16: BINNENKORT-items zijn geen knoppen; geen pointer/hover-illusie. */ .sidebar__item[aria-disabled="true"] { cursor: default; pointer-events: none; } /* Mobiel-only items (Instellingen, Uitloggen): desktop heeft ze in de topbar-dropdowns */ .sidebar__item--mobile { display: none; } .sidebar__item svg { width: 20px; height: 20px; } .sidebar__item:hover { background: var(--dark-raise-1); color: var(--on-primary); } .sidebar__item.active { background: var(--accent); color: var(--ink); } .sidebar__section { font: 600 11px/1 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: var(--on-dark-soft); padding: 8px 12px; margin-top: 16px; } .sidebar__foot { margin-top: auto; } .sidebar__user { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--dark-raise-1); } .sidebar__user .avatar { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--primary); display: grid; place-items: center; font: 600 13px/1 var(--font-sans); color: var(--on-primary); flex-shrink: 0; } .sidebar__user .name { font: 600 13px/1.3 var(--font-sans); color: var(--on-primary); } .sidebar__user .plan { font: 400 11px/1.3 var(--font-sans); color: var(--on-dark-soft); } .sidebar__user .out { margin-left: auto; color: var(--on-dark-soft); cursor: pointer; display: grid; place-items: center; } .sidebar__user .out svg { width: 18px; height: 18px; } .sidebar__me { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; cursor: pointer; } .sidebar__me:hover .name { text-decoration: underline; } .main { display: flex; flex-direction: column; min-width: 0; background: var(--soft); } .topbar { background: var(--canvas); border-bottom: 1px solid var(--hairline); padding: 0 32px; height: var(--nav-h); display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 20; } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .topbar__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--success-light); color: var(--success); font: 600 12px/1 var(--font-sans); } .topbar__live .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--success); animation: if-pulse 1.4s ease infinite; } .topbar__icon { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--canvas); display: grid; place-items: center; color: var(--muted); cursor: pointer; } .topbar__icon svg { width: 19px; height: 19px; } /* Hamburger (alleen mobiel zichtbaar) + scrim achter het uitschuifpaneel */ .topbar__burger { display: none; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink); cursor: pointer; } .topbar__burger svg { width: 22px; height: 22px; } .topbar__logo { display: none; align-items: center; gap: 8px; } .app__scrim { display: none; position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 90; } .page { padding: 32px; max-width: 1280px; width: 100%; } .page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; } .page__title { font: 700 26px/1.2 var(--font-sans); letter-spacing: -.5px; } .page__sub { font: 400 15px/1.5 var(--font-sans); color: var(--muted); margin-top: 5px; } /* KPI cards */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; } .kpi { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 22px; } .panel { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); } .panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hairline); } .panel__title { font: 600 15px/1.3 var(--font-sans); color: var(--ink); } /* ========================================================================= TABLES ========================================================================= */ .table-wrap { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; } .table { width: 100%; border-collapse: collapse; } .table thead th { text-align: left; font: 600 11px/1.4 var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); padding: 13px 18px; background: var(--soft); border-bottom: 1px solid var(--hairline-strong); white-space: nowrap; } .table thead th.right, .table td.right { text-align: right; } .table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--hairline); font: 400 14px/1.4 var(--font-sans); color: var(--body); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background var(--t-base); } .table tbody tr:hover { background: var(--soft); } .table .t-mono { font-family: var(--font-mono); color: var(--ink); font-size: 13px; } .set-tab { padding: 11px 16px; border: 0; background: transparent; cursor: pointer; font: 500 14px/1 var(--font-sans); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-base), border-color var(--t-base); } .set-tab:hover { color: var(--ink); } .set-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .set-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 28px; max-width: 640px; margin-bottom: 18px; } .set-card h3 { font: 600 17px/1.3 var(--font-sans); margin-bottom: 4px; } .set-card .desc { font: 400 14px/1.5 var(--font-sans); color: var(--muted); margin-bottom: 22px; } .set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); } .set-row:last-of-type { border-bottom: 0; } .set-row__info .t { font: 600 14px/1.3 var(--font-sans); color: var(--ink); } .set-row__info .d { font: 400 13px/1.4 var(--font-sans); color: var(--muted); margin-top: 3px; } /* Hele rij klikbaar in admin-lijsten (uniform met aanvragen); shell.js negeert klikken op knoppen/links/formulieren binnen de rij. */ .row-nav { cursor: pointer; } .row-nav:hover { background: var(--soft); } /* tabelrij-link (admin-lijsten): kleurt bij hover naar primary; CSP verbiedt inline handlers */ .rowlink { color: var(--ink); text-decoration: none; transition: color var(--t-base); } .rowlink:hover { color: var(--primary); } /* toggle switch */ .switch { position: relative; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--hairline-strong); cursor: pointer; transition: background var(--t-base); flex-shrink: 0; border: 0; padding: 0; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--canvas); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--t-base); } .switch.on { background: var(--primary); } .switch.on::after { transform: translateX(18px); } .btn--google { background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink); box-shadow: none; } .btn--google:hover { background: var(--soft); border-color: var(--hairline-strong); } .btn--google svg { width: 18px; height: 18px; } .auth__divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--muted-soft); font: 500 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; } .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } /* ========================================================================= ANIMATIONS + UTIL ========================================================================= */ @keyframes if-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } } @keyframes if-toast { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hidden { display: none !important; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 980px) { .auth { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr 1fr; } /* App-shell: één kolom; de sidebar wordt een uitschuifbaar paneel (drawer) */ .app { grid-template-columns: 1fr; } .topbar__burger { display: inline-grid; } /* Bedrijfs- en persoonsmenu zitten op mobiel in het hamburger-menu */ .topbar .topbar__dd { display: none; } .sidebar__item--mobile { display: flex; } .sidebar { position: fixed; top: 0; left: 0; z-index: 100; width: 264px; max-width: 86vw; height: 100vh; height: 100dvh; transform: translateX(-100%); transition: transform var(--t-slow); overflow-y: auto; } /* Schaduw alleen als de drawer open is: dicht lekte hij als donkere waas het scherm in */ .app.nav-open .sidebar { transform: translateX(0); box-shadow: var(--elev-modal); } .app.nav-open .app__scrim { display: block; } /* brede tabel scrollt binnen z'n kaart i.p.v. de pagina te verbreden */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 600px) { .kpi-grid { grid-template-columns: 1fr; } .set-card { padding: 24px; } /* App-shell op smal scherm: compactere topbar/pagina, zoekbalk verbergen */ .topbar { padding: 0 14px; gap: 12px; } /* Catalogus-mobielregels staan ONDERAAN dit bestand: ze moeten in de cascade NA de .prod-*-basisdefinities komen, anders winnen die. */ /* 'Live'-badge + taalschakelaar weg; logo gecentreerd in de balk */ .topbar__live, .topbar .lang-toggle { display: none; } .topbar__logo { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); } .page { padding: 20px 16px; } .page__head { margin-bottom: 20px; } } /* ===== Workspace-switcher (topbar) ===== */ .ws-switch { position: relative; } .ws-switch__btn { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--canvas); cursor: pointer; max-width: 260px; } .ws-switch__btn:hover { background: var(--soft); } .ws-switch__logo { width: 26px; height: 26px; border-radius: 7px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 700 12px/1 var(--font-sans); flex-shrink: 0; } .ws-switch__name { font: 600 14px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-switch__btn svg { color: var(--muted); flex-shrink: 0; } .ws-switch__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 264px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--elev-card); padding: 8px; z-index: 80; display: none; } .ws-switch.open .ws-switch__menu { display: block; } .ws-switch__label { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 8px 10px 6px; } .ws-switch__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; } .ws-switch__item:hover { background: var(--soft); } .ws-switch__item.on { background: var(--primary-light); } .ws-switch__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ws-switch__iname { font: 600 14px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ws-switch__plan { font: 500 12px/1.2 var(--font-sans); color: var(--muted); text-transform: capitalize; } .ws-switch__check { flex-shrink: 0; color: var(--success); } /* Workspace-switcher in de (donkere) sidebar */ .ws-switch--side { margin: 6px 0 14px; } .ws-switch--side .ws-switch__btn { width: 100%; background: var(--dark-raise-1); border-color: var(--dark-line); } .ws-switch--side .ws-switch__btn:hover { background: var(--dark-raise-2); } .ws-switch--side .ws-switch__name { color: var(--on-primary); flex: 1; text-align: left; } .ws-switch--side .ws-switch__btn > svg { color: var(--on-dark-soft); margin-left: auto; } .ws-switch--side .ws-switch__menu { left: 0; right: 0; min-width: 0; } /* 6-vakjes OTP-invoer (2FA) */ .otp { display: flex; gap: 8px; } .otp__box { width: 44px; height: 52px; text-align: center; font: 600 22px/1 var(--font-mono); border: 1px solid var(--hairline); border-radius: 10px; background: var(--canvas); color: var(--ink); } .otp__box:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* Toegankelijkheid: respecteer "verminder beweging" — animaties/transities vrijwel uit (review #41 a11y) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Flash/alert-componenten (her-audit #6): fout en succes visueel duidelijk onderscheiden. Werd nergens gedefinieerd → alle flash/foutmeldingen renderden kaal + identiek (login/2FA/reset). */ .alert { padding: 11px 14px; border-radius: var(--r-sm, 8px); border: 1px solid transparent; font: 500 13.5px/1.45 var(--font-sans, system-ui, sans-serif); margin-bottom: 14px; } /* Op de tokens (tiende review, belangrijk 6): een tokenbijstelling neemt de alerts vanzelf mee; contrast door CssTokensTest geborgd. */ .alert--success { background: var(--success-light); border-color: var(--success); color: var(--success); } .alert--warning { background: var(--warning-light); border-color: var(--warning); color: var(--warning); } .alert--error { background: var(--error-light); border-color: var(--error); color: var(--error); } /* Meldingen-dropdown (verplaatst uit layouts/App.cfm, her-audit r7 #6), volledig op tokens (elfde review: de "letterlijke InvoicePilot-waarden" van hieronder zijn vervangen door --hairline/--soft/--medium/--body). */ .notif{ position:relative; display:inline-flex } .notif__badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--error); color:var(--on-primary); font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--canvas) } .notif__panel{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:88vw; background:var(--canvas); border:1px solid var(--hairline); border-radius:12px; box-shadow:0 14px 36px rgba(20,24,31,.18); z-index:60; overflow:hidden } .notif__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--hairline); font-weight:700; font-size:13px; color:var(--ink) } .notif__readall{ border:0; background:none; color:var(--primary); font-size:12px; font-weight:600; cursor:pointer } .notif__list{ max-height:380px; overflow:auto } .notif__item{ display:block; width:100%; text-align:left; border:0; background:none; padding:11px 14px; border-bottom:1px solid var(--hairline); cursor:pointer; border-left:3px solid transparent } .notif__item:hover{ background:var(--soft) } .notif__item.unread{ background:var(--medium) } .notif__item.sev-warning{ border-left-color:var(--accent) } .notif__item.sev-critical{ border-left-color:var(--error) } .notif__item .t{ font-weight:600; font-size:13px; color:var(--ink); margin-bottom:2px } .notif__item .b{ font-size:12px; color:var(--muted); line-height:1.45 } .notif__item .ago{ font-size:11px; color:var(--muted-soft); margin-top:4px } /* Unread (her-audit r8 #7): niet-kleur-indicator (leading dot, naast de achtergrond — WCAG 1.4.1) + iets donkerder tekst zodat .b/.ago op de getinte --primary-light-achtergrond ≥4.5:1 contrast houden (WCAG AA). */ .notif__item.unread .t::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--accent); vertical-align:middle } .notif__item.unread .b{ color:var(--body) } .notif__item.unread .ago{ color:var(--body) } /* op de getinte achtergrond >= 4,5:1 (her-audit r9: --muted bleef op 4,3:1) */ .notif__empty{ padding:26px 14px; text-align:center; color:var(--muted-soft); font-size:13px } /* Screen-reader-only (visueel verborgen, wél voorgelezen) — o.a. de "Ongelezen"-prefix (her-audit r8 #7). */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } /* Generiek wachtwoord-tonen/verbergen (oog-icoon) — werkt op elk veld in een .pw-field met pw-toggle.js. Tegen typefout-uitsluiting bij inloggen/wijzigen/resetten (NIST 800-63B: tonen i.p.v. 2× intypen). */ .pw-field{ position:relative; } .pw-field > input{ padding-right:42px; } .pw-field > button[data-pw-toggle]{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted-soft); cursor:pointer; padding:6px; display:grid; place-items:center; border-radius:8px; line-height:0; } .pw-field > button[data-pw-toggle]:hover{ color:var(--body); } .pw-field > button[data-pw-toggle]:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; } /* ========================================================================= WAYS-portaal: gecentreerde login (docs/design/WAYS-Portal.dc.html, isLogin) ========================================================================= */ .pauth { min-height: 100vh; margin: 0; background: var(--soft); display: flex; align-items: center; justify-content: center; padding: 24px; } .pauth__wrap { width: 420px; max-width: 100%; animation: pauthIn .3s ease both; } @keyframes pauthIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pauth__head { text-align: center; margin-bottom: 28px; } .pauth__logo { font: 800 28px/1 var(--font-sans); letter-spacing: -.4px; color: var(--ink); } .pauth__logo em { font-style: normal; color: var(--accent); } .pauth__sub { font: 400 14px/1.5 var(--font-sans); color: var(--muted); margin-top: 8px; } .pauth__card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--elev-card); padding: 32px; } .pauth__card h1 { font: 600 20px/1.35 var(--font-sans); color: var(--ink); margin-bottom: 4px; } .pauth__card .sub { font: 400 14px/1.5 var(--font-sans); color: var(--muted); margin-bottom: 22px; } .pauth__foot { font: 400 13px/1.5 var(--font-sans); color: var(--muted); text-align: center; margin-top: 18px; } .pauth__foot a { color: var(--primary); font-weight: 500; } /* ========================================================================= WAYS-portaal: sidebar-aanvullingen (subtitel + BINNENKORT-badge) ========================================================================= */ .sidebar__brand { padding: 2px 8px 18px; border-bottom: 1px solid var(--dark-raise-1); margin-bottom: 14px; } .sidebar__brand .wordmark { font: 800 21px/1 var(--font-sans); letter-spacing: -.3px; color: var(--on-primary); } .sidebar__brand .wordmark em { font-style: normal; color: var(--accent); } .sidebar__brand .tagline { font: 400 13px/1.4 var(--font-sans); color: var(--on-dark-soft); margin-top: 5px; } .sidebar__soon { margin-left: auto; font: 600 9px/1 var(--font-sans); letter-spacing: .5px; padding: 3px 6px; border-radius: var(--r-pill); background: var(--dark-raise-2); color: var(--on-dark-soft); } /* Admin-sidebar: aanvraag-teller (accent-badge per design) */ .sidebar__count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--font-sans); } /* Taal-schakelaar NL/EN voor portaal (licht thema; de donkere .ws-lang zit in ways-site.css) */ .lang-toggle { display: inline-flex; gap: 2px; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 2px; } .lang-toggle button { border: 0; background: transparent; color: var(--muted); font: 600 11px/1 var(--font-mono); letter-spacing: 1px; cursor: pointer; padding: 5px 9px; border-radius: var(--r-pill); } .lang-toggle button:hover { color: var(--ink); } .lang-toggle button[aria-pressed="true"] { color: var(--primary); background: var(--primary-light); } .topbar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; } .topbar__chip { display: inline-flex; align-items: center; gap: 7px; max-width: 180px; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); font: 500 13px/1 var(--font-sans); color: var(--body); white-space: nowrap; } .topbar__chip span { overflow: hidden; text-overflow: ellipsis; } .topbar__user { position: relative; } .topbar__user-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; padding: 5px 8px; border-radius: var(--r-sm); font: 500 13px/1 var(--font-sans); color: var(--ink); } .topbar__user-btn:hover { background: var(--soft); } .topbar__user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__user-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--elev-hover); padding: 6px; } .topbar__user-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font: 500 13px/1.4 var(--font-sans); color: var(--body); } .topbar__user-menu a:hover { background: var(--soft); color: var(--ink); } .topbar__user-menu a.danger { color: var(--error); } .topbar__cart { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-sm); } .topbar__cart:hover { background: var(--soft); } .topbar__cart-icon { position: relative; display: inline-flex; color: var(--ink); } .topbar__cart-count { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--font-sans); } .topbar__cart-info { display: flex; flex-direction: column; line-height: 1.15; } .topbar__cart-info .t { font: 700 13px/1.2 var(--font-sans); color: var(--ink); } .topbar__cart-info .s { font: 400 10px/1.2 var(--font-sans); color: var(--muted); } /* Sidebar: uitklapgroep + subitems + hulp-blok */ .sidebar__group summary { list-style: none; cursor: pointer; } .sidebar__group summary::-webkit-details-marker { display: none; } .sidebar__chev { width: 15px; height: 15px; margin-left: auto; transition: transform var(--t-base); } .sidebar__group[open] .sidebar__chev { transform: rotate(180deg); } .sidebar__sub { display: block; padding: 8px 12px 8px 41px; border-radius: var(--r-sm); font: 500 13px/1.4 var(--font-sans); color: var(--on-dark-soft); } .sidebar__sub:hover { color: var(--on-primary); background: var(--dark-raise-1); } /* Zelfde actief-kleur als de hoofditems (oranje accent), wens Roy. */ .sidebar__sub.active { color: var(--ink); background: var(--accent); } .sidebar__help { border: 1px solid var(--dark-line); border-radius: var(--r-md); padding: 14px; } .sidebar__help-title { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--font-sans); color: var(--on-primary); } .sidebar__help-text { font: 400 12px/1.5 var(--font-sans); color: var(--on-dark-soft); margin-top: 6px; } .sidebar__help-btn { display: block; text-align: center; margin-top: 10px; border: 1px solid var(--dark-line); border-radius: var(--r-sm); padding: 8px 10px; font: 500 12px/1.2 var(--font-sans); color: var(--on-primary); } .sidebar__help-btn:hover { border-color: var(--on-primary); } /* Shop: productgrid, kaarten, stepper */ .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 20px; } .prod-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--elev-card); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--t-base); } .prod-card:hover { box-shadow: var(--elev-hover); } /* Vierkante fototegel (design WAYS-Portal): de hele foto past er altijd in (object-fit contain op volle breedte/hoogte; een vaste lage hoogte sneed foto's af). */ .prod-card__img { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--hairline); display: grid; grid-template: 100% / 100%; place-items: center; font: 800 22px/1 var(--font-sans); color: var(--muted-soft); overflow: hidden; padding: 10px; } .prod-card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--t-base); grid-area: 1 / 1; position: relative; z-index: 1; } .prod-card__img img.is-loaded { background: var(--canvas); } /* pas na het laden dekkend: tijdens het laden en na een fout blijven de initialen zichtbaar */ .prod-card__ini { grid-area: 1 / 1; } .prod-card:hover .prod-card__img img { transform: scale(1.04); } .prod-card__title { font: 600 14px/1.35 var(--font-sans); color: var(--ink); min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prod-card__meta { font: 400 12px/1.4 var(--font-sans); color: var(--muted); } .prod-card__stock { display: flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--font-sans); color: var(--body); } .prod-card__stock .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .prod-card__price { font: 700 17px/1.2 var(--font-sans); color: var(--ink); } .prod-card__price .ex { font: 400 11px/1 var(--font-sans); color: var(--muted); margin-left: 4px; } .qty-step { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); overflow: hidden; } .qty-step button { width: 34px; height: 36px; border: 0; background: var(--canvas); font: 600 16px/1 var(--font-sans); color: var(--body); cursor: pointer; } .qty-step button:hover { background: var(--soft); } .qty-step input { width: 46px; height: 36px; border: 0; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); text-align: center; font: 600 14px/1 var(--font-sans); color: var(--ink); } /* Review belangrijk 16: focus was onzichtbaar (outline none + overflow hidden clipte de ring); inset-outline blijft binnen de afgeronde rand zichtbaar. */ .qty-step input:focus-visible, .qty-step button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* Categoriebalk: één regel die horizontaal schuift (touch/trackpad), geen wrap. Scrollbar visueel verborgen; de balk blijft gewoon scrollbaar. */ /* Zoekbalk in de lijstpagina zelf (producten/bestellingen), onder titel en telling. */ .page-search { position: relative; display: flex; align-items: center; max-width: 520px; margin-top: 16px; } .page-search svg { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--muted-soft); pointer-events: none; } .page-search input { width: 100%; height: 42px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 0 40px 0 40px; font: 400 14px/1 var(--font-sans); background: var(--canvas); outline: none; transition: border-color var(--t-base), box-shadow var(--t-base); } .page-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .page-search__clear { position: absolute; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font: 600 16px/1 var(--font-sans); text-decoration: none; } .page-search__clear:hover { background: var(--soft); color: var(--ink); } /* Categorie-dropdown (design WAYS-Portal): knop + zwevend paneel met zoekveld, Alles-optie en een grid van categorieen met aantallen; gekozen categorie als pill met wis-kruisje. Zelfde patroon op mobiel (paneel wordt volle breedte). */ .cat-filter { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .cat-filter__btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline-strong); background: var(--canvas); color: var(--ink); padding: 9px 14px; border-radius: var(--r-sm); font: 500 13px/1.2 var(--font-sans); cursor: pointer; transition: border-color var(--t-base); } .cat-filter__btn:hover, .cat-filter__btn.actief { border-color: var(--primary); } .cat-filter__btn .chev { color: var(--muted); transition: transform var(--t-base); } .cat-filter__btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .cat-filter__chip { display: inline-flex; align-items: center; gap: 7px; background: var(--primary); color: var(--on-primary); padding: 7px 8px 7px 14px; border-radius: var(--r-pill); font: 600 13px/1.2 var(--font-sans); } .cat-filter__chip a { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--primary-hover); color: var(--on-primary); border-radius: 50%; text-decoration: none; font: 600 14px/1 var(--font-sans); } .cat-filter__chip a:hover { background: var(--dark); color: var(--on-primary); } .cat-filter__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: min(640px, 100%); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--elev-hover); padding: 14px; } .cat-filter__zoek { position: relative; display: flex; align-items: center; } .cat-filter__zoek svg { position: absolute; left: 12px; color: var(--muted-soft); pointer-events: none; } .cat-filter__zoek input { width: 100%; height: 38px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 0 12px 0 36px; font: 400 13px/1 var(--font-sans); outline: none; } .cat-filter__zoek input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* zelfde 3px-ring als de andere zoekvelden (elfde review) */ .cat-filter__lijst { max-height: 320px; overflow-y: auto; margin-top: 12px; } .cat-filter__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px; margin-top: 6px; } .cat-filter__optie { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font: 400 13px/1.3 var(--font-sans); color: var(--body); text-decoration: none; } .cat-filter__optie:hover { background: var(--soft); color: var(--ink); } .cat-filter__optie.on { background: var(--primary-light); color: var(--primary); font-weight: 600; } .cat-filter__optie[hidden] { display: none; } .cat-filter__optie--alles { width: 100%; font-weight: 500; color: var(--ink); } .cat-filter__groep { margin-top: 8px; } .cat-filter__groep[hidden] { display: none; } .cat-filter__hoofd { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font: 700 13px/1.3 var(--font-sans); color: var(--ink); text-decoration: none; } .cat-filter__hoofd:hover { background: var(--soft); } .cat-filter__hoofd.on { background: var(--primary-light); color: var(--primary); } .cat-filter__hoofd[hidden] { display: none; } .cat-filter__groep .cat-filter__grid { margin: 2px 0 0 12px; } .cat-filter__naam { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-filter__n { flex: none; font: 400 11px/1 var(--font-sans); color: var(--muted); } .cat-filter__leeg { font: 400 13px/1.4 var(--font-sans); color: var(--muted); padding: 14px 10px; } /* Mobiel: de blauwe pill past niet naast de knoppen (wens Roy); dan verbergt de pill zich en staat de gekozen categorie met een verwijder-regel BOVENIN het paneel. */ .cat-filter__wis { display: none; } @media (max-width: 600px) { .cat-filter__chip { display: none; } .cat-filter__wis { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font: 600 13px/1.3 var(--font-sans); text-decoration: none; margin-bottom: 8px; } .cat-filter__wis-x { flex: none; font: 600 12px/1 var(--font-sans); color: var(--on-primary); } } .cat-filter__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--font-sans); } /* Bevestigings-toast onderin (winkelwagen-feedback). */ .shop-toast { position: fixed; left: 50%; bottom: calc(26px + var(--sess-banner-h)); transform: translateX(-50%); background: var(--ink); color: var(--on-primary); font: 500 14px/1.4 var(--font-sans); padding: 12px 20px; border-radius: var(--r-pill); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); z-index: 130; max-width: 90vw; text-align: center; animation: shop-toast-in .25s ease both; transition: opacity .3s ease; } /* Eigen keyframes: if-toast eindigde op transform:translateY(0) en gooide daarmee translateX(-50%) weg, waardoor de toast op mobiel rechts buiten beeld hing (Roy 2026-09-15). */ @keyframes shop-toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } } .shop-toast.weg { opacity: 0; } /* Waarschuwingsvariant (voorraad-begrenzing): opvallend oranjerood met uitroepteken. */ .shop-toast--warn { background: var(--warning); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px var(--warning-glow); } .shop-toast__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--canvas); color: var(--warning); display: inline-flex; align-items: center; justify-content: center; font: 800 14px/1 var(--font-sans); } /* Winkelwagen-regel: desktop een rij; mobiel een grid met foto/titel/prullenbak boven en aantal + prijs eronder (de enkele rij paste niet op 400px). */ .cart-line { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); } .cart-line.is-niet-koopbaar .cart-line__foto { opacity: .5; filter: grayscale(1); } /* alleen de foto dempen: tekst en badge houden AA (interne review) */ .cart-line__foto { width: 56px; height: 56px; flex: none; font-size: 15px; padding: 6px; } /* erft padding 10 + border 1 van .prod-card__img: foto was 34 px, nu 42 px */ .cart-line__info { min-width: 0; flex: 1; } .cart-line__del { flex: none; background: none; border: none; padding: 6px; cursor: pointer; color: var(--muted-soft); display: grid; place-items: center; } .cart-line__del:hover { color: var(--error); } .cart-line__prijs { flex: none; text-align: right; min-width: 110px; } /* Tot 980px: het overzicht staat er (deels) naast of de kolom is smal; de gestapelde regel is daar ook de nette vorm (wens Roy: 745-980 was krap). */ @media (max-width: 980px) { /* Achtste review 2026-09-17: vier kolommen, de stepper (116px) spant foto+info; stukprijs en totaal elk een eigen auto-kolom. */ .cart-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; grid-template-areas: "foto info info del" "qty qty unit prijs"; row-gap: 12px; column-gap: 12px; padding: 14px 16px; } .cart-line__unit { grid-area: unit; justify-self: end; min-width: 0; align-self: center; } .cart-line__foto { grid-area: foto; } .cart-line__info { grid-area: info; } .cart-line__del { grid-area: del; align-self: start; } .cart-line .qty-step { grid-area: qty; justify-self: start; } .cart-line__prijs { grid-area: prijs; justify-self: end; min-width: 0; } } /* Filter/sorteer-zijpaneel: scrim + rechter drawer (mobiel bijna volle breedte). */ .fmodal { position: fixed; inset: 0; z-index: 90; } .fmodal__scrim { position: absolute; inset: 0; background: rgba(15, 18, 26, .45); } .fmodal__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 92%); background: var(--canvas); box-shadow: -12px 0 40px rgba(0, 0, 0, .18); display: flex; flex-direction: column; animation: fmodal-in .22s ease both; } @keyframes fmodal-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } .fmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hairline); font: 700 16px/1.3 var(--font-sans); color: var(--ink); } .fmodal__x { width: 32px; height: 32px; border: 0; background: var(--soft); border-radius: 50%; font: 600 18px/1 var(--font-sans); color: var(--muted); cursor: pointer; } .fmodal__x:hover { background: var(--hairline); color: var(--ink); } .fmodal__form { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 20px; overflow-y: auto; } .fmodal__label { display: block; font: 600 11px/1.3 var(--font-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .fmodal__checks { display: flex; flex-direction: column; gap: 12px; } .fmodal__checks label { display: flex; align-items: center; gap: 9px; font: 400 14px/1.4 var(--font-sans); color: var(--body); cursor: pointer; } .fmodal__checks input { width: 16px; height: 16px; } .fmodal__foot { margin-top: auto; display: flex; gap: 10px; padding-top: 6px; } /* Accountpagina: 2 kolommen, op smal scherm onder elkaar */ .acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 980px) { .acc-grid { grid-template-columns: 1fr; } } .shop-side { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--elev-card); padding: 20px; } .tot-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font: 400 14px/1.5 var(--font-sans); color: var(--body); } .tot-row.big { font: 700 16px/1.4 var(--font-sans); color: var(--ink); border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 12px; } .ds-box { border: 1px solid var(--primary); background: var(--primary-light); border-radius: var(--r-md); padding: 16px; } /* Bedrijfsknop als dropdown: chip-rand behouden op de button-variant */ .topbar__user-btn.topbar__chip { border: 0; background: transparent; } .topbar__user-btn.topbar__chip:hover { background: var(--soft); } /* ========================================================================= MOBIEL (na de component-definities: latere regels winnen de cascade) ========================================================================= */ /* Taalknop in het hamburger-menu; alleen op mobiel (desktop heeft hem in de topbar) */ .sidebar__lang { display: none; } .sidebar .lang-toggle { border-color: var(--dark-line); } .sidebar .lang-toggle button { color: var(--on-dark-soft); } .sidebar .lang-toggle button:hover { color: var(--on-primary); } .sidebar .lang-toggle button[aria-pressed="true"] { color: var(--on-primary); background: var(--dark-raise-2); } @media (max-width: 980px) { .sidebar__lang { display: flex; padding: 10px 12px 2px; } } @media (max-width: 600px) { /* Catalogus: altijd 2 kaarten naast elkaar (4000+ artikelen; 1 kolom scrolt eindeloos) */ .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .prod-card { padding: 12px; gap: 8px; } .prod-card__title { font-size: 13px; min-height: 35px; } .prod-card__price { font-size: 15px; } } /* Fotogalerij productdetailpagina: swipebare strip (scroll-snap) + thumbnails */ .gallery__strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--hairline); } .gallery__strip::-webkit-scrollbar { display: none; } /* grid-template 100 procent: zonder expliciete rij is de track auto-hoog en telt height:100 procent op de img niet (circulair) - de foto rendert dan op intrinsieke hoogte en wordt afgesneden (deo-bug). */ .gallery__slide { flex: 0 0 100%; scroll-snap-align: start; height: 320px; padding: 12px; display: grid; grid-template: 100% / 100%; place-items: center; overflow: hidden; } /* Expliciet volle breedte/hoogte + contain: max-height in een grid-cel liet grote foto's (bv. staande deo-packshots) buiten beeld vallen. */ .gallery__slide img { width: 100%; height: 100%; object-fit: contain; } .gallery__slide--ph { font: 800 44px/1 var(--font-sans); color: var(--muted-soft); } .gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; } .gallery__thumbs::-webkit-scrollbar { display: none; } .gallery__thumb { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--soft); overflow: hidden; cursor: pointer; display: grid; place-items: center; } .gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .gallery__thumb.on { border-color: var(--primary); } .gallery__more { display: none; } @media (max-width: 600px) { .gallery__slide { height: 240px; } } /* Productdetail desktop (design "bestellen klant deel"): verticale thumb-rail links van een grote hoofdfoto; mobiel houdt de swipe-strip met thumbs eronder. */ @media (min-width: 700px) { .gallery { display: flex; gap: 14px; align-items: flex-start; } .gallery__strip { flex: 1; min-width: 0; background: var(--canvas); border: 1px solid var(--hairline); } .gallery__slide { height: 440px; padding: 16px; } .gallery__thumbs { order: -1; flex: none; flex-direction: column; width: 76px; margin-top: 0; overflow: visible; } .gallery__thumb { width: 76px; height: 76px; background: var(--canvas); border: 1px solid var(--hairline); } .gallery__thumb.on { border: 2px solid var(--primary); } .gallery__thumbs:not(.open) .gallery__thumb--x { display: none; } .gallery__thumbs:not(.open) .gallery__more { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--canvas); cursor: pointer; font: 600 13px/1.3 var(--font-sans); color: var(--body); text-align: center; } .gallery__more:hover { border-color: var(--primary); color: var(--primary); } } /* Grotere aantal-stepper op de productdetailpagina (design). */ .qty-step--lg button { width: 42px; height: 44px; } .qty-step--lg input { width: 54px; height: 44px; } /* Statusbalk op de orderdetailpagina (portaal, 2026-09-15): vier stappen, lijnstukken tussen de bollen. Gevuld = gedaan of huidig (aria-current="step"); de lijn VOOR een gevulde stap is ook gevuld. */ .ostep { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 16px 0 0; padding: 22px 8px 18px; } .ostep__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .ostep__item + .ostep__item::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--hairline); } .ostep__item.done + .ostep__item.done::before { background: var(--primary); } .ostep__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: var(--r-pill); border: 2px solid var(--hairline); background: var(--canvas); color: transparent; display: grid; place-items: center; transition: background var(--t-base), border-color var(--t-base); } .ostep__item.done .ostep__dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .ostep__label { font: 500 14px/1.25 var(--font-sans); color: var(--muted-soft); } .ostep__item.done .ostep__label { color: var(--ink); } .ostep__item.current .ostep__label { font-weight: 600; } .ostep__sub { font: 400 12px/1.3 var(--font-sans); color: var(--muted); margin-top: -4px; } @media (max-width: 640px) { .ostep { padding: 18px 4px 14px; } .ostep__label { font-size: 12px; } .ostep__sub { font-size: 11px; } } /* Bestelstappen (winkelwagen > afrekenen > bevestiging) op de ostep-basis; nummers in open bollen. */ .ostep--co { grid-template-columns: repeat(3, 1fr); margin-top: 16px; } .ostep__nr { font: 700 12px/1 var(--font-sans); color: var(--muted-soft); } .ostep__item.done .ostep__nr { color: var(--on-primary); } /* Winkelwagenpagina: kolomkop boven de regels (zelfde flex-kolommen als .cart-line) en stukprijs-kolom. */ .cart-head { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--soft); border-bottom: 1px solid var(--hairline); font: 600 11px/1.3 var(--font-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); } .cart-head__item { flex: 1; min-width: 0; } .cart-head__qty { flex: none; width: 116px; text-align: center; } .cart-head__unit, .cart-line__unit { flex: none; min-width: 90px; text-align: right; } .cart-head__total { flex: none; min-width: 110px; text-align: right; } .cart-head__del { flex: none; width: 28px; } .cart-line__unit { font: 400 13px/1.4 var(--font-mono); color: var(--body); } /* Onder 980px is .cart-line een grid met areas (zie boven): de kolomkop hoort bij de flex-variant. Staat NA de .cart-head-regels, anders wint display:flex (zelfde specificiteit, later in het bestand). */ @media (max-width: 980px) { .cart-head { display: none; } } /* Winkelwagen-zijpaneel naast de catalogus: plakkend rechts vanaf 1180px, daaronder verborgen (topbar-badge blijft). */ .shop-with-cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } .shop-with-cart__main { min-width: 0; } .cart-panel { display: none; position: sticky; top: calc(var(--nav-h) + 20px); margin-top: 20px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--elev-card); overflow: hidden; } @media (min-width: 1180px) { .shop-with-cart { grid-template-columns: minmax(0, 1fr) 340px; } .cart-panel { display: block; } } .cart-panel__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); font: 600 15px/1.4 var(--font-sans); color: var(--ink); } .cart-panel__head svg { color: var(--primary); } .cart-panel__count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); display: inline-grid; place-items: center; font: 700 11px/1 var(--font-sans); } .cart-panel__empty { padding: 18px 16px; font: 400 14px/1.5 var(--font-sans); color: var(--muted); } .cart-panel__lines { max-height: 44vh; overflow-y: auto; } .cart-line--mini { padding: 10px 14px; gap: 12px; } .cart-line--mini .cart-line__foto { width: 44px; height: 44px; font-size: 12px; padding: 4px; } /* erfde 10px van .prod-card__img: 22 px foto in een 44 px-box, nu 34 px (border 1 telt mee) */ .cart-line--mini .cart-line__title { display: block; font: 600 13px/1.35 var(--font-sans); color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cart-line--mini .cart-line__ean { display: block; font-size: 11px; color: var(--muted); } .cart-line--mini .cart-line__prijs { min-width: 0; margin-left: auto; white-space: nowrap; } .cart-line__tot { display: block; font: 700 13px/1.3 var(--font-sans); color: var(--ink); } .cart-line__sub { display: block; font: 400 11px/1.4 var(--font-sans); color: var(--muted); } .cart-panel__tot { padding: 10px 16px 16px; border-top: 1px solid var(--hairline); } .cart-panel__tot .tot-row { padding: 5px 0; font-size: 13px; } .cart-panel__link { display: block; text-align: center; margin-top: 10px; font: 400 13px/1.4 var(--font-sans); color: var(--primary); } .cart-panel__retry { margin-left: 6px; border: 1px solid var(--hairline-strong); background: var(--canvas); border-radius: var(--r-sm); padding: 5px 10px; font: 500 12px/1.2 var(--font-sans); color: var(--ink); cursor: pointer; } /* Tweetalige beheerinhoud (banners, FAQ): de taalschakelaar zet html[lang]; EN vervangt NL als het er is. */ html[lang="en"] .tt span[lang="nl"]:has(+ span[lang="en"]) { display: none; } html[lang="en"] .tt span[lang="en"] { display: inline !important; } /* Dashboardbanners (admin > Content), Roy 2026-09-15. */ .dash-banner { display: flex; align-items: center; gap: 24px; margin-top: 22px; padding: 24px 28px; border-radius: var(--r-lg); box-shadow: var(--elev-card); } .dash-banner--primary { background: var(--primary); color: var(--on-primary); } .dash-banner--dark { background: var(--dark); color: var(--on-dark); } .dash-banner--accent { background: var(--accent); color: var(--ink); } /* wit op --accent was 2,84:1; inkt haalt 6,5:1 (elfde review, kritiek 7) */ .dash-banner--light { background: var(--primary-light); color: var(--ink); border: 1px solid var(--hairline); box-shadow: none; } .dash-banner__img { flex: none; width: 200px; aspect-ratio: 3 / 2; height: auto; object-fit: contain; border-radius: var(--r-md); background: var(--dark-raise-2); } /* vaste verhouding: geen layoutsprong (CLS) */ .dash-banner--light .dash-banner__img { background: var(--canvas); } .dash-banner__body { flex: 1; min-width: 0; } .dash-banner__title { margin: 0; font: 700 22px/1.25 var(--font-sans); letter-spacing: -.3px; } .dash-banner__text { margin: 8px 0 0; font: 400 15px/1.55 var(--font-sans); opacity: .92; max-width: 640px; white-space: pre-line; } .dash-banner__btn { margin-top: 16px; height: 40px; padding: 0 18px; background: var(--canvas); color: var(--ink); border: 0; } .dash-banner--light .dash-banner__btn { background: var(--primary); color: var(--on-primary); } @media (max-width: 640px) { .dash-banner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; } .dash-banner__img { width: 100%; max-width: 280px; } .dash-banner__title { font-size: 19px; } } /* Dashboard: recente bestellingen + snel naar. */ .dash-grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; } @media (max-width: 900px) { .dash-grid2 { grid-template-columns: 1fr; } } .dash-order { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; } .dash-order:last-child { border-bottom: 0; } .dash-order:hover { background: var(--soft); } .dash-order__nr { font-weight: 600; font-size: 13px; } .dash-order__date { font: 400 13px/1.4 var(--font-sans); color: var(--muted); } .dash-order__tot { font-size: 13px; text-align: right; min-width: 80px; } @media (max-width: 640px) { .dash-order { grid-template-columns: 1fr auto; } .dash-order__date { grid-column: 1; } } .dash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dash-quick__item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink); text-decoration: none; font: 500 14px/1.3 var(--font-sans); transition: border-color var(--t-base), background var(--t-base); } .dash-quick__item svg { color: var(--primary); flex: none; } .dash-quick__item:hover { border-color: var(--primary); background: var(--primary-light); } /* Mobiel (Roy 2026-09-15): meldingenpaneel over de volle breedte met vervaagde achtergrond; in de topbar alleen het winkelwagen-icoon met aantal (prijs en "Excl. btw" weg). */ @media (max-width: 640px) { .notif:has(.notif__panel:not([hidden]))::before { content: ""; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 59; /* onder de topbar: die blijft scherp */ background: rgba(15, 18, 26, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Volle breedte, tegen de topbar aan, geen 'venster' (Roy 2026-09-15). */ .notif__panel { position: fixed; top: var(--nav-h); left: 0; right: 0; width: auto; max-width: none; border-radius: 0 0 12px 12px; border-left: 0; border-right: 0; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); } .notif__panel:not([hidden]) { display: flex; flex-direction: column; } /* display op de open staat: anders overschrijft het [hidden] */ .notif__list { max-height: none; flex: 1; } .topbar__cart-info { display: none; } .topbar__cart { padding: 6px; } } /* ========================================================================= Admin-login, wachtwoord vergeten en reset (.adminlogin), via layout Blank. Was een