/* ============================================================ SELF-HOSTED FONTS (GDPR, no requests to Google's CDN) Inter only. Orbitron was removed 2026-08, its zero glyph (a squared shape with a diagonal slash) rendered as a broken-looking box at dashboard sizes, most visibly in "€0" / "0%" / "0 leads" empty states. On a dashboard where the numbers ARE the product, that read as the app being broken. Inter's numerals are excellent and already loaded, so every former Orbitron use now sets font-variant-numeric: tabular-nums instead, same "confident data" register, correct zero, columns that don't jitter as figures update. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/inter-var.woff2') format('woff2'); } @font-face { /* Space Grotesk, self-hosted for the same GDPR reason as Inter. This is the brand's heading face, the marketing site loads it from Google, which is the leak we already closed here. Variable, so 500/600/700 all come from one 22 KB file. */ font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/space-grotesk-var.woff2') format('woff2'); } /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* ── Sand Black, the brand, restored ────────────────────────────────── An earlier pass moved the accent off var(--zand-200) to a brighter gold and recoloured the neutrals cool-blue. The diagnosis behind that was right (the surfaces read flat and the warm wash over grey went muddy) but the remedy overwrote the brand. These are the real values, from the brand guide and from helvaro.pro's own tokens. The flatness is fixed the way the marketing site fixes it, with a genuine soft shadow and honest borders, not by changing the colours. THE CONTRAST RULE, which is the whole reason there are two accent tokens: sand is a FILL, never type. var(--zand-200) as text on white is about 1.7:1, invisible. So --accent-c fills (always with dark text on it) and --accent-ink is what you set type in. */ /* ══ TONALE RAMPS ═══════════════════════════════════════════════════ Vier families van elf stops, gerekend in OKLCH en niet met de hand gekozen. Dat verschil is zichtbaar: in HSL lijkt een reeks gelijkmatig terwijl het oog hem als sprongen leest -- geel op 50%% helderheid leest veel lichter dan blauw op 50%%. OKLCH-lightness loopt wel gelijk op met wat je waarneemt, dus deze trappen staan er als echte trappen. Chroma volgt een boog in plaats van een rechte lijn: aan de uiteinden minder verzadiging, want een bijna-witte tint op volle chroma wordt roze en een bijna-zwarte wordt modderig. Het midden houdt de kleur op sterkte. ZAND is het merk. KLEI, OLIJF en STEEN zijn aardse begeleiders in dezelfde warme hoek van het spectrum -- geen regenboog, en nadrukkelijk geen blauw of paars, want die sluit de huisstijl uit. Achter elke stop staat waar hij als TEKST mag staan. Dat is geen versiering: een kleur die als vulling klopt is niet automatisch leesbaar als letter, en dat is precies waar dit bestand al een keer op is misgegaan (zand op wit = 1,7:1). */ --zand-50: #FCF6E9; --zand-100: #F5ECD7; --zand-200: #E8D7B1; --zand-300: #D1C3A2; --zand-400: #B9A986; --zand-500: #A0916D; --zand-600: #867755; --zand-700: #6A5C3D; --zand-800: #4E4228; --zand-900: #322914; --zand-950: #1D1607; --klei-50: #FFF2E5; --klei-100: #FFE5D0; --klei-200: #FED0B5; --klei-300: #ECB797; --klei-400: #D59C79; --klei-500: #BC8360; --klei-600: #A06A48; --klei-700: #805031; --klei-800: #61381D; --klei-900: #41210A; --klei-950: #271002; --olijf-50: #F5F9E9; --olijf-100: #EBF0D6; --olijf-200: #D8DFBD; --olijf-300: #C1C9A1; --olijf-400: #A8B085; --olijf-500: #8F986B; --olijf-600: #767E54; --olijf-700: #5B623C; --olijf-800: #424727; --olijf-900: #292D13; --olijf-950: #161906; --steen-50: #F9F6F1; --steen-100: #F1ECE4; --steen-200: #E0DACF; --steen-300: #CBC3B7; --steen-400: #B2AA9D; --steen-500: #999184; --steen-600: #7F786B; --steen-700: #635D51; --steen-800: #494339; --steen-900: #2E2922; --steen-950: #1A1711; --bg: #17140F; --bg-alt: #120F0B; /* Een kaart is nu een VERLOOP en geen vlakke vulling, en dat is het verschil tussen 'een vlak met een schaduw eronder' en iets dat licht vangt. Van boven iets lichter, naar onder iets donkerder -- precies zoals een plaat die onder een lamp ligt. Het bereik is 3,5% helderheid. Dat is met opzet nauwelijks te benoemen: zie je de overgang als een streep, dan is het te veel. Je moet het merken als diepte, niet herkennen als een verloop. Dit mag omdat alle 97 gebruiken in dit bestand 'background:' zijn en geen enkele 'background-color:' -- nagerekend, niet aangenomen. --card-flat blijft bestaan voor het geval er ooit wel een platte kleur nodig is. */ --card-flat: #211D16; --card: #211D16; --card-elevated: #2A251C; /* De rand stond op #262626 terwijl de kaart op #232323 staat: drie punten ertussen, en dan IS er geen rand. Een kaart zonder rand leunt volledig op zijn schaduw, en op bijna-zwart doet een schaduw bijna niets -- vandaar dat alles vlak aanvoelde. Nu is het verschil zichtbaar zonder dat er een lijn OM de kaart komt: het leest als een vouw, niet als een omtrek. --divider blijft de zachtste, want een scheiding BINNEN een kaart hoort minder te doen dan de kaartrand zelf. Staat twee keer, en dat hoort: het tweede blok zet de donkere tokens vast voor een paneel dat altijd donker is. Uit elkaar laten lopen is precies hoe zoiets stilletjes scheef gaat. */ --border-c: #3A3327; --border-strong: #574B37; --divider: #2C2A26; --hover-c: #26211A; /* Het accent hangt nu aan de ramp in plaats van los te staan. --zand-200 IS var(--zand-200) -- die stop is met opzet vastgepind op de merkwaarde, zodat de ramp het merk BEVAT en niet benadert. Er verandert dus geen pixel; wat er bij komt is dat elke tint ernaast nu een naam heeft en op afstand klopt. */ --accent-c: var(--zand-200); --accent-hover-c: #DDCAA1; --accent-pressed-c:var(--zand-300); --accent-deep: #C9AE7C; /* tweede stop in verlopen */ --accent-ink: var(--zand-100); /* accent ALS TEKST, alleen op donker */ --on-accent: #1A1A1A; /* always dark type on sand */ --text-c: #F1E9DA; /* never pure #FFF -- VISUAL-DIRECTION.md */ --text-muted-c: #A79B85; --text-disabled: #6F6554; --text-inverse: #17140F; /* Fase 4: dezelfde hues, één stap warmer/desatureerder, per coordinator- opgave. Fills blijven de heldere kant (chips, iconen); de *-ink varianten verderop zijn waar nodig apart getest tegen de nieuwe kaartkleur. */ --success-c: #4CAF6E; --warning-c: #E8A54A; --error-c: #E4665A; --info-c: var(--accent-ink); /* "reuse tan, not blue" -- letterlijk het accent als tekstkleur */ /* Semantic colours AS TEXT. Same story as --accent-c vs --accent-ink: a hue picked to read as a fill is not automatically legible as type, and the place it breaks is a chip that tints the SAME hue behind it, a green score on a 15%-green pill. On dark the fill values already clear 4.5:1 against both the canvas and their own chip, so these are aliases here and dark is unchanged; the light block overrides them with darker values. */ --success-ink: var(--success-c); /* 6,12:1 op de nieuwe kaart #211D16 -- opnieuw gemeten na Fase 4 */ --warning-ink: var(--warning-c); /* 7,92:1 */ /* #E4665A (de fill) haalde 5,07:1 -- maar dat was gemeten op de KALE kaart, niet op de chip waar de tekst echt op staat (12%-rode tint over de kaart, #38261E). Daarop haalt de fill zelf maar 4,33:1. scripts/ contrast-check.js rekent tegen de echte chip en ving dit; #E7756B is dezelfde fill, 10% naar wit, 4,89:1 op de chip. */ --error-ink: #E7756B; /* Was blauwgrijs (#96A2B6) -- tegen de eigen "geen blauw"-regel in. Zelfde helderheid, warme tint: 6,32:1 op de kaart. */ --neutral-ink: #A79E8C; --bubble-incoming: #211D16; --accent-rgb: 232,215,177; --success-rgb: 76,175,110; --warning-rgb: 232,165,74; --error-rgb: 228,102,90; --info-rgb: 245,236,215; --text-rgb: 241,233,218; --on-accent-rgb: 26,26,26; /* Twee families, zoals de huisstijl voorschrijft: Space Grotesk voor koppen, Inter voor alles wat je leest. Space Grotesk valt terug op Inter, dus als het woff2-bestand ontbreekt wordt de pagina niet lelijk, alleen minder eigen. */ --font-head: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 4 / 8 / 12 -- the scale the coordinator set for Fase 4, applied to the single definition point that all 51 var(--radius-*) reads in this file share. Was 8/14/22 (then 8/14/16 for one pass); this is a visible tightening across every button and card in the app, not just the one 22px outlier. */ --radius-sm: 4px; --radius-btn: 8px; --radius-card: 12px; /* Fase 4 vervolg: --ease-spring helemaal weg, niet alleen gealiast. De detector matcht op TEKST ("spring" in de bron), niet op de opgeloste waarde -- een alias naar --ease-out loste de overshoot (1.16) zelf al op maar liet de laatste bounce-easing-vondst onterecht staan. De 2 plekken die er nog naar verwezen (de toast, en één transform) gebruiken nu rechtstreeks --ease-out. */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-enter: 320ms; --transition-fast: all 140ms cubic-bezier(0.4, 0, 0.2, 1); --transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1); /* Soft and deep, never a hard drop. This is what makes a #232323 card read as raised on a #121212 page without changing either colour. */ --elev-0: none; /* Drie lagen in plaats van twee, en de verste waaiert ruimer en lichter uit. Een echte schaduw heeft een harde kern vlak onder het object en een wolk die ver uitloopt; met twee lagen krijg je de kern wel en de wolk niet, en dan lijkt een kaart op de pagina GEPLAKT in plaats van dat hij erboven hangt. De totale donkerte blijft ongeveer gelijk -- ze is verdeeld over meer afstand, niet opgeschroefd. */ /* Elevation declared once: a flat fill plus a 1px --border-c edge IS the depth cue now (see --raised). elev-1/2 are gone -- no component should be lifting off a shadow anymore. elev-3 survives as the one real, soft OFFSET shadow, reserved for true overlays: a modal and the search overlay -- content that floats fully above the page, not a card sitting on it. */ --elev-1: none; --elev-2: none; --elev-3: 0 20px 48px rgba(0,0,0,.32); --shadow: 0 1px 2px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.24), 0 18px 44px rgba(0,0,0,.18); --shadow-card: none; /* finish-fix 3: elevation is the tan edge, in beide thema's */ --shadow-glow: none; /* De lichtlip bovenop, plus nieuw: een schaduwlip onderaan. Samen maken ze van een rechthoek een plaat met dikte -- licht valt op de bovenrand, de onderrand ligt in zijn eigen schaduw. Eén lip alleen leest als een streep; twee lezen als een rand. Van 0.04 naar 0.07: op een verloop dat zelf al oploopt moest de lip mee omhoog, anders verdwijnt hij in de bovenste stop. */ /* DOORZICHTIG en niet 'none'. Dit token wordt in zeven regels samengesteld tot een box-shadow van var(--edge-hi) plus iets anders, en 'none' is in een schaduwlijst geen waarde maar een verbod: de browser gooit dan de HELE declaratie weg, inclusief dat andere. Dat kostte het helppaneel zijn schaduw. .hv-help-panel vraagt var(--edge-hi), var(--elev-3) -- en --elev-3 is juist bewaard als de ene zachte schaduw voor een modaal en de zoekoverlay. Het paneel zweefde dus zonder enige diepte over de pagina, gescheiden door niets dan een rand van 1px. In BEIDE thema's. De kaarten blijven wel vlak, en dat is met opzet: die stellen var(--edge-hi) samen met var(--shadow-card), en die staat in het lichte thema nog steeds op none. Die declaraties blijven dus ongeldig en dus zonder schaduw -- precies de vlakke opzet die daar bedoeld is. Nagemeten in de browser, per thema: van dertien kaarten verandert er exact een, en dat is het helppaneel. */ --edge-hi: 0 0 0 0 rgba(0,0,0,0); /* finish-fix 3: geen ingebakken lichtrand -- de rand is de rand */ --glass-fill: rgba(18,18,18,0.78); --glass-edge: rgba(255,255,255,0.06); --glass-blur: saturate(140%) blur(18px); /* ── One accent, not a rainbow ────────────────────────────────────────── There used to be seven per-card hues here (emerald, blue, purple, orange, coral, cyan, gold). The brand rules out purple, indigo and blue outright, and a dashboard for someone who handles other people's money should not look like a colour wheel. Cards are now differentiated by sand at varying strength, with real colour reserved for STATUS: green when something succeeded, amber when it needs attention, red when it failed. That is information, not decoration. */ --c-sand: #E8D7B1; --c-sand-soft: rgba(232,215,177,0.10); --c-deep: #C9AE7C; --c-deep-soft: rgba(201,174,124,0.10); --c-emerald: #4CAF6E; --c-emerald-soft: rgba(76,175,110,0.12); --c-amber: #E8A54A; --c-amber-soft: rgba(232,165,74,0.12); --c-coral: #E4665A; --c-coral-soft: rgba(228,102,90,0.12); /* Legacy aliases so the ~40 existing var(--c-blue) style references keep resolving; they now all land on sand instead of off-brand hues. */ --c-blue: var(--c-sand); --c-blue-soft: var(--c-sand-soft); --c-purple: var(--c-deep); --c-purple-soft: var(--c-deep-soft); --c-cyan: var(--c-sand); --c-cyan-soft: var(--c-sand-soft); --c-orange: var(--c-amber); --c-orange-soft: var(--c-amber-soft); --c-gold: var(--c-sand); --c-gold-soft: var(--c-sand-soft); /* ---- legacy token names (kept so every existing var(--x) in this 18k-line file resolves without a line-by-line rewrite) ---- */ --bg-primary: var(--bg); --bg-card: var(--card); --bg-card-alt: var(--bg-alt); --bg-card-hover: var(--hover-c); --blue-primary: var(--accent-c); --blue-bright: var(--accent-hover-c); --cyan: var(--accent-c); --green: var(--success-c); --red: var(--error-c); --orange: var(--warning-c); --green-ink: var(--success-ink); --red-ink: var(--error-ink); --orange-ink: var(--warning-ink); --accent: var(--accent-c); --accent-bright: var(--accent-hover-c); /* Deze zes ontbraken in dit blok, terwijl er 42 keer naar verwezen wordt. Een var() zonder fallback naar iets ongedefinieerds maakt de hele declaratie ongeldig, dus die 42 regels deden niets en de eigenschap erfde van de ouder, zichtbaar op het inlogscherm, waar de foutmelding daardoor bijna-wit op lichtroze stond. Aliassen, geen nieuwe kleuren, zodat ze het thema volgen net als de rest hierboven. */ --error: var(--error-c); --warning: var(--warning-c); --success: var(--success-c); --info: var(--info-c); --accent-hover: var(--accent-hover-c); --accent-pressed: var(--accent-deep); --text: var(--text-c); --text-primary: var(--text-c); --text-secondary:var(--text-muted-c); --text-muted: var(--text-muted-c); --border: var(--border-c); --border-bright: var(--border-strong); --scrollbar-bg: var(--bg); --scrollbar-thumb: var(--border-strong); /* De focusring. Zie de regel bij :where(...):focus-visible verderop voor het waarom; hier alleen de kleur, want die MOET per thema verschillen: zand haalt 10-13:1 op de donkere vlakken en 1,3:1 op de lichte. Een enkele kleur die het overal haalt bestaat niet -- nagerekend op alle zes vlakken waar een ring kan landen. */ --focus-ring: #E8D7B1; --radius: var(--radius-btn); --radius-s: var(--radius-sm); /* Fase 4: "de ene, effen charcoal chip" uit het richtingscontract (site-index-html.md, FIRST VIEWPORT). Op donker draait het om: het zandaccent is er de solide vulling, charcoal de tekst -- exact zoals --accent-c/--on-accent al deden, nu onder de eigen naam voor de knop. */ --btn-primary-bg: var(--accent-c); --btn-primary-text: var(--on-accent); /* Fase 4 (ontwerpsysteem): de drie toonstappen van het showroom-bord (site-index-html.md, OWN-WORLD), als ALIAS op wat hier al bestond. Geen enkele kleur verandert; dit geeft --bg/--card/--bg-alt een naam die matcht met de kaart-wereld: grond, opgetild, en de derde, donkerste stap. --edge is dezelfde rand die de kaarten al gebruikten, nu onder de naam die de brief gebruikt ("muted-tan edges instead of shadows"). */ --ground: var(--bg); --raised: var(--card); --ink-surface:var(--bg-alt); --edge: var(--border-c); } [data-theme="light"] { /* Taken straight from helvaro.pro's own custom properties, so the app and the marketing site are the same product rather than two designs that happen to share a logo. */ /* Hier zat de grootste vlakheid van het hele product: pagina wit, kaart wit, verhoogde kaart ook wit. Drie lagen met exact dezelfde kleur, dus alles moest komen van een randje van 1px -- en dan leest een dashboard als een spreadsheet. De pagina wordt nu een warme gebroken tint en de kaart blijft zuiver wit. Dat is de omkering die het doet: niet de kaart donkerder maken (dan wordt hij vies), maar de GROND eronder terugnemen, zodat wit weer iets betekent. De verhoogde kaart blijft ook wit en onderscheidt zich met hoogte in plaats van met kleur -- daar is --elev-2 voor. Warm en niet neutraalgrijs, want het accent is zand. Een koele grijze grond onder een zandgeel accent laat dat accent groezelig lijken; dat is exact de fout die bovenaan dit bestand al beschreven staat. Gemeten, niet gegokt. Wit-op-wit gaf een contrastverhouding van exact 1,000 -- wiskundig geen verschil, en dat is letterlijk waarom het vlak leek. #FAF9F6 bracht dat op 1,053; deze grond zit op 1,108, ruim dubbel zoveel scheiding, met een rood-blauwverschil van 10 punten zodat hij hoorbaar warm is en niet grijs. Donkerder dan dit wordt beige. */ --bg: #F3EDE1; --bg-alt: #EAE2D2; /* Op wit kan het verloop maar een kant op: naar beneden. En het krijgt de zandhue mee, want zuiver grijs onder een zandaccent leest koud -- dezelfde reden als bij de grond hierboven. 1,6% bereik; nog subtieler dan op donker, omdat het oog op wit veel gevoeliger is voor banding. */ /* Was #FFFFFF puur wit -- de brief verbiedt zowel puur wit als hoofdvlak EN puur wit als kaartkleur; nu een warm gebroken wit dat nog altijd duidelijk lichter is dan de grond eronder. */ --card-flat: #FAF6EE; --card: #FAF6EE; --card-elevated: #FFFAF2; --border-c: #D9CCB0; --border-strong: #B89D73; --divider: #EDE9E0; --hover-c: #EFE7D8; --accent-c: #E8D7B1; /* sand still fills, even on white */ --accent-hover-c: #DDCAA1; --accent-pressed-c:#D3BE93; --accent-deep: #D3BE93; /* Sand as type on white is ~1.7:1. This deeper bronze is the brand's answer, and it is the ONLY accent allowed to carry text here. Het was #8A6A33, en dat haalde op WIT 5,01:1 -- daar was op gemeten. Maar accenttekst staat bijna nooit op wit: hij staat op de getinte vlakken eromheen. Alle 32 stukjes tekst die in het lichte thema onder 4,5:1 zaten hadden precies deze kleur, en allemaal op zo'n tint: op #FFFFFF (puur wit) 5,01:1 ok op #EEE9DE (--bg-card-alt) 4,14:1 te weinig op #EDE7D9 4,07:1 te weinig op #F3EDE0 t/m #F5F1E8 4,30 - 4,45:1 te weinig Dezelfde tint en verzadiging, alleen donkerder tot het overal boven 4,5 uitkomt met marge: 4,84 op het donkerste vlak, 5,97 op wit. De zijbalk hergebruikt --accent-ink niet (nagekeken: nul accenttekst daarbinnen), dus donkerder maken raakt dat permanent donkere paneel niet. */ /* Fase 4: coordinator-opgave. #6E5320 -- 6,17:1 op de grond (#F3EDE1), 6,67:1 op de kaart (#FAF6EE), 5,58:1 op het onderste vlak (#EAE2D2). */ --accent-ink: #6E5320; --on-accent: #1A1A1A; --text-c: #1F1D19; --text-muted-c: #6B6252; --text-disabled: #A2977F; --text-inverse: #FAF6EE; /* Fase 4: dezelfde hues, één stap warmer/desatureerder (coordinator-opgave). Fills zijn de heldere kant; de *-ink hieronder zijn apart gemeten tegen de nieuwe kaartkleur #FAF6EE. */ --success-c: #2F8F4E; --warning-c: #B4661A; --error-c: #C2352B; --info-c: var(--accent-ink); /* "reuse tan, not blue" */ /* Deze drie waren gemeten tegen de KALE kaart (#FAF6EE), niet tegen de 12%-getinte chip waar de tekst echt op staat -- exact de fout die CLAUDE.md hierboven al beschrijft. scripts/contrast-check.js rekent tegen de echte chip (composite van de fill op de kaart) en ving drie mislukkingen: success 4,31:1, error 4,26:1, neutral 3,66:1. Hieronder dezelfde tinten, donkerder tot ze op de chip zelf boven 4,5 komen. */ --success-ink: #226838; /* was #287A42 (4,31:1 op chip) -- nu 5,48:1 */ --warning-ink: #995716; /* 4,54:1 op chip -- haalt het net, ongewijzigd */ --error-ink: #A52D25; /* was fill-alias #C2352B (4,26:1 op chip) -- nu 5,45:1 */ /* Was blauwgrijs (#45526B) -- tegen de eigen "geen blauw"-regel in. #6B5F4A haalde 5,80:1 op de KALE kaart maar 3,66:1 op de eigen chip (sand-soft op 30%% alpha, veel zichtbaarder dan de status-chips op 12%%). Donkerder tot de chip zelf boven 4,5 komt: 5,35:1. */ --neutral-ink: #504738; --bubble-incoming: #FAF6EE; --accent-rgb: 232,215,177; --success-rgb: 47,143,78; --warning-rgb: 180,102,26; --error-rgb: 194,53,43; --info-rgb: 110,83,32; --text-rgb: 31,29,25; --on-accent-rgb: 26,26,26; /* Same single accent on white. The bronze is what shows up as an icon or a hairline; the sand is what fills a button under dark text. */ --c-sand: #6E5320; --c-sand-soft: rgba(232,215,177,0.30); --c-deep: #6F5427; --c-deep-soft: rgba(201,174,124,0.26); --c-emerald: #2F8F4E; --c-emerald-soft: rgba(47,143,78,0.10); --c-amber: #B4661A; --c-amber-soft: rgba(180,102,26,0.10); --c-coral: #C2352B; --c-coral-soft: rgba(194,53,43,0.10); --bg-primary: var(--bg); --bg-card: var(--card); --bg-card-alt: var(--bg-alt); --bg-card-hover: var(--hover-c); --accent: var(--accent-c); --accent-bright: var(--accent-hover-c); --text: var(--text-c); --text-primary: var(--text-c); --text-secondary:var(--text-muted-c); --text-muted: var(--text-muted-c); --border: var(--border-c); --border-bright: var(--border-strong); --scrollbar-bg: var(--bg); --scrollbar-thumb: var(--border-strong); /* Het lichtste warme goud dat op alle drie de lichte vlakken boven 3:1 komt. Herrekend na het Fase-4-palet: grond #F3EDE1 3,72:1, kaart #FAF6EE 4,03:1, onderste vlak #EAE2D2 3,49:1 -- nog altijd ruim boven de 3:1-eis voor een niet-tekstelement. */ --focus-ring: #96742F; /* Fase 4: charcoal chip, zoals in :root. Op wit is het andersom: de sand accentkleur zelf haalt maar 1,7:1 als tekst, dus de solide primaire knop wordt hier de charcoal vulling met zand als tekst -- dezelfde twee kleuren als het donkere thema, omgedraaid. */ --btn-primary-bg: #1A1A1A; --btn-primary-text: #F4E7C8; /* The site's own card shadow, verbatim. */ /* Ook hier drie lagen, en warm getint in plaats van blauwgrijs. Een schaduw is licht dat wordt tegengehouden, dus hij hoort de kleur van de grond te dragen -- rgba(17,24,39) is koel blauw en dat vecht met een zandaccent op een warme grond. De kern is nieuw: op wit was er alleen een verre wolk, dus een kaart had geen contactpunt met de pagina en zweefde stuurloos. */ --shadow: 0 1px 2px rgba(64,52,32,0.06), 0 4px 12px rgba(64,52,32,0.06), 0 16px 40px rgba(64,52,32,0.07); --shadow-card: none; /* finish-fix 3: de rand is de rand, ook licht */ --shadow-glow: none; /* Same rule, light ground: elev-1/2 gone, elev-3 is the one soft offset shadow reserved for a modal and the search overlay. */ --elev-1: none; --elev-2: none; --elev-3: 0 20px 48px rgba(64,52,32,.14); /* A white highlight on a white card is nothing. */ /* Zie de toelichting bij --edge-hi in het donkere blok hierboven: geen randlicht, maar doorzichtig in plaats van none. */ --edge-hi: 0 0 0 0 rgba(0,0,0,0); --glass-fill: rgba(255,255,255,0.80); --glass-edge: rgba(255,255,255,0.90); --glass-blur: saturate(160%) blur(18px); /* Zie de toelichting bij :root hierboven -- zelfde alias, lichte waarden. */ --ground: var(--bg); --raised: var(--card); --ink-surface:var(--bg-alt); --edge: var(--border-c); /* Samengevoegd vanuit het losse [data-theme="light"]-blok bij de knop-tokens (voorheen na regel 3941) -- Fase 4 consolidatie: precies één [data-theme="light"]-blok direct na :root. */ /* Op wit werkt hetzelfde principe andersom: de bovenrand is niet lichter dan wit, dus daar draagt de ONDERrand het verschil. */ --btn-rim: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -1px 0 rgba(64,52,32,0.10); --btn-rim-accent: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(64,52,32,0.14); --btn-glow: none; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Waar ben ik? ──────────────────────────────────────────────────────────── Met een echte Tab-toets gemeten, want programmatische focus telt in Chrome niet als :focus-visible en geeft dus een vals beeld. Wat er te zien was: .btn-icon zandring van de app (goed) .nav-item eigen ring van de app (goed) .ap-chip Chrome's eigen ring, var(--zand-100) .ap-btn / .fm-btn Chrome's eigen ring, #121212 -- op een donkere kaart 1,27:1, oftewel onzichtbaar .cal-nav-btn Chrome's eigen ring, oranje #E59700 Drie verschillende ringen dus, waarvan een die je op de helft van de app niet ziet. Wie met het toetsenbord werkt raakt daar simpelweg kwijt waar hij is -- op "Je assistent" zijn dat tien chips, acht knoppen en vijf tekstvelden achter elkaar. :where() geeft deze regel specificiteit NUL. Dat is met opzet: dit is een vloer, geen overheersing. Elke bestaande focusregel wint hier gewoon van, en .btn-icon en .nav-item houden dus hun eigen ring. Alleen wie er geen had krijgt er een. outline en niet box-shadow: box-shadow zou de eigen schaduw van een element tijdens focus vervangen, en outline doet niets met de layout. */ :where(button, a[href], input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--focus-ring, #E8D7B1); outline-offset: 2px; } /* ── Gebeurde er iets toen ik drukte? ──────────────────────────────────────── Zelfde meting, zelfde uitkomst als bij de focusring: 33 knoppen gaven een duwtje terug en 59 niet, en welke je kreeg hing af van of de knop uit het ontwerpsysteem kwam of ter plekke was gemaakt. Op een trage verbinding is dat het verschil tussen "hij doet het" en nog een keer klikken. Ook hier :where(), dus specificiteit nul: de dertien knoppen die al een eigen :active hebben houden die gewoon. Een pixel omlaag is precies wat .nav-item al deed -- dit maakt er de huisregel van in plaats van een uitzondering. :not(:disabled) want een knop die niets doet hoort ook niet te bewegen; dat zou juist zeggen dat er wel iets gebeurde. */ :where(button, [role="button"], a[class*="btn"]):active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); } html { font-size: 93.75%; } /* 15px bij de standaardinstelling; schaalt mee met de tekstgrootte van de gebruiker */ body { font-family: 'Inter', sans-serif; /* Flat ground, one value per theme. Depth now comes from card elevation (--raised + a 1px tan edge), not from a lit backdrop -- no pools, no dot grid, no bloom. */ background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--scrollbar-bg); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--text-disabled); } /* ============================================================ TYPOGRAPHY ============================================================ */ /* Koppen in Space Grotesk, 600-700, -0.02em, dat is wat de huisstijl zegt en wat helvaro.pro doet. Een eerdere ronde hier draaide alles op één familie (Inter op 800) omdat de vorige tweede letter Orbitron was, en die paste nergens bij. Dat argument gold Orbitron, niet het idee van een tweede letter: Space Grotesk is juist de kop-letter van het merk, dus de app en de site lezen nu als hetzelfde product. 800 gaat naar 700 omdat Space Grotesk niet zwaarder gaat en op 700 al steviger oogt dan Inter op 800. */ h1, h2, h3, .display-heading, .page-title, .stat-value, .card-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; } /* Was a gradient-clip effect (indigo → cyan). A single accent colour reads calmer and is the "important number / highlight" use case sand is for. */ .gradient-text { background: none; -webkit-text-fill-color: currentColor; background-clip: initial; color: var(--accent-ink); } /* Fase 4 consolidatie: geen [data-theme="light"]-override meer nodig -- de regel hierboven zet background:none en -webkit-text-fill-color al thema-onafhankelijk, en color leest via var(--accent-ink) al de juiste waarde per thema. De override herhaalde exact dezelfde twee declaraties. */ /* ============================================================ LAYOUT ============================================================ */ #app { position: relative; z-index: 1; } .app-layout { display: flex; min-height: 100vh; } .main-content { flex: 1; /* Zonder dit loopt de Pipeline buiten beeld. Een flex-kind heeft standaard min-width:auto en kan dus niet kleiner worden dan zijn INHOUD. Het kanbanbord is breder dan het scherm, dus in plaats van dat het bord zelf schuift (het heeft overflow-x:auto) groeide deze kolom mee: 1420px bij een venster van 1440 met 220px zijbalk, oftewel 205px die je met geen enkele scrollbeweging kon bereiken. Weg waren de laatste pipelinekolom en, in de kopbalk, de bel en de themaschakelaar. min-width:0 geeft de kolom toestemming om te krimpen; pas dan doet de overflow-x op het bord waar hij voor bedoeld is. */ min-width: 0; margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; /* Fase 4: bekeken voor de layout-transition-detector, en bewust gehouden. margin-left reserveert hier de ruimte voor de fixed .sidebar; dit element is zelf flex:1, dus de zichtbare BREEDTE hangt af van deze marge. transform:translateX() zou het vlak laten schuiven zonder zijn breedte te herrekenen -- .page-content erin zou dan overlappen met de zijbalk in plaats van eromheen te passen. Geen transform-vervanging zonder de flex-opzet zelf te herschrijven, en dat is een layoutwijziging, geen tokenwerk. */ transition: margin-left 0.3s ease; } .page-content { flex: 1; /* Zelfde reden als bij .main-content hierboven: ook dit is een flex-kind. */ min-width: 0; padding: 24px 28px; overflow-y: auto; overflow-x: hidden; } /* Een tabel heeft een harde min-content-breedte: kolomkoppen en getallen kunnen niet verder krimpen. Op een telefoon liep .source-table daardoor 129px buiten beeld, en omdat de pagina zijn overflow verbergt was dat geen scrollbalk maar een tabel die stilletjes kolommen kwijtraakte. Eén wrapper die zelf scrollt geeft ze terug. */ /* De storingsbalk. display:flex staat op de klasse en niet inline, zodat een [hidden] of style.display='none' hem ook echt weg krijgt, een eerdere versie van een banner in dit bestand bleef zichtbaar boven een gezonde pagina omdat display:flex het van [hidden] won. */ /* Aanraakdoelen. WCAG 2.2 vraagt minimaal 24x24 CSS-pixels voor iets dat je moet kunnen raken; deze zaten daaronder, potloodjes en kruisjes van 14 tot 20 pixels. Eerste poging was een onzichtbaar ::after om het raakvlak te vergroten zonder de layout te verschuiven. Gemeten met elementFromPoint bleek dat niet te werken: op 11px van het midden ving het pseudo-element de klik niet op, want een ouder knipt zijn overflow af. Dus gewoon de knop zelf op maat, met het icoon gecentreerd zodat hij visueel niet groter oogt. */ #revenue-goal-edit, .copy-btn, #dash-checklist-close, #btn-toggle-apikey, #panel-copy-phone { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; } .crm-error-banner { display: none; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(var(--error-rgb), 0.10); border: 1px solid rgba(var(--error-rgb), 0.28); } .crm-error-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; } .crm-error-text strong { font-size: 0.9333rem; color: var(--error-ink); } .crm-error-text span { font-size: 0.8667rem; color: var(--text-muted); } .crm-error-retry { padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid rgba(var(--error-rgb), 0.35); background: none; color: var(--error-ink); font-size: 0.8667rem; font-weight: 600; cursor: pointer; } .crm-error-retry:hover:not(:disabled) { background: rgba(var(--error-rgb), 0.12); } .crm-error-retry:disabled { opacity: 0.6; cursor: default; } .crm-error-retry:focus-visible { outline: 2px solid var(--error-ink); outline-offset: 2px; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-scroll > table { min-width: 460px; } /* Op de smalste telefoons is de paginamarge zelf het laatste dat nog wint van de inhoud: 2x28px is 56px van een scherm van 320. */ @media (max-width: 400px) { .page-content { padding: 18px 14px; } } @media (max-width: 360px) { .page-content { padding: 16px 10px; } /* Vangnet voor de laatste paar kaarten en knoppen die op 320px nog een paar pixel buiten beeld staken. Liever één regel die zegt "niets is breder dan zijn container" dan vijf losse uitzonderingen die de volgende kaart weer mist. */ .page.active .profile-card, .page.active .fm-qr-card, .page.active .fm-preview-card, .page.active .fm-option-card, .page.active .cal-day-num, .page.active .stat-icon, .page.active #chk-whatsapp-mailto, .page.active .cal-book-btn { max-width: 100%; min-width: 0; } /* De onboarding-checklist zet een lange mailto-link op één regel; op 320px steekt die er 35px uit. Breken mag hier: het is een adres, geen knop. */ .page.active #chk-whatsapp-mailto { overflow-wrap: anywhere; word-break: break-word; } .page.active .cal-book-btn { white-space: normal; padding-left: 10px; padding-right: 10px; } } /* ============================================================ KOSTEN (alleen Helvaro) Een rekening, geen dashboard. Vandaar: één kolom, uitgelijnde bedragen met tabular-nums zodat je ze onder elkaar kan lezen, en de HERKOMST van elk bedrag als klein label ernaast. Dat label is het hele punt van de pagina -- een lijstprijs en een ingevuld bedrag horen er niet hetzelfde uit te zien. ============================================================ */ /* Onderaan ruimte voor de Faro-balk, die vast onder in beeld staat. Zonder deze marge legt hij zich over de laatste regel van de laatste lijst. */ .kst-wrap { max-width: 940px; padding-bottom: 96px; } .kst-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; } .kst-kaart { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; } .kst-lbl { font-size: 0.7333rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .kst-groot { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .kst-onder { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; } .kst-melding { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); padding: 12px 16px; font-size: 0.8667rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 22px; } .kst-blok { margin-bottom: 26px; } .kst-blok-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .kst-blok-titel { font-size: 1rem; font-weight: 700; } .kst-blok-sub { font-size: 0.8rem; color: var(--text-muted); } .kst-tabel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; } .kst-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--divider); } .kst-rij:last-child { border-bottom: none; } .kst-rij.uit { opacity: .55; } .kst-naam { font-size: 0.9333rem; font-weight: 600; } .kst-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; } .kst-bedrag { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .kst-bedrag.leeg { color: var(--warning-ink); font-weight: 600; font-size: 0.8667rem; } /* Wat deze dienst tot nu toe gekost heeft. Eigen regel onder de omschrijving: het is een ander soort getal dan het maandbedrag ernaast, en die twee door elkaar lezen is precies wat je hier niet wil. */ .kst-sinds { font-size: 0.8rem; color: var(--accent-ink); margin-top: 5px; font-variant-numeric: tabular-nums; } .kst-sinds.leeg { color: var(--warning-ink); } /* De herkomst. Klein, maar het verschil tussen een getal dat je kan geloven en een getal dat je moet controleren. */ .kst-bron { display: inline-block; font-size: 0.6667rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full); border: 1px solid var(--border-strong); color: var(--text-muted); margin-left: 8px; vertical-align: 2px; } .kst-bron.ingevuld { color: var(--success-ink); border-color: rgba(var(--success-rgb), .45); } .kst-bron.lijstprijs { color: var(--neutral-ink); } .kst-bron.onbekend { color: var(--warning-ink); border-color: rgba(var(--warning-rgb), .45); } .kst-sleutels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .kst-sleutel { display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 0.8rem; } .kst-stip { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .kst-stip.aan { background: var(--success-c); } .kst-stip.uit { background: var(--border-strong); } .kst-env { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; } .kst-sleutel-dienst { color: var(--text-muted); margin-left: auto; font-size: 0.7333rem; } .kst-ai { margin-top: 12px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; } .kst-leeg { padding: 18px; color: var(--text-muted); font-size: 0.8667rem; } @media (max-width: 560px) { .kst-rij { grid-template-columns: 1fr; } .kst-bedrag { text-align: left; } } /* ============================================================ LOGIN PAGE. FULL VIEWPORT SPLIT ============================================================ */ #login-page { /* ── Licht is de standaard, donker volgt het thema ─────────────────────── Het inlogscherm was permanent donker ("een podium, geen oppervlak van de app"). Licht is nu de standaard voor iedereen, dus het scherm waar een nieuwe klant binnenkomt volgt het thema zoals de rest van de app: warm licht hier, en de oude donkere waarden staan hieronder onder [data-theme="dark"] voor wie zelf voor donker koos. Alle waarden komen uit het lichte thema van de app (--bg #F3EDE1, --card #FAF6EE, --text-c #1F1D19, --accent-ink #6E5320), geen nieuw palet. Gemeten contrasten staan in CHANGELOG.md. Tekst gebruikt --login-accent-ink / de *-ink waarden; het zand zelf (--login-fill) is alleen een vulling. */ --login-stage: #F3EDE1; /* showcase-vlak: de grond van de app */ --login-stage-ink: #1F1D19; --login-stage-dim: #6B6252; --login-panel: #FAF6EE; /* formulierpaneel: de kaartkleur */ --login-panel-lift: #FFFCF6; /* de actieve pil in de segmentschakelaar */ --login-track: #EAE2D2; /* de goot waar die pil in ligt */ --login-input-bg: #FFFDF9; --login-border: #D9CCB0; /* haarlijnen en scheidingen -- decoratief */ --login-line: #D9CCB0; /* Omtrek van een BEDIENBAAR ding: WCAG 1.4.11, 3:1 tegen alles wat eraan grenst (paneel, goot, veldvulling, actieve pil). */ --login-field-line: #857A63; --login-input-hover:#6B6252; --login-text: #1F1D19; --login-muted: #6B6252; --login-faint: #6B6252; --login-placeholder:#7A705E; --login-accent-ink: #6E5320; --login-fill: #E8D7B1; /* zand als VULLING (knop, vinkjes, balk) */ --login-fill-edge: #BFA877; /* de rand die de zandknop op crème leesbaar maakt */ --login-on-fill: #1A1A1A; --login-caret: #6E5320; --login-ring: rgba(110,83,32,0.20); --login-hover: rgba(31,29,25,0.05); --login-link-line: rgba(110,83,32,0.40); --login-card: #FFFBF4; /* kaart in het showcase-vlak */ --login-card-inset: #F3EDE1; --login-bubble-in: #EFE7D8; --login-bar-bg: #E3D9C4; --login-dot: #D9CCB0; --login-error: #A52D25; --login-error-bg: rgba(194,53,43,0.08); --login-error-line: rgba(194,53,43,0.32); --login-shadow: 0 1px 2px rgba(23,19,12,0.06), 0 12px 32px -12px rgba(23,19,12,0.14); --login-sel: rgba(232,215,177,0.65); position: fixed; inset: 0; display: flex; z-index: 1000; padding: 0; background: var(--login-stage); } [data-theme="dark"] #login-page { --login-stage: #17140F; --login-stage-ink: #F1E9DA; --login-stage-dim: #A79B85; --login-panel: #211D16; --login-panel-lift: #2A251C; --login-track: #17140F; --login-input-bg: #17140F; --login-border: #35332F; --login-line: #3A3327; --login-field-line: #706D66; --login-input-hover:#574B37; --login-text: #F1E9DA; --login-muted: #A79B85; --login-faint: #8A7F6B; --login-placeholder:#9A9489; --login-accent-ink: #F0E4C8; --login-fill: #E8D7B1; --login-fill-edge: #E8D7B1; --login-on-fill: #1A1A1A; --login-caret: #E8D7B1; --login-ring: rgba(232,215,177,0.16); --login-hover: rgba(241,233,218,0.06); --login-link-line: rgba(240,228,200,0.35); --login-card: #211D16; --login-card-inset: #17140F; --login-bubble-in: #2A251C; --login-bar-bg: #2A251C; --login-dot: #3A3327; --login-error: #E7756B; --login-error-bg: rgba(228,102,90,0.10); --login-error-line: rgba(228,102,90,0.28); --login-shadow: none; --login-sel: rgba(232,215,177,0.32); } #login-page::before { display: none; } #login-page::after { display: none; } /* ── Zolang Clerk laadt ───────────────────────────────────────────────────── Ons eigen formulier staat er wel in de HTML (het is het vangnet), maar het wordt niet getoond zolang we nog verwachten dat Clerk het overneemt. Anders ziet een bezoeker twee inlogschermen na elkaar. De titel en de ondertitel gaan mee: Clerks kaart heeft zijn eigen kop, en twee koppen die ongeveer hetzelfde zeggen op één paneel is dezelfde fout in het klein. De schakelaar Inloggen/Account aanmaken blijft WEL staan -- die is van ons, hij werkt met Clerk, en hij is het enige wat een nieuwe bezoeker meteen vertelt dat hij hier ook een account kan maken. */ #login-page.clerk-wacht #login-form-wrap { display: none; } /* De kop en de ondertitel blijven nu WEL staan terwijl Clerk onderweg is. Ze gingen mee omdat Clerks kaart een eigen kop had die ongeveer hetzelfde zei. Die kop is er niet meer (zie #clerk-signin .cl-header verderop), dus de reden is weg -- en er is een reden bij gekomen om ze te laten staan: dit is het enige stuk tekst dat er meteen kan zijn. Zonder deze twee regels staat het paneel leeg te wachten op een script van een andere host, en dat is precies de traagheid die je op dit scherm voelt. */ #clerk-skelet { min-height: 320px; padding: 8px 0 0; } .skelet-regel, .skelet-veld, .skelet-knop { background: var(--login-input-bg); border-radius: var(--r-sm); } .skelet-regel { height: 14px; margin-bottom: 10px; } .skelet-titel { width: 58%; height: 22px; margin-bottom: 12px; } .skelet-sub { width: 78%; margin-bottom: 26px; } .skelet-veld { height: 44px; margin-bottom: 16px; border: 1px solid var(--login-border); } .skelet-knop { height: 44px; margin-top: 8px; background: var(--login-border); } /* Een rustige puls, geen glinsterband die over het scherm schuift: dit staat er idealiter een halve seconde, en dan hoort het niet de aandacht te trekken. */ @keyframes skelet-puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } #clerk-skelet > * { animation: skelet-puls 1.4s ease-in-out infinite; } #clerk-skelet > *:nth-child(2) { animation-delay: .1s; } #clerk-skelet > *:nth-child(3) { animation-delay: .2s; } #clerk-skelet > *:nth-child(4) { animation-delay: .3s; } #clerk-skelet > *:nth-child(5) { animation-delay: .4s; } @media (prefers-reduced-motion: reduce) { #clerk-skelet > * { animation: none; } } /* De regel onder de inlogknop: wachtwoord vergeten en registreren. Kleuren uit tokens -- hier stond #6b7280 hardgecodeerd, wat in het lichte thema toevallig klopte en verder nergens op sloeg. */ /* ── De segmentschakelaar inloggen / registreren ────────────────────────── Twee gelijkwaardige knoppen in één spoor. De actieve krijgt de opgetilde tint en de lichtlip; de andere blijft leesbaar maar rustig -- geen grijs dat je moet zoeken. Gemeten op het donkere paneel: --login-muted (#B5B5B5) op de goot (#17150F) haalt 8,90:1, en de actieve tekst (#F9F9F9) 14,92:1 op de pil. (Hier stond de meting van het oude witte paneel: #6B6558 op #F1EFE9. Allebei die kleuren staan er niet meer.) Waarom een spoor en geen twee losse knoppen: zo is te zien dat het één keuze is met twee standen, en niet twee dingen die je allebei kunt doen. */ /* /login en /signup: welke kop en link zichtbaar is volgt uit (dashboard.js zetModus). */ #login-page [data-auth-voor] { display: none; } html[data-auth="login"] #login-page [data-auth-voor="login"], html[data-auth="signup"] #login-page [data-auth-voor="signup"] { display: block; } #login-page .auth-switch { margin: var(--sp-5) 0 0; text-align: center; color: var(--login-muted); font-size: 0.9333rem; line-height: 1.5; } #login-page .auth-switch a { color: var(--login-accent-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--login-link-line, currentColor); border-radius: var(--r-xs); transition: text-decoration-color .16s ease, color .16s ease; } #login-page .auth-switch a:hover { color: var(--login-text); text-decoration-color: currentColor; text-decoration-thickness: 2px; } #login-page #signup-uit { margin-bottom: var(--sp-4); } /* Weergave (profielpagina): twee keuzes, de gekozen is zichtbaar zonder kleur alleen (rand + vinkje-vulling). */ .thema-kies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .thema-optie { height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary, var(--text)); font: inherit; font-size: 0.9333rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .thema-optie:hover { background: var(--hover-c); } .thema-optie[aria-checked="true"] { background: var(--accent-c); border-color: var(--accent-ink); color: var(--on-accent); } .thema-optie:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .thema-uitleg { margin: 12px 0 0; font-size: 0.8667rem; line-height: 1.55; color: var(--text-secondary); } #login-page .auth-switch a:focus-visible { outline: 2px solid var(--login-accent-ink); outline-offset: 3px; } .login-modus { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin: var(--sp-5) 0 var(--sp-5); /* Stond hardgecodeerd op #F1EFE9. Dat is precies het soort waarde dat een themawissel overleeft zonder mee te gaan: het paneel werd donker en deze goot bleef een lichte balk midden op het scherm. Nu een token. */ background: var(--login-track); border: 1px solid var(--login-field-line); border-radius: var(--r-md); } .login-modus-knop { appearance: none; border: 0; background: transparent; font-family: inherit; font-size: 0.9333rem; font-weight: 600; letter-spacing: 0.007em; color: var(--login-muted); padding: 9px 10px; border-radius: calc(var(--r-md) - 4px); cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .login-modus-knop:hover { color: var(--login-text); } .login-modus-knop.actief { /* De pil moet OPTILLEN uit de goot. Op --login-panel deed hij dat toen het paneel wit was en de goot beige; op een donker paneel zou hij dezelfde kleur krijgen als het vlak eromheen en was er geen pil meer te zien -- de schakelaar zou zijn toestand kwijt zijn. Vandaar een eigen tint. */ background: var(--login-panel-lift); color: var(--login-text); /* De schaduw was zwart-op-wit gedacht. Op donker doet zwart niets; een lichtlip bovenlangs is wat daar hoogte geeft. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.35); } .login-modus-knop:focus-visible { outline: 2px solid var(--login-accent-ink); outline-offset: 1px; } /* ── Wat je krijgt, voordat je je e-mailadres achterlaat ─────────────────── */ .login-trust { display: flex; flex-wrap: wrap; justify-content: center; /* Krap genoeg om op één regel te passen in het paneel van 380px. Brak hij af, dan stond "Maandelijks opzegbaar" als losse regel eronder en las het als een voetnoot in plaats van als een van de drie. */ gap: var(--sp-1) var(--sp-3); list-style: none; margin: var(--sp-4) 0 0; padding: 0; font-size: 0.8rem; color: var(--login-muted); } .login-trust li { display: flex; align-items: center; gap: 5px; white-space: nowrap; } /* Het vinkje is decoratief; de tekst ernaast zegt het al. Vandaar een vorm en geen letter, en geen aria-label -- een schermlezer die "vinkje vinkje vinkje" voorleest helpt niemand. */ .login-trust li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--login-accent-ink); flex-shrink: 0; } .login-links { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* 24 hoog, want dit is een losstaande knop onder het inlogformulier en geen link midden in een zin -- WCAG 2.5.8 zondert alleen dat tweede uit. Gemeten was hij 141x16. tests/raakdoelen.test.js legt die afweging uit voor de drie soorten die hetzelfde hadden op "Je assistent". */ .login-link { font-size: 0.8667rem; color: var(--login-muted); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; min-height: 24px; display: inline-flex; align-items: center; } .login-link:hover { color: var(--login-text); text-decoration: underline; } /* Stond op --login-border: 1,32:1 op wit, dus in de praktijk onzichtbaar. Een scheidingsteken dat je niet ziet scheidt niets -- dan kun je hem net zo goed weglaten. Nu op de gedempte tekstkleur (5,79:1). */ .login-link-sep { color: var(--login-muted); font-size: 0.8rem; } /* De themaknop stond hier ooit rechtsboven op het merkpaneel. Hij is weg op verzoek: op het inlogscherm valt er niets te wisselen dat de bezoeker helpt -- beide panelen zijn donker in beide thema's. Een knop die het scherm waar hij op staat niet verandert is een knop die alleen maar vragen oproept. In de app zelf blijft #btn-theme staan; die schakelt wel iets. */ /* Full-screen two-panel split. No card, no border-radius */ .login-split { display: flex; width: 100%; height: 100vh; border-radius: 0; box-shadow: none; max-width: none; } /* ── LEFT: form panel (42%) ── */ .login-form-side { flex: 0 0 42%; background: var(--login-panel); display: flex; flex-direction: column; align-items: center; /* flex-start en NIET center, met een auto-marge op het kind hieronder. Waarom: dit paneel scrollt (overflow-y: auto) en zijn inhoud is hoger dan het paneel zodra het venster laag is. Met justify-content: center loopt die overloop naar BEIDE kanten -- en de helft die boven de bovenrand uitsteekt is onbereikbaar. scrollTop staat dan al op 0 terwijl er nog inhoud boven zit; een negatieve scrollpositie bestaat niet. Nagemeten in de browser op 1280x720, een doodgewoon laptopscherm: het paneel was 720 hoog met 801 aan inhoud, en het logo stond op top: -21. Na scrollTop = 0 nog steeds op -21. Lager venster, erger: 600px -> 81px onbereikbaar, 480px -> 141px, 360px -> 201px (logo en kop allebei weg). Op het scherm waar iemand moet INLOGGEN, dus zonder manier om verder te komen. Auto-marges doen wat center hier had moeten doen: is er ruimte over, dan verdelen ze die en staat de inhoud gecentreerd; is er geen ruimte, dan worden ze nul en begint de inhoud op de scroll-oorsprong. */ justify-content: flex-start; padding: 60px 72px; position: relative; overflow-y: auto; } /* Subtle vertical line separator */ .login-form-side::after { content: ''; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px; background: linear-gradient(180deg, transparent, var(--login-border) 30%, var(--login-border) 70%, transparent); } /* Form content constrained for readability */ .login-form-inner { /* De andere helft van de fix hierboven: verticaal centreren zonder de bovenkant onbereikbaar te maken. Horizontaal blijft align-items: center van het paneel het werk doen. */ margin: auto 0; width: 100%; max-width: 380px; } /* Logo linksboven op het formulierpaneel. Dit blok heeft drie oplossingen gehad voor één probleem -- goud op wit -- en ze zijn alle drie weg omdat het paneel niet meer wit is: 1. het logo kaal op wit (2,87:1, een lichte vlek); 2. een donkere plaat eronder (contrast opgelost, maar een zwarte doos op een licht paneel, vlak boven Clerks eigen kaart); 3. een inkt-variant van het logo zelf (leesbaar, maar een ander merkteken op de plek waar iemand Helvaro voor het eerst ziet). Nu staat het echte gouden bestand er kaal op, precies zoals in de zijbalk. Eén merkteken, één bestand, geen plaat. */ .login-logo-top { display: inline-flex; align-self: flex-start; align-items: center; gap: 0; margin-bottom: 44px; padding: 0; background: none; /* Met terugvalwaarde: de schaal-tokens komen uit de Faro-CSS verderop in ditzelfde style-blok, en dat blok is leeg als Faro uitstaat. Zonder terugval krijgt het plaatje dan scherpe hoeken. En nee, de naam van die variabele staat hier bewust niet voluit: een dollarteken met accolades in dit bestand is geen tekst maar een invulling, en die propte hier de complete tokens-CSS midden in deze regel. Precies de val uit CLAUDE.md, en hij is hier echt dichtgeklapt. */ border-radius: var(--r-lg, 18px); /* ── Geen plaat meer ────────────────────────────────────────────────── Hier stond een donker vlak onder het logo, en daarvoor een inkt-variant van het logo zelf. Allebei waren ze hetzelfde probleem in twee vermommingen: het gouden merkteken kan niet op wit. Nagemeten zijn de lichtste lijnen #F2CF7F -- 1,50:1 op wit, en de allerlichtste pixel 1,06:1, dus letterlijk wit op wit. Het paneel is nu donker (zie de tokens bij #login-page), dus het probleem bestaat niet meer: op #1E1B16 haalt datzelfde #F2CF7F 11,45:1. Dat is de reden om de plaat weg te halen en niet alleen bij te kleuren. Een donkere plaat op een donker paneel is een rechthoek die niets scheidt -- dan zie je een doos om het logo waar geen doos hoort. Het logo staat er nu gewoon, zoals in de zijbalk. */ } .login-logo-top img { height: 52px; width: auto; object-fit: contain; display: block; } .login-logo-top .brand-name { display: none; } .login-welcome { font-size: 2.2667rem; /* Zette Inter hier hard, dus de kop-regel bovenaan kwam er niet doorheen en juist het eerste dat een klant ziet stond niet in de huisstijlletter. */ font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; color: var(--login-text); margin-bottom: 8px; line-height: 1.15; } .login-subtitle { color: var(--login-muted); font-size: 1rem; margin-bottom: 40px; line-height: 1.5; } .login-divider { display: none; } .login-logo { display: none; } .login-title { display: none; } .login-icon { display: none; } /* ── RIGHT: brand panel (58%). Calm dark surface, sand accents only ── */ .login-brand-side { /* Het showcase-vlak volgt het thema: licht is de standaard, de tokens (--card, --text, ...) komen dus gewoon uit het actieve thema. */ flex: 1; background: var(--login-stage); color: var(--login-stage-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 72px; position: relative; overflow: hidden; gap: 0; } /* Large floating mock card */ .brand-card-mock { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--card-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px; box-shadow: none; } .brand-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; } .brand-card-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); } .brand-card-dot:first-child { background: var(--accent); } .brand-card-dot:nth-child(2) { background: var(--text-disabled); } .brand-card-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.125em; } /* Stat row */ .brand-stats { display: flex; gap: 14px; margin-bottom: 28px; } .brand-stat { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 12px; text-align: center; transition: border-color 0.3s; } .brand-stat-num { font-variant-numeric: tabular-nums; font-size: 1.7333rem; font-weight: 800; color: var(--accent-ink); line-height: 1; margin-bottom: 4px; } .brand-stat-label { font-size: 0.6667rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } /* Bar chart */ .brand-bars { display: flex; align-items: flex-end; gap: 8px; height: 72px; } .brand-bar { flex: 1; border-radius: 6px 6px 0 0; background: var(--border); transition: background 0.3s; } .brand-bar.active { background: var(--accent); } .brand-bar:nth-child(2) { background: var(--divider); } .brand-bar:nth-child(6) { background: var(--accent-hover); } .brand-bar:nth-child(8) { background: var(--divider); } /* Brand tagline */ .brand-tagline { position: relative; z-index: 1; text-align: center; padding: 0 20px; } .brand-tagline h2 { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-bottom: 10px; font-family: 'Inter', sans-serif; letter-spacing: -0.012em; } .brand-tagline p { font-size: 1rem; color: var(--text-muted); line-height: 1.6; } /* ── Slides wrapper ── */ /* ── Het WhatsApp-mockje op het inlogscherm ───────────────────────────────── Stond hier eerst een staafgrafiek met 24 / 68% / 12. Die cijfers waren verzonnen, ongelabeld, en vertelden een makelaar niet wat dit product doet. Een gesprek wel: dit IS het product, en het tijdstip (21:47) draagt het argument dat geen enkele tagline zo goed kan maken. */ .login-what { margin: 18px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--login-muted, #5B6779); max-width: 42ch; } .brand-chat { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 2px; } .brand-chat-msg { max-width: 84%; padding: 9px 12px; border-radius: var(--r-md); font-size: 0.8rem; line-height: 1.45; position: relative; } .brand-chat-msg span { display: block; } .brand-chat-msg em { display: block; margin-top: 3px; font-style: normal; font-size: 0.6667rem; letter-spacing: 0.02em; opacity: 0.55; } .brand-chat-msg.in { align-self: flex-start; background: rgba(255,255,255,0.07); color: #EDEDED; border-bottom-left-radius: 5px; } .brand-chat-msg.out { align-self: flex-end; background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.24); color: #F2E9D5; border-bottom-right-radius: 5px; } .brand-chat-msg.out em { text-align: right; } .brand-slides-wrap { position: relative; z-index: 1; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; } .brand-slide { position: absolute; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; opacity: 0; transform: translateY(18px); transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1); pointer-events: none; } .brand-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } /* ── Score ring (slide 2) ── */ .brand-score-row { display: flex; align-items: center; gap: 20px; margin-top: 4px; } .brand-score-ring { position: relative; flex-shrink: 0; } .brand-score-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-size: 1.0667rem; font-weight: 800; color: var(--text); } .brand-score-items { flex: 1; display: flex; flex-direction: column; gap: 10px; } .brand-score-item { display: flex; flex-direction: column; gap: 4px; } .brand-score-item span { font-size: 0.6667rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .brand-score-bar-wrap { height: 5px; background: var(--border); border-radius: var(--r-xs); overflow: hidden; } .brand-score-bar-fill { height: 100%; background: var(--accent); border-radius: var(--r-xs); } /* ── Agenda (slide 3) ── */ .brand-agenda { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .brand-agenda-item { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; } .brand-agenda-time { font-size: 0.7333rem; font-weight: 700; color: var(--accent-ink); min-width: 38px; font-variant-numeric: tabular-nums; letter-spacing: 0; } .brand-agenda-content { flex: 1; } .brand-agenda-name { font-size: 0.8667rem; font-weight: 600; color: var(--text); margin-bottom: 2px; } .brand-agenda-tag { font-size: 0.6667rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .brand-agenda-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .brand-agenda-dot.hot { background: var(--error); } .brand-agenda-dot.warm { background: var(--warning); } /* ── Pagination dots ── */ .brand-dots { display: flex; /* 2 en niet 6: de knop is 4px breder geworden (zie .brand-dot), dus dit houdt de hart-op-hart-afstand op dezelfde 26px. */ gap: 2px; justify-content: center; align-items: center; /* De knoppen zijn nu 24px hoog in plaats van 4; de marge compenseert dat, zodat de rij optisch op dezelfde plek blijft staan. */ margin-top: 10px; position: relative; z-index: 1; } /* Het streepje is 4px hoog, en dat is als aanraakdoel te klein (de richtlijn is 24x24). Het streepje zelf laten we met rust -- het hoort een streepje te zijn -- maar de KNOP eromheen krijgt hoogte via padding, en het streepje wordt getekend met een achtergrond die alleen het midden vult. Zo verandert er niets aan wat je ziet en alles aan wat je kunt raken. */ /* De hoogte was hierboven al naar 24 gebracht, de BREEDTE bleef op 20 staan -- gemeten 20x24, dus nog steeds onder de richtlijn. Nu 24 breed, terwijl het streepje 20 blijft (zie de achtergrond hieronder). De gap gaat van 6 naar 2 zodat de hart-op-hart-afstand 26px blijft, precies wat hij was: 20+6 en 24+2 zijn hetzelfde. Wat je ziet verandert dus niet, alleen wat je kunt raken. */ .brand-dot { width: 24px; height: 24px; padding: 0; border-radius: 2px; background: linear-gradient(var(--border), var(--border)) center / 20px 4px no-repeat; border: none; cursor: pointer; transition: background 0.2s cubic-bezier(0.4,0,0.2,1); } button.brand-dot { border: none; padding: 0; } .brand-dot.active { background: linear-gradient(var(--accent), var(--accent)) center / 36px 4px no-repeat; width: 36px; } /* Login footer */ .login-footer { margin-top: auto; padding-top: 24px; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.025em; } .login-footer span { color: var(--login-accent-ink); font-weight: 600; } /* Taalkiezer op het inlogscherm. Waarom hij hier moet staan en niet alleen in Instellingen: de schermtaal volgde tot nu toe de browser, en veranderen kon je hem pas NA het inloggen. Een Vlaamse makelaar met een Engelse Chrome kreeg dus een Engels inlogscherm zonder uitweg -- precies op het moment dat hij nog moet beslissen of hij dit product vertrouwt. Bewust klein en grijs: dit is een ontsnappingsluik, geen keuze die we willen opdringen. Wie de goede taal al ziet, hoort hem nauwelijks te merken. */ .login-lang { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .login-lang select { appearance: none; -webkit-appearance: none; /* Een keuzelijst is bedienbaar, dus de rand die hem herkenbaar maakt valt onder WCAG 1.4.11 -- vandaar --login-field-line en niet de haarlijn. */ border: 1px solid var(--login-field-line, rgba(255,255,255,0.22)); border-radius: var(--r-sm); background: transparent; /* Stond op --text-muted: dat is het token van de APP, dat met het thema meebeweegt, op een paneel dat dat juist niet doet. In het lichte thema werd deze tekst daarmee donkergrijs op een donker paneel. */ color: var(--login-muted); /* Het uitklaplijstje zelf tekent de browser; zonder dit doet hij dat licht, en dan klapt er een wit menu uit een donkere knop. */ color-scheme: dark; font: inherit; font-size: 0.8rem; padding: 5px 26px 5px 9px; cursor: pointer; /* Het pijltje als achtergrond, want appearance:none haalt het weg. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .login-lang select:hover { color: var(--login-accent-ink); } /* Op een touchscreen is 26px hoog te klein om betrouwbaar te raken. Op muis en toetsenbord blijft hij klein: daar is precisie geen probleem, en groter zou hem meer aandacht geven dan hij verdient. */ /* ── Inlogscherm: rijker uiterlijk (alleen opmaak, geen andere indeling) ───── Zelfde tokens, zelfde blokken. Warm paneel links met een gouden lijn bovenin, een diep verlicht vlak rechts, een grotere merkregel en knoppen met lichtval. #login-page voor de specificiteit, zodat de oudere regels hierboven niet terugwinnen. */ #login-page .login-form-side { padding: 56px 88px; background: linear-gradient(180deg, rgba(232,215,177,0.55) 0, rgba(232,215,177,0) 220px), radial-gradient(110% 50% at 0% 100%, rgba(232,215,177,0.38), transparent 65%), var(--login-panel-lift); } #login-page .login-form-side::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #BFA877, #E8D7B1 50%, #BFA877); } #login-page .login-form-inner { max-width: 410px; } #login-page .login-form-side .login-logo-top { margin-bottom: 0; padding-bottom: 48px; } #login-page .login-form-side .login-logo-top img { width: auto; height: 96px; max-width: none; } #login-page .login-form-side .login-welcome { font-size: 3.25rem; line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 16px; } #login-page .login-form-side .login-subtitle { font-size: 1.125rem; line-height: 1.55; margin-bottom: 34px; max-width: 32ch; } #login-page .form-input { min-height: 54px; border-radius: var(--r-lg, 18px); background: #fff; box-shadow: 0 1px 2px rgba(23,19,12,0.05), 0 6px 16px -10px rgba(23,19,12,0.18); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } #login-page .btn-login { min-height: 54px; border-radius: var(--r-lg, 18px); font-weight: 700; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 16px 30px -14px rgba(110,83,32,0.7); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } #login-page .btn-login:hover { transform: translateY(-1px); filter: brightness(1.04); } #login-page .btn-login:active { transform: translateY(0); } #login-page .login-brand-side { background: radial-gradient(75% 60% at 82% 8%, rgba(255,248,228,1), transparent 60%), radial-gradient(65% 55% at 4% 100%, rgba(191,168,119,0.55), transparent 68%), linear-gradient(160deg, #F6EEDC 0%, #E9D9B4 100%); padding: 80px 96px; } #login-page .brand-slides-wrap { filter: drop-shadow(0 36px 46px rgba(60,42,10,0.2)); } #login-page .login-brand-side .brand-tagline h2 { font-size: 3.1rem; line-height: 1.02; letter-spacing: -0.035em; } #login-page .login-brand-side .brand-tagline p { font-size: 1.125rem; } /* ── Live gesprek per kanaal (chatbot, WhatsApp, e-mail, telefoon) ────────── Zonder .live-js (geen script, of "minder beweging") staat alles gewoon zichtbaar. Met .live-js verschijnen de berichten een voor een. Alle beweging staat achter .is-playing, de pauzeknop haalt die klasse weg. */ #login-page .brand-pauze { position: absolute; top: 28px; right: 32px; z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--login-border); background: var(--login-card); color: var(--login-text); cursor: pointer; box-shadow: var(--login-shadow); } #login-page .brand-pauze[hidden] { display: none; } #login-page .brand-pauze:hover { border-color: var(--login-fill-edge); } #login-page .brand-pauze:focus-visible { outline: 2px solid var(--login-accent-ink); outline-offset: 2px; } #login-page .brand-pauze .ico-speel { display: none; } #login-page .brand-pauze[aria-pressed="true"] .ico-pauze { display: none; } #login-page .brand-pauze[aria-pressed="true"] .ico-speel { display: block; } #login-page .brand-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--login-accent-ink); } #login-page .brand-live i { width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; display: inline-block; } #login-page .login-brand-side.is-playing .brand-live i { animation: brandPuls 1.6s ease-in-out infinite; } @keyframes brandPuls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } #login-page .brand-chat { min-height: 268px; } #login-page .brand-slide[data-slide="3"] .brand-chat { min-height: 250px; } #login-page .brand-slide[data-slide="3"] .brand-chat-msg { font-size: 0.94rem; padding: 9px 14px 8px; } #login-page .brand-chat-msg { display: block; } #login-page .brand-spk { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; opacity: 0.7; } #login-page .brand-mail-meta { display: flex; flex-direction: column; gap: 2px; padding: 14px 22px 10px; font-size: 0.9rem; color: var(--login-muted); } #login-page .brand-mail-meta b { color: var(--login-text); font-size: 0.95rem; } #login-page .brand-mail-meta.re { padding: 10px 22px; align-self: flex-end; text-align: right; } #login-page .brand-slide .brand-card-mock { width: 100%; box-sizing: border-box; } #login-page .login-brand-side.live-js .brand-chat-msg[data-live], #login-page .login-brand-side.live-js .brand-mail-meta[data-live] { transition: opacity .35s ease, transform .35s ease; } #login-page .login-brand-side.live-js [data-live]:not(.is-in):not(.is-typing) { opacity: 0; visibility: hidden; transform: translateY(10px); } #login-page .login-brand-side.live-js .brand-chat-msg.is-typing { opacity: 1; visibility: visible; transform: none; min-width: 64px; min-height: 40px; position: relative; } #login-page .login-brand-side.live-js .brand-chat-msg.is-typing > * { visibility: hidden; } #login-page .login-brand-side.live-js .brand-chat-msg.is-typing::after { content: ''; position: absolute; left: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; opacity: .5; box-shadow: 12px 0 0 currentColor, 24px 0 0 currentColor; animation: brandTyp 1s ease-in-out infinite; } @keyframes brandTyp { 0%, 100% { opacity: .25; } 50% { opacity: .75; } } #login-page .login-brand-side.live-js .brand-mail-meta.re.is-typing { opacity: 1; visibility: visible; transform: none; } #login-page .brand-wave { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 40px; margin: 0 0 14px; } #login-page .brand-wave i { flex: 1; height: 12px; border-radius: 2px; background: var(--login-fill-edge); opacity: .8; } #login-page .login-brand-side.is-playing .brand-slide.active .brand-wave i { animation: brandGolf 1.1s ease-in-out infinite; } #login-page .brand-wave i:nth-child(3n) { animation-delay: -.3s; } #login-page .brand-wave i:nth-child(3n+1) { animation-delay: -.6s; } #login-page .brand-wave i:nth-child(4n) { animation-delay: -.9s; } @keyframes brandGolf { 0%, 100% { height: 8px; } 50% { height: 34px; } } #login-page .login-brand-side.live-js .brand-dot.active.run::after { width: 0; animation: brandVul var(--dur, 9000ms) linear forwards; } @keyframes brandVul { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { #login-page .brand-live i, #login-page .brand-wave i, #login-page .brand-chat-msg.is-typing::after { animation: none !important; } #login-page .login-brand-side [data-live] { transition: none !important; } } /* Glas-effect op de gesprekskaart (inspiratie Gile/BrightNest, notities in de vault). */ #login-page .login-brand-side .brand-card-mock { background: rgba(255,252,246,0.74); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid rgba(255,255,255,0.75); } [data-theme="dark"] #login-page .login-brand-side .brand-card-mock { background: rgba(33,29,22,0.72); border-color: rgba(232,215,177,0.16); } /* Inspiratie-ronde 2 (notities in de vault): klein label boven de kop (BrightNest), een "Live"-pil boven de kop rechts (Bonnie), een gouden gloed achter de kaart (BrightNest/Gile) en een zwevend resultaatkaartje per kanaal (Riskora). */ #login-page .login-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--login-accent-ink); } #login-page .login-kicker i { width: 8px; height: 8px; background: linear-gradient(135deg, #E8D7B1, #BFA877); transform: rotate(45deg); display: inline-block; } #login-page .brand-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border-radius: var(--r-full, 999px); border: 1px solid rgba(255,255,255,0.8); background: rgba(255,252,246,0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.8rem; font-weight: 600; color: var(--login-text); box-shadow: 0 6px 18px -10px rgba(60,42,10,0.35); } #login-page .brand-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; display: inline-block; } #login-page .brand-kicker span + span::before { content: '·'; margin-right: 8px; color: var(--login-muted); } #login-page .brand-slides-wrap .brand-slide.active { position: relative; } #login-page .brand-slides-wrap .brand-slide.active::before { content: ''; position: absolute; left: -12%; right: -12%; top: 30%; bottom: -6%; background: radial-gradient(closest-side, rgba(226,186,104,0.42), rgba(226,186,104,0)); filter: blur(24px); pointer-events: none; } #login-page .brand-slide .brand-card-mock { position: relative; z-index: 1; overflow: visible; margin-bottom: 30px; } #login-page .brand-slide .brand-tagline { position: relative; z-index: 1; } #login-page .brand-result { position: absolute; left: 24px; bottom: -22px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: var(--r-full, 999px); background: #1F1D19; color: #F4E7C8; font-size: 0.85rem; font-weight: 600; box-shadow: 0 16px 34px -12px rgba(23,19,12,0.55); } #login-page .brand-result svg { box-sizing: content-box; padding: 5px; border-radius: 50%; background: #E8D7B1; color: #1F1D19; } #login-page .login-brand-side.live-js .brand-result.is-typing { opacity: 0; visibility: hidden; } [data-theme="dark"] #login-page .brand-kicker { background: rgba(33,29,22,0.7); border-color: rgba(232,215,177,0.16); color: var(--login-text); } [data-theme="dark"] #login-page .brand-result { background: #F4E7C8; color: #1F1D19; } /* Het linkerpaneel mag niet scrollen (eigenaar, 28/10). Op lage vensters wordt het compacter zodat alles past; de schuifbalk is verborgen. Scrollen met wiel of toetsen blijft mogelijk als een venster echt te laag is, zodat er nooit iets onbereikbaar wordt. */ #login-page .login-form-side { scrollbar-width: none; } /* Eigenaar, 28/10: het inlogscherm mag helemaal niet scrollen, ook niet met wiel of toetsen. De compacte regels hieronder zorgen dat alles past vanaf ongeveer 560 px hoogte. */ #login-page .login-split .login-form-side { overflow: hidden; overscroll-behavior: none; } html:has(#login-page[style*="flex"]), body:has(#login-page[style*="flex"]) { overflow: hidden; } #login-page .login-form-side::-webkit-scrollbar { display: none; } @media (max-height: 960px) { #login-page .login-split .login-form-side { padding-top: 22px; padding-bottom: 10px; } #login-page .login-form-side .login-logo-top { padding-bottom: 24px; } #login-page .login-form-side .login-logo-top img { height: 80px; } #login-page .login-kicker { margin-bottom: 8px; } #login-page .login-form-side .login-welcome { font-size: 2.5rem; margin-bottom: 8px; } #login-page .login-form-side .login-subtitle { font-size: 1rem; margin-bottom: 20px; } #login-page .login-voet { margin-top: 16px; padding-top: 12px; } #login-page .login-brand-side .brand-slide .brand-chat { height: calc(100vh - 440px); min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } #login-page .login-brand-side .brand-slide[data-slide="2"] .brand-chat { height: calc(100vh - 490px); } #login-page .login-brand-side .brand-slide[data-slide="3"] .brand-chat { height: calc(100vh - 490px); } #login-page .login-brand-side.live-js [data-live]:not(.is-in):not(.is-typing) { display: none; } #login-page .login-brand-side .brand-chat-msg { flex: none; } #login-page .login-brand-side .brand-slides-wrap { min-height: 0; } } @media (max-height: 720px) { #login-page .login-form-side .login-logo-top { padding-bottom: 8px; } #login-page .login-form-side .login-logo-top img { height: 62px; } #login-page .login-kicker { display: none; } #login-page .login-form-side .login-welcome { font-size: 1.75rem; margin-bottom: 2px; } #login-page .login-form-side .login-subtitle { display: none !important; } #login-page .login-footer { font-size: 0.75rem; } #login-page .login-lang select { height: 30px; } #login-page .login-brand-side { padding-top: 24px; padding-bottom: 20px; justify-content: center; } #login-page .login-brand-side .brand-tagline h2 { font-size: 1.6rem; margin-bottom: 4px; } #login-page .login-brand-side .brand-tagline p { display: none; } #login-page .brand-kicker { margin-bottom: 10px; } #login-page .brand-chat { min-height: 0; } #login-page .login-brand-side .brand-slide .brand-chat { height: calc(100vh - 310px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; } #login-page .login-brand-side.live-js [data-live]:not(.is-in):not(.is-typing) { display: none; } #login-page .login-brand-side .brand-chat-msg { flex: none; } #login-page .brand-spk { display: none; } #login-page .login-brand-side .brand-mail-meta { padding: 6px 22px 4px; font-size: 0.82rem; } #login-page .login-brand-side .brand-slide[data-slide="2"] .brand-chat { height: calc(100vh - 350px); } #login-page .brand-slide[data-slide="3"] .brand-chat { min-height: 190px; } #login-page .brand-wave { height: 28px; margin-bottom: 8px; } #login-page .brand-dots { margin-top: 10px; } #login-page .login-brand-side .brand-slides-wrap { min-height: 0; } #login-page .login-brand-side .brand-chat-msg { font-size: 0.85rem; padding: 7px 12px 6px; line-height: 1.35; } #login-page .login-brand-side .brand-chat { gap: 8px; } #login-page .login-split .login-form-side { padding-top: 12px; padding-bottom: 8px; } #login-page .login-split .login-brand-side { padding-top: 14px; padding-bottom: 10px; } #login-page .brand-slide .brand-card-mock { margin-bottom: 24px; } #login-page .login-voet { gap: 6px 12px; } #login-page .login-voet { margin-top: 10px; padding-top: 8px; } #login-page .auth-switch { margin-top: 8px; } } /* Geen zwart in het gesprek (eigenaar, 28/10): antwoorden van de assistent en het resultaatkaartje in een diep groen dat bij het goud past. Wit op #1E4D38 haalt ruim 9:1. */ #login-page .login-brand-side .brand-slide .brand-chat-msg.out { background: #1E4D38; color: #FFFFFF; } #login-page .login-brand-side .brand-slide .brand-chat-msg.out em { color: rgba(255,255,255,0.78); } #login-page .login-brand-side .brand-result { background: #1E4D38; color: #FFFFFF; } #login-page .login-brand-side .brand-result svg { background: #E8D7B1; color: #1F4733; } [data-theme="dark"] #login-page .login-brand-side .brand-result { background: #1E4D38; color: #FFFFFF; } /* Zwevende berichtjes met zachte schaduwen (eigenaar, 28/10). */ #login-page .login-brand-side .brand-slide .brand-chat-msg.in { background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,19,12,0.05), 0 10px 24px -12px rgba(23,19,12,0.28); } #login-page .login-brand-side .brand-slide .brand-chat-msg.out { box-shadow: 0 2px 4px rgba(30,77,56,0.18), 0 14px 28px -12px rgba(30,77,56,0.6); } #login-page .login-brand-side .brand-slide .brand-chat { padding-bottom: 6px; } #login-page .login-brand-side .brand-card-mock { box-shadow: 0 2px 6px rgba(60,42,10,0.06), 0 30px 60px -24px rgba(60,42,10,0.35); } #login-page .login-brand-side .brand-slide .brand-card-mock { background: rgba(247,240,228,0.86); } [data-theme="dark"] #login-page .login-brand-side .brand-slide .brand-chat-msg.in { background: #2A251C; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6); } /* Vloeiend binnenkomen: elk nieuw bericht glijdt zacht omhoog en vervaagt in (eindig, geen lus). */ #login-page .login-brand-side.live-js .brand-chat-msg.is-typing, #login-page .login-brand-side.live-js .brand-chat-msg.is-in, #login-page .login-brand-side.live-js .brand-mail-meta.is-in { animation: brandIn .5s cubic-bezier(.22,1,.36,1) both; } #login-page .login-brand-side.live-js .brand-result.is-in { animation: brandIn .6s cubic-bezier(.22,1,.36,1) both; } @keyframes brandIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #login-page .login-brand-side [data-live] { animation: none !important; } } [data-theme="dark"] #login-page .login-form-side { background: linear-gradient(180deg, rgba(232,215,177,0.12) 0, rgba(232,215,177,0) 220px), var(--login-panel); } [data-theme="dark"] #login-page .form-input { background: var(--login-input-bg); } [data-theme="dark"] #login-page .login-brand-side { background: radial-gradient(75% 60% at 82% 8%, rgba(232,215,177,0.16), transparent 60%), radial-gradient(65% 55% at 4% 100%, rgba(191,168,119,0.14), transparent 68%), var(--login-stage); } [data-theme="dark"] #login-page .brand-slides-wrap { filter: drop-shadow(0 36px 46px rgba(0,0,0,0.5)); } @media (prefers-reduced-motion: reduce) { #login-page .btn-login, #login-page .form-input { transition: none; } #login-page .btn-login:hover { transform: none; } } @media (hover: none) and (pointer: coarse) { .login-lang select { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* Zie de opmerking bij .row-action-btn: op een aanraakscherm hoort een bedienbaar element minstens 44x44 te zijn. De ICOON blijft even groot; alleen het raakvlak groeit, dus de rij ziet er niet anders uit. */ .row-action-btn { width: 44px; height: 44px; } /* Een sluitknop die op de KLEINSTE schermen krimpt is precies verkeerd om. Stond op 28px onder 480px; nu blijft hij minstens even groot als de rest. */ .panel-close { width: 44px; height: 44px; } .btn-icon { min-height: 44px; } } /* Zichtbare focusring: dit is een van de weinige bedienbare dingen op het scherm buiten de inlogkaart, dus wie met het toetsenbord werkt moet hem kunnen vinden. */ .login-lang select:focus-visible { outline: 2px solid var(--login-accent-ink); outline-offset: 2px; } /* Responsive: stack on mobile */ @media (max-width: 860px) { .login-split { flex-direction: column; height: auto; } /* De regel flex:none liet het paneel precies zo hoog worden als zijn inhoud. Het merkpaneel eronder staat op display:none, dus onder de laatste voetnoot bleef de rest van het scherm over als een kale band in de kleur van #login-page -- gemeten 227px zwart onder de footer op een venster van 1139px. Geen scheiding, geen inhoud, alleen een gat. min-height in plaats van height: bij weinig ruimte moet het paneel nog steeds mogen groeien en scrollen. */ .login-form-side { flex: 1 0 auto; min-height: 100%; padding: 36px 24px 48px; align-items: center; } .login-form-inner { max-width: 420px; } /* Het merkpaneel gaat weg op smal, in plaats van onder het formulier te stapelen. Gestapeld kwam het namelijk ONDER de footer terecht -- eerst "(c) 2026 Helvaro", daarna nog anderhalf scherm marketing. De pagina werd ruim 2.000px hoog op een telefoon van 844. Wie op zijn telefoon naar het inlogscherm gaat, wil inloggen; de belofte staat al in de regel onder het formulier. */ .login-brand-side { display: none; } /* Het logo was hier even groot als op desktop en duwde het formulier tot bijna een derde van het scherm naar beneden. */ .login-logo-top { margin-bottom: 24px; align-self: center; } .login-logo-top img { max-width: 150px; } } /* Hier stonden twee light-overschrijvingen voor het inlogscherm. Ze deden al niets -- .login-form-side kreeg background: var(--login-panel), wat het buiten de media-query ook al had -- en nu het paneel in beide thema's donker is, zouden ze alleen maar suggereren dat er nog een lichte variant bestaat. Het inlogscherm volgt het thema met opzet niet, om dezelfde reden als het merkpaneel ernaast: dit is een podium, geen oppervlak van de app. Er is op dit scherm ook geen gebruiker om een voorkeur van te kennen -- initTheme heeft nog niets ingelogd om op af te gaan, en elke nieuwe bezoeker krijgt toch dark. Eén ondergrond, één logo, geen tweede palet om bij te houden. #login-page houdt dus ook in het lichte thema zijn eigen achtergrond. */ /* Hier stonden drie overschrijvingen die het merkpaneel in het lichte thema licht maakten -- de chatballonnen kregen donkere tekst, het puntenraster werd donker. Dat was een correcte oplossing voor het verkeerde probleem: het paneel hoorde helemaal niet licht te worden. Nu het op --login-stage staat en in beide thema's donker blijft, zouden deze regels de demo juist ONleesbaar maken: donkere tekst op een donker paneel. Ze zijn daarom weg in plaats van aangepast. */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--login-muted); text-transform: uppercase; letter-spacing: 0.067em; margin-bottom: 8px; } .form-input { width: 100%; padding: 15px 18px; background: var(--login-input-bg); border: 1.5px solid var(--login-field-line); border-radius: var(--r-md); color: var(--login-text); font-size: 1rem; font-family: 'Inter', sans-serif; transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; min-height: 52px; touch-action: manipulation; } .form-input:hover { border-color: var(--login-input-hover); background: var(--login-input-bg); } .form-input:focus { border-color: var(--login-accent-ink); background: var(--login-input-bg); box-shadow: 0 0 0 3px var(--login-ring); } .form-input:focus-visible { outline: none; } .form-input::placeholder { color: var(--login-placeholder); } /* Error state for inputs */ .form-input.error { border-color: var(--error); background: rgba(220,38,38,0.03); } .form-input.error:focus { box-shadow: 0 0 0 4px rgba(220,38,38,0.12); } /* Login footer */ .login-footer { text-align: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--login-border); color: var(--login-muted); font-size: 0.8rem; letter-spacing: 0.025em; } .login-footer span { /* Stond op --accent-pressed: zand op wit, 2,14:1. Dit is de regel die won van de eerdere hierboven, dus dit was wat je echt zag. */ color: var(--login-accent-ink); font-weight: 600; } .btn-login { width: 100%; padding: 17px; background: var(--accent); border: none; border-radius: var(--radius-btn); color: var(--on-accent); font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.013em; cursor: pointer; margin-top: 16px; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: none; min-height: 56px; touch-action: manipulation; } .btn-login::before { content: ''; position: absolute; inset: 0; background: var(--accent-hover); opacity: 0; transition: opacity 0.2s ease; } /* Fase 4: was width/height 0 -> 200px, een layout-transition-vondst. Vaste maat nu, geschaald met transform -- zelfde ripple, geen reflow. */ .btn-login::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background: rgba(18,18,18,0.12); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s var(--ease-out); } .btn-login:hover::before { opacity: 1; } .btn-login:hover { transform: translateY(-1px); box-shadow: var(--elev-1); } .btn-login:active { transform: translateY(0) scale(0.98); background: var(--accent-pressed); box-shadow: none; transition-duration: var(--dur-fast); } .btn-login:active::after { transform: translate(-50%, -50%) scale(1); } .btn-login:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232,215,177,0.35); } .btn-login span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; } /* Loading state for login button */ .btn-login.loading { pointer-events: none; opacity: 0.85; } .btn-login.loading span { opacity: 0; } .btn-login.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(18,18,18,0.25); border-top-color: var(--on-accent); border-radius: 50%; animation: spin 0.7s linear infinite; } .login-error { display: none; margin-top: 16px; padding: 12px 16px; /* Het vlak mag iets zwaarder nu het op donker ligt: 6% rood op bijna-zwart is geen vlak meer maar ruis. */ background: var(--login-error-bg); border: 1px solid var(--login-error-line); border-radius: var(--r-sm); /* Deze regel heeft twee keer eerder een onleesbare foutmelding opgeleverd, allebei op dezelfde manier: de kleur werd gekozen voor het paneel van toen, en het paneel veranderde. Eerst stond hier var(--error) -- een custom property die in dit bestand nergens bestaat. Een var() zonder fallback maakt de hele declaratie ongeldig, dus erfde de tekst #F9F9F9 van de ouder: wit op lichtroze. Daarna #B42318, correct op het witte paneel (7,6:1) en nu 2,61:1 op #1E1B16 -- opnieuw de enige foutmelding die deze gebruiker te zien krijgt, opnieuw onleesbaar. Nu dezelfde tint als colorDanger in CLERK_APPEARANCE, zodat onze eigen foutmelding en die van Clerk niet uit elkaar kunnen lopen: 6,20:1. */ color: var(--login-error); font-size: 0.8667rem; font-weight: 500; text-align: center; } .login-error.visible { display: flex; align-items: center; justify-content: center; gap: 8px; } /* Clerk renders its own "Don't have an account? Sign up" footer, which is still English and navigates away to a Clerk-hosted page. Setting appearance.elements.footerAction did not take, so this targets Clerk's own stable cl- classes instead of guessing at appearance keys. Our own in-page switch sits directly below and does the same job in Dutch. */ #clerk-signin .cl-footerAction, #clerk-signin .cl-footerAction__signIn, #clerk-signin .cl-footerAction__signUp { display: none !important; } /* De "Secured by Clerk"-balk. Die stond als grijze strook PAL onder de hoofdknop -- het laatste wat iemand leest voor hij besluit een account te maken. Een merk dat niet van jou is, op de plek waar het vertrouwen wordt opgebouwd, en met een grijze vulling die de knop erboven visueel afsnijdt. Weghalen is toegestaan op een betaald Clerk-plan; op het gratis plan hoort het te blijven staan. Staat dit er ooit weer, dan is dat de reden -- en dan is het weghalen ervan geen ontwerpkeuze meer maar een licentiekwestie. Dezelfde aanpak als de footerAction hierboven: Clerks eigen stabiele cl-klassen, niet gokken naar appearance-sleutels. */ #clerk-signin .cl-footer, #clerk-signin .cl-internal-uyu30o, #clerk-signin [class*="cl-footer"]:not([class*="cl-footerAction"]) { display: none !important; } /* ═══ Clerk in Helvaro's vormentaal ═══════════════════════════════════════ Clerk levert het formulier; wij leveren het paneel. Tot nu toe waren dat twee ontwerpen boven elkaar: een witte kaart met een eigen rand en schaduw, midden op een wit paneel, met systeemletters ertussen. Het las als een widget die op de pagina geplakt was. Alles hieronder heeft één doel: de KAART laten verdwijnen en het FORMULIER laten staan, in de typografie en de kleuren die het paneel al gebruikt. Geen enkele regel verzint een kleur -- ze komen uit de --login-* tokens die #login-page hierboven al definieert. Waarom CSS en niet appearance.elements: dat is hier al eens geprobeerd voor footerAction en het nam niet (zie de opmerking hierboven). appearance blijft wel in gebruik voor wat het betrouwbaar doet -- kleuren, letter en radius als variabelen, zie CLERK_APPEARANCE. */ /* ── De kaart zelf: weg ──────────────────────────────────────────────────── Let op de eerste selector, want die is niet vanzelfsprekend: Clerk mount NIET in #clerk-signin, hij zet zijn cl-rootBox OP dat element. Host en rootBox zijn hetzelfde ding, dus '#clerk-signin .cl-rootBox' (met spatie) raakt niets. Dat is meer dan een schoonheidsfoutje. Clerk geeft die rootBox een breedte die met de inhoud meebeweegt. Zolang zijn kaart een vaste breedte had viel dat niet op; haal die weg en zet de kinderen op 100%, dan wijst die 100% naar een ouder die zichzelf om de inhoud vouwt -- en klapt het formulier in tot de smalste tekst erin. Gemeten: 195 px in een paneel van 380. */ #clerk-signin, #clerk-signin .cl-cardBox { width: 100%; box-shadow: none; border: none; background: transparent; } #clerk-signin .cl-card { background: transparent; border: none; box-shadow: none; padding: 0; width: 100%; gap: 18px; /* Clerk zet hier margin: -1px -1px 0. Dat is zijn eigen truc om de kaart over de 1px rand van zijn omhulsel heen te trekken -- correct, zolang die rand er is. Wij halen hem hierboven weg (border: none), en dan compenseert die negatieve marge niets meer: hij verschuift het HELE Clerk-formulier 1px omhoog en 1px naar links. Gemeten: onze segmentschakelaar stond op x=56,5 en elk Clerk-element -- de Google-knop, het invoerveld, de hoofdknop -- op x=55,5. Eén pixel scheef over de volle hoogte van het formulier, met als zichtbaar gevolg dat de bovenrand van de Google-knop onder de schakelaar vandaan piepte. Precies de vlek die op het inlogscherm te zien was. Niet op te lossen met padding, want de verschuiving zit in de marge; en niet met top, want het element is niet gepositioneerd. */ margin: 0; } /* Clerks eigen kop weg. Het paneel heeft er al een, in Space Grotesk en in de taal van de klant, en zetModus() wisselt hem mee tussen inloggen en registreren. Zie ook eigenFormulier(), waar hij niet langer verborgen wordt. */ #clerk-signin .cl-header { display: none; } /* ── Google-knop: een rustige tweede keuze ───────────────────────────────── */ #clerk-signin .cl-socialButtonsRoot, #clerk-signin .cl-socialButtons { width: 100%; gap: 10px; } #clerk-signin .cl-socialButtonsBlockButton { width: 100%; height: 46px; /* Niet --login-panel: dan heeft de knop dezelfde kleur als het paneel eronder en leunt hij volledig op zijn rand. Op wit viel dat niet op; op donker is een vlak dat NIET optilt geen knop. Zelfde tint als de actieve pil, zodat alles wat je kunt indrukken op dit scherm op dezelfde hoogte ligt. */ background: var(--login-panel-lift); border: 1px solid var(--login-field-line); border-radius: var(--r-sm); box-shadow: none; transition: border-color .15s ease, background .15s ease; } #clerk-signin .cl-socialButtonsBlockButton:hover { background: rgba(232, 215, 177, .10); border-color: var(--login-accent-ink); } #clerk-signin .cl-socialButtonsBlockButtonText { font-family: 'Space Grotesk', sans-serif; font-size: 0.9333rem; font-weight: 500; color: var(--login-text); } /* ── Het witte blokje op de Google-knop ───────────────────────────────────── Clerk zet een badge op de aanmeldmethode die je de VORIGE keer gebruikte ("Last used"). Die badge is niet meegestyled toen dit paneel donker werd, dus hij bleef wit met donkere tekst -- een fel blokje dat half over de rand van de knop hing en er kapot uitzag. Niet verbergen maar meekleuren: het is nuttige informatie op een scherm waar iemand twijfelt met welk account hij ook alweer binnenkwam. Wel in de gedempte tinten van dit paneel, zodat hij vertelt zonder te schreeuwen. position:relative op de knop zelf: de badge wordt absoluut geplaatst, en zonder een houvast klom hij naar de kaart eromheen -- dat is precies waarom hij over de rand viel. */ #clerk-signin .cl-socialButtonsBlockButton { position: relative; } #clerk-signin .cl-socialButtonsBlockButton .cl-badge, #clerk-signin .cl-badge { background: var(--login-panel-lift); border: 1px solid var(--login-field-line); color: var(--login-muted); font-family: 'Space Grotesk', sans-serif; font-size: 0.6667rem; font-weight: 600; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-full); /* Binnen de knop houden. De badge stond rechtsboven half buiten de rand; deze twee waarden zetten hem netjes in de rechterhelft, verticaal gecentreerd, waar hij de tekst niet raakt. */ top: 50%; right: 10px; transform: translateY(-50%); box-shadow: none; } /* ── Scheiding ───────────────────────────────────────────────────────────── */ #clerk-signin .cl-dividerRow { gap: 12px; margin: 4px 0; } #clerk-signin .cl-dividerLine { background: var(--login-border); height: 1px; } #clerk-signin .cl-dividerText { font-family: 'Space Grotesk', sans-serif; font-size: 0.6667rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--login-placeholder); } /* ── Velden ────────────────────────────────────────────────────────────── Exact de vorm van .form-label / .form-input hierboven, zodat het vangnet en Clerks formulier niet te onderscheiden zijn. Dat is niet alleen netjes: valt Clerk uit, dan wisselt de pagina naar het eigen formulier, en die wissel hoort niet op te vallen. GEEN regel op .cl-required. Die klasse ziet eruit als het sterretje bij een verplicht veld, maar Clerk zet hem op het INVOERVELD zelf. Een display:none erop laat het e-mailveld verdwijnen terwijl de knop eronder blijft staan -- een inlogscherm zonder invoerveld, dat er verder normaal uitziet. */ #clerk-signin .cl-formFieldLabelRow { margin-bottom: 7px; } #clerk-signin .cl-formFieldLabel { font-family: 'Space Grotesk', sans-serif; font-size: 0.7333rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--login-muted); } #clerk-signin .cl-formFieldInput, #clerk-signin .cl-input { /* min-height en flex staan er niet voor de sier. Het veld is een flexitem in een rij die zich om de inhoud vouwt; 'height' alleen wordt daar weggedrukt en het veld kwam uit op 33,75 px naast een knop van 48. */ height: 46px; min-height: 46px; flex: 0 0 auto; box-sizing: border-box; padding: 0 14px; background: var(--login-input-bg); border: 1px solid var(--login-field-line); border-radius: var(--r-sm); font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--login-text); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } #clerk-signin .cl-formFieldInput::placeholder { color: var(--login-placeholder); } #clerk-signin .cl-formFieldInput:focus, #clerk-signin .cl-input:focus { outline: none; border-color: var(--login-accent-ink); box-shadow: 0 0 0 3px var(--login-ring); } #clerk-signin .cl-formFieldInputGroup { border-radius: var(--r-sm); } #clerk-signin .cl-formFieldInputShowPasswordButton { color: var(--login-muted); } #clerk-signin .cl-formFieldInputShowPasswordButton:hover { color: var(--login-text); } /* ── De hoofdknop ──────────────────────────────────────────────────────── Zand met donkere inkt, precies zoals .btn-login. Clerk zette hier een bijna zwarte knop neer: de enige plek op het scherm waar de merkkleur hoort te staan, en juist daar stond hij niet. */ #clerk-signin .cl-formButtonPrimary { width: 100%; height: 48px; margin-top: 4px; background: var(--accent-c); border: none; border-radius: var(--r-sm); box-shadow: none; text-shadow: none; font-family: 'Space Grotesk', sans-serif; font-size: 0.9333rem; font-weight: 600; letter-spacing: .03em; text-transform: none; color: var(--on-accent); transition: background .15s ease, transform .12s ease; } #clerk-signin .cl-formButtonPrimary:hover { background: var(--accent-hover-c); } #clerk-signin .cl-formButtonPrimary:active { transform: translateY(1px); } #clerk-signin .cl-formButtonPrimary:focus-visible { outline: 2px solid var(--login-accent-ink); outline-offset: 2px; } #clerk-signin .cl-buttonArrowIcon { color: var(--on-accent); opacity: .75; } /* ── Foutmeldingen in dezelfde toon als .login-error ─────────────────────── */ #clerk-signin .cl-formFieldErrorText, #clerk-signin .cl-formFieldWarningText, #clerk-signin .cl-alertText { font-family: 'Inter', sans-serif; font-size: 0.8667rem; color: var(--login-error); } /* Sign-in / sign-up switch under the Clerk component */ #clerk-toggle { text-align: center; margin-top: 16px; font-size: 0.8667rem; /* --text-disabled haalde 3,2:1 (donker) en 2,5:1 (licht); leesbare tekst vraagt 4,5:1 (WCAG 1.4.3, audit 26/09). */ color: var(--text-secondary); } .clerk-toggle-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--login-accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .clerk-toggle-link:hover { color: var(--login-text); } .clerk-toggle-link:focus-visible { outline: 2px solid var(--login-accent-ink); outline-offset: 2px; border-radius: var(--r-xs); } .login-error::before { content: ''; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); background-size: contain; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .skeleton, .skeleton::after { animation: none; } .login-error { animation: none; } .btn-login.loading::after { animation: spin 1.5s linear infinite; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ============================================================ CALENDAR (WEEK VIEW) ============================================================ */ .cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg-primary); } .cal-today-btn { padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); color: var(--text-primary); font-size: 0.8667rem; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: border-color 0.2s; } .cal-today-btn:hover { border-color: rgba(var(--accent-rgb),0.5); color: var(--accent-ink); } .cal-nav-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-card); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; } .cal-nav-btn:hover { border-color: rgba(var(--accent-rgb),0.5); color: var(--accent-ink); } .cal-range-label { font-size: 1.0667rem; font-weight: 700; color: var(--text-primary); margin-left: 4px; font-family: 'Inter', sans-serif; } .cal-book-btn { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--accent); border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8667rem; font-weight: 600; text-decoration: none; box-shadow: none; transition: transform 0.15s, box-shadow 0.15s; } .cal-book-btn:hover { transform: translateY(-1px); box-shadow: none; } /* Op een telefoon stak de boekknop 14px buiten het scherm (gemeten op 375px): de werkbalk wikkelt dan, en de knop krijgt de hele tweede regel. */ @media (max-width: 480px) { .cal-toolbar { flex-wrap: wrap; padding: 10px 12px; row-gap: 10px; } .cal-book-btn { margin-left: 0; flex: 1 1 100%; justify-content: center; } } /* Day header row */ .cal-day-headers { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg-primary); } .cal-gutter { width: 54px; flex-shrink: 0; } .cal-day-cols-header { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } /* Zeven dagkolommen plus een gutter van 54px legden een bodem van 425px onder de week. Op 390px verdween zondag daardoor volledig en werd zaterdag doormidden gesneden, zonder scrollbalk, want de pagina verbergt zijn overflow. De gutter (de uren-as) is het enige dat hier gemist kan worden. */ @media (max-width: 480px) { .cal-gutter { width: 34px; } .cal-day-header-cell { padding: 8px 2px; } } .cal-day-header-cell { padding: 10px 8px; text-align: center; border-left: 1px solid var(--border); } .cal-day-header-cell .cal-day-name { font-size: 0.7333rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.073em; color: var(--text-muted); margin-bottom: 4px; } .cal-day-header-cell .cal-day-num { font-size: 1.4667rem; font-weight: 700; color: var(--text-primary); line-height: 1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto; } .cal-day-header-cell.cal-today .cal-day-num { background: var(--accent); color: var(--on-accent); box-shadow: none; } .cal-day-header-cell.cal-today .cal-day-name { color: var(--accent-ink); } /* Scrollable grid */ .cal-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; } .cal-scroll-area::-webkit-scrollbar { width: 6px; } .cal-scroll-area::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.3); border-radius: var(--r-xs); } .cal-time-grid { display: flex; min-height: 880px; } .cal-time-labels { width: 58px; flex-shrink: 0; position: relative; } .cal-time-label { height: 80px; display: flex; flex-direction: column; align-items: flex-end; padding-right: 10px; font-size: 0.7333rem; color: var(--text-muted); font-weight: 600; padding-top: 4px; box-sizing: border-box; position: relative; } .cal-time-label-half { position: absolute; top: 40px; right: 10px; font-size: 0.6rem; color: var(--text-muted); opacity: 0.5; font-weight: 500; } .cal-day-cols { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; } .cal-day-col { border-left: 1px solid var(--border); position: relative; } .cal-hour-row { height: 80px; border-bottom: 1px solid rgba(255,255,255,0.05); box-sizing: border-box; position: relative; } .cal-hour-row::after { content: ''; position: absolute; left: 0; right: 0; top: 40px; border-bottom: 1px dashed rgba(255,255,255,0.035); pointer-events: none; } [data-theme="light"] .cal-hour-row::after { border-bottom-color: rgba(0,0,0,0.06); } .cal-day-col.cal-today-col { background: rgba(var(--accent-rgb),0.03); } /* Now line */ .cal-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--error); z-index: 10; pointer-events: none; } .cal-now-line::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; background: var(--error); border-radius: 50%; } /* Event blocks */ .cal-event { position: absolute; left: 3px; right: 3px; border-radius: var(--r-sm); padding: 6px 9px; font-size: 0.8rem; font-weight: 600; color: var(--on-accent); cursor: pointer; overflow: hidden; z-index: 5; transition: filter 0.15s, transform 0.12s, box-shadow 0.15s; min-height: 28px; line-height: 1.3; box-shadow: 0 2px 10px rgba(0,0,0,0.28); display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(255,255,255,0.35); } /* Read-only entries mirrored from the client's own Google Calendar. They occupy the slot so nothing gets double-booked, but they are deliberately quiet and not clickable, Helvaro doesn't own them and can't edit them. */ .cal-event-external { background: repeating-linear-gradient( 135deg, var(--bg-card-alt) 0 6px, var(--hover-c) 6px 12px ); color: var(--text-muted-c); border-left: 1px solid var(--border-c); box-shadow: none; cursor: default; font-weight: 500; z-index: 4; } .cal-event-external:hover { filter: none; transform: none; box-shadow: none; z-index: 4; } .cal-event:hover { filter: brightness(1.1); transform: translateX(-1px) scale(1.018); box-shadow: 0 6px 20px rgba(0,0,0,0.38); z-index: 10; } .cal-event .cal-event-time { font-size: 0.6667rem; font-weight: 800; opacity: 1; letter-spacing: 0.02em; white-space: nowrap; } .cal-event .cal-event-name { font-size: 0.7333rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-event .cal-event-type { font-size: 0.6rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-event .cal-event-dur { font-size: 0.6rem; font-weight: 600; opacity: 0.75; white-space: nowrap; margin-top: auto; padding-top: 2px; } /* ============================================================ PROFILE PAGE ============================================================ */ .profile-wrap { width: 100%; display: flex; flex-direction: column; gap: 20px; } .profile-hero { display: flex; align-items: center; gap: 24px; background: rgba(var(--accent-rgb),0.07); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: var(--r-lg); padding: 28px 32px; } .profile-avatar-lg { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.7333rem; font-weight: 800; color: var(--on-accent); flex-shrink: 0; font-family: 'Inter', sans-serif; box-shadow: none; } .profile-name-lg { font-size: 1.4667rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; font-family: 'Inter', sans-serif; } .profile-email-lg { font-size: 0.9333rem; color: var(--text-muted); margin-bottom: 10px; } .profile-badge { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--r-lg); font-size: 0.7333rem; font-weight: 600; background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent-ink); } .profile-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .profile-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; text-align: center; } .profile-stat-card .psv { font-size: 1.8667rem; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; } .profile-stat-card .psl { font-size: 0.7333rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.073em; font-weight: 600; } .profile-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; } .profile-card-title { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.083em; color: var(--text-muted); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .profile-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8667rem; color: var(--text-muted); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); } .profile-row:last-child { border-bottom: none; } .profile-row strong { color: var(--text-primary); font-weight: 600; } .profile-section-title { font-size: 0.7333rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; margin-top: 4px; } .profile-recent-leads { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .profile-recent-lead-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: border-color 0.15s; } .profile-recent-lead-row:hover { border-color: var(--accent); } .profile-recent-lead-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--on-accent); flex-shrink: 0; } .profile-recent-lead-name { font-size: 0.9333rem; font-weight: 600; color: var(--text); flex: 1; } .profile-recent-lead-meta { font-size: 0.8rem; color: var(--text-muted); } .profile-recent-lead-score { font-size: 0.8667rem; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; } .profile-quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; } .profile-action-btn { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: 0.8667rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; } .profile-action-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.06); } .profile-action-btn svg { color: var(--accent-ink); flex-shrink: 0; } /* ============================================================ FOUNDER DASHBOARD. Cofounder-style layout ============================================================ */ .fdr-wrap { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .fdr-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .fdr-section-hdr h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.067em; color: var(--text-secondary); } .founder-btn-sm { padding: 6px 14px; background: rgba(var(--accent-rgb),.12); border: 1px solid rgba(var(--accent-rgb),.25); border-radius: var(--r-sm); color: var(--accent-ink); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .founder-btn-sm:hover { background: rgba(var(--accent-rgb),.22); } /* Hero header */ .fdr-hero { background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.22); border-radius: var(--r-lg); padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; } .fdr-hero-left {} .fdr-day { font-size: 1.8667rem; font-weight: 800; letter-spacing: -0.018em; color: var(--text-primary); line-height: 1; } .fdr-date { font-size: 0.9333rem; color: var(--text-secondary); margin-top: 4px; } .fdr-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; } .fdr-hero-right { text-align: right; } .fdr-deadline-label { font-size: 0.7333rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.055em; color: var(--text-muted); } .fdr-deadline-val { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-top: 2px; } .fdr-deadline-days { font-size: 0.8rem; color: var(--accent-ink); margin-top: 2px; font-weight: 600; } /* Two-column main grid */ .fdr-main-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; } .fdr-right-col { display: flex; flex-direction: column; gap: 14px; } /* Generic panel */ .fdr-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .fdr-panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fdr-panel-title { font-size: 0.8667rem; font-weight: 700; color: var(--text-primary); } .fdr-task-progress { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); } .fdr-refresh-btn { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: var(--r-xs); } .fdr-refresh-btn:hover { color: var(--text-primary); } /* Checklist */ .fdr-checklist { display: flex; flex-direction: column; } .fdr-task-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; user-select: none; } .fdr-task-row:last-child { border-bottom: none; } .fdr-task-row:hover { background: var(--bg-card-hover); } .fdr-task-row input[type=checkbox] { display: none; } .fdr-task-check-icon { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-bright); flex-shrink: 0; margin-top: 2px; transition: background-color .15s, border-color .15s; display: flex; align-items: center; justify-content: center; } .fdr-task-row.fdr-task-done .fdr-task-check-icon { background: var(--accent); border-color: var(--accent); } .fdr-task-row.fdr-task-done .fdr-task-check-icon::after { content: ''; width: 5px; height: 9px; border: 2px solid var(--on-accent); border-top: none; border-left: none; transform: rotate(45deg) translateY(-1px); display: block; } .fdr-task-body { flex: 1; min-width: 0; } .fdr-task-name { font-size: 0.9333rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; } .fdr-task-detail { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .fdr-task-row.fdr-task-done .fdr-task-name { text-decoration: line-through; color: var(--text-muted); } .fdr-wie-badge { flex-shrink: 0; font-size: 0.6667rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-lg); margin-top: 2px; } .fdr-badge-frade { background: rgba(var(--accent-rgb),.15); color: var(--accent-ink); border: 1px solid rgba(var(--accent-rgb),.25); } .fdr-badge-teljo { background: rgba(var(--warning-rgb),.12); color: var(--warning-ink); border: 1px solid rgba(var(--warning-rgb),.2); } .fdr-badge-beiden { background: rgba(var(--success-rgb),.1); color: var(--success-ink); border: 1px solid rgba(var(--success-rgb),.2); } /* Fase 4: deze en de andere 9 "transition: width"-vondsten van de layout-transition-detector in dit bestand (regel ~2934, 2969, 3105, 3721, 4607, 7059, 7242, 7664, 8798) zijn allemaal percentage-vulbalken: een vaste-hoogte binnenvlak in een overflow:hidden-omhulsel, waarvan de JS het percentage als style.width zet. Naar transform:scaleX() zou hier wel de CSS-kant oplossen, maar niet zonder de JS die width zet mee te veranderen naar scaleX -- anders springt de balk instant i.p.v. te animeren, een nieuwe fout in plaats van een opgeloste. Dat raakt de app-logica in dashboard.js op een tiental plekken, niet alleen de tokens/CSS van deze ronde. Bewust gehouden; de reflow blijft bovendien beperkt tot dit ene vaste-hoogte vlak, niet de pagina. */ .fdr-progress-bar-wrap { height: 3px; background: var(--bg-card-alt); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } .fdr-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width .4s ease; border-radius: var(--r-full); } .fdr-weekend-msg { padding: 32px 18px; text-align: center; } .fdr-weekend-icon { font-size: 2.1333rem; margin-bottom: 10px; } .fdr-weekend-txt { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .fdr-weekend-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; } /* Stats 2x2 grid (right col) */ .fdr-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-stat { background: var(--bg-card); padding: 14px 12px; } .fdr-stat-val { font-size: 1.6rem; font-weight: 800; line-height: 1; margin-bottom: 3px; } .fdr-stat-lbl { font-size: 0.7333rem; color: var(--text-secondary); } /* Goal panel */ .fdr-goal-panel { padding: 16px 18px; } .fdr-goal-hdr { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; } .fdr-goal-big { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; } .fdr-goal-current { font-size: 2.6667rem; font-weight: 900; color: var(--accent-ink); line-height: 1; } .fdr-goal-sep { font-size: 1.4667rem; color: var(--text-muted); } .fdr-goal-target { font-size: 1.4667rem; font-weight: 700; color: var(--text-primary); } .fdr-goal-unit { font-size: 0.8667rem; color: var(--text-secondary); margin-left: 4px; } .fdr-goal-bar-wrap { height: 6px; background: var(--bg-card-alt); border-radius: var(--r-full); overflow: hidden; margin-bottom: 6px; } .fdr-goal-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width .6s ease; } .fdr-goal-pct { font-size: 0.7333rem; color: var(--text-muted); } /* Pipeline mini */ .fdr-pipe-mini { padding: 14px 18px; } .fdr-pipe-mini-cols { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .fdr-pipe-mini-item { display: flex; align-items: center; gap: 10px; } .fdr-pipe-mini-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fdr-pipe-mini-name { flex: 1; font-size: 0.8rem; color: var(--text-secondary); } .fdr-pipe-mini-count { font-size: 0.8667rem; font-weight: 700; color: var(--text-primary); } .fdr-won-lost-row { display: flex; gap: 8px; } /* Full-width pipeline kanban */ .founder-pipeline-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .founder-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .founder-col-hdr { padding: 10px 14px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.042em; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .founder-col-badge { background: var(--bg-card-alt); border-radius: var(--r-lg); padding: 2px 8px; font-size: 0.7333rem; } .founder-col-body { padding: 10px; min-height: 80px; display: flex; flex-direction: column; gap: 8px; } .founder-card { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: border-color .15s; } .founder-card:hover { border-color: rgba(var(--accent-rgb),.4); } .founder-card-name { font-size: 0.8667rem; font-weight: 600; margin-bottom: 2px; } .founder-card-meta { font-size: 0.7333rem; color: var(--text-secondary); } .founder-col-add { padding: 8px 10px; border-top: 1px solid var(--border); } .founder-col-add button { width: 100%; padding: 7px; background: none; border: 1px dashed var(--border-bright); border-radius: var(--r-xs); color: var(--text-muted); font-size: 0.8rem; cursor: pointer; transition: var(--transition); } .founder-col-add button:hover { border-color: var(--accent); color: var(--accent-ink); } .founder-badge-won { background: rgba(var(--success-rgb),.12); color: var(--success-ink); border: 1px solid rgba(var(--success-rgb),.2); border-radius: var(--r-lg); padding: 3px 10px; font-size: 0.7333rem; font-weight: 700; } .founder-badge-lost { background: rgba(var(--error-rgb),.1); color: var(--error-ink); border: 1px solid rgba(var(--error-rgb),.2); border-radius: var(--r-lg); padding: 3px 10px; font-size: 0.7333rem; font-weight: 700; } /* Goals */ .founder-goals-list { display: flex; flex-direction: column; gap: 12px; } .founder-goal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .founder-goal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .founder-goal-name { font-size: 0.9333rem; font-weight: 600; } .founder-goal-nums { font-size: 0.8667rem; color: var(--text-secondary); } .founder-goal-bar { height: 6px; background: var(--bg-card-alt); border-radius: var(--r-full); overflow: hidden; } .founder-goal-fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transition: width .6s ease; } .founder-goal-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.7333rem; color: var(--text-muted); } /* AI Advice */ .founder-ai-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .founder-ai-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .founder-ai-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .founder-ai-title { font-size: 1rem; font-weight: 700; } .founder-ai-sub { font-size: 0.8rem; color: var(--text-secondary); } .founder-ai-output { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.8667rem; line-height: 1.7; color: var(--text-primary); white-space: pre-wrap; min-height: 60px; display: none; margin-bottom: 14px; } .founder-ai-output.visible { display: block; } .founder-ai-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent); border: none; border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8667rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .founder-ai-btn:hover:not(:disabled) { background: var(--accent); transform: translateY(-1px); } .founder-ai-btn:disabled { opacity: .5; cursor: not-allowed; } /* Modal */ .founder-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; display: none; } .founder-modal-overlay.open { display: flex; } .founder-modal { background: var(--card-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; width: 100%; max-width: 420px; box-shadow: var(--elev-3); animation: modal-in 0.2s var(--ease-out); } .founder-modal h3 { font-size: 1.0667rem; font-weight: 700; margin-bottom: 16px; } .founder-modal-field { margin-bottom: 14px; } .founder-modal-field label { display: block; font-size: 0.7333rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.045em; color: var(--text-secondary); margin-bottom: 6px; } .founder-modal-field input, .founder-modal-field select, .founder-modal-field textarea { width: 100%; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: 0.9333rem; font-family: inherit; outline: none; transition: border-color .15s; } .founder-modal-field input:focus, .founder-modal-field select:focus, .founder-modal-field textarea:focus { border-color: var(--accent); } .founder-modal-field textarea { resize: vertical; min-height: 80px; } .founder-modal-field select option { background: var(--bg-card); } .founder-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } .founder-modal-cancel { padding: 9px 18px; background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-secondary); font-size: 0.8667rem; font-weight: 600; cursor: pointer; } .founder-modal-save { padding: 9px 18px; background: var(--accent); border: none; border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8667rem; font-weight: 700; cursor: pointer; } .founder-modal-delete { padding: 9px 18px; background: rgba(var(--error-rgb),.12); border: 1px solid rgba(var(--error-rgb),.25); border-radius: var(--r-sm); color: var(--error-ink); font-size: 0.8667rem; font-weight: 600; cursor: pointer; margin-right: auto; } @media (max-width: 960px) { .fdr-main-grid { grid-template-columns: 1fr; } .fdr-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .founder-pipeline-cols { grid-template-columns: 1fr; } } @media (max-width: 600px) { .fdr-hero { flex-direction: column; gap: 16px; } .fdr-hero-right { text-align: left; } .fdr-right-col { grid-template-columns: 1fr; } .fdr-stats-grid { grid-template-columns: 1fr 1fr; } } /* Content Hub */ .fdr-hub-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-hub-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fdr-hub-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fdr-hub-title { font-size: 0.9333rem; font-weight: 700; } .fdr-hub-sub { font-size: 0.7333rem; color: var(--text-muted); margin-top: 1px; } .fdr-hub-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card-alt); } .fdr-platform-tabs { display: flex; gap: 4px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; } .fdr-platform-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none; background: none; color: var(--text-secondary); transition: var(--transition); white-space: nowrap; } .fdr-platform-tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,.15); } .fdr-platform-tab.li-active { color: #0077b5; } .fdr-platform-tab.ig-active { color: #e1306c; } .fdr-hub-select { padding: 7px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: 0.8rem; font-family: inherit; outline: none; cursor: pointer; } .fdr-hub-select option { background: var(--bg-card); } .fdr-hub-gen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--accent); border: none; border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: var(--transition); margin-left: auto; white-space: nowrap; } .fdr-hub-gen-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); } .fdr-hub-gen-btn:disabled { opacity: .5; cursor: not-allowed; } .fdr-hub-body { padding: 16px 18px; } .fdr-hub-output { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.8667rem; line-height: 1.8; color: var(--text-primary); white-space: pre-wrap; min-height: 80px; display: none; margin-bottom: 12px; max-height: 420px; overflow-y: auto; } .fdr-hub-output.visible { display: block; } .fdr-hub-footer { display: flex; align-items: center; gap: 10px; } .fdr-hub-copy-btn { display: none; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.25); border-radius: var(--r-sm); color: var(--accent-ink); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .fdr-hub-copy-btn.visible { display: inline-flex; } .fdr-hub-copy-btn:hover { background: rgba(var(--accent-rgb),.2); } .fdr-hub-regen-btn { display: none; align-items: center; gap: 6px; padding: 7px 14px; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .fdr-hub-regen-btn.visible { display: inline-flex; } .fdr-hub-regen-btn:hover { color: var(--text-primary); border-color: var(--border-bright); } .fdr-hub-open-btn { display: none; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; } .fdr-hub-open-btn.visible { display: inline-flex; } .fdr-hub-open-btn.li { background: rgba(10,102,194,.12); border: 1px solid rgba(10,102,194,.3); color: #0a66c2; } .fdr-hub-open-btn.li:hover { background: rgba(10,102,194,.22); } .fdr-hub-open-btn.ig { background: rgba(225,48,108,.12); border: 1px solid rgba(225,48,108,.3); color: #e1306c; } .fdr-hub-open-btn.ig:hover { background: rgba(225,48,108,.22); } .fdr-dm-open-btn { display: none; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(10,102,194,.1); border: 1px solid rgba(10,102,194,.25); border-radius: var(--r-sm); color: #0a66c2; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-decoration: none; } .fdr-dm-open-btn.visible { display: inline-flex; } .fdr-dm-open-btn:hover { background: rgba(10,102,194,.2); } .fdr-hub-empty { padding: 24px 0; color: var(--text-muted); font-size: 0.8667rem; text-align: center; line-height: 1.6; } .fdr-hub-platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-lg); font-size: 0.6667rem; font-weight: 700; } .fdr-hub-platform-badge.li { background: rgba(0,119,181,.12); color: #0077b5; border: 1px solid rgba(0,119,181,.2); } .fdr-hub-platform-badge.ig { background: rgba(225,48,108,.1); color: #e1306c; border: 1px solid rgba(225,48,108,.2); } /* Follow-up urgency */ .founder-card-age { display: inline-block; margin-top: 5px; font-size: 0.6667rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-xs); } .founder-card-age.age-ok { background: rgba(var(--success-rgb),.1); color: var(--success-ink); } .founder-card-age.age-warning { background: rgba(var(--warning-rgb),.12); color: var(--warning-ink); } .founder-card-age.age-critical { background: rgba(var(--error-rgb),.12); color: var(--error-ink); } .founder-card.has-urgent { border-color: rgba(var(--error-rgb),.35); } .fdr-followup-wrap { display: flex; flex-direction: column; gap: 8px; } .fdr-followup-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s; } .fdr-followup-item:hover { border-color: rgba(var(--error-rgb),.4); } .fdr-followup-name { flex: 1; font-size: 0.8667rem; font-weight: 600; } .fdr-followup-fase { font-size: 0.6667rem; padding: 2px 7px; border-radius: var(--r-lg); font-weight: 700; } .fdr-followup-fase.f0 { background: rgba(124,147,196,.14); color: #7C93C4; } .fdr-followup-fase.f1 { background: rgba(var(--accent-rgb),.16); color: var(--accent-ink); } .fdr-followup-fase.f2 { background: rgba(201,154,108,.16); color: #C99A6C; } .fdr-followup-days { font-size: 0.7333rem; font-weight: 700; color: var(--error-ink); flex-shrink: 0; } .fdr-followup-empty { padding: 14px 0; color: var(--text-muted); font-size: 0.8667rem; } /* MRR panel */ .fdr-mrr-panel { padding: 14px 18px; } .fdr-mrr-hdr { font-size: 0.7333rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.055em; color: var(--text-muted); margin-bottom: 8px; } .fdr-mrr-val { font-size: 2.2667rem; font-weight: 900; color: var(--success-ink); line-height: 1; } .fdr-mrr-sub { font-size: 0.7333rem; color: var(--text-muted); margin-top: 4px; } .fdr-mrr-target { font-size: 0.8rem; color: var(--text-secondary); margin-top: 8px; display: flex; align-items: center; gap: 6px; } .fdr-mrr-arrow { color: var(--text-muted); } .fdr-profit-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; } .fdr-profit-rows { display: flex; flex-direction: column; gap: 5px; } .fdr-profit-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .fdr-profit-row .lbl { color: var(--text-muted); } .fdr-profit-row .val { font-weight: 600; color: var(--text-primary); } .fdr-profit-row .val.neg { color: var(--red-ink); } .fdr-profit-row.total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); } .fdr-profit-row.total .lbl { font-weight: 700; color: var(--text-primary); font-size: 0.8667rem; } .fdr-profit-row.total .val { font-size: 1.0667rem; font-weight: 900; color: var(--success-ink); } .fdr-profit-marge { font-size: 0.7333rem; color: var(--text-muted); margin-top: 4px; } /* Outreach tracker */ .fdr-outreach-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-outreach-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fdr-outreach-title { font-size: 0.9333rem; font-weight: 700; } .fdr-outreach-week { font-size: 0.7333rem; color: var(--text-muted); } .fdr-outreach-body { padding: 16px 18px; } .fdr-outreach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .fdr-outreach-card { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .fdr-outreach-num { font-size: 1.7333rem; font-weight: 900; line-height: 1; min-width: 32px; } .fdr-outreach-info { flex: 1; } .fdr-outreach-name { font-size: 0.8rem; font-weight: 600; } .fdr-outreach-target { font-size: 0.7333rem; color: var(--text-muted); } .fdr-outreach-plus { background: none; border: 1px solid var(--border); border-radius: var(--r-xs); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.0667rem; font-weight: 700; color: var(--text-secondary); transition: var(--transition); flex-shrink: 0; } .fdr-outreach-plus:hover { background: var(--border); color: var(--text-primary); } .fdr-outreach-bar-wrap { height: 6px; background: var(--border); border-radius: var(--r-full); overflow: hidden; margin-top: 8px; } .fdr-outreach-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width .4s; } .fdr-outreach-footer { display: flex; justify-content: space-between; align-items: center; } .fdr-outreach-pct { font-size: 0.8rem; color: var(--text-muted); } .fdr-outreach-reset { background: none; border: none; font-size: 0.7333rem; color: var(--text-muted); cursor: pointer; text-decoration: underline; } .fdr-outreach-reset:hover { color: var(--red-ink); } /* Bouw tracker */ .fdr-bouw-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-bouw-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fdr-bouw-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fdr-bouw-title { font-size: 0.9333rem; font-weight: 700; } .fdr-bouw-sub { font-size: 0.7333rem; color: var(--text-muted); } .fdr-bouw-body { padding: 12px 18px; } .fdr-bouw-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .fdr-bouw-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); } .fdr-bouw-item:hover { border-color: rgba(var(--accent-rgb),0.27); } .fdr-bouw-item.done { opacity: .5; } .fdr-bouw-item.done .fdr-bouw-item-text { text-decoration: line-through; } .fdr-bouw-cb { width: 16px; height: 16px; border-radius: var(--r-xs); border: 1.5px solid var(--border-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); } .fdr-bouw-item.done .fdr-bouw-cb { background: var(--accent); border-color: var(--accent); } .fdr-bouw-item-text { font-size: 0.8667rem; flex: 1; } .fdr-bouw-tag { font-size: 0.6667rem; padding: 2px 7px; border-radius: var(--r-full); font-weight: 600; flex-shrink: 0; } .fdr-bouw-tag.fix { background: rgba(239,68,68,.12); color: var(--red-ink); } .fdr-bouw-tag.feat { background: rgba(var(--accent-rgb),.12); color: var(--accent-ink); } .fdr-bouw-tag.test { background: rgba(var(--warning-rgb),.12); color: var(--orange-ink); } .fdr-bouw-add-row { display: flex; gap: 8px; } .fdr-bouw-add-input { flex: 1; padding: 7px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: 0.8rem; font-family: inherit; outline: none; } .fdr-bouw-add-btn { padding: 7px 14px; background: var(--accent); border: none; border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .fdr-bouw-add-btn:hover { opacity: .88; } .fdr-bouw-progress { font-size: 0.7333rem; color: var(--text-muted); margin-bottom: 10px; } /* Personalized DM generator */ .fdr-dm-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-dm-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fdr-dm-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fdr-dm-title { font-size: 0.9333rem; font-weight: 700; } .fdr-dm-sub { font-size: 0.7333rem; color: var(--text-muted); } .fdr-dm-controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card-alt); align-items: center; } .fdr-dm-select { padding: 7px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: 0.8rem; font-family: inherit; outline: none; flex: 1; min-width: 140px; } .fdr-dm-gen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--accent); border: none; border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .fdr-dm-gen-btn:hover:not(:disabled) { opacity: .88; } .fdr-dm-gen-btn:disabled { opacity: .5; cursor: not-allowed; } .fdr-dm-body { padding: 16px 18px; } .fdr-dm-output { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 0.8667rem; line-height: 1.75; color: var(--text-primary); white-space: pre-wrap; min-height: 60px; display: none; margin-bottom: 12px; } .fdr-dm-output.visible { display: block; } .fdr-dm-copy-btn { display: none; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(var(--accent-rgb),.1); border: 1px solid rgba(var(--accent-rgb),.25); border-radius: var(--r-sm); color: var(--accent-ink); font-size: 0.8rem; font-weight: 600; cursor: pointer; } .fdr-dm-copy-btn.visible { display: inline-flex; } .fdr-dm-copy-btn:hover { background: rgba(var(--accent-rgb),.2); } .fdr-dm-empty { padding: 20px 0; color: var(--text-muted); font-size: 0.8667rem; text-align: center; } /* Documenten Hub */ .fdr-docs-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-docs-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); justify-content: space-between; } .fdr-docs-hdr-left { display: flex; align-items: center; gap: 10px; } .fdr-docs-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fdr-docs-title { font-size: 0.9333rem; font-weight: 700; } .fdr-docs-sub { font-size: 0.7333rem; color: var(--text-muted); } .fdr-docs-edit-btn { background: none; border: 1px solid var(--border); border-radius: var(--r-xs); padding: 5px 10px; font-size: 0.7333rem; color: var(--text-muted); cursor: pointer; transition: var(--transition); } .fdr-docs-edit-btn:hover { color: var(--text-primary); border-color: var(--border-bright); } .fdr-docs-body { padding: 16px 18px; } .fdr-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; } .fdr-doc-card { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: var(--transition); text-decoration: none; position: relative; } .fdr-doc-card:hover { border-color: rgba(var(--accent-rgb),0.33); background: rgba(var(--accent-rgb),.05); transform: translateY(-1px); } .fdr-doc-card-icon { font-size: 1.4667rem; } .fdr-doc-card-name { font-size: 0.8667rem; font-weight: 700; color: var(--text-primary); } .fdr-doc-card-desc { font-size: 0.7333rem; color: var(--text-muted); line-height: 1.4; } .fdr-doc-card-badge { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; padding: 2px 6px; border-radius: var(--r-full); font-weight: 700; } .fdr-doc-card-badge.pdf { background: rgba(239,68,68,.12); color: var(--red-ink); } .fdr-doc-card-badge.slides { background: rgba(var(--warning-rgb),.12); color: var(--orange-ink); } .fdr-doc-card-badge.drive { background: rgba(var(--success-rgb),.12); color: var(--success-ink); } .fdr-doc-card-badge.link { background: rgba(var(--accent-rgb),.12); color: var(--accent-ink); } .fdr-doc-card-nolink { opacity: .5; cursor: default; } .fdr-doc-card-nolink:hover { transform: none; background: var(--bg-card-alt); border-color: var(--border); } .fdr-docs-embed-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 12px; position: relative; background: var(--bg-card-alt); } .fdr-docs-embed-placeholder { padding: 32px; text-align: center; color: var(--text-muted); font-size: 0.8667rem; } .fdr-docs-embed-placeholder a { color: var(--accent-ink); text-decoration: underline; cursor: pointer; } .fdr-docs-cfg { display: none; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg-card-alt); } .fdr-docs-cfg.open { display: block; } .fdr-docs-cfg-title { font-size: 0.8rem; font-weight: 600; margin-bottom: 10px; } .fdr-docs-cfg-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .fdr-docs-cfg-lbl { font-size: 0.7333rem; color: var(--text-muted); width: 100px; flex-shrink: 0; } .fdr-docs-cfg-input { flex: 1; padding: 6px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text-primary); font-size: 0.8rem; font-family: inherit; outline: none; } .fdr-docs-cfg-save { padding: 6px 14px; background: var(--accent); border: none; border-radius: var(--r-xs); color: var(--on-accent); font-size: 0.8rem; font-weight: 700; cursor: pointer; } /* ── Persona picker (Frade / Teljo) ─────────────────────────────────────── */ #persona-overlay { position: fixed; inset: 0; background: rgba(15,12,5,.92); backdrop-filter: blur(10px); z-index: 1500; display: none; align-items: center; justify-content: center; } #persona-overlay.open { display: flex; } .persona-modal { width: min(440px, 92vw); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 24px; text-align: center; box-shadow: var(--elev-3); } .persona-modal h2 { margin: 0 0 6px; font-size: 1.3333rem; font-weight: 700; color: var(--text-primary); } .persona-modal p { margin: 0 0 22px; font-size: 0.8667rem; color: var(--text-muted); } .persona-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .persona-choice { cursor: pointer; background: var(--bg-card-alt); border: 2px solid var(--border); border-radius: var(--r-md); padding: 18px 12px; transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 8px; } .persona-choice:hover { border-color: var(--accent-bright); transform: translateY(-2px); background: rgba(var(--accent-rgb),.08); } .persona-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4667rem; font-weight: 800; color: var(--on-accent); } .persona-avatar.frade { background: var(--accent); } .persona-avatar.teljo { background: var(--accent); } .persona-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .persona-role { font-size: 0.7333rem; color: var(--text-muted); } /* ── Live Klanten panel ─────────────────────────────────────────────────── */ .fdr-live-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; } .fdr-live-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); justify-content: space-between; } .fdr-live-hdr-left { display: flex; align-items: center; gap: 10px; } .fdr-live-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fdr-live-title { font-size: 0.9333rem; font-weight: 700; } .fdr-live-sub { font-size: 0.7333rem; color: var(--text-muted); } .fdr-live-count { font-size: 0.7333rem; color: var(--text-muted); } .fdr-live-count .online-num { color: var(--green-ink); font-weight: 700; } .fdr-live-table { width: 100%; border-collapse: collapse; font-size: 0.8667rem; } .fdr-live-table th { text-align: left; padding: 10px 16px; font-size: 0.7333rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); background: var(--bg-card-alt); } .fdr-live-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); } .fdr-live-table tr:last-child td { border-bottom: none; } .fdr-live-table tr:hover td { background: rgba(var(--accent-rgb),.04); } .fdr-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .fdr-live-dot.online { background: var(--success); animation: pulseDot 1.6s ease-in-out infinite; } .fdr-live-dot.offline { background: var(--text-muted-c); } @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .5; } } .fdr-live-name { font-weight: 600; color: var(--text-primary); } .fdr-live-meta { font-size: 0.7333rem; color: var(--text-muted); } .fdr-live-stat { font-weight: 600; font-variant-numeric: tabular-nums; } .fdr-live-mrr { color: var(--green-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .fdr-live-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 0.8667rem; } .fdr-live-mrr-input { width: 70px; padding: 4px 6px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text-primary); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: right; } .fdr-live-mrr-input:focus { outline: none; border-color: var(--accent-bright); } /* ── Meeting widget ─────────────────────────────────────────────────────── */ .fdr-meeting-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; } .fdr-meeting-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fdr-meeting-icon { font-size: 1.0667rem; } .fdr-meeting-title { font-size: 0.8667rem; font-weight: 700; } .fdr-meeting-when { font-size: 1.2rem; font-weight: 700; color: var(--accent-ink); margin: 4px 0; } .fdr-meeting-agenda { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; } .fdr-meeting-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .fdr-meeting-row input { flex: 1; padding: 7px 10px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text-primary); font-size: 0.8rem; font-family: inherit; outline: none; } .fdr-meeting-row button { padding: 7px 12px; background: var(--accent-bright); border: none; border-radius: var(--r-xs); color: var(--on-accent); font-size: 0.8rem; font-weight: 600; cursor: pointer; } .fdr-meeting-empty { color: var(--text-muted); font-size: 0.8rem; font-style: italic; } /* ── Persona greeting in hero ───────────────────────────────────────────── */ .fdr-persona-greeting { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .fdr-persona-greeting strong { color: var(--accent-ink); } .fdr-persona-switch { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 4px 10px; border-radius: var(--r-xs); font-size: 0.7333rem; cursor: pointer; margin-left: 8px; } .fdr-persona-switch:hover { color: var(--text-primary); border-color: var(--border-bright); } /* ── Editable cost panel ────────────────────────────────────────────────── */ .fdr-cost-edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.7333rem; padding: 0 4px; display: inline-flex; align-items: center; vertical-align: middle; } .fdr-cost-edit-btn:hover { color: var(--accent-ink); } .fdr-cost-edit-input { width: 60px; padding: 2px 6px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-xs); color: var(--text-primary); font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; } /* AI Coach chat */ .fdr-chat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .fdr-chat-hdr { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fdr-chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .fdr-chat-hdr-info {} .fdr-chat-hdr-name { font-size: 0.9333rem; font-weight: 700; } .fdr-chat-hdr-sub { font-size: 0.7333rem; color: var(--text-muted); } .fdr-chat-clear { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 0.7333rem; cursor: pointer; padding: 4px 8px; border-radius: var(--r-xs); } .fdr-chat-clear:hover { color: var(--text-primary); background: var(--bg-card-alt); } .fdr-chat-msgs { height: 280px; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; } .fdr-chat-bubble { max-width: 82%; padding: 9px 13px; border-radius: var(--r-md); font-size: 0.8667rem; line-height: 1.55; } .fdr-chat-bubble.assistant { background: var(--bg-card-alt); border: 1px solid var(--border); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 3px; } .fdr-chat-bubble.user { background: var(--accent); color: var(--on-accent); align-self: flex-end; border-bottom-right-radius: 3px; } .fdr-chat-bubble.typing { opacity: .55; font-style: italic; } .fdr-chat-input-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); } .fdr-chat-input { flex: 1; padding: 9px 13px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: 0.8667rem; font-family: inherit; outline: none; transition: border-color .15s; resize: none; height: 38px; overflow: hidden; } .fdr-chat-input:focus { border-color: var(--accent); } .fdr-chat-send { padding: 9px 16px; background: var(--accent); border: none; border-radius: var(--r-sm); color: var(--on-accent); font-size: 0.8667rem; font-weight: 700; cursor: pointer; transition: var(--transition); flex-shrink: 0; } .fdr-chat-send:hover:not(:disabled) { background: var(--accent-bright); } .fdr-chat-send:disabled { opacity: .5; cursor: not-allowed; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { width: 220px; height: 100vh; position: fixed; left: 0; top: 0; /* Permanently dark in BOTH themes, the anchor the light content area sits against. Rebinding the colour tokens here means every child (nav labels, icons, dividers, the account block) picks up dark-surface values automatically instead of needing its own override. The inset highlight is the specular edge that makes the pane read as a physical sheet catching light. */ /* ── Warm, niet blauw ──────────────────────────────────────────────── Hier stond rgba(15,20,30,0.88): rood 15, groen 20, BLAUW 30. Blauw domineerde met vijftien punten, en dat is genoeg om koud te lezen naast een app die verder volledig warm is -- de grond is #14120E, het accent is zand. De zijbalk stond dus letterlijk in een ander kleurenfamilie dan alles waar hij tegenaan ligt. Dezelfde behandeling als de vlakken eerder: de HELDERHEID exact gelijk gehouden en alleen de hue naar zand gedraaid. Gemeten in OKLCH: L blijft 0,191, alleen de tint verschuift. Er gaat dus geen contrast verloren -- de gedempte tekst hierop haalt voor en na precies 6,40:1. Het blijft een EIGEN vlak en niet dezelfde kleur als de pagina: iets donkerder en met de doorschijnendheid intact, zodat hij als een aparte laag leest en niet als een uitsnede. */ background: rgba(24,20,9,0.88); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); /* The sidebar is dark in BOTH themes, so it rebinds the FULL token set and becomes a self-contained dark context. Rebinding only a few of them is what caused a run of light-theme bugs in here: the account block painted white (it used --bg-card-alt), the client's own name rendered at 1.04 contrast (it used --text-primary), and the logout button sat at 2.38 (it used --red, which light tunes for white). Every alias a child might reach for is covered here on purpose. */ /* Ook deze zijn warm gemaakt op gelijke helderheid. #E9EEF6 was een koud blauwwit en #8D99AC een blauwgrijs -- die laatste werd 185 keer gebruikt in de zijbalk en was dus de dominante tekstkleur van het hele paneel. */ --text: #F1EDE5; --text-c: #F1EDE5; --text-primary: #F1EDE5; --text-muted: #9E988B; --text-muted-c: #9E988B; --text-secondary: #9E988B; /* De zijbalk blijft donker in het lichte thema, dus het lichte goud (#96742F, 4,23:1 hier) zou werken maar is nodeloos zwak. Zand haalt er 12,94:1. */ --focus-ring: #E8D7B1; --border: rgba(255,255,255,0.07); --border-c: rgba(255,255,255,0.07); --divider: rgba(255,255,255,0.07); --hover: rgba(255,255,255,0.06); --hover-c: rgba(255,255,255,0.06); --bg-card: transparent; --bg-card-alt: rgba(255,255,255,0.05); --bg-alt: rgba(255,255,255,0.05); /* Semantic colours in their dark-surface variants, the light theme's deepened versions are unreadable against this pane. */ --red: #F87171; --error-c: #F87171; --error-rgb: 248,113,113; --green: #34D399; --success-c: #34D399; --success-rgb: 52,211,153; --accent: #E8D7B1; --accent-c: #E8D7B1; --accent-bright: #F2C670; --accent-rgb: 231,183,90; border-right: 1px solid rgba(255,255,255,0.06); box-shadow: inset -1px 0 0 rgba(255,255,255,0.06); display: flex; flex-direction: column; z-index: 100; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Fase 4: de zijbalk volgt nu het thema, in opdracht van de eigenaar. Deze dark-only rebind hierboven blijft de DEFAULT (dark-theme) waarden zetten; [data-theme="light"] .sidebar hieronder herbindt dezelfde tokenset naar de lichte equivalenten -- warme grond, houtskool inkt -- zodat elk kind (navlabel, icoon, account-blok) automatisch mee overschakelt in plaats van een eigen override nodig te hebben. */ [data-theme="light"] .sidebar { background: var(--card); --text: #1F1D19; --text-c: #1F1D19; --text-primary: #1F1D19; --text-muted: #6B6252; --text-muted-c: #6B6252; --text-secondary: #6B6252; /* Niet zand (var(--zand-200), 1,3:1 op licht): de zijbalk is nu een lichte kaart, dus dezelfde okerinkt als de rest van het lichte thema (#96742F, zie [data-theme="light"] hierboven), anders is de ring wel aanwezig en onzichtbaar -- exact de fout die dit token juist voorkomt. */ --focus-ring: #96742F; --border: #D9CCB0; --border-c: #D9CCB0; --divider: #D9CCB0; --hover: #EFE7D8; --hover-c: #EFE7D8; --bg-card: transparent; --bg-card-alt: #EFE7D8; --bg-alt: #EAE2D2; --red: #C2352B; --error-c: #C2352B; --error-rgb: 194,53,43; --green: #2F8F4E; --success-c: #2F8F4E; --success-rgb: 47,143,78; --accent: #E8D7B1; --accent-c: #E8D7B1; --accent-bright: #DCC593; --accent-rgb: 232,215,177; } /* Without backdrop-filter the pane would render see-through and unreadable. Literal colour, not var(--bg-card), that token is rebound to transparent inside .sidebar. */ @supports not (backdrop-filter: blur(1px)) { .sidebar { background: #181409; } } /* ---- Sidebar navigation --------------------------------------------- Active = solid gold pill. On a dark pane a filled shape reads instantly at a glance, where the old 12%-alpha gradient tint was nearly invisible. Higher specificity than the base .nav-item.active rule so it wins regardless of source order. */ .sidebar .nav-item { color: var(--text-muted); border-radius: var(--r-sm); } .sidebar .nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text); } .sidebar .nav-item.active { background: var(--accent-c); /* Koud zwart (#0B0F16) op een gouden pil las grijsblauw waar het zwart hoorde te zijn. Zelfde helderheid, warme tint: 13,51:1 -> 13,47:1. */ color: #120F08; font-weight: 600; box-shadow: none; /* finish-fix 4: geen zandgloed onder de actieve pil */ } /* The old rule painted a 3px bar down the left edge. Redundant now that the whole item is a filled pill, and it broke the pill's silhouette. */ .sidebar .nav-item.active::before { display: none; } .sidebar .nav-item.active svg { color: #120F08; stroke: currentColor; } .sidebar .nav-item:active { transform: translateY(1px); } .sidebar-logo { padding: 26px 20px 22px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 0; } .sidebar-logo img { height: 44px; width: auto; object-fit: contain; display: block; flex-shrink: 0; } /* Two flat colourways of the mark (see LOGO-RECOLOR notes), dark surfaces get the pale sand tint, the light surface gets the deeper bronze step so it keeps contrast on white/cream. Swapped per theme, never both at once. */ /* Hier stonden twee logo's over elkaar, een lichte en een donkere, waarvan de lichte permanent verborgen was, de sidebar is in beide thema's donker, dus die wissel had geen functie meer. Een img op display:none wordt door de browser nog steeds opgehaald, dus dat kostte elke lading een extra download voor niets. Nu één logo: het goud leest op donker én op licht, dus de ink/sand-splitsing is sowieso overbodig geworden. */ .sidebar-nav { flex: 1; padding: 20px 12px; overflow-y: auto; } .nav-divider { height: 1px; background: var(--border); margin: 10px 6px; opacity: 0.55; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm); cursor: pointer; color: var(--text-secondary); font-size: 0.8667rem; font-weight: 500; transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; margin-bottom: 4px; border: none; background: none; width: 100%; text-align: left; } /* ═══ Zijbalk: groepen, inklappen, actieve staat ═══════════════════════════ Twaalf navigatie-items achter elkaar met twee naamloze streepjes ertussen dwingt je elke keer de hele lijst te lezen. De groepen bestonden al in de broncode als commentaar (Werk / Inzicht / Setup); dit maakt ze zichtbaar. */ .nav-group-label { font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); opacity: 0.62; padding: 0 14px; margin: 14px 0 6px; user-select: none; } .sidebar-nav > .nav-group-label:first-child { margin-top: 2px; } /* De actieve pagina had alleen een achtergrondje. Een staaf aan de linkerkant leest sneller dan een kleurverschil, en werkt ook als je de kleuren niet goed uit elkaar houdt. */ .nav-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent-c); transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .nav-item.active::before { transform: translateY(-50%) scaleY(1); } .nav-item.active { font-weight: 650; } /* ── Ingeklapt ────────────────────────────────────────────────────────────── 220px van een 1280px-scherm is 17% van de breedte, permanent, voor een lijst die je één keer per pagina gebruikt. Ingeklapt blijft de navigatie volledig bruikbaar (icoon + tooltip) en krijgt de inhoud 152px terug. De keuze wordt onthouden. */ .sidebar { transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1); } body.sidebar-collapsed .sidebar { width: 68px; } body.sidebar-collapsed .main-content, body.sidebar-collapsed .topbar { margin-left: 68px; } body.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } body.sidebar-collapsed .nav-item > :not(.nav-icon):not(.nav-badge) { display: none; } body.sidebar-collapsed .nav-item { font-size: 0; } body.sidebar-collapsed .nav-icon { font-size: 0.8667rem; } /* De Faro-CTA is geen .nav-item maar eigen markup uit api/_faro/ui/markup.js, dus die viel buiten de regel hierboven en hield zijn label. */ body.sidebar-collapsed .faro-nav-cta__text { display: none; } body.sidebar-collapsed .faro-nav-cta { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .credit-usage-widget, body.sidebar-collapsed .user-info > div:not(.user-avatar), body.sidebar-collapsed .user-info > svg, body.sidebar-collapsed .btn-logout span { display: none; } body.sidebar-collapsed .user-info { justify-content: center; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .btn-logout { justify-content: center; } /* Ingeklapt: één kolom, alles op de middenas -- zoals Claude's zijbalk. Het woordmerk maakt plaats voor het merkteken; elke knop wordt een vierkant van 44px dat zichzelf centreert in plaats van links te blijven hangen. */ .sidebar-logo img.sidebar-logo__mark { display: none; width: 34px; height: 34px; object-fit: contain; } body.sidebar-collapsed .sidebar-logo { padding: 18px 0 16px; } body.sidebar-collapsed .sidebar-logo img.sidebar-logo__full { display: none; } body.sidebar-collapsed .sidebar-logo img.sidebar-logo__mark { display: block; } body.sidebar-collapsed .sidebar-nav { padding: 16px 0; } body.sidebar-collapsed .nav-item { width: 44px; height: 40px; margin: 0 auto 4px; } body.sidebar-collapsed .nav-divider { width: 36px; margin-left: auto; margin-right: auto; } body.sidebar-collapsed .sidebar-bottom { padding: 12px 0 14px; } body.sidebar-collapsed .sidebar-collapse-btn { width: 44px; margin: 0 auto 8px; padding: 8px 0; } body.sidebar-collapsed .user-info { width: 44px; margin: 0 auto 8px; padding: 4px 0; } body.sidebar-collapsed .btn-logout { width: 44px; margin: 0 auto; padding: 9px 0; } body.sidebar-collapsed .nav-badge { position: absolute; top: 5px; right: 9px; min-width: 7px; height: 7px; padding: 0; font-size: 0; border-radius: 50%; } /* De tooltip is wat inklappen bruikbaar houdt in plaats van een raadspelletje. Alleen ingeklapt, en alleen op apparaten met een muis. */ @media (hover: hover) { body.sidebar-collapsed .nav-item[data-label]:hover::after, body.sidebar-collapsed .nav-item[data-label]:focus-visible::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #1B1B1B; color: #F4F4F4; border: 1px solid rgba(255,255,255,0.10); padding: 6px 10px; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 120; box-shadow: 0 6px 18px rgba(0,0,0,0.45); } } .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .sidebar-collapse-btn:hover { background: var(--hover-c); color: var(--text); } .sidebar-collapse-btn:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; } .sidebar-collapse-btn svg { transition: transform 0.22s ease; flex-shrink: 0; } body.sidebar-collapsed .sidebar-collapse-btn span { display: none; } body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } /* Het accountblok is nu een