/* Slimblokje - glasthema. Panelen zijn doorschijnend met blur; daarachter liggen zachte kleurvlekken. Donker is de basis, licht komt via prefers-color-scheme of de schakelaar (data-theme op ). */ :root { --blue: #6aa6ff; --radius-xl: 24px; --radius: 18px; --radius-sm: 12px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------------------------------------------------------- donker (basis) - */ :root { color-scheme: dark; --page: #060910; --blob-1: #14b37c; /* groenige gloed linksboven */ --blob-2: #2b5ede; /* blauw rechtsboven */ --blob-3: #7a35c9; /* violet onderin */ --blob-alpha: .5; --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(255, 255, 255, .105); --glass-line: rgba(255, 255, 255, .11); --glass-line-strong: rgba(255, 255, 255, .2); --glass-highlight: rgba(255, 255, 255, .14); --glass-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 24px 48px -24px rgb(0 0 0 / .7); --text: #f2f5fb; --text-mid: #b9c3d6; --text-dim: #8592a8; --green: #37d693; --yellow: #ffc75a; --red: #ff6b78; --tint-green: rgba(55, 214, 147, .13); --tint-yellow: rgba(255, 199, 90, .13); --tint-red: rgba(255, 107, 120, .13); --grid: rgba(255, 255, 255, .07); --night-band: rgba(2, 6, 23, .42); --code-bg: rgba(0, 0, 0, .35); } /* ------------------------------------------------------------------ licht - */ :root[data-theme="light"] { color-scheme: light; --page: #eef1f8; --blob-1: #7fd9b8; --blob-2: #a5c0f8; --blob-3: #d3b6f3; --blob-alpha: .85; --glass: rgba(255, 255, 255, .55); --glass-strong: rgba(255, 255, 255, .72); --glass-line: rgba(255, 255, 255, .7); --glass-line-strong: rgba(16, 22, 37, .14); --glass-highlight: rgba(255, 255, 255, .9); --glass-shadow: 0 1px 2px rgb(16 22 37 / .05), 0 22px 44px -26px rgb(16 22 37 / .35); --text: #101625; --text-mid: #3f4c66; --text-dim: #6b7893; --green: #0f9663; --yellow: #a9700a; --red: #d23b4a; --tint-green: rgba(15, 150, 99, .11); --tint-yellow: rgba(169, 112, 10, .11); --tint-red: rgba(210, 59, 74, .11); --grid: rgba(16, 22, 37, .08); --night-band: rgba(16, 22, 37, .075); --code-bg: rgba(16, 22, 37, .9); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --page: #eef1f8; --blob-1: #7fd9b8; --blob-2: #a5c0f8; --blob-3: #d3b6f3; --blob-alpha: .85; --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .78); --glass-line: rgba(255, 255, 255, .75); --glass-line-strong: rgba(16, 22, 37, .14); --glass-highlight: rgba(255, 255, 255, .9); --glass-shadow: 0 1px 2px rgb(16 22 37 / .05), 0 22px 44px -26px rgb(16 22 37 / .35); --text: #101625; --text-mid: #3f4c66; --text-dim: #6b7893; --green: #0f9663; --yellow: #a9700a; --red: #d23b4a; --tint-green: rgba(15, 150, 99, .11); --tint-yellow: rgba(169, 112, 10, .11); --tint-red: rgba(210, 59, 74, .11); --grid: rgba(16, 22, 37, .08); --night-band: rgba(16, 22, 37, .075); --code-bg: rgba(16, 22, 37, .9); } } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--page); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* De kleurvlekken achter het glas. Vast op hun plek, dus het glas laat bij scrollen steeds een andere kleur door. */ body::before { content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none; opacity: var(--blob-alpha); background: radial-gradient(46vw 42vw at 12% 10%, var(--blob-1) 0%, transparent 58%), radial-gradient(50vw 46vw at 82% 22%, var(--blob-2) 0%, transparent 60%), radial-gradient(54vw 48vw at 46% 96%, var(--blob-3) 0%, transparent 62%); filter: blur(40px) saturate(120%); } h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -0.022em; } a { color: inherit; } button { font: inherit; } dl { margin: 0; } .tnum { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ glasbasis --- */ .glass, .card, .hero, .login-card, .topbar, .btn, .chip, .window-col, .advice-icon { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } .card, .hero, .login-card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight); } /* ------------------------------------------------------------------ balk -- */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 13px clamp(16px, 4vw, 40px); background: var(--glass); border-bottom: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 660; letter-spacing: -0.024em; text-decoration: none; font-size: 16px; } .brand svg { width: 27px; height: 27px; flex: none; } .brand small { font-weight: 500; color: var(--text-dim); letter-spacing: 0; font-size: 12.5px; border-left: 1px solid var(--glass-line-strong); padding-left: 10px; } .topbar nav { margin-left: auto; display: flex; align-items: center; gap: 8px; } .topbar .who { color: var(--text-dim); font-size: 13px; margin-right: 4px; } .topbar .who strong { color: var(--text-mid); font-weight: 600; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--text-mid); text-decoration: none; font-size: 13px; font-weight: 560; transition: color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), background .18s var(--ease); } .btn:hover { color: var(--text); border-color: var(--glass-line-strong); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .5; cursor: progress; transform: none; } .btn svg { width: 15px; height: 15px; } .btn-icon { padding: 8px; border-radius: 12px; } .btn-primary { width: 100%; justify-content: center; padding: 12px 18px; border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--text) 0%, color-mix(in oklab, var(--text) 88%, var(--page)) 100%); color: var(--page); border-color: transparent; font-size: 14.5px; font-weight: 650; } .btn-primary:hover { color: var(--page); opacity: .92; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; } /* ---------------------------------------------------------------- layout -- */ main { max-width: 1180px; margin: 0 auto; padding: clamp(18px, 3vw, 30px) clamp(16px, 4vw, 40px) 60px; display: grid; gap: clamp(14px, 1.6vw, 20px); } .card { padding: clamp(18px, 2vw, 24px); } .card > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; } .card h2 { font-size: 15px; } .card header p { margin: 0; color: var(--text-dim); font-size: 13px; } .card header .spacer { margin-left: auto; } .eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .grid-2 { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* ------------------------------------------------------------- statuskop -- */ .hero { position: relative; overflow: hidden; display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: clamp(22px, 3vw, 34px); border-radius: var(--radius-xl); } /* Kleurwaas in het glas zelf, niet als harde balk. */ .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 140% at 0% 0%, var(--hero-tint, transparent) 0%, transparent 68%); } .hero > * { position: relative; } .hero[data-color="green"] { --hero-color: var(--green); --hero-tint: var(--tint-green); } .hero[data-color="yellow"] { --hero-color: var(--yellow); --hero-tint: var(--tint-yellow); } .hero[data-color="red"] { --hero-color: var(--red); --hero-tint: var(--tint-red); } .verdict { /* De kop draagt sinds de hernoeming een hele zin ("Meest gunstige prijs vandaag") in plaats van een woord, dus iets kleiner en met de stip uitgelijnd op de eerste regel. */ display: flex; align-items: flex-start; gap: 16px; font-size: clamp(26px, 3.8vw, 38px); line-height: 1.12; letter-spacing: -0.035em; color: var(--hero-color, var(--text)); } .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: .42em; background: var(--hero-color, var(--text-dim)); box-shadow: 0 0 0 6px color-mix(in oklab, var(--hero-color, var(--text-dim)) 18%, transparent), 0 0 22px 2px color-mix(in oklab, var(--hero-color, var(--text-dim)) 55%, transparent); } .hero .reason { margin: 14px 0 0; color: var(--text-mid); max-width: 48ch; font-size: 14.5px; } .hero .meta { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 560; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--text-mid); } .chip.warn { color: var(--yellow); border-color: color-mix(in oklab, var(--yellow) 40%, transparent); } .chip.green { color: var(--green); border-color: color-mix(in oklab, var(--green) 40%, transparent); } .price-panel { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(20px, 3vw, 34px); border-left: 1px solid var(--glass-line); } .price-now { font-size: clamp(30px, 4.2vw, 40px); font-weight: 640; letter-spacing: -0.045em; line-height: 1.1; } .price-now span { font-size: 16px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; } .price-sub { color: var(--text-dim); font-size: 13px; margin-top: 5px; display: flex; align-items: center; gap: 8px; } .price-now sup { font-size: .48em; font-weight: 600; color: var(--text-dim); margin-left: 2px; } /* Het informatiebolletje achter de prijs: klein, maar groot genoeg voor een duim. */ .bubble { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--glass-strong); border: 1px solid var(--glass-line-strong); color: var(--text-mid); font: inherit; font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .bubble:hover { color: var(--text); border-color: var(--text-dim); } .note-box { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.55; color: var(--text-mid); background: var(--glass-strong); border: 1px solid var(--glass-line); } .note-box b { color: var(--text); } .color-key { display: grid; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--text-mid); } .color-key span { display: flex; align-items: center; gap: 9px; } .color-key i { width: 10px; height: 10px; border-radius: 50%; flex: none; } .color-key i.g { background: var(--green); } .color-key i.y { background: var(--yellow); } .color-key i.r { background: var(--red); } /* Meter: waar staat dit uur binnen zijn eigen venster? */ .meter { margin-top: 22px; } .meter-track { position: relative; height: 9px; border-radius: 999px; background: linear-gradient(to right, var(--green) 0 33%, var(--yellow) 33% 67%, var(--red) 67% 100%); box-shadow: inset 0 1px 2px rgb(0 0 0 / .2); opacity: .9; } .meter-needle { position: absolute; top: -4px; width: 4px; height: 17px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 2.5px var(--page), 0 2px 6px rgb(0 0 0 / .4); transform: translateX(-50%); transition: left .5s var(--ease); } .meter-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); } /* ----------------------------------------------------------- kaartinhoud -- */ .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; } .stat + .stat { border-top: 1px solid var(--grid); } .stat dt { color: var(--text-dim); font-size: 13px; } .stat dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .advice-line { display: flex; gap: 15px; align-items: flex-start; } .advice-icon { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--text-mid); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); } .advice-icon svg { width: 21px; height: 21px; } .advice-icon.go { color: var(--green); background: var(--tint-green); border-color: color-mix(in oklab, var(--green) 35%, transparent); } .advice-icon.wait { color: var(--yellow); background: var(--tint-yellow); border-color: color-mix(in oklab, var(--yellow) 35%, transparent); } .advice-headline { font-size: 18px; font-weight: 630; letter-spacing: -0.02em; } .advice-sub { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; } .window-cols { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .window-col { padding: 15px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); } .window-col h3 { font-size: 13px; display: flex; align-items: center; gap: 7px; } .window-col h3 svg { width: 14px; height: 14px; color: var(--text-dim); } .window-col .avg { font-size: 23px; font-weight: 640; letter-spacing: -0.035em; margin-top: 6px; font-variant-numeric: tabular-nums; } .window-col .range { font-size: 12.5px; color: var(--text-dim); } .bars { display: flex; gap: 3px; margin-top: 11px; height: 5px; } .bars i { flex: 1; border-radius: 3px; background: var(--glass-line-strong); } .bars i[data-c="green"] { background: var(--green); } .bars i[data-c="yellow"] { background: var(--yellow); } .bars i[data-c="red"] { background: var(--red); } /* --------------------------------------------------------------- grafiek -- */ .chart-wrap { position: relative; } #chart { width: 100%; display: block; overflow: visible; } #chart .bar { transition: opacity .12s; cursor: crosshair; } #chart .bar:hover { opacity: .7; } #chart text { fill: var(--text-dim); font-size: 10.5px; font-family: var(--sans); } #chart .grid-line { stroke: var(--grid); stroke-width: 1; } #chart .zero-line { stroke: var(--glass-line-strong); stroke-width: 1; stroke-dasharray: 3 3; } #chart .night { fill: var(--night-band); } #chart .now-line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .75; } #chart .now-label { fill: var(--text); font-weight: 650; } #chart .day-label { fill: var(--text-mid); font-weight: 620; font-size: 11px; } #chart .bar.past { opacity: .38; } #chart .bar.current { stroke: var(--text); stroke-width: 1.5; } .tooltip { position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -100%); background: rgba(10, 14, 24, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #f2f5fb; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 14px 30px -10px rgb(0 0 0 / .6); transition: opacity .12s; white-space: nowrap; z-index: 5; } .tooltip b { font-size: 13.5px; } .tooltip .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; } .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .legend i.g { background: var(--green); } .legend i.y { background: var(--yellow); } .legend i.r { background: var(--red); } .legend i.n { background: var(--night-band); border: 1px solid var(--glass-line-strong); box-shadow: inset 0 0 0 3px var(--glass); } /* ------------------------------------------------------------------- api -- */ pre.json { margin: 0; padding: 15px; overflow-x: auto; max-height: 320px; background: var(--code-bg); border: 1px solid var(--glass-line); border-radius: var(--radius-sm); color: #dbe2f0; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; } code.endpoint { font-family: var(--mono); font-size: 12.5px; padding: 3px 7px; border-radius: 7px; background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--text-mid); } /* ----------------------------------------------------------------- login -- */ .login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login-card { width: min(420px, 100%); padding: clamp(24px, 4vw, 34px); border-radius: var(--radius-xl); } .login-card .brand { font-size: 17px; } .login-card h1 { font-size: 22px; margin: 24px 0 5px; letter-spacing: -0.03em; } .login-card .lede { margin: 0 0 24px; color: var(--text-dim); font-size: 13.5px; } .field { margin-bottom: 15px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-mid); margin-bottom: 7px; } .field input, .field select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--glass-line-strong); background: var(--glass-strong); color: var(--text); font-size: 14.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .18s var(--ease), background .18s var(--ease); } .field input:hover { border-color: var(--glass-line-strong); } .field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; } .field .hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; } .alert { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 18px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--text-mid); } .alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; } .alert-error { color: var(--red); background: var(--tint-red); border-color: color-mix(in oklab, var(--red) 38%, transparent); } .alert-ok { color: var(--green); background: var(--tint-green); border-color: color-mix(in oklab, var(--green) 38%, transparent); } .alert-warn { color: var(--yellow); background: var(--tint-yellow); border-color: color-mix(in oklab, var(--yellow) 38%, transparent); } /* ----------------------------------------------------------------- tabel -- */ .table-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px 4px; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); font-weight: 640; padding: 0 14px 10px 0; white-space: nowrap; } td { padding: 10px 14px 10px 0; border-top: 1px solid var(--grid); vertical-align: middle; } tbody tr { transition: background .15s; } tbody tr:hover { background: var(--glass); } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 580; white-space: nowrap; background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--text-mid); } .tag.ok { color: var(--green); background: var(--tint-green); border-color: color-mix(in oklab, var(--green) 32%, transparent); } .tag.bad { color: var(--red); background: var(--tint-red); border-color: color-mix(in oklab, var(--red) 32%, transparent); } .tag.warn { color: var(--yellow); background: var(--tint-yellow); border-color: color-mix(in oklab, var(--yellow) 32%, transparent); } footer.page { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 44px; color: var(--text-dim); font-size: 12.5px; } footer.page a { color: var(--text-mid); } .skeleton { border-radius: 8px; color: transparent !important; background: linear-gradient(90deg, var(--glass) 0%, var(--glass-strong) 50%, var(--glass) 100%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } @media (max-width: 780px) { .hero { grid-template-columns: 1fr; } .price-panel { border-left: 0; border-top: 1px solid var(--glass-line); padding: 20px 0 0; } .window-cols { grid-template-columns: 1fr; } .topbar .who { display: none; } .verdict { font-size: 27px; } } /* Zonder backdrop-filter (oudere browsers) wordt het glas dekkend, zodat de tekst leesbaar blijft. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass: rgba(20, 26, 40, .92); --glass-strong: rgba(28, 35, 52, .95); } :root[data-theme="light"] { --glass: #ffffff; --glass-strong: #f6f8fc; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Onze eigen display-regels (flex/grid) winnen van de standaardregel voor [hidden]; dat maakt het attribuut stil onwerkzaam. Daarom hier expliciet. */ [hidden] { display: none !important; } /* ------------------------------------------------------- blokje-pagina --- */ .pins { display: flex; flex-direction: column; gap: 8px; } .pin { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-highlight); font-size: 13px; color: var(--text-dim); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .pin b { font-family: var(--mono); font-size: 12.5px; color: var(--text-mid); } .pin::after { content: ""; width: 9px; height: 9px; border-radius: 50%; margin-left: auto; background: var(--glass-line-strong); transition: background .25s var(--ease); } .pin[data-on="true"] { color: var(--text); background: color-mix(in oklab, var(--pin-color) 13%, transparent); border-color: color-mix(in oklab, var(--pin-color) 45%, transparent); } .pin[data-on="true"]::after { background: var(--pin-color); box-shadow: 0 0 10px 1px color-mix(in oklab, var(--pin-color) 70%, transparent); } .pin[data-pin="green"] { --pin-color: var(--green); } .pin[data-pin="yellow"] { --pin-color: var(--yellow); } .pin[data-pin="red"] { --pin-color: var(--red); } .switch-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; padding: 11px 0; border-top: 1px solid var(--grid); font-size: 13.5px; color: var(--text-mid); } .switch-row input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--green); } ol.steps { margin: 0; padding-left: 22px; color: var(--text-mid); font-size: 14px; } ol.steps li { margin-bottom: 9px; } ol.steps li::marker { color: var(--text-dim); font-variant-numeric: tabular-nums; } .alert a.btn { display: inline-flex; } .alert span { display: block; } /* ------------------------------------------------------------- blokjes --- */ .btn.danger { color: var(--red); border-color: color-mix(in oklab, var(--red) 32%, transparent); } .btn.danger:hover { border-color: color-mix(in oklab, var(--red) 60%, transparent); } .btn-tiny { padding: 6px 11px; font-size: 12px; } /* Formulieren die in een tabelcel of naast elkaar staan; elke knop hier is een eigen POST, dus het zijn echt losse formulieren en geen velden in een. */ .inline-form { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } .row-actions { display: flex; gap: 8px; flex-wrap: wrap; } .name-input { width: 11ch; min-width: 0; padding: 6px 9px; font-size: 13px; border-radius: 9px; border: 1px solid var(--glass-line-strong); background: var(--glass-strong); color: var(--text); font-family: inherit; } .name-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; } select { padding: 6px 10px; border-radius: 9px; font: inherit; font-size: 13px; background: var(--glass-strong); border: 1px solid var(--glass-line-strong); color: var(--text); } .field select { width: 100%; padding: 12px 14px; font-size: 14.5px; border-radius: var(--radius-sm); } .field input[type="file"] { padding: 10px 12px; font-size: 13px; } details.device { border-top: 1px solid var(--grid); padding: 4px 0; } details.device > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 2px; cursor: pointer; list-style: none; font-size: 14px; border-radius: var(--radius-sm); } details.device > summary::-webkit-details-marker { display: none; } details.device > summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.8px solid var(--text-dim); border-bottom: 1.8px solid var(--text-dim); transform: rotate(-45deg); transition: transform .2s var(--ease); } details.device[open] > summary::before { transform: rotate(45deg); } details.device > summary:hover { background: var(--glass); } details.device[open] { padding-bottom: 20px; } /* ------------------------------------------------------------ klantkaart --- */ /* Status links, dan de klant en de instellingen. Drie kolommen worden te smal om in te typen, dus vanaf tablet twee en daaronder onder elkaar. */ .device-body { display: grid; gap: clamp(16px, 2vw, 26px); margin-top: 16px; } @media (min-width: 900px) { .device-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } /* De eerste kop in een kolom heeft de marge erboven niet nodig. */ .device-body > * > h3:first-child, .device-body > form > h3:first-child { margin-top: 0; } .device-body h3 { margin: 26px 0 14px; font-size: 12px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); } .device-body textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--glass-line-strong); background: var(--glass-strong); color: var(--text); font: inherit; font-size: 14.5px; resize: vertical; } .device-body textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; } .search-input { min-width: min(280px, 55vw); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--glass-line-strong); background: var(--glass-strong); color: var(--text); font: inherit; font-size: 13px; } .search-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; } @media (max-width: 600px) { .card > header form.spacer { margin-left: 0; width: 100%; } .search-input { flex: 1; min-width: 0; } } /* De lijst met pagina's die je kunt bewerken, op /beheer. */ .cms-page-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }