/* Birdhouse Klantportaal — tokens uit BIRDHOUSE-DESIGN-SYSTEM.md en de bindende mockups K-1 t/m K-5 (licht + donker). Donker komt langs twee wegen binnen (besluit ronde 3): de systeemvoorkeur van de bezoeker en de schakelaar in de balk. De schakelaar zet data-theme op en wint daarmee altijd van de systeemvoorkeur. CSS kent geen manier om één blok aan beide voorwaarden te hangen, dus staat het donkere palet twee keer — wijzig de blokken altijd samen. */ :root { --background: #faf8f2; --surface: #f3f0e8; --surface-child: rgba(255, 255, 255, 0.52); --surface-strong: #fffdf7; --text: #1c1a17; --muted: #7a756d; --muted-strong: #5f5a51; --primary: #114d61; --primary-foreground: #faf8f2; --primary-soft: #d9e8e8; --accent: #e8aa57; --accent-soft: #fff4d8; --line: #ded8cb; --row-tint: rgba(28, 26, 23, 0.03); --success-bg: #eef8f0; --success-border: #b7dbc1; --success-text: #276749; --warning-bg: #fff7ed; --warning-border: #fed7aa; --warning-text: #9a3412; --danger-bg: #fee2e2; --danger-border: #fecaca; --danger-text: #852d25; --status-red: #c0442c; --status-amber: #c07a20; --status-green: #1f7a58; --chip-warm: #8a5a1f; } [data-theme="dark"] { color-scheme: dark; --background: #0b2e3b; --surface: #0f3a4a; --surface-child: #123f4f; --surface-strong: #134757; --text: #f0ede6; --muted: #90b5c3; --muted-strong: #b7d6e2; --primary: #f0be72; --primary-foreground: #0b2e3b; --primary-soft: #134757; --accent: #5cc0dc; --accent-soft: #163f4d; --line: #1a5268; --row-tint: rgba(240, 237, 230, 0.042); --success-bg: #123b2c; --success-border: #215a41; --success-text: #a7f3d0; --warning-bg: #3a2c14; --warning-border: #6b4a1e; --warning-text: #ffd994; --danger-bg: #3a2020; --danger-border: #5a2c2c; --danger-text: #ffc4bd; --status-red: #e8776a; --status-amber: #e0a94e; --status-green: #63c79a; --chip-warm: #ffd994; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --background: #0b2e3b; --surface: #0f3a4a; --surface-child: #123f4f; --surface-strong: #134757; --text: #f0ede6; --muted: #90b5c3; --muted-strong: #b7d6e2; --primary: #f0be72; --primary-foreground: #0b2e3b; --primary-soft: #134757; --accent: #5cc0dc; --accent-soft: #163f4d; --line: #1a5268; --row-tint: rgba(240, 237, 230, 0.042); --success-bg: #123b2c; --success-border: #215a41; --success-text: #a7f3d0; --warning-bg: #3a2c14; --warning-border: #6b4a1e; --warning-text: #ffd994; --danger-bg: #3a2020; --danger-border: #5a2c2c; --danger-text: #ffc4bd; --status-red: #e8776a; --status-amber: #e0a94e; --status-green: #63c79a; --chip-warm: #ffd994; } } * { box-sizing: border-box; } body { background: var(--background); color: var(--text); font-family: "Roc Grotesk", "Segoe UI", ui-sans-serif, system-ui, sans-serif; font-size: 14px; line-height: 1.5; margin: 0; min-height: 100vh; } .lg { display: flex; min-height: 100vh; overflow: hidden; position: relative; } .lg .blob { border-radius: 52% 48% 61% 39%/55% 46% 54% 45%; filter: blur(1px); opacity: 0.5; position: absolute; } .lg .blob.b1 { background: var(--primary-soft); height: 340px; left: -120px; top: -90px; width: 380px; } .lg .blob.b2 { background: var(--accent-soft); border-radius: 44% 56% 39% 61%/49% 57% 43% 51%; bottom: -130px; height: 320px; right: -100px; width: 360px; } .lg-inner { margin: auto; max-width: 400px; padding: 24px; position: relative; width: 100%; } .lg-brand { align-items: baseline; display: flex; gap: 10px; margin-bottom: 6px; } .lg-brand .b1 { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; } .lg-brand .b2 { color: var(--muted-strong); font-size: 15px; font-weight: 500; } .lg-inner > p { color: var(--muted-strong); font-size: 13.5px; margin: 0 0 26px; } .lg-field { margin-bottom: 16px; } .lg-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; } .lg-field input { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 16px; padding: 10px 12px; width: 100%; } .lg-field input:focus { border-color: var(--primary); outline: 3px solid rgba(17, 77, 97, 0.25); } .lg-row { align-items: center; display: flex; justify-content: space-between; margin: 4px 0 20px; } .lg-row a { color: var(--primary); font-size: 13px; font-weight: 500; text-decoration: none; } .lg-btn { background: var(--primary); border: none; border-radius: 8px; color: var(--primary-foreground); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 12px; width: 100%; } .lg-btn:disabled { cursor: default; opacity: 0.5; } .lg-help { border-top: 1px solid var(--line); color: var(--muted-strong); font-size: 12.5px; margin-top: 28px; padding-top: 16px; } .lg-help b { color: var(--text); font-weight: 500; } .lg-code { display: flex; gap: 10px; margin: 6px 0 20px; } .lg-code input { background: var(--surface-strong); border: 1px solid var(--line); border-radius: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 22px; height: 52px; text-align: center; width: 46px; } .lg-err { background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 8px; color: var(--danger-text); font-size: 13px; margin-bottom: 16px; padding: 10px 12px; } .lg-err[hidden], [hidden] { display: none !important; } .mfa-qr { background: #fff; border: 1px solid var(--line); border-radius: 12px; display: inline-block; margin: 6px 0 10px; padding: 10px; } .mfa-qr svg, .mfa-qr img { display: block; height: 180px; width: 180px; } .mfa-secret { color: var(--muted-strong); font-size: 12px; margin: 0 0 18px; word-break: break-all; } .mfa-secret code { background: var(--surface); border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; padding: 1px 5px; } .lg-ok { background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 8px; color: var(--success-text); font-size: 13px; margin-bottom: 16px; padding: 10px 12px; } .lg-btn-link { display: block; text-align: center; text-decoration: none; } .mt-12 { margin-top: 12px; } /* Donker/licht-schakelaar op de inlogpagina's; de ingelogde pagina's hebben dezelfde knop in de balk (besluit ronde 3). */ .lg-thema { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-strong); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 12px; position: absolute; right: 20px; top: 20px; z-index: 2; }