:root { color-scheme: light dark; /* Kleur — blauwdruk: papier, inkt, meetlint-amber als enige accent */ --ink: oklch(27% 0.055 258); --ink-2: oklch(38% 0.05 258); --ink-3: oklch(58% 0.03 258); --paper: oklch(96.5% 0.012 85); --surface: oklch(99% 0.006 85); --surface-sunken: oklch(94% 0.014 85); --border: oklch(88% 0.014 85); --border-strong: oklch(80% 0.02 85); --muted: oklch(52% 0.025 258); --text: oklch(22% 0.02 258); --accent: oklch(74% 0.15 68); --accent-ink: oklch(32% 0.09 55); --danger: oklch(53% 0.17 26); --danger-ink: oklch(97% 0.01 26); /* Blijft altijd donker, in beide modi — voor tekst/merktekens die bovenop de amber accentkleur zitten (die zelf in beide modi licht-ish blijft). --ink zelf wisselt wél van rol tussen licht/donker, dus is hier niet bruikbaar. */ --ink-on-accent: oklch(20% 0.05 258); --shadow-sm: 0 1px 2px oklch(27% 0.05 258 / 0.06), 0 2px 4px oklch(27% 0.05 258 / 0.05); --shadow-md: 0 1px 2px oklch(27% 0.05 258 / 0.05), 0 3px 6px oklch(27% 0.05 258 / 0.06), 0 8px 20px oklch(27% 0.05 258 / 0.06); } /* Donker = een echte blauwdruk: donkere navy ondergrond, lichte linewerk-"inkt". Zelfde tokennamen, alleen de rollen wisselen — de rest van het stylesheet hoeft niet te weten in welke modus het zit. Volgt standaard het OS-thema; een handmatige keuze via de logo-toggle (zie app.js, zet `data-theme` op ) wint altijd. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: oklch(94% 0.015 85); --ink-2: oklch(85% 0.02 85); --ink-3: oklch(45% 0.04 258); --paper: oklch(15% 0.03 258); --surface: oklch(20% 0.035 258); --surface-sunken: oklch(12% 0.03 258); --border: oklch(32% 0.04 258); --border-strong: oklch(42% 0.045 258); --muted: oklch(65% 0.03 258); --text: oklch(92% 0.015 85); --accent: oklch(78% 0.16 68); --accent-ink: oklch(80% 0.14 65); --danger: oklch(62% 0.19 26); --danger-ink: oklch(12% 0.02 26); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4), 0 2px 4px oklch(0% 0 0 / 0.3); --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.3), 0 3px 6px oklch(0% 0 0 / 0.35), 0 8px 20px oklch(0% 0 0 / 0.4); } } :root[data-theme="dark"] { color-scheme: dark; --ink: oklch(94% 0.015 85); --ink-2: oklch(85% 0.02 85); --ink-3: oklch(45% 0.04 258); --paper: oklch(15% 0.03 258); --surface: oklch(20% 0.035 258); --surface-sunken: oklch(12% 0.03 258); --border: oklch(32% 0.04 258); --border-strong: oklch(42% 0.045 258); --muted: oklch(65% 0.03 258); --text: oklch(92% 0.015 85); --accent: oklch(78% 0.16 68); --accent-ink: oklch(80% 0.14 65); --danger: oklch(62% 0.19 26); --danger-ink: oklch(12% 0.02 26); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4), 0 2px 4px oklch(0% 0 0 / 0.3); --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.3), 0 3px 6px oklch(0% 0 0 / 0.35), 0 8px 20px oklch(0% 0 0 / 0.4); } /* Prinsessenmodus — een aparte "vibe", los van licht/donker. Zelfde tokennamen, dus de rest van het stylesheet hoeft niets te weten. Automatisch aan voor profiel car, tenzij iemand het handmatig omzet via de kroon-knop (zie app.js, vibeWisselen) — die keuze wint dan altijd, gedeeld via localStorage/dezelfde origin in productie, net als het thema hierboven. Roze/lila/goud i.p.v. papier/inkt/amber, rondere vormen. */ :root[data-vibe="princess"] { --ink: oklch(38% 0.11 340); --ink-2: oklch(48% 0.1 340); --ink-3: oklch(62% 0.07 340); --paper: oklch(97% 0.025 350); --surface: oklch(99% 0.015 350); --surface-sunken: oklch(94% 0.045 345); --border: oklch(88% 0.05 345); --border-strong: oklch(78% 0.08 345); --muted: oklch(56% 0.07 340); --text: oklch(32% 0.08 340); --accent: oklch(82% 0.13 85); --accent-ink: oklch(38% 0.1 60); --danger: oklch(58% 0.19 15); --danger-ink: oklch(97% 0.02 15); --ink-on-accent: oklch(28% 0.09 340); --radius: 22px; --radius-sm: 14px; --font-display: "Fredoka", var(--font-body); } @media (prefers-color-scheme: dark) { :root[data-vibe="princess"]:not([data-theme="light"]) { --ink: oklch(93% 0.03 330); --ink-2: oklch(85% 0.05 330); --ink-3: oklch(55% 0.08 330); --paper: oklch(17% 0.06 320); --surface: oklch(22% 0.07 320); --surface-sunken: oklch(13% 0.06 320); --border: oklch(35% 0.08 320); --border-strong: oklch(45% 0.09 320); --muted: oklch(70% 0.06 320); --text: oklch(91% 0.04 330); --accent: oklch(83% 0.14 85); --accent-ink: oklch(85% 0.13 80); --danger: oklch(66% 0.2 15); --danger-ink: oklch(15% 0.02 15); } } :root[data-vibe="princess"][data-theme="dark"] { --ink: oklch(93% 0.03 330); --ink-2: oklch(85% 0.05 330); --ink-3: oklch(55% 0.08 330); --paper: oklch(17% 0.06 320); --surface: oklch(22% 0.07 320); --surface-sunken: oklch(13% 0.06 320); --border: oklch(35% 0.08 320); --border-strong: oklch(45% 0.09 320); --muted: oklch(70% 0.06 320); --text: oklch(91% 0.04 330); --accent: oklch(83% 0.14 85); --accent-ink: oklch(85% 0.13 80); --danger: oklch(66% 0.2 15); --danger-ink: oklch(15% 0.02 15); } /* Glitters — drie lagen fijn gestrooide sterretjes (goud/roze/wit), elk als één klein ster-icoontje herhaald op een veel groter tegel-formaat, zodat ze schaars en verspreid ogen zonder los geplaatste elementen. Negatieve z-index: deze laag ligt achter de gewone (statische) pagina-inhoud — zichtbaar in de lege ruimtes rond kaarten, niet erover heen. Twinkelt zachtjes; valt weg onder verminderde beweging (zie de reduced-motion-query onderaan, die geldt voor alle animaties). */ :root[data-vibe="princess"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 42 53 47 58 50 53 53 50 58 47 53 42 50 47 47Z' fill='%23f0b429'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 42 53 47 58 50 53 53 50 58 47 53 42 50 47 47Z' fill='%23f9a8d4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 42 53 47 58 50 53 53 50 58 47 53 42 50 47 47Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 240px 240px, 320px 320px, 180px 180px; background-position: 15px 25px, 110px 180px, 60px 90px; opacity: 0.45; animation: sparkle-twinkle 3.4s ease-in-out infinite; } @keyframes sparkle-twinkle { 0%, 100% { opacity: 0.22; background-position: 15px 25px, 110px 180px, 60px 90px; } 50% { opacity: 0.55; background-position: 19px 29px, 105px 176px, 64px 94px; } } :root { /* Type */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem); --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.05rem); --step-1: clamp(1.15rem, 1.1rem + 0.3vw, 1.3rem); --step-2: clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem); --step-3: clamp(1.6rem, 1.4rem + 0.9vw, 2.05rem); /* Ruimte — één niet-lineaire schaal */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --radius: 14px; --radius-sm: 8px; --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --ease-out: cubic-bezier(0.25, 1, 0.5, 1); font-family: var(--font-body); } * { box-sizing: border-box; } html { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; } body { margin: 0; background: var(--paper); color: var(--text); padding-bottom: 76px; font-family: var(--font-body); font-size: var(--step-0); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; position: relative; } /* Papierkorrel — subtiele textuur, geen effect */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { /* "multiply" verdwijnt bijna volledig op een donkere ondergrond; "overlay" geeft in beide richtingen (lichter/donkerder) een zichtbare korrel. */ :root:not([data-theme="light"]) body::after { mix-blend-mode: overlay; opacity: 0.05; } } :root[data-theme="dark"] body::after { mix-blend-mode: overlay; opacity: 0.05; } #app { max-width: 640px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; color: var(--ink); margin: 0 0 var(--sp-2); text-wrap: balance; } h2 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.02em; } h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; } h4 { font-size: var(--step-0); } p { text-wrap: pretty; } ::selection { background: var(--accent); color: var(--ink-on-accent); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } button { font: inherit; cursor: pointer; } .btn { border: none; border-radius: var(--radius-sm); padding: 12px 18px; background: var(--ink); color: var(--surface); font-weight: 600; box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base); } .btn:hover { box-shadow: var(--shadow-md); } .btn:active { transform: translateY(1px) scale(0.99); } .btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; } .btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); box-shadow: none; } .btn.secondary:active { background: var(--surface-sunken); } .btn.danger { background: var(--danger); color: var(--danger-ink); } .btn.small { padding: 8px 14px; font-size: var(--step--1); } :root[data-vibe="princess"] .btn { position: relative; overflow: hidden; } :root[data-vibe="princess"] .btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, oklch(100% 0 0 / 0.4), transparent); transform: skewX(-20deg); transition: left var(--dur-slow) var(--ease-out); } :root[data-vibe="princess"] .btn:hover::after { left: 120%; } .btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; } input, textarea, select { font: inherit; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); width: 100%; background: var(--surface); color: var(--text); caret-color: var(--accent-ink); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--ink); outline-offset: 1px; } label { display: block; font-size: var(--step--1); letter-spacing: 0.02em; color: var(--muted); margin: var(--sp-4) 0 4px; } .card { background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-3); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .card.clickable { cursor: pointer; transition: box-shadow var(--dur-base), transform var(--dur-fast) var(--ease-out); } .card.clickable:hover { box-shadow: var(--shadow-md); } .card.clickable:active { transform: scale(0.995); } /* Signature: de voortgangsbalk is een meetlint — tickmarks + een inktkerf aan het uiteinde */ .progress-bar { position: relative; height: 12px; border-radius: 3px; background-color: var(--surface-sunken); background-image: repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 10%); border: 1px solid var(--border); overflow: visible; margin: var(--sp-2) 0 var(--sp-3); } .progress-bar > div { position: relative; height: 100%; min-width: 2px; border-radius: 2px 0 0 2px; background: linear-gradient(in oklch, var(--accent), oklch(from var(--accent) calc(l - 0.1) c h)); transition: width var(--dur-slow) var(--ease-out); } .progress-bar > div::after { content: ""; position: absolute; top: -3px; bottom: -3px; right: -1.5px; width: 3px; border-radius: 1px; background: var(--ink-on-accent); } .row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); } .muted { color: var(--muted); font-size: var(--step--1); } .todo-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); } .todo-row:last-child { border-bottom: none; } .todo-row .title { flex: 1; } .todo-row.done .title { text-decoration: line-through; color: var(--muted); } .todo-row.disabled { opacity: 0.55; } .todo-row.disabled .checkbox { cursor: default; } .checkbox { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); flex-shrink: 0; transition: background var(--dur-base), transform var(--dur-fast) var(--ease-out); } .checkbox.checked { background: var(--accent); border-color: var(--accent); } :root[data-vibe="princess"] .checkbox.checked { box-shadow: 0 0 0 5px oklch(85% 0.1 340 / 0.35), 0 0 10px 2px oklch(83% 0.14 85 / 0.6); } .checkbox:active { transform: scale(0.9); } .checkbox.small { width: 20px; height: 20px; } .todo-row .title[data-open-details] { cursor: pointer; } .todo-row .title[data-open-project] { cursor: pointer; } .todo-row .title[data-toggle-acties] { cursor: pointer; } .note-icon { font-size: 0.85em; } button.note-icon { border: none; background: none; padding: 0; line-height: 1; vertical-align: -1px; transition: transform var(--dur-fast) var(--ease-out); } button.note-icon:active { transform: scale(0.85); } /* Oppoppend tekstbubbeltje met de toelichting van een taak. */ .note-bubble { position: relative; margin: 6px 0 var(--sp-3) 22px; padding: 8px 12px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--step--1); color: var(--text); white-space: pre-line; animation: note-bubble-in var(--dur-base) var(--ease-out); } .note-bubble-tail { position: absolute; top: -6px; left: 14px; width: 10px; height: 10px; background: var(--surface-sunken); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } @keyframes note-bubble-in { from { opacity: 0; transform: translateY(-4px); } } .checklist-badge { margin-top: 2px; } .checklist-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); } .checklist-item:last-child { border-bottom: none; } .checklist-item span { flex: 1; } .checklist-item .done-text { text-decoration: line-through; color: var(--muted); } .badge { display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; background: var(--danger); color: var(--danger-ink); } .badge.subtle { background: var(--ink); color: var(--surface); } /* Inline actie-"bubbeltje" op het thuisscherm: klik op een huishoudtaak toont deze Robert/Car/Samen/n.v.t.-rij direct onder de taak, zonder de app te verlaten. */ .person-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } .person-btn { flex: 1; padding: 10px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; font-size: var(--step--1); transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast) var(--ease-out); } .person-btn:active { transform: scale(0.97); } .person-btn.robert:hover { border-color: var(--ink); } .person-btn.car:hover { border-color: var(--ink); } .person-btn.samen:hover { border-color: var(--accent-ink); } .skip-link { display: block; width: 100%; margin-top: 6px; padding: 4px; background: none; border: none; color: var(--muted); font-size: var(--step--1); text-decoration: underline; text-underline-offset: 2px; } .skip-link:hover { color: var(--ink); } .home-grid { display: flex; flex-direction: column; gap: var(--sp-7); } .home-block h3 { margin-bottom: var(--sp-2); } .home-block.entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); } .home-block.entry .btn { width: 100%; } .widget-placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--step--1); } .scroll-list { max-height: 340px; overflow-y: auto; } .actions-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); } .actions-header h3 { margin-bottom: 0; } .freq-filter-row { display: flex; gap: 6px; flex-wrap: wrap; } .freq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); font-size: var(--step--1); font-weight: 600; transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), transform var(--dur-fast) var(--ease-out); } .freq-chip:active { transform: scale(0.96); } .freq-chip:disabled { opacity: 0.4; cursor: default; transform: none; } .freq-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--surface-sunken); color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; } .freq-chip.active { background: var(--ink); border-color: var(--ink); color: var(--surface); } .freq-chip.active .freq-chip-count { background: var(--accent); color: var(--ink-on-accent); } /* Mobiel: de actielijsten zijn waar je voor komt, dus die staan voorop; de naar-de-tool-knoppen zijn hier een terugkerend startpunt, geen hoofdactie, en verschijnen daarom kleiner en onderaan. Desktop's expliciete grid-plaatsing (hieronder) wint sowieso van `order`, dus dit raakt de brede layout niet. */ @media (max-width: 759px) { .home-block.actions { order: 1; } .home-block.widget { order: 2; } .home-block.entry { order: 3; padding: var(--sp-3); box-shadow: none; } .home-block.entry h3 { font-size: var(--step-0); margin-bottom: 2px; } .home-block.entry p { display: none; } .home-block.entry .btn { padding: 8px 14px; font-size: var(--step--1); background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); box-shadow: none; } } /* Score-vergelijking (part-to-whole, twee reeksen): rechtstreeks gelabeld, dus bewust geen aparte legenda nodig. */ .score-bar-labels { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: 6px; font-weight: 600; font-size: var(--step--1); } .score-bar-labels .robert { color: var(--ink); } .score-bar-labels .car { color: var(--accent-ink); } .score-bar-track { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border); } .score-bar-seg { height: 100%; transition: width var(--dur-slow) var(--ease-out); } .score-bar-seg.robert { background: var(--ink); } .score-bar-seg.car { background: var(--accent); } .score-bar-seg.car:not(:first-child) { border-left: 2px solid var(--surface); } .score-bar-total { text-align: center; margin-top: var(--sp-2); } @media (min-width: 760px) { #app { max-width: 960px; } .home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); align-items: start; } .home-block.tool-a.entry { grid-column: 1; grid-row: 1; } .home-block.tool-b.entry { grid-column: 2; grid-row: 1; } .home-block.tool-a.actions { grid-column: 1; grid-row: 2; } .home-block.tool-b.actions { grid-column: 2; grid-row: 2; } .home-block.tool-a.widget { grid-column: 1; grid-row: 3; } .home-block.tool-b.widget { grid-column: 2; grid-row: 3; } } .brand-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } .brand-crest { width: 56px; height: auto; flex-shrink: 0; display: block; } .brand-crest-btn { position: relative; padding: 0; border: none; background: none; border-radius: 50%; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); } .brand-crest-btn:active { transform: scale(0.9) rotate(-8deg); } :root[data-vibe="princess"] .brand-crest-btn::after { content: "👑"; position: absolute; bottom: -2px; right: -6px; font-size: 1rem; } .brand-header h2 { margin: 0; } .topbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); } .topbar .back { background: none; border: none; font-size: 1.4rem; padding: 4px 8px 4px 0; color: var(--ink); text-decoration: none; } .topbar h2 { margin: 0; } nav.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px oklch(0% 0 0 / 0.12); } nav.bottom-nav a { flex: 1; text-align: center; padding: 10px 0 8px; text-decoration: none; color: var(--muted); font-size: var(--step--1); font-weight: 500; transition: color var(--dur-base); } nav.bottom-nav a.active { color: var(--ink); font-weight: 700; } .modal-backdrop { position: fixed; inset: 0; background: oklch(20% 0.02 258 / 0.45); display: flex; align-items: flex-end; z-index: 50; backdrop-filter: blur(2px); } .modal-sheet { background: var(--surface); border-radius: 20px 20px 0 0; padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-md); animation: sheet-in var(--dur-slow) var(--ease-out); } @keyframes sheet-in { from { transform: translateY(16px); opacity: 0; } } .pairing-screen { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: 18vh; } .pairing-screen h2 { font-size: var(--step-3); } .profile-pick { display: flex; gap: var(--sp-3); } .profile-pick button { flex: 1; padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; font-family: var(--font-display); transition: border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); } .profile-pick button.selected { border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow-sm); } .empty-state { color: var(--muted); text-align: center; padding: var(--sp-6) 0; } .error-text { color: var(--danger); font-size: var(--step--1); margin-top: 6px; } /* Kroon-toggle: vast in de hoek, in elke Drakennest-app — wisselt prinsessenmodus handmatig aan/uit, ongeacht wie er is ingelogd (zie app.js, ensureVibeToggle). */ .vibe-toggle-btn { position: fixed; top: 12px; right: 12px; z-index: 40; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.1rem; line-height: 1; opacity: 0.6; transition: opacity var(--dur-base), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base); } .vibe-toggle-btn:hover { opacity: 1; box-shadow: var(--shadow-md); } .vibe-toggle-btn:active { transform: scale(0.9); } .vibe-toggle-btn.active { opacity: 1; border-color: var(--accent); } :root[data-vibe="princess"] .modal-sheet { border-radius: 28px 28px 0 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }