/* CallCheckPro Login & Auth Pages * Branded styling for login, signup, forgot password, 2FA, and password reset. * Overrides Frappe's default login.bundle.css where needed. * * Twee vormtalen, één stylesheet (zelfde patroon als frontend/design-tokens.css): * - De basis is in beide vormtalen het origineel: de donkere flank met gloed, * beeldmerk, geluidsgolf, featurelijst en vertrouwensregel, en het formulier op * een kaart. Sinds 24-09-2026 geldt die opmaak ook in "systeem" (Mike: "de * originele is nog steeds beter"; de donkere flank met staafveld en de lichte * typografische variant zijn afgekeurd). Technisch: de klassieke regels staan * onder :is(html[data-vormtaal='klassiek'], html) — zelfde specificiteit als * vroeger, maar ze gelden overal. * - "systeem" legt daar alleen verfijningen overheen (blok "SYSTEEM · VERFIJNING"): * de letter en de groentint van de app, net Nederlands, fractionele tekstweergave * en een donker thema voor het formulierpaneel. * - "klassiek" blijft pixelgelijk aan vóór v2.509. * Schakelen: als localStorage['callpro-vormtaal'] * === 'klassiek', of zonder eigen keuze als de site-standaard (callpro_vormtaal_standaard) * klassiek is; als localStorage['callpro-theme'] === 'dark'. * Zelfde logica als frontend/index.html, als inline bootscript vóór de eerste paint. */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); /* ══════════════════════════════════════════════════════════════ VARIABELEN ══════════════════════════════════════════════════════════════ */ /* ─── Systeem (standaard) — licht ─── */ :root { --cp-login-primary: #0d6b3f; /* systeem --accent */ --cp-login-primary-hover: #0a5733; /* systeem --accent-hover */ --cp-login-primary-ink: #ffffff; /* tekst op de primaire knop */ --cp-login-primary-light: #ECFDF5; --cp-login-primary-glow: rgba(13, 107, 63, 0.15); --cp-login-accent: #34D399; --cp-login-text: #1b1f1c; /* systeem --text-primary */ --cp-login-text-muted: #55605a; /* systeem --text-secondary */ --cp-login-text-light: #68716b; /* systeem --text-tertiary */ --cp-login-border: #bfc4c0; /* systeem --border-strong */ /* Het formulierpaneel is het werkvlak (systeem --surface): wit in licht, niet het grijzige app-canvas-grijs (v4-oplevering §9, reviewbevinding). */ --cp-login-bg: #ffffff; --cp-login-card: #FFFFFF; --cp-login-input-bg: #FFFFFF; --cp-login-input-border: #bfc4c0; --cp-login-input-focus: #0d6b3f; --cp-login-danger: #c62f22; --cp-login-success: #0d6b3f; --cp-login-radius: 6px; /* systeem --radius-control */ --cp-login-radius-sm: 6px; --cp-login-split: transparent; /* scheidingslijn formulierpaneel; alleen zichtbaar in donker */ /* De donkere merkflank — vast, altijd donker, ongeacht site-thema (de flank IS het donkere anker, geen paneel dat meedraait). */ --cp-flank-bg: #1b1f1c; /* systeem "ink" */ --cp-flank-text: #ffffff; --cp-flank-text-muted: rgba(255, 255, 255, .76); --cp-flank-text-dim: rgba(255, 255, 255, .62); --cp-flank-text-faint: rgba(255, 255, 255, .5); --cp-flank-rule: rgba(255, 255, 255, .14); --cp-flank-accent: #4ec98c; /* vast, leesbaar op de altijd-donkere flank */ } /* ─── Systeem — donker: eigen nachtpalet (conform de donkere renders) ─── */ html[data-theme='dark']:not([data-vormtaal='klassiek']) { --cp-login-primary: #3fbf7f; --cp-login-primary-hover: #55cf92; --cp-login-primary-ink: #06130c; --cp-login-primary-light: rgba(63, 191, 127, 0.13); --cp-login-primary-glow: rgba(63, 191, 127, 0.18); --cp-login-accent: #3fbf7f; --cp-login-text: #eef1ee; --cp-login-text-muted: #9ba49d; --cp-login-text-light: #8e978f; --cp-login-border: #3a423d; --cp-login-bg: #0a0c0b; --cp-login-card: #181b1a; --cp-login-input-bg: #181b1a; --cp-login-input-border: #3a423d; --cp-login-input-focus: #3fbf7f; --cp-login-danger: #ef6a5c; --cp-login-success: #3fbf7f; --cp-flank-bg: #0e100f; /* iets donkerder dan de kaarten — blijft het anker */ /* Formulierpaneel iets lichter dan de flank + een scheidingslijn, zodat de twee helften in donker uit elkaar blijven (v4-oplevering §9 — in licht is wit-op-donker al genoeg contrast, geen lijn nodig). Zelfde waarden als de donkere render (t.surf / t.split). */ --cp-login-bg: #1c201e; --cp-login-split: #2b312d; } /* ─── Klassiek — ongewijzigd t.o.v. vóór v2.509 (licht, geen donker thema) ─── */ :is(html[data-vormtaal='klassiek'], html) { --cp-login-primary: #27AE60; --cp-login-primary-hover: #1E8449; --cp-login-primary-ink: #ffffff; --cp-login-primary-light: #ECFDF5; --cp-login-primary-glow: rgba(39, 174, 96, 0.15); --cp-login-accent: #34D399; --cp-login-text: #121714; --cp-login-text-muted: #4A5248; --cp-login-text-light: #7C847A; --cp-login-border: #DEE2DF; --cp-login-bg: #F5F8F6; --cp-login-card: #FFFFFF; --cp-login-input-bg: #FAFBFA; --cp-login-input-border: #DEE2DF; --cp-login-input-focus: #27AE60; --cp-login-danger: #E74C3C; --cp-login-success: #27AE60; --cp-login-radius: 14px; --cp-login-radius-sm: 8px; } /* ─── SYSTEEM · VERFIJNING — het origineel, met de waarden van de app ─── Staat ná het klassieke blok: gelijke specificiteit, dus deze wint in systeem. Het donkere thema (html[data-theme='dark']:not(…), hoger gewicht) wint van beide. */ html:not([data-vormtaal='klassiek']) { --cp-login-primary: #0d6b3f; /* app --accent: geen breuk na het inloggen */ --cp-login-primary-hover: #0a5733; --cp-login-primary-glow: rgba(13, 107, 63, 0.15); --cp-login-input-focus: #0d6b3f; --cp-login-success: #0d6b3f; --cp-login-danger: #c62f22; --cp-login-text: #1b1f1c; --cp-login-text-muted: #55605a; --cp-login-text-light: #68716b; --cp-login-bg: #f3f4f2; /* app --bg */ } /* ─── Base Reset ─── */ body.cp-login-page { font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--cp-login-bg); color: var(--cp-login-text); margin: 0; padding: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; } :is(html[data-vormtaal='klassiek'], html) body.cp-login-page { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; } body.cp-login-page .web-footer, body.cp-login-page .navbar, body.cp-login-page .page-header { display: none !important; } /* Zichtbaarheids-utilities: kleine copy-verschillen tussen de twee vormtalen zonder de gedeelde structuur te dupliceren. */ .cp-only-klassiek { display: none; } html[data-vormtaal='klassiek'] .cp-only-systeem { display: none; } /* revert i.p.v. block: werkt voor zowel block-elementen (p/div) als inline tekstalternatieven (span in een knop/checkbox-label) zonder een aparte modifier nodig te hebben. */ html[data-vormtaal='klassiek'] .cp-only-klassiek { display: revert; } /* ─── Split Layout ─── */ .cp-login-wrapper { display: flex; min-height: 100vh; } /* Merkflank — systeem: flex-basis volgt de inhoud (formulier heeft een vaste breedte, zie .cp-login-form-panel); klassiek: vaste 42%-kolom. */ .cp-login-brand { flex: 1 1 320px; min-width: 280px; background: var(--cp-flank-bg); color: var(--cp-flank-text); position: relative; overflow: hidden; } :is(html[data-vormtaal='klassiek'], html) .cp-login-brand { flex: 0 0 42%; min-width: 0; background: #060A08; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 48px; } /* ══════════════════════════════════════════════════════════════ FLANK · KLASSIEK — ongewijzigd t.o.v. vóór v2.509 ══════════════════════════════════════════════════════════════ */ :is(html[data-vormtaal='klassiek'], html) .cp-flank-klassiek { /* Moet de inhoud centreren zoals de flank dat vóór v2.509 zelf deed (en RelayPro nog doet): als blok van volle breedte schoof het logoblok (max 380 px) naar links (Mike 25-09: "niet in het midden meer"). */ display: flex; flex-direction: column; align-items: center; width: 100%; } :is(html[data-vormtaal='klassiek'], html) .cp-login-brand-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(39, 174, 96, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 174, 96, 0.06) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 50%, black, transparent); pointer-events: none; z-index: 0; animation: cp-grid-drift 20s linear infinite; } @keyframes cp-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } } :is(html[data-vormtaal='klassiek'], html) .cp-login-brand::before { content: ''; position: absolute; width: 700px; height: 700px; top: -150px; right: -150px; background: radial-gradient(circle, rgba(39, 174, 96, 0.12) 0%, rgba(39, 174, 96, 0.04) 40%, transparent 70%); border-radius: 50%; z-index: 0; animation: cp-glow-pulse 6s ease-in-out infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-login-brand::after { content: ''; position: absolute; width: 500px; height: 500px; bottom: -100px; left: -80px; background: radial-gradient(circle, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.03) 40%, transparent 70%); border-radius: 50%; z-index: 0; animation: cp-glow-pulse 8s ease-in-out 3s infinite; } @keyframes cp-glow-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } } /* ─── Floating Network Nodes (klassiek) ─── */ /* BUG-FIX (interne review): al deze regels hoorden al onder :is(html[data-vormtaal='klassiek'], html) te vallen — in de eerste versie van dit bestand misten ze de prefix. Voor login.html/callpro-login.html maakte dat toevallig niets uit (de hele .cp-flank-klassiek-wrapper staat al op display:none in systeem), maar op update-password.html en callpro-update-password.html — die deze klassen ONGEWIKKELD gebruiken, zonder wrapper — lekte de oude gloed/animatie zo altijd door, ook in systeem. Vandaar hier expliciet de prefix op elke regel. */ :is(html[data-vormtaal='klassiek'], html) .cp-brand-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } :is(html[data-vormtaal='klassiek'], html) .cp-node-lines { position: absolute; inset: 0; width: 100%; height: 100%; } :is(html[data-vormtaal='klassiek'], html) .cp-node { position: absolute; border-radius: 50%; background: rgba(39, 174, 96, 0.25); box-shadow: 0 0 12px rgba(39, 174, 96, 0.15); } :is(html[data-vormtaal='klassiek'], html) .cp-node-1 { width: 6px; height: 6px; top: 12%; left: 15%; animation: cp-float 7s ease-in-out infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-node-2 { width: 4px; height: 4px; top: 25%; right: 12%; animation: cp-float 9s ease-in-out 1s infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-node-3 { width: 8px; height: 8px; top: 40%; left: 30%; background: rgba(52, 211, 153, 0.3); box-shadow: 0 0 16px rgba(52, 211, 153, 0.2); animation: cp-float 6s ease-in-out 2s infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-node-4 { width: 5px; height: 5px; bottom: 30%; left: 10%; animation: cp-float 8s ease-in-out 0.5s infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-node-5 { width: 3px; height: 3px; bottom: 15%; right: 20%; animation: cp-float 10s ease-in-out 3s infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-node-6 { width: 7px; height: 7px; top: 60%; right: 8%; background: rgba(39, 174, 96, 0.2); animation: cp-float 7s ease-in-out 4s infinite; } /* Systeem: platte, stille stippen (zelfde als login.html se klassiek-loze .cp-node hierboven bij de systeem-tokens) — hier expliciet voor de ongewrapte update-password-pagina's. */ .cp-node { position: absolute; border-radius: 50%; background: rgba(13, 107, 63, 0.25); } .cp-node-1 { width: 6px; height: 6px; top: 12%; left: 15%; } .cp-node-2 { width: 4px; height: 4px; top: 25%; right: 12%; } .cp-node-3 { width: 8px; height: 8px; top: 40%; left: 30%; background: rgba(52, 211, 153, 0.3); } .cp-node-4 { width: 5px; height: 5px; bottom: 30%; left: 10%; } .cp-node-5 { width: 3px; height: 3px; bottom: 15%; right: 20%; } .cp-node-6 { width: 7px; height: 7px; top: 60%; right: 8%; background: rgba(13, 107, 63, 0.2); } .cp-brand-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .cp-node-lines { position: absolute; inset: 0; width: 100%; height: 100%; } @keyframes cp-float { 0%, 100% { transform: translate(0, 0); opacity: 0.6; } 25% { transform: translate(6px, -8px); opacity: 1; } 50% { transform: translate(-4px, -14px); opacity: 0.5; } 75% { transform: translate(8px, -6px); opacity: 0.8; } } .cp-brand-content { position: relative; z-index: 1; text-align: center; max-width: 380px; } .cp-brand-logo { margin-bottom: 20px; } .cp-brand-logo svg { width: 72px; height: 72px; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-logo svg { filter: drop-shadow(0 4px 20px rgba(39, 174, 96, 0.25)); } /* ─── Audio Waveform Visualizer (klassiek) ─── */ .cp-brand-waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; margin-bottom: 24px; } .cp-wave-bar { width: 3px; border-radius: 3px; background: #34D399; animation: cp-wave 1.4s ease-in-out infinite; } :is(html[data-vormtaal='klassiek'], html) .cp-wave-bar { background: linear-gradient(180deg, #34D399, rgba(39, 174, 96, 0.3)); } .cp-wave-bar:nth-child(1) { height: 30%; animation-delay: 0s; } .cp-wave-bar:nth-child(2) { height: 50%; animation-delay: 0.08s; } .cp-wave-bar:nth-child(3) { height: 75%; animation-delay: 0.16s; } .cp-wave-bar:nth-child(4) { height: 100%; animation-delay: 0.24s; } .cp-wave-bar:nth-child(5) { height: 60%; animation-delay: 0.32s; } .cp-wave-bar:nth-child(6) { height: 85%; animation-delay: 0.40s; } .cp-wave-bar:nth-child(7) { height: 45%; animation-delay: 0.48s; } .cp-wave-bar:nth-child(8) { height: 95%; animation-delay: 0.56s; } .cp-wave-bar:nth-child(9) { height: 70%; animation-delay: 0.64s; } .cp-wave-bar:nth-child(10) { height: 40%; animation-delay: 0.72s; } .cp-wave-bar:nth-child(11) { height: 80%; animation-delay: 0.80s; } .cp-wave-bar:nth-child(12) { height: 55%; animation-delay: 0.88s; } .cp-wave-bar:nth-child(13) { height: 100%; animation-delay: 0.96s; } .cp-wave-bar:nth-child(14) { height: 65%; animation-delay: 1.04s; } .cp-wave-bar:nth-child(15) { height: 45%; animation-delay: 1.12s; } .cp-wave-bar:nth-child(16) { height: 25%; animation-delay: 1.20s; } @keyframes cp-wave { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } .cp-brand-name { font-size: clamp(1.75rem, 4vw, 2.625rem); font-weight: 800; color: #ffffff; letter-spacing: -0.03em; margin-bottom: 12px; line-height: 1.1; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-name { font-family: 'Sora', sans-serif; } .cp-brand-name .cp-brand-accent { color: #34D399; } .cp-brand-tagline { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 48px; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-tagline { font-family: 'DM Sans', sans-serif; } /* Demo-site: één rustige regel onder de tagline (geen badge), in het merkgroen. */ .cp-brand-demo { display: block; margin-top: 10px; font-size: 0.875rem; font-weight: 500; color: var(--cp-login-accent); } .cp-brand-features { display: flex; flex-direction: column; gap: 16px; text-align: left; } .cp-brand-feature { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; font-weight: 500; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature { transition: transform 0.2s ease; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature:hover { transform: translateX(4px); } .cp-brand-feature-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 6px; background: rgba(13, 107, 63, 0.08); border: 1px solid rgba(13, 107, 63, 0.12); display: flex; align-items: center; justify-content: center; color: #34D399; transition: background-color 0.2s ease, border-color 0.2s ease; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature-icon { border-radius: 10px; background: rgba(39, 174, 96, 0.08); border: 1px solid rgba(39, 174, 96, 0.12); transition: all 0.3s ease; } .cp-brand-feature:hover .cp-brand-feature-icon { background: rgba(13, 107, 63, 0.15); border-color: rgba(13, 107, 63, 0.25); } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature:hover .cp-brand-feature-icon { background: rgba(39, 174, 96, 0.15); border-color: rgba(39, 174, 96, 0.25); box-shadow: 0 0 16px rgba(39, 174, 96, 0.15); transform: scale(1.05); } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature:nth-child(1) { animation: cp-feature-in 0.5s ease 0.3s both; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature:nth-child(2) { animation: cp-feature-in 0.5s ease 0.4s both; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature:nth-child(3) { animation: cp-feature-in 0.5s ease 0.5s both; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-feature:nth-child(4) { animation: cp-feature-in 0.5s ease 0.6s both; } @keyframes cp-feature-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } /* ─── Trust Badges (klassiek) ─── */ .cp-brand-trust { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); } :is(html[data-vormtaal='klassiek'], html) .cp-brand-trust { animation: cp-fadeIn 0.8s ease 0.8s both; } .cp-trust-badge { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.4); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; } .cp-trust-badge svg { color: rgba(52, 211, 153, 0.5); } .cp-trust-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.08); } /* ══════════════════════════════════════════════════════════════ FORMULIERPANEEL ══════════════════════════════════════════════════════════════ */ /* Systeem: vast 620px (zoals de oplevering), vlak wit vlak, geen gradiënt. Formulierbreedte krimpt gracieus mee tussen 1024 en 1536. */ .cp-login-form-panel { flex: 0 1 620px; min-width: 380px; display: flex; flex-direction: column; align-items: center; padding: 56px 64px 40px; background: var(--cp-login-bg); border-left: 1px solid var(--cp-login-split); position: relative; min-height: 0; } :is(html[data-vormtaal='klassiek'], html) .cp-login-form-panel { flex: 1; min-width: 0; padding: 40px 40px 0; background: linear-gradient(180deg, #FAFBFA 0%, #F0F3F1 100%); } /* Subtiel stippenpatroon — alleen klassiek */ .cp-login-form-panel::before { display: none; } :is(html[data-vormtaal='klassiek'], html) .cp-login-form-panel::before { content: ''; position: absolute; inset: 0; display: block; background-image: radial-gradient(circle, rgba(39, 174, 96, 0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 80%); } .cp-login-form-container { width: 100%; max-width: 460px; position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; animation: cp-fadeIn 0.4s ease; } :is(html[data-vormtaal='klassiek'], html) .cp-login-form-container { max-width: 420px; } /* ─── Kaart ─── Systeem: geen kaart — de velden staan los op het werkvlak (conform de oplevering: alleen de invoervelden zelf hebben een rand). Klassiek: witte kaart met rand en zachte schaduw, ongewijzigd. */ .cp-login-card { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; } :is(html[data-vormtaal='klassiek'], html) .cp-login-card { background: var(--cp-login-card); border: 1px solid var(--cp-login-border); border-radius: var(--cp-login-radius); padding: 32px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.03); } /* ─── Sectiekoppen ─── */ .cp-login-header { margin-bottom: 32px; } .cp-login-header h2 { font-size: clamp(1.375rem, 3vw, 1.6875rem); font-weight: 700; color: var(--cp-login-text); margin: 0 0 8px 0; letter-spacing: -0.02em; } :is(html[data-vormtaal='klassiek'], html) .cp-login-header h2 { font-family: 'Sora', sans-serif; font-size: clamp(1.375rem, 3vw, 2rem); } .cp-login-header p { font-size: 0.9375rem; color: var(--cp-login-text-muted); margin: 0; line-height: 1.5; } /* ─── Foutregel / statusregel boven het formulier (v4-oplevering §9) ─── Zelfde recept als de amberregel elders in de app (3px linkerstreep + getint vlak): .cp-login-alert is de basisvorm (login.html, alleen fout, role="alert"); .cp-login-alert-status voegt de blauw/groen-varianten toe voor callpro-login.html's bredere statusmeldingen (bezig/gelukt). */ .cp-login-alert { margin-bottom: 20px; padding: 10px 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--cp-login-text); background: color-mix(in srgb, var(--cp-login-danger) 10%, transparent); border-left: 3px solid var(--cp-login-danger); border-radius: 0 var(--cp-login-radius-sm) var(--cp-login-radius-sm) 0; } :is(html[data-vormtaal='klassiek'], html) .cp-login-alert { border: 1px solid var(--cp-login-danger); border-left: 1px solid var(--cp-login-danger); border-radius: var(--cp-login-radius-sm); } .cp-login-alert-status.is-blue { background: color-mix(in srgb, var(--cp-login-primary) 8%, transparent); border-left-color: var(--cp-login-primary); } .cp-login-alert-status.is-green { background: color-mix(in srgb, var(--cp-login-success) 10%, transparent); border-left-color: var(--cp-login-success); } /* ─── Formuliervelden ─── */ .cp-form-group { margin-bottom: 20px; } .cp-form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--cp-login-text); margin-bottom: 7px; letter-spacing: 0.01em; } /* Wachtwoord-label + "Vergeten?" op één regel (v4 §9) — alleen systeem; klassiek houdt de link in .cp-form-row, zie hieronder. */ .cp-form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .cp-form-label-row .cp-form-label { margin-bottom: 0; } .cp-forgot-link-inline { font-size: 0.8125rem; font-weight: 600; color: var(--cp-login-primary); text-decoration: underline; white-space: nowrap; } .cp-forgot-link-inline:hover { color: var(--cp-login-primary-hover); } .cp-input-wrapper { position: relative; } /* Systeem: geen icoon in het veld (oplevering §2.3). De svg blijft in de markup — nodig voor klassiek — maar is hier onzichtbaar. */ .cp-input-wrapper .cp-input-icon { display: none; } :is(html[data-vormtaal='klassiek'], html) .cp-input-wrapper .cp-input-icon { display: block; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cp-login-text-light); pointer-events: none; transition: color 0.2s; } /* !important: Frappe's login.bundle.css richt zich met vier geneste klassen (.for-login .page-card .page-card-body input[type=...]) rechtstreeks op de invoervelden (border:none, achtergrond var(--control-bg), margin-bottom:1rem) — dat wint anders van onze .cp-input-wrapper input op specificiteit. */ .cp-input-wrapper input { width: 100% !important; height: 42px !important; padding: 0 14px !important; border: 1px solid var(--cp-login-input-border) !important; border-radius: var(--cp-login-radius-sm) !important; font-family: inherit !important; font-size: 0.9375rem !important; font-weight: 400 !important; letter-spacing: normal !important; color: var(--cp-login-text) !important; background: var(--cp-login-input-bg) !important; outline: none; margin-bottom: 0 !important; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; box-sizing: border-box; } :is(html[data-vormtaal='klassiek'], html) .cp-input-wrapper input { height: auto !important; padding: 0.8125rem 1rem 0.8125rem 2.75rem !important; border-width: 1.5px !important; font-family: 'DM Sans', sans-serif !important; background: var(--cp-login-input-bg) !important; } .cp-input-wrapper input::placeholder { color: var(--cp-login-text-light); } .cp-input-wrapper input:focus { border-color: var(--cp-login-input-focus); box-shadow: 0 0 0 3px var(--cp-login-primary-glow); } :is(html[data-vormtaal='klassiek'], html) .cp-input-wrapper input:focus { background: var(--cp-login-card); } .cp-input-wrapper input:focus ~ .cp-input-icon { color: var(--cp-login-primary); } .cp-toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; font-weight: 600; color: var(--cp-login-text-muted); cursor: pointer; user-select: none; transition: color 0.15s; z-index: 2; background: none; border: none; padding: 2px 4px; } .cp-toggle-password:hover { color: var(--cp-login-primary); } /* ─── Knoppen ─── */ .cp-btn-login { width: 100%; height: 44px; padding: 0 1.5rem; border: none; border-radius: var(--cp-login-radius-sm); font-family: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: background-color 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; } :is(html[data-vormtaal='klassiek'], html) .cp-btn-login { height: auto; padding: 0.875rem 1.5rem; font-family: 'DM Sans', sans-serif; font-weight: 600; transition: all 0.2s; } .cp-btn-primary { background: var(--cp-login-primary); color: var(--cp-login-primary-ink); box-shadow: none; } .cp-btn-primary:hover { background: var(--cp-login-primary-hover); box-shadow: none; } :is(html[data-vormtaal='klassiek'], html) .cp-btn-primary { color: #ffffff; box-shadow: 0 1px 3px rgba(39, 174, 96, 0.3); } :is(html[data-vormtaal='klassiek'], html) .cp-btn-primary:hover { box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35); transform: translateY(-1px); } :is(html[data-vormtaal='klassiek'], html) .cp-btn-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(39, 174, 96, 0.3); } .cp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } /* Button loading state — triggered by Frappe adding btn-primary-dark or [disabled] */ .cp-btn-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: currentColor; border-radius: 50%; animation: cp-spin 0.6s linear infinite; } .cp-btn-login.btn-primary-dark .cp-btn-text, .cp-btn-login[disabled] .cp-btn-text { display: none; } .cp-btn-login.btn-primary-dark .cp-btn-spinner, .cp-btn-login[disabled] .cp-btn-spinner { display: block; } @keyframes cp-spin { to { transform: rotate(360deg); } } .cp-btn-secondary { background: var(--cp-login-card); color: var(--cp-login-text); border: 1px solid var(--cp-login-border); } :is(html[data-vormtaal='klassiek'], html) .cp-btn-secondary { border-width: 1.5px; } .cp-btn-secondary:hover { background: var(--cp-login-primary-light); border-color: var(--cp-login-primary); color: var(--cp-login-primary); } /* ─── Onthoud mij + Vergeten-regel ─── */ .cp-form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: -4px; } /* Checkbox — eigen bouw */ .cp-checkbox-wrapper { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 0.8125rem; color: var(--cp-login-text-muted); } .cp-checkbox-wrapper input[type="checkbox"] { /* Onzichtbaar maar echt aanwezig, precies over het getekende vinkje: zo blijft het vakje met Tab bereikbaar en met de spatiebalk te schakelen, ontvangt het zelf de klik (geen display:none, geen pointer-events:none), en kan de e2e-test het aan- en uitzetten. */ position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: 0; transform: translateY(-50%); opacity: 0; z-index: 1; cursor: pointer; } .cp-checkbox-wrapper { position: relative; } .cp-checkbox-wrapper input[type="checkbox"]:focus-visible + .cp-checkbox-mark { outline: 2px solid var(--cp-login-primary); outline-offset: 2px; } .cp-checkbox-mark { width: 16px; height: 16px; border: 1.5px solid var(--cp-login-text); border-radius: 4px; background: var(--cp-login-input-bg); display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; } :is(html[data-vormtaal='klassiek'], html) .cp-checkbox-mark { width: 18px; height: 18px; border: 1.5px solid var(--cp-login-input-border); border-radius: 5px; } /* Systeem: neutrale inkt-vulling (kleur draagt alleen betekenis; een vinkje is geen statusmelding), conform de oplevering. */ .cp-checkbox-wrapper input[type="checkbox"]:checked + .cp-checkbox-mark { background: var(--cp-login-text); border-color: var(--cp-login-text); } :is(html[data-vormtaal='klassiek'], html) .cp-checkbox-wrapper input[type="checkbox"]:checked + .cp-checkbox-mark { background: var(--cp-login-primary); border-color: var(--cp-login-primary); } .cp-checkbox-wrapper input[type="checkbox"]:checked + .cp-checkbox-mark::after { content: ''; width: 5px; height: 9px; border: solid var(--cp-login-input-bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } :is(html[data-vormtaal='klassiek'], html) .cp-checkbox-wrapper input[type="checkbox"]:checked + .cp-checkbox-mark::after { border-color: white; } .cp-checkbox-label { font-weight: 500; } /* ─── Links ─── */ .cp-forgot-link { text-align: right; } .cp-forgot-link a { font-size: 0.8125rem; font-weight: 500; color: var(--cp-login-primary); text-decoration: none; transition: color 0.15s; } .cp-forgot-link a:hover { color: var(--cp-login-primary-hover); text-decoration: underline; } .cp-signup-link { text-align: center; margin-top: 24px; font-size: 0.875rem; color: var(--cp-login-text-muted); } .cp-signup-link a { color: var(--cp-login-primary); font-weight: 600; text-decoration: none; transition: color 0.15s; } .cp-signup-link a:hover { color: var(--cp-login-primary-hover); text-decoration: underline; } .cp-back-link { text-align: center; margin-top: 16px; } .cp-back-link a { font-size: 0.8125rem; font-weight: 500; color: var(--cp-login-text-muted); text-decoration: none; transition: color 0.15s; } .cp-back-link a:hover { color: var(--cp-login-primary); } /* Hulpregel onder het inlogformulier (systeem) — hergebruikt de bestaande footer-links i.p.v. een fictief telefoonnummer/mailadres te verzinnen. */ .cp-login-help { margin-top: 28px; text-align: center; font-size: 0.75rem; color: var(--cp-login-text-light); } .cp-login-help a { color: var(--cp-login-text-muted); text-decoration: none; transition: color 0.15s; } .cp-login-help a:hover { color: var(--cp-login-primary); } .cp-login-help .cp-footer-sep { margin: 0 6px; } /* ─── Divider ─── */ .cp-divider { display: flex; align-items: center; margin: 24px 0; gap: 16px; } .cp-divider::before, .cp-divider::after { content: ''; flex: 1; height: 1px; background: var(--cp-login-border); } .cp-divider span { font-size: 0.75rem; font-weight: 500; color: var(--cp-login-text-light); } :is(html[data-vormtaal='klassiek'], html) .cp-divider span { text-transform: uppercase; letter-spacing: 0.05em; } /* ─── Social Login ─── */ .cp-social-buttons { display: flex; flex-direction: column; gap: 10px; } .cp-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; padding: 10px 16px; border: 1px solid var(--cp-login-border); border-radius: var(--cp-login-radius-sm); background: var(--cp-login-card); font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--cp-login-text); text-decoration: none; cursor: pointer; transition: all 0.2s; box-sizing: border-box; } :is(html[data-vormtaal='klassiek'], html) .cp-social-btn { height: auto; border-width: 1.5px; font-family: 'DM Sans', sans-serif; font-size: 0.8125rem; font-weight: 500; } .cp-social-btn:hover { background: var(--cp-login-primary-light); border-color: var(--cp-login-primary); color: var(--cp-login-primary); } .cp-social-btn img { width: 18px; height: 18px; } /* Systeem: geen icoon op de secundaire knop (alleen gezette tekst, conform de oplevering). De svg blijft in de markup voor klassiek. */ .cp-social-btn .cp-social-icon { display: none; } :is(html[data-vormtaal='klassiek'], html) .cp-social-btn .cp-social-icon { display: block; } /* ─── Error / Invalid State ─── */ .cp-login-form-container.invalid-login, .login-content.page-card.invalid-login { animation: cp-shake 0.4s ease; } .cp-form-group.invalid input { border-color: var(--cp-login-danger); box-shadow: 0 0 0 3px rgba(198, 47, 34, 0.12); } .cp-status-message { text-align: center; font-size: 0.8125rem; font-weight: 500; padding: 10px 16px; border-radius: var(--cp-login-radius-sm); margin-bottom: 16px; display: none; } .cp-status-message.error { display: block; background: rgba(198, 47, 34, 0.08); color: var(--cp-login-danger); border: 1px solid rgba(198, 47, 34, 0.15); } .cp-status-message.success { display: block; background: rgba(13, 107, 63, 0.08); color: var(--cp-login-success); border: 1px solid rgba(13, 107, 63, 0.15); } /* ─── Password Strength (update-password) ─── */ .cp-password-strength { margin-top: 6px; } .cp-password-strength .password-strength-indicator { float: right; padding: 15px; margin-top: -42px; margin-right: 36px; } .cp-password-strength .password-strength-message, .cp-password-strength .password-mismatch-message { font-size: 0.75rem; margin-top: 4px; } /* ─── 2FA / OTP Verification (Frappe login.js template) ─── */ #twofactor_div { text-align: center; } #twofactor_div .page-card-head { border: none; padding: 0; margin: 0 0 16px 0; } #twofactor_div .page-card-head .indicator { font-size: 1.125rem; font-weight: 600; color: var(--cp-login-text); } :is(html[data-vormtaal='klassiek'], html) #twofactor_div .page-card-head .indicator { font-family: 'Sora', sans-serif; } #twofactor_div .page-card-head .indicator::before { display: none; } #twofactor_div #otp_div { margin-bottom: 16px; font-size: 0.875rem; color: var(--cp-login-text-muted); line-height: 1.5; } #twofactor_div #login_token { width: 100%; padding: 12px 14px; border: 1.5px solid var(--cp-login-input-border); border-radius: var(--cp-login-radius-sm); font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.15em; text-align: center; color: var(--cp-login-text); background: var(--cp-login-input-bg); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } #twofactor_div #login_token:focus { border-color: var(--cp-login-input-focus); box-shadow: 0 0 0 3px var(--cp-login-primary-glow); } #twofactor_div #verify_token { width: 100%; padding: 12px 24px; border: none; border-radius: var(--cp-login-radius-sm); background: var(--cp-login-primary); color: var(--cp-login-primary-ink); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } :is(html[data-vormtaal='klassiek'], html) #twofactor_div #verify_token { color: #ffffff; } #twofactor_div #verify_token:hover { background: var(--cp-login-primary-hover); } :is(html[data-vormtaal='klassiek'], html) #twofactor_div #verify_token:hover { box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35); } /* ─── Animaties ─── */ @keyframes cp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @keyframes cp-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.cp-login-page * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE Matrix: 1536, 1280, 1024 (naast elkaar) · 768, 430, 375 (gestapeld). Boven 900px: flank + formulier naast elkaar. 900px en smaller: flank bovenaan als compacte band (systeem: staafveld ×0.42, geen feiten/ voettekst-rij — zie de 375-render), formulier eronder, volle breedte. ══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .cp-login-wrapper { flex-direction: column; min-height: 100vh; } .cp-login-brand { flex: none; min-width: 0; } .cp-login-form-panel { flex: 1; min-width: 0; } .cp-login-form-container { flex: 1; } .cp-login-form-panel { padding: 28px 20px 20px; } .cp-login-form-container { max-width: 460px; } /* ── Klassiek: ongewijzigd t.o.v. vóór v2.509 ── */ :is(html[data-vormtaal='klassiek'], html) .cp-login-brand { padding: 40px 32px 32px; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-features { display: none; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-trust { display: none; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-tagline { margin-bottom: 0; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-waveform { margin-bottom: 16px; height: 24px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-form-panel { flex: 1; padding: 32px 24px 0; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-nodes { display: none; } :is(html[data-vormtaal='klassiek'], html) .cp-login-footer { padding: 16px 24px; } } /* Large phone / small tablet */ @media (max-width: 600px) { .cp-login-form-panel { padding: 24px 16px 16px; } .cp-login-header { margin-bottom: 24px; } .cp-input-wrapper input { height: 46px; } .cp-btn-login { height: 48px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-brand { padding: 24px 20px 20px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-form-panel { padding: 24px 20px 12px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-card { padding: 24px 20px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-header { margin-bottom: 24px; } } /* Phone */ @media (max-width: 480px) { .cp-login-form-panel { padding: 20px 16px 14px; } /* Systeem: "Ingelogd blijven" + "Wachtwoord vergeten?" blijven op één regel, ook op de smalste telefoon (past ruim, zie de 375-render). */ :is(html[data-vormtaal='klassiek'], html) .cp-form-row { flex-direction: column; align-items: flex-start; gap: 12px; } :is(html[data-vormtaal='klassiek'], html) .cp-forgot-link { text-align: left; } :is(html[data-vormtaal='klassiek'], html) .cp-login-brand { padding: 20px 16px 16px; } :is(html[data-vormtaal='klassiek'], html) .cp-brand-waveform { height: 20px; gap: 2px; } :is(html[data-vormtaal='klassiek'], html) .cp-wave-bar { width: 2px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-form-panel { padding: 20px 16px 8px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-card { padding: 20px 16px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-header { margin-bottom: 20px; } :is(html[data-vormtaal='klassiek'], html) .cp-login-footer { padding: 16px; } :is(html[data-vormtaal='klassiek'], html) .cp-footer-main { font-size: 11px; } :is(html[data-vormtaal='klassiek'], html) .cp-footer-links { font-size: 10px; } :is(html[data-vormtaal='klassiek'], html) .cp-footer-sep { margin: 0 4px; } } /* ─── Override Frappe btn-primary op de loginpagina's ─── */ body.cp-login-page .cp-btn-login.btn-primary { background: var(--cp-login-primary); color: var(--cp-login-primary-ink); border: none; box-shadow: none; margin-top: 0; } :is(html[data-vormtaal='klassiek'], html) body.cp-login-page .cp-btn-login.btn-primary { color: #ffffff; box-shadow: 0 1px 3px rgba(39, 174, 96, 0.3); } body.cp-login-page .cp-btn-login.btn-primary:hover { background: var(--cp-login-primary-hover); box-shadow: none; } :is(html[data-vormtaal='klassiek'], html) body.cp-login-page .cp-btn-login.btn-primary:hover { box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35); } /* ─── Override Frappe defaults ─── */ body.cp-login-page .page-card { border: none; box-shadow: none; max-width: none; margin: 0; padding: 0; background: transparent; } body.cp-login-page .page-card-head { border: none; padding: 0; margin: 0; } body.cp-login-page .page-card-body { padding: 0; } /* Systeem: Frappe's bundel (.for-login .page-card .page-card-body) houdt het veldblok op 320px gecentreerd, terwijl de kop de volle 460px gebruikt — kop en velden stonden 70px uit elkaar (de grens zit op Frappe's .form-signin). In systeem vult het formulier de kolom. */ html:not([data-vormtaal='klassiek']) body.cp-login-page .form-signin, html:not([data-vormtaal='klassiek']) body.cp-login-page .page-card-body, html:not([data-vormtaal='klassiek']) body.cp-login-page .page-card-actions { max-width: none; width: 100%; margin-left: 0; margin-right: 0; } body.cp-login-page .page-card-actions { padding: 0; } body.cp-login-page .hero-and-content { background: transparent; } body.cp-login-page .container { max-width: none; padding: 0; margin: 0; } /* Style Frappe's signup form template inputs */ body.cp-login-page .for-signup .form-control { width: 100%; padding: 0.75rem 0.875rem; border: 1px solid var(--cp-login-input-border); border-radius: var(--cp-login-radius-sm); font-family: inherit; font-size: 0.875rem; color: var(--cp-login-text); background: var(--cp-login-input-bg); outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; margin-bottom: 12px; } :is(html[data-vormtaal='klassiek'], html) body.cp-login-page .for-signup .form-control { border-width: 1.5px; font-family: 'DM Sans', sans-serif; } body.cp-login-page .for-signup .form-control:focus { border-color: var(--cp-login-input-focus); box-shadow: 0 0 0 3px var(--cp-login-primary-glow); } body.cp-login-page .for-signup .btn-primary { width: 100%; padding: 0.75rem 1.5rem; border: none; border-radius: var(--cp-login-radius-sm); background: var(--cp-login-primary); color: var(--cp-login-primary-ink); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; } :is(html[data-vormtaal='klassiek'], html) body.cp-login-page .for-signup .btn-primary { color: #ffffff; font-family: 'DM Sans', sans-serif; } body.cp-login-page .for-signup .btn-primary:hover { background: var(--cp-login-primary-hover); } /* Hide 2FA verify section by default (shown via JS) */ body.cp-login-page .for-verify { display: none; } /* Hide Frappe's default elements */ body.cp-login-page .sign-up-message, body.cp-login-page .login-divider, body.cp-login-page .social-logins, body.cp-login-page .web-footer { display: none !important; } /* Voettekst (copyright + versie) — flex child, onderaan; in beide vormtalen. */ .cp-login-footer { width: 100%; text-align: center; font-size: 0.75rem; color: var(--cp-login-text-light); line-height: 1.6; padding: 20px 0 16px; flex-shrink: 0; } .cp-footer-main { margin-bottom: 4px; } .cp-footer-links { font-size: 11px; } .cp-footer-links a { color: var(--cp-login-text-muted); text-decoration: none; transition: color 0.15s; } .cp-footer-links a:hover { color: var(--cp-login-primary); } .cp-footer-sep { margin: 0 6px; color: var(--cp-login-border, #dde0e4); } .cp-login-footer a { color: var(--cp-login-text-muted); text-decoration: none; } .cp-version-badge { display: inline-block; margin-left: 6px; font-size: 0.625rem; font-weight: 600; color: var(--cp-login-text-light); background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.03em; vertical-align: middle; } /* ─── SYSTEEM · VERFIJNING — letter en tekstweergave ─── Instrument Sans zoals in de app (het woordmerk houdt zijn eigen letter). geometricPrecision: optimizeLegibility/auto rondt op Linux-Chromium glyph-breedtes af en slaat gaten in woorden ("Wac htwoord") — les dirigent/memory/_shared/ text-rendering-optimizelegibility-maakt-gaten-in-smalle-fonts-op-linux-chromium.md. */ html:not([data-vormtaal='klassiek']) body.cp-login-page { font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; text-rendering: geometricPrecision; } /* De klassieke regels zetten DM Sans/Sora per element; in systeem erft alles de app-letter. Alleen het woordmerk (.cp-brand-name) houdt Sora: dat is het logo. */ html:not([data-vormtaal='klassiek']) :is(.cp-brand-tagline, .cp-login-header h2, .cp-btn-login, .cp-social-btn, #twofactor_div .page-card-head .indicator) { font-family: inherit; } html:not([data-vormtaal='klassiek']) :is(.cp-input-wrapper input, body.cp-login-page .for-signup .form-control, body.cp-login-page .for-signup .btn-primary) { font-family: inherit !important; /* tegen het !important van de klassieke veldregel */ } html:not([data-vormtaal='klassiek']) .cp-login-header h2 { letter-spacing: -0.01em; } /* Donker thema (alleen systeem; klassiek kende het nooit): het klassieke formulierpaneel heeft een vast licht verloop — hier het nachtpalet. */ html[data-theme='dark']:not([data-vormtaal='klassiek']) .cp-login-form-panel { background: var(--cp-login-bg); }