/* Merktokens — zie BRANDING.md. Kleur is de uitzondering, niet de regel: accent alleen waar geklikt of gekeken moet worden. */ :root { /* Vlakken, van achter naar voren */ --bg: #F6F7FB; --panel: #EEEFF6; --panel-2: #E3E4EE; --card: #fff; --fill: #F3F4FA; --ink: #16163A; --on-ink: #fff; --muted: #7C7C99; --line: #E6E7F0; /* Oranje is de bediening. Op een oranje vlak hoort donkere tekst (5,4:1); oranje áls tekst is een tint donkerder dan het vlak, anders haalt hij de leesbaarheidsnorm niet. */ --accent: #EA580C; --accent-600: #C2410C; --accent-50: #FFF1E9; --accent-text: #C2410C; --on-accent: #1A1005; /* Het merk volgt het actieve project; zonder project is het oranje. --brand-ink is het vinkje erin: wit op oranje, donker op een lichte projectkleur — anders verdwijnt het merk in zijn eigen vlak. */ --brand: var(--accent); --brand-ink: #fff; /* Tekst op een lichte projectkleur — die kleuren zijn te licht voor wit. */ --on-color: #10131A; --danger: #DC2626; --warn-bg: #FDF3E3; --danger-bg: #FDF2F2; --ok: #15803D; --ok-bg: #EFF7EF; --warn: #B45309; --info: #1D4ED8; --info-bg: #EEF6FF; --claude: #B45309; --claude-bg: #FEF3E2; --claude-line: #F3DCB8; /* radius vertelt de rol: pil = primaire actie, card = drijvend vlak, ctrl = alledaagse besturing */ --r-pill: 999px; --r-card: 14px; --r-ctrl: 9px; --shadow: 0 8px 30px rgba(22,22,58,.10); --shadow-card: 0 1px 2px rgba(22,22,58,.07); --shadow-menu: 0 10px 34px rgba(22,22,58,.16); --shadow-dlg: 0 20px 60px rgba(22,22,58,.25); --toon-shadow: rgba(22,22,58,.85); --scrim: rgba(22,22,58,.35); --scrim-strong: rgba(16,16,40,.6); /* het vergrootglas in het zoekveld zit in een data-URI en kan geen variabele lezen — vandaar één keer licht en één keer donker */ --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7C99' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); } /* ── Donker: zwart met oranje ────────────────────────────────── Zelfde tokens, andere waarden. Alles wat hieronder in het blad staat rekent met de tokens, dus het thema is één omschakeling. */ :root[data-theme="dark"] { --bg: #0B0C10; --panel: #15171D; --panel-2: #1E212A; --card: #1B1E26; --fill: #22262F; --ink: #F4F5F7; --on-ink: #0B0C10; --muted: #98A0AE; --line: #2A2F3A; --accent: #EA580C; --accent-600: #F97316; --accent-50: #2E1608; --accent-text: #FB923C; --on-accent: #140A02; --on-color: #10131A; --danger: #F87171; --warn-bg: #2A1F08; --danger-bg: #2B1516; --ok: #4ADE80; --ok-bg: #12251A; --warn: #FBBF24; --info: #93C5FD; --info-bg: #13223B; --claude: #FBBF24; --claude-bg: #2A1D09; --claude-line: #4A3413; --shadow: 0 12px 34px rgba(0,0,0,.6); --shadow-card: 0 1px 2px rgba(0,0,0,.5); --shadow-menu: 0 14px 38px rgba(0,0,0,.65); --shadow-dlg: 0 24px 64px rgba(0,0,0,.7); --toon-shadow: rgba(0,0,0,.8); --scrim: rgba(0,0,0,.62); --scrim-strong: rgba(0,0,0,.72); --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A0AE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); color-scheme: dark; } * { box-sizing: border-box; margin: 0; } body { font: 15px/1.5 -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; background: var(--card); } header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; flex-wrap: nowrap; } header h1 { font-size: 1.05rem; margin-inline-end: 4px; flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26vw; } header h1 span { color: var(--accent-text); } /* On phones, hide the title so the whole top bar fits on one line. */ /* Mobile top bar: title hidden; the project selector moves into that leading space instead of being left empty, +Task and avatar stay right. */ @media (max-width: 560px) { header h1 { display: none; } /* Met het vergrootglas erbij is de balk krap: iets minder lucht, dan past alles nog steeds op één regel zonder te schuiven. */ header { gap: 8px; padding: 12px 12px; } .viewwrap { order: -1; } .viewbtn { max-width: 40vw; } /* button sits left now — align the panel to its left edge so it stays on screen */ .viewwrap .menu.viewpanel { inset-inline-start: 0; inset-inline-end: auto; max-width: calc(100vw - 26px); } } /* ── Zoeken in de kopbalk ────────────────────────────────────── Op een breed scherm staat het zoekveld gewoon open; op een smal scherm zou dat de halve balk opeten, dus daar staat een vergrootglas dat het veld over de balk heen uitklapt. Eén zoekopdracht, twee vormen. */ .searchwrap { display: inline-flex; align-items: center; flex: 0 1 240px; min-width: 0; } .searchwrap input.search { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 6px 10px 6px 30px; font-size: .82rem; background: var(--card) no-repeat; background-image: var(--search-icon); background-size: 15px; background-position: left 9px center; } [dir="rtl"] .searchwrap input.search { padding: 6px 30px 6px 10px; background-position: right 9px center; } .searchwrap input.search:focus { outline: none; border-color: var(--accent); } .searchbtn { display: none; } /* .menu staat verderop in dit blad en wint anders op volgorde — vandaar de dubbele klasse */ .menu.searchpanel { min-width: 340px; max-width: calc(100vw - 20px); } .searchpanel .results { max-height: 60vh; } @media (max-width: 700px) { .searchwrap { flex: 0 0 auto; } .searchbtn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; font-size: 1rem; line-height: 1; } .searchwrap input.search { display: none; } /* uitgeklapt: het veld legt zich over de balk, breed genoeg om te typen */ .searchwrap.open { position: static; } .searchwrap.open input.search { display: block; position: absolute; inset-inline: 12px; top: 9px; width: auto; z-index: 41; box-shadow: var(--shadow); } .searchwrap.open .searchbtn { display: none; } .menu.searchpanel { inset-inline-start: auto; inset-inline-end: 0; min-width: 0; width: calc(100vw - 24px); } } .chip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 12px; font-size: .82rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .chip .dot { width: 9px; height: 9px; border-radius: 50%; } .chip.on { color: var(--ink); border-color: currentColor; background: var(--card); } .hbtn { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r-ctrl); padding: 5px 12px; font-size: .82rem; font-weight: 600; color: var(--ink); flex-shrink: 0; transition: background .12s ease, border-color .12s ease; } .hbtn:hover { border-color: var(--accent); color: var(--accent-text); } /* de primaire actie is de enige pil op het scherm */ .hbtn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 6px 18px; font-weight: 700; } /* de plus in de kopregel: rond, en breed genoeg voor een duim */ #newTaskBtn { padding: 4px 13px; font-size: 1.15rem; line-height: 1.25; } .hbtn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--on-accent); } input:focus-visible, textarea:focus-visible, select:focus-visible, .hbtn:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .avatar { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); cursor: pointer; display: block; flex-shrink: 0; } .sp { flex: 1 1 0; min-width: 0; } /* header view button (holds the search + selectors dropdown) */ .viewbtn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; max-width: 46vw; } .viewbtn #viewLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vdot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .menu.viewpanel { min-width: 300px; padding: 12px; } .viewhead { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; padding: 2px 4px 10px; } .viewhead .vdot2 { width: 10px; height: 10px; border-radius: 50%; flex: none; } .viewpanel input.search { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .85rem; } .viewpanel .selrow { display: flex; gap: 8px; margin-top: 10px; } .viewpanel .selcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .viewpanel .selcol label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .viewpanel select { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 7px; font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--card); } .viewpanel .owneractions { display: flex; gap: 8px; margin-top: 10px; } .viewpanel .owneractions .hbtn { flex: 1; } .viewpanel .viewfoot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .viewpanel .viewfoot .hbtn { width: 100%; } /* tab strip inside the view panel */ .viewtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; } .viewtab { flex: 1; border: 1.5px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 4px; font-size: .78rem; font-weight: 600; color: var(--muted); text-align: center; } /* specifiek genoeg om van de hover-regels in .menu te winnen — anders valt de tekst van de actieve tab weg tegen zijn eigen achtergrond */ .viewtabs .viewtab.on, .viewtabs .viewtab.on:hover, .viewtabs .viewtab.on:focus { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; border: none; background: none; border-radius: 7px; padding: 7px 8px; font-size: .85rem; color: var(--ink); } .opt:hover { background: var(--fill); } .opt.on { color: var(--accent-text); font-weight: 600; } /* horizontally swipeable sections; each snaps left-aligned */ .viewsections { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -12px; } .viewsections::-webkit-scrollbar { display: none; } .viewsection { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; max-height: 42vh; overflow-y: auto; padding: 0 12px; box-sizing: border-box; } .results { margin-top: 10px; max-height: 40vh; overflow-y: auto; } .results .rlabel { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 2px 2px; } .results button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; border: none; background: none; border-radius: 7px; padding: 7px 8px; font-size: .84rem; color: var(--ink); } .results button:hover { background: var(--fill); } .results .rmeta { color: var(--muted); font-size: .74rem; margin-inline-start: auto; white-space: nowrap; } .results .empty { color: var(--muted); font-size: .82rem; padding: 8px 2px; } /* context bar + dropdown menus (Option B layout) */ .contextbar { display: flex; gap: 8px; align-items: center; padding: 8px 18px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 55px; z-index: 4; } .ddl { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); background: var(--card); border-radius: 8px; padding: 5px 11px; font-size: .82rem; font-weight: 600; color: var(--ink); max-width: 60vw; } .ddl > span:not(.dot):not(.caret) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddl .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; } .ddl .caret { color: var(--muted); font-size: .6rem; flex: none; } .menuwrap { position: relative; display: inline-flex; } .menu { position: absolute; top: calc(100% + 5px); inset-inline-start: 0; min-width: 210px; max-width: calc(100vw - 16px); max-height: 64vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-menu); padding: 5px; z-index: 40; } .menu.right { inset-inline-start: auto; inset-inline-end: 0; } .menu button, .menu a { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: none; background: none; border-radius: 7px; padding: 8px 10px; font-size: .85rem; font-weight: 500; color: var(--ink); text-decoration: none; } .menu button:hover, .menu a:hover { background: var(--fill); } .menu button.on { color: var(--accent-text); } .menu .sep { height: 1px; background: var(--line); margin: 5px 4px; } .menu .mlabel { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px 3px; } .fchip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 600; color: var(--muted); } .fchip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); } .board { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 12px; padding: 14px 18px; overflow-x: auto; min-height: calc(100vh - 104px); align-items: start; } .col { background: var(--panel); border-radius: 12px; padding: 8px; min-height: 120px; } .col h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 4px 8px 8px; display: flex; justify-content: space-between; } .col.dragover { outline: 2px dashed var(--accent); outline-offset: -4px; } .col .add { width: 100%; border: none; background: none; color: var(--muted); text-align: start; padding: 6px 8px; border-radius: 8px; font-size: .85rem; } .col .add:hover { background: var(--panel-2); color: var(--ink); } /* Het archief onder de Done-kolom: een stippellijn eromheen zegt "hier ligt nog iets, maar het is opgeruimd" — een volle knop zou om aandacht vragen die afgeronde kaarten niet verdienen. */ .col .archbtn { width: 100%; border: 1.5px dashed var(--line); background: none; color: var(--muted); text-align: center; padding: 6px 8px; border-radius: 8px; font-size: .8rem; font-weight: 600; margin-bottom: 7px; } .col .archbtn:hover { border-color: var(--accent); color: var(--accent-text); } /* Elke kaart draagt de kleur van zijn project: als rand én als gloed eromheen. Zonder project blijft --pcol doorzichtig en valt de gloed vanzelf weg. */ .task { --pcol: transparent; background: var(--card); border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--pcol) 32%, transparent), 0 3px 16px color-mix(in srgb, var(--pcol) 20%, transparent); cursor: grab; border-inline-start: 3px solid transparent; } .task:hover { box-shadow: var(--shadow-card), 0 0 0 1.5px color-mix(in srgb, var(--pcol) 48%, transparent), 0 4px 22px color-mix(in srgb, var(--pcol) 30%, transparent); } .task:active { cursor: grabbing; } .task.dragging { opacity: .45; } .task .t { font-size: .9rem; font-weight: 500; } .task .m { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; } .task .m:empty { display: none; } .badge { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--accent-50); color: var(--accent-text); } .badge.claude { background: var(--claude-bg); color: var(--claude); } .badge.wait { background: var(--danger-bg); color: var(--danger); font-weight: 600; } .badge.proj { color: var(--on-color); } .badge.due { background: var(--info-bg); color: var(--info); } .badge.due.over { background: var(--danger-bg); color: var(--danger); } .badge.check { background: var(--ok-bg); color: var(--ok); } .badge.prop { background: var(--claude-bg); color: var(--claude); } .task.proposal { border-style: dashed; border-width: 1.5px; border-color: var(--claude); border-inline-start-width: 3px; } .done .t { text-decoration: line-through; color: var(--muted); } dialog { border: none; border-radius: 14px; padding: 0; width: min(560px, 92vw); box-shadow: var(--shadow-dlg); background: var(--card); color: var(--ink); position: relative; } dialog::backdrop { background: var(--scrim); } /* Het inlogvenster kwam linksboven te staan in plaats van in het midden: de automatische marge waarmee een venster zichzelf centreert werd hier op nul gezet. Voor dit ene venster dus met de hand, want het is het eerste wat een bezoeker ziet. */ #loginDlg { margin: auto; } /* Het kruisje rechtsboven. Het staat búiten `.dlg` — dus buiten het vak dat scrolt — en blijft daardoor staan hoe ver je ook naar beneden bent. Tot 01-08-2026 zat de enige sluitknop ónder de inhoud: bij een lange lijst open uitnodigingen moest je eerst naar beneden om weg te kunnen. */ .dlg-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 5; width: 30px; height: 30px; padding: 0; line-height: 1; font-size: .8rem; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; } .dlg-x:hover { background: var(--fill); color: var(--ink); } .dlg-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Ruimte vrijhouden, anders loopt een lange kop onder het kruisje door. */ .dlg > h2:first-child, .dlg > h3:first-child, .dlg > .tdoc-head { padding-inline-end: 34px; } /* Een geopende kaart mag nooit zijwaarts schuiven: als je moet slepen om bij Bewaren te komen, is de knop er in de praktijk niet. Vandaar drie regels: alles breekt af (ook een sleutel of URL zonder spaties), flex-kinderen mogen krimpen onder hun inhoud (`min-width: 0` — zonder dat weigert een flexvak smaller te worden dan zijn langste woord), en verticaal scrollen mag, horizontaal niet. */ .dlg { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-height: 84vh; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; } .dlg > *, .dlg .row > *, .dlg .actions > * { min-width: 0; } .dlg h3 { font-size: 1rem; } .dlg label { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 4px; } .dlg input[type=text], .dlg input[type=password], .dlg input[type=date], .dlg textarea, .dlg select { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); } .dlg textarea { resize: vertical; min-height: 70px; } .row { display: flex; gap: 10px; } .row > * { flex: 1; } /* De knoppenrij mag over meerdere regels vallen; liever twee regels dan een knop die buiten de kaart valt. `.right` houdt zijn groep bij elkaar en blijft rechts staan, ook als hij op een eigen regel terechtkomt. */ .dlg .actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 4px; } .dlg .actions .right { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; justify-content: flex-end; } /* Op een telefoon is naast elkaar geen optie meer: twee velden naast elkaar worden allebei te smal om in te typen, en drie knoppen op één regel passen niet. Alles onder elkaar, knoppen over de volle breedte zodat ze met een duim te raken zijn. */ @media (max-width: 560px) { .dlg .row { flex-direction: column; gap: 12px; } /* Volgorde blijft die van het scherm: eerst het uitzonderlijke (verwijderen), onderaan de gewone afsluiting — Bewaren zit zo het dichtst bij je duim. */ .dlg .actions { flex-direction: column; align-items: stretch; } .dlg .actions .right { flex-direction: column; align-items: stretch; margin-inline-start: 0; } .dlg .actions .hbtn, .dlg .actions .tbtn { width: 100%; text-align: center; } } /* ── De kaart als document ───────────────────────────────────── Een taak is een titel, wat context en je tekst. Titel en notities zijn daarom randloze velden die pas bij aanwijzen laten zien dat je erin kunt typen; de rest van de kaart is één rij chips. Zo leest een kaart als een document en niet als een formulier met acht vragen. */ .tdoc-head { display: flex; align-items: flex-start; gap: 8px; } .tdoc-title { flex: 1; width: 100%; border: 1.5px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.3; resize: none; overflow: hidden; padding: 4px 6px; border-radius: 8px; } .tdoc-notes { width: 100%; border: 1.5px solid transparent; background: none; color: var(--ink); font: inherit; line-height: 1.55; resize: none; overflow: hidden; padding: 6px; border-radius: 8px; min-height: 44px; } .tdoc-title:hover, .tdoc-notes:hover { background: var(--fill); } .tdoc-title:focus, .tdoc-notes:focus { outline: none; background: var(--fill); border-color: var(--line); } /* Chips zijn gewone in een pilvorm. Bewust native: op een telefoon krijg je zo de eigen keuzewiel en datumkiezer van het toestel, toetsenbord en schermlezer werken vanzelf, en een eigen menu zou áchter de dialoog vallen (zie de opmerking bij tipEl). */ .chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .chip-f { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 1.5px solid transparent; background: var(--fill); border-radius: 999px; padding: 2px 8px; } .chip-f:hover { border-color: var(--line); } .chip-f:focus-within { border-color: var(--accent); } /* De uitleg blijft in de keuzelijst staan ("Claude Code — volledige toegang tot de computer"); alleen de chip zelf kort af. Zo hou je een leesbare keuze zonder dat de rij dichtslibt. */ .chip-f > select, .chip-f > input { width: auto; max-width: min(38vw, 190px); border: none; background: none; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; padding: 3px 0; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; } .chip-f > select:focus, .chip-f > input:focus { outline: none; } .chip-f.ai > select { color: var(--accent-text); } .chipdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* Dezelfde plus als in de kopregel: oranje vlak met donkere tekst (--on-accent, want wit op oranje haalt de contrastnorm niet). Eén teken, één betekenis — "hier komt er iets bij" — dus ook één uiterlijk. */ .chipadd { border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: 999px; width: 27px; height: 27px; font-size: .95rem; font-weight: 700; line-height: 1; flex: 0 0 auto; transition: background .12s ease, border-color .12s ease; } .chipadd:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--on-accent); } /* Onderbalk: links wat er met je wijziging gebeurde, rechts de enige actie. */ .tdoc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 11px; } .savestate { flex: 1; font-size: .75rem; color: var(--muted); min-width: 120px; } .savestate button { border: none; background: none; color: var(--accent-text); font-size: .75rem; font-weight: 600; padding: 0 2px; } .tsec { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; } @media (max-width: 560px) { .chip-f > select, .chip-f > input { max-width: 60vw; } .tdoc-foot .hbtn { width: 100%; text-align: center; } } .link { background: none; border: none; color: var(--danger); font-size: .82rem; padding: 0; } .comments { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .comment { background: var(--fill); border-radius: 8px; padding: 7px 10px; font-size: .85rem; white-space: pre-wrap; } .comment b { font-size: .75rem; color: var(--accent-text); display: block; white-space: normal; } .comment.claude b { color: var(--claude); } .comment .when { float: right; font-size: .7rem; color: var(--muted); } .cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .cl-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); } .cl-item .txt { flex: 1; font-size: .88rem; } .cl-item.done .txt { text-decoration: line-through; color: var(--muted); } .cl-item .mini { border: none; background: none; color: var(--muted); font-size: .75rem; padding: 2px 5px; border-radius: 5px; } .cl-item .mini:hover { background: var(--accent-50); color: var(--accent-text); } .prop-banner { background: var(--claude-bg); border: 1.5px dashed var(--claude); border-radius: 10px; padding: 10px 12px; font-size: .85rem; } /* Wacht op een bestemming: oranje in plaats van het AI-paars. Dit is geen voorstel van de AI om te beoordelen maar een vraag aan jou die openstaat zolang je hem laat staan. */ .prop-banner.pending { background: var(--accent-50); border-color: var(--accent); border-style: solid; } .prop-banner.pending b { color: var(--accent-text); } .badge.pending { background: var(--accent-50); color: var(--accent-text); } .prop-banner b { color: var(--claude); } .prop-banner .opts { margin: 8px 0; display: flex; flex-direction: column; gap: 5px; } /* Wikkelen, niet uitpuilen. Op 375px passen twee knoppen met een leesbaar opschrift niet naast elkaar; zonder deze regel duwen ze de kaart zijwaarts open, en horizontaal schuiven is precies wat een geopende kaart nooit mag. */ .prop-banner .pbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .prop-banner .pbtns > * { min-width: 0; } @media (max-width: 560px) { .prop-banner .pbtns { flex-direction: column; align-items: stretch; } .prop-banner .pbtns .hbtn { width: 100%; text-align: center; } } .proj-list { display: flex; flex-direction: column; gap: 10px; } .proj-row { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; } .proj-row .head { display: flex; align-items: center; gap: 8px; } .proj-row .head b { flex: 1; } .proj-row .small { font-size: .78rem; color: var(--muted); margin-top: 4px; } .invite-box { font-size: .78rem; background: var(--fill); border-radius: 8px; padding: 6px 9px; margin-top: 6px; word-break: break-all; } .members { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .members img { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; } .cl-item select { width: auto; max-width: 120px; font-size: .75rem; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); } .file-item { border: 1.5px solid var(--line); border-radius: 10px; margin-top: 6px; } .file-item summary { cursor: pointer; padding: 8px 10px; font-size: .85rem; display: flex; align-items: center; gap: 8px; } .file-item summary .meta { color: var(--muted); font-size: .75rem; flex: 1; } .file-item pre { margin: 0 10px 10px; padding: 10px; background: var(--fill); border-radius: 8px; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; } /* ── Werkbalk onderin terwijl de AI werkt ───────────────────── */ /* Onderin, gecentreerd, boven de kolomnavigatie op mobiel. De balk laat zien dát er iets gebeurt en waaraan; de melding erboven zegt dat het klaar is. */ #aiBar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; pointer-events: none; } #aiBar:empty { display: none; } .aijob, .aitoast { pointer-events: auto; width: min(460px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .aijob { padding: 9px 13px; } .aijob .top { display: flex; align-items: center; gap: 8px; font-size: .84rem; } .aijob .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aijob .pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; } .aijob .sub { font-size: .74rem; color: var(--muted); margin-top: 3px; } /* Meelezen met de AI. Er is bewust geen scrollbalk: het venster schuift mee met de laatste regels, zoals een terminal. Twee regels is genoeg om te zien dát er iets gebeurt zonder dat de balk het scherm opeet. */ .aijob .live { font-size: .74rem; color: var(--ink); margin-top: 5px; max-height: 2.6em; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column-reverse; } .aijob.done .live, .aijob.fail .live { display: none; } .aijob .spin { display: inline-block; animation: aispin 1.1s linear infinite; } .aijob.done .spin, .aijob.fail .spin { animation: none; } @keyframes aispin { to { transform: rotate(360deg); } } .aijob .track { height: 4px; border-radius: 999px; background: var(--line); margin-top: 7px; overflow: hidden; } .aijob .fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .45s ease; } .aijob.done .fill { background: var(--ok); } .aijob.fail .fill { background: var(--danger); } .aitoast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: .84rem; } .aitoast .ic { color: var(--ok); } .aitoast.fail .ic { color: var(--danger); } .aitoast .txt { flex: 1; min-width: 0; } .aitoast .txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitoast .note { font-size: .74rem; color: var(--muted); } .aitoast .x { border: none; background: none; color: var(--muted); font-size: .8rem; padding: 2px 4px; } /* de kolomnavigatie op mobiel schuift omhoog zodra er iets draait */ body.has-aijobs #boardNav { bottom: 104px; } /* Het antwoordveld van de brainstorm: altijd vier regels hoog, hoe breed het scherm ook is. Niet meegroeien met wat je typt — dan springt de knop eronder weg terwijl je bezig bent. */ /* dubbele klasse, want `.dlg textarea` verderop zet een eigen min-height */ .dlg textarea.bninput { width: 100%; resize: vertical; min-height: 0; line-height: 1.5; } .chat-channels { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .chat-channels .fchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chat-msgs { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--bg); } .chat-msg { max-width: 88%; } .chat-msg .who { font-size: .72rem; font-weight: 700; color: var(--accent-text); } .chat-msg .who .when { font-weight: 400; color: var(--muted); margin-inline-start: 6px; } .chat-msg .bubble { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; font-size: .9rem; white-space: pre-wrap; word-break: break-word; } .chat-msg.mine { align-self: flex-end; } .chat-msg.mine .bubble { background: var(--accent-50); } .chat-msg.claude .who { color: var(--claude); } .chat-msg.claude .bubble { background: var(--claude-bg); border-color: var(--claude-line); } .mention { color: var(--accent-text); font-weight: 700; background: var(--accent-50); border-radius: 5px; padding: 0 3px; } .mention.claude { color: var(--claude); background: var(--claude-bg); } .vault-item { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; } .vault-item .vhead { display: flex; align-items: center; gap: 8px; } .vault-item .vhead b { flex: 1; } .vault-item .vrow { display: flex; gap: 8px; align-items: center; font-size: .85rem; margin-top: 4px; } .vault-item .vrow .k { color: var(--muted); font-size: .72rem; text-transform: uppercase; width: 76px; flex-shrink: 0; } .vault-item .vrow code { background: var(--fill); border-radius: 6px; padding: 2px 8px; word-break: break-all; } .vault-timer { font-size: .75rem; color: var(--muted); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .stat { background: var(--fill); border-radius: 10px; padding: 10px 12px; text-align: center; } .stat b { font-size: 1.25rem; display: block; } .stat span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } table.mini { width: 100%; border-collapse: collapse; font-size: .82rem; } table.mini th { text-align: start; color: var(--muted); font-size: .7rem; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--line); } table.mini td { padding: 5px 6px; border-bottom: 1px solid var(--line); } .tokenbox { font-family: ui-monospace, monospace; font-size: .78rem; background: var(--fill); border-radius: 8px; padding: 8px 10px; word-break: break-all; } .note { font-size: .78rem; color: var(--muted); } .ok { color: var(--ok); font-weight: 700; font-size: .8rem; } /* ── De voordeur ──────────────────────────────────────────────── #login was een smalle kaart in het midden; sinds 01-08-2026 is het de héle pagina, met de landingssectie boven en de inlogkaart eronder. Wie al is ingelogd ziet dit nooit — showLogin()/enterApp() schakelen nog steeds op precies dit ene element. */ #login { display: block; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; text-align: start; } .loginbox { max-width: 400px; margin: 0 auto 48px; background: var(--card); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; text-align: center; scroll-margin-top: 24px; } .loginbox h2 span { color: var(--accent-text); } #gbtn { display: flex; justify-content: center; } .loginbox details { text-align: start; } .loginbox summary { font-size: .78rem; color: var(--muted); cursor: pointer; } .loginbox input { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; margin-top: 8px; } .loginbox .tbtn { background: var(--ink); color: var(--on-ink); border: none; border-radius: 8px; padding: 9px; font-weight: 700; width: 100%; margin-top: 8px; } #driveGate, #countryGate { max-width: 420px; margin: 16vh auto; background: var(--card); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; text-align: center; } #driveGate h2 span, #countryGate h2 span { color: var(--accent-text); } #driveGate .tbtn, #countryGate .tbtn { background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; padding: 11px; font-weight: 700; width: 100%; } #driveGate .tbtn:disabled, #countryGate .tbtn:disabled { opacity: .6; } #countryGate select { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; background: var(--card); color: var(--ink); } .err { color: var(--danger); font-size: .85rem; } .hidden { display: none !important; } /* ── Installatie in stappen ─────────────────────────────────── */ #setup { max-width: 430px; margin: 10vh auto; background: var(--card); border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow); } #setup h2 { font-size: 1.1rem; text-align: center; margin-bottom: 4px; } #setup p.sub { font-size: .85rem; color: var(--muted); text-align: center; line-height: 1.5; margin-bottom: 16px; } #setup label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin: 10px 0 4px; } #setup input, #setup select { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; } #setup .steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; } #setup .steps i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } #setup .steps i.on { background: var(--accent); width: 20px; border-radius: 999px; } #setup .steps i.ok { background: var(--ok); } #setup .btns { display: flex; gap: 8px; margin-top: 18px; } #setup .btns .hbtn { flex: 1; } #setup .ok { display: flex; align-items: center; gap: 8px; font-size: .85rem; background: var(--ok-bg); color: var(--ok); border-radius: 9px; padding: 9px 11px; } #setup .note { font-size: .78rem; color: var(--muted); } /* het kaartje op het bord voor wie stappen oversloeg */ .setupcard { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; margin: 0 18px 10px; } .setupcard .h { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; } .setupcard .h .x { margin-inline-start: auto; border: none; background: none; color: var(--muted); } .setupcard button.row2 { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; border: none; background: none; color: var(--ink); font-size: .84rem; padding: 6px 4px; border-radius: 7px; } .setupcard button.row2:hover { background: var(--fill); } .setupcard .dot { color: var(--accent); } /* ── Links in free text + hover preview ─────────────────────── */ a.ext { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent); word-break: break-word; } a.ext:hover { border-bottom-color: var(--accent-text); } .comment a.ext, .bubble a.ext { font-weight: 600; } .bubble a.ext { color: inherit; border-bottom-color: currentColor; opacity: .95; } #notesLinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #notesLinks:empty { display: none; } #notesLinks a { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .75rem; color: var(--ink); text-decoration: none; } #notesLinks a:hover { border-color: var(--accent); color: var(--accent-text); } #notesLinks a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #linkPreview { position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-menu); overflow: hidden; font-size: .82rem; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; } #linkPreview.show { opacity: 1; transform: translateY(0); } #linkPreview .lp-img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--bg); border-bottom: 1px solid var(--line); } #linkPreview .lp-body { padding: 9px 11px 11px; } #linkPreview .lp-site { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; margin-bottom: 3px; } #linkPreview .lp-site img { width: 13px; height: 13px; border-radius: 3px; } #linkPreview .lp-title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #linkPreview .lp-desc { color: var(--muted); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #linkPreview .lp-load { padding: 11px; color: var(--muted); } #linkPreview.file .lp-img { height: auto; max-height: 260px; object-fit: contain; padding: 6px; background: var(--card); } /* ── Drive file rows: hover thumbnail, click = full viewer ───── */ .file-item.drive { cursor: pointer; } .file-item.drive:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } #fileViewer::backdrop { background: var(--scrim); } #fileViewer { border: none; border-radius: 14px; padding: 0; width: min(940px, 94vw); max-width: 94vw; background: var(--card); color: var(--ink); } #fileViewer .fv-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .9rem; } #fileViewer .fv-head b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #fileViewer iframe { display: block; width: 100%; height: min(78vh, 720px); border: 0; } /* ── De landingssectie ────────────────────────────────────────── Drie kolommen: de hoofdstukken links, het bord in het midden (70% van de breedte), en rechts in woorden wat er op dat moment gebeurt. Het middenvak draagt zijn eigen lichte tokens — de film is een verlicht scherm, ook als de rest van de app op donker staat. Dat is de enige plek waar het thema niet meebeweegt met de voorkeur van de gebruiker. */ #landing { max-width: 1440px; margin: 0 auto; padding: 28px 20px 20px; } .lp-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 22px; } .lp-top .brandmark.big { margin: 0; } .lp-kop { font-size: 30px; line-height: 1.12; font-weight: 800; margin: 0; text-wrap: balance; } .lp-sub { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 60ch; } /* Alleen voor voorleessoftware: het woord "Taal" naast het wereldbolletje. Wegstoppen met display:none zou het óók voor de voorlezer wegnemen. */ .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lp-taal { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px 4px 12px; background: var(--panel); cursor: pointer; } .lp-taal select { border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 2px 2px 0; } .lp-taal:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .lp-film { display: grid; grid-template-columns: 13fr 70fr 17fr; gap: 18px; align-items: start; } /* ── Links: de hoofdstukken ──────────────────────────────────── */ .lp-clips { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lp-clips h2 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; padding-inline-start: 10px; } .lp-clip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: none; border: 0; border-radius: var(--r-ctrl); cursor: pointer; padding: 7px 10px; font-size: 13px; line-height: 1.3; color: var(--muted); font-family: inherit; } .lp-clip:hover { background: var(--panel); color: var(--ink); } .lp-clip .nr { font-size: 10.5px; font-variant-numeric: tabular-nums; opacity: .7; min-width: 1.2em; } .lp-clip[aria-current="true"] { color: var(--ink); font-weight: 700; background: var(--panel); } /* Het streepje links markeert waar je bent. Bewust niet oranje: het oranje op dit scherm is de startknop, en twee oranjes maken van geen van beide een aanwijzing. */ .lp-clip[aria-current="true"] .nr { opacity: 1; color: var(--ink); } .lp-voortgang { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 10px; } .lp-voortgang i { display: block; height: 100%; background: var(--ink); opacity: .45; width: 0; transition: width .2s linear; } /* ── Midden: het toneel ──────────────────────────────────────── */ .lp-midden { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; } .lp-stage { /* Altijd licht, ongeacht het thema van de gebruiker. */ --bg: #F6F7FB; --panel: #EEEFF6; --panel-2: #E3E4EE; --card: #fff; --fill: #F3F4FA; --ink: #16163A; --muted: #7C7C99; --line: #E6E7F0; --accent-50: #FFF1E9; --accent-text: #C2410C; --ok: #15803D; --ok-bg: #EFF7EF; --warn: #B45309; --warn-bg: #FDF3E3; --info: #1D4ED8; --info-bg: #EEF6FF; --claude: #B45309; --claude-bg: #FEF3E2; --claude-line: #F3DCB8; position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 340px; background: var(--bg); color: var(--ink); border: 1px solid #DFE1EC; border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; } /* ── De statische voordeur ────────────────────────────────── Ligt precies over het toneel en gaat weg zodra de film soepel kan draaien. Exact dezelfde plek en maat, dus er verspringt niets bij de wissel. */ .lp-poster { position: absolute; inset: 0; z-index: 2; background: var(--bg); padding: 14px; overflow-y: auto; transition: opacity .35s ease; } .lp-poster.weg { opacity: 0; pointer-events: none; } .lp-poster.dicht { display: none; } .lp-pgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .lp-pk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); border-inline-start: 3px solid #93C5FD; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); } .lp-pk .nr { font-size: 10px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .lp-pk b { font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .lp-pk span:last-child { font-size: 10.5px; line-height: 1.35; color: var(--muted); } .lp-bord { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; } .lp-kolom { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .lp-kolom h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; } .lp-kaart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); border-inline-start: 3px solid #93C5FD; padding: 7px 9px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; box-shadow: var(--shadow-card); } .lp-kaart b { flex: 1 1 100%; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .lp-kaart.nieuw { animation: lpIn .22s cubic-bezier(.2,.8,.3,1); } /* Een kaartje op pootjes, binnen het toneel. Kleiner dan het botje op het echte bord (zie .botje), verder hetzelfde idee. */ .lp-kaart.loopt { position: relative; } .lp-ogen { display: flex; gap: 4px; flex: 1 1 100%; } .lp-ogen i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); position: relative; animation: boKnipper 2.6s infinite; } .lp-ogen i::after { content: ''; position: absolute; top: 1px; inset-inline-start: 2.5px; width: 2px; height: 2px; border-radius: 50%; background: var(--card); } .lp-poot { position: absolute; bottom: -7px; width: 2.5px; height: 8px; border-radius: 2px; background: var(--ink); transform-origin: top center; } .lp-poot.links { inset-inline-start: 34%; animation: boStap .3s ease-in-out infinite alternate; } .lp-poot.rechts { inset-inline-start: 60%; animation: boStap .3s ease-in-out infinite alternate-reverse; } .lp-vonken { position: absolute; z-index: 3; pointer-events: none; } .lp-vonken i { position: absolute; width: 5px; height: 5px; border-radius: 50%; animation: boVonk .85s cubic-bezier(.15,.7,.3,1) forwards; } .lp-kaart.pak { outline: 2px solid var(--ink); outline-offset: 1px; } @keyframes lpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .lp-chip { font-size: 9.5px; font-weight: 700; line-height: 1; border-radius: var(--r-pill); padding: 3px 7px; background: var(--fill); color: var(--muted); } .lp-chip.wie { background: var(--accent-50); color: var(--accent-text); } .lp-chip.ai { background: var(--claude-bg); color: var(--claude); } .lp-chip.klaar { background: var(--ok-bg); color: var(--ok); } .lp-chip.wacht { background: var(--warn-bg); color: var(--warn); } .lp-chip.datum { background: var(--info-bg); color: var(--info); } .lp-chip.uren { font-variant-numeric: tabular-nums; } /* De laag eroverheen: kaartvenster, AI-antwoord, agenda, telefoon. Eén plek, want er is er nooit meer dan één tegelijk te zien. */ .lp-laag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22,22,58,.28); backdrop-filter: blur(1.5px); animation: lpIn .18s ease; } .lp-laag.hidden { display: none; } .lp-venster { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-dlg); width: min(78%, 460px); max-height: 100%; overflow: hidden; display: flex; flex-direction: column; } .lp-venster header { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; } .lp-venster .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; line-height: 1.45; } .lp-regel { display: flex; align-items: center; gap: 7px; color: var(--muted); } .lp-regel .vink { width: 13px; height: 13px; border: 1.5px solid var(--line); border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 9px; } .lp-regel.af .vink { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .lp-regel.af span { text-decoration: line-through; } .lp-bubbel { border-radius: var(--r-ctrl); padding: 8px 10px; font-size: 11.5px; line-height: 1.45; } .lp-bubbel.van-jou { background: var(--fill); color: var(--ink); align-self: flex-end; max-width: 82%; } .lp-bubbel.van-ai { background: var(--claude-bg); border: 1px solid var(--claude-line); color: var(--ink); align-self: flex-start; max-width: 88%; } .lp-typt { display: inline-flex; gap: 3px; } .lp-typt i { width: 4px; height: 4px; border-radius: 50%; background: var(--claude); animation: lpTyp 1s infinite; } .lp-typt i:nth-child(2) { animation-delay: .15s; } .lp-typt i:nth-child(3) { animation-delay: .3s; } @keyframes lpTyp { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } .lp-balk { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; } .lp-balk i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .4s ease; } .lp-balk.over i { background: var(--danger, #DC2626); } .lp-rij { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; } .lp-rij b { font-variant-numeric: tabular-nums; } .lp-agenda { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .lp-dag { border: 1px solid var(--line); border-radius: 6px; min-height: 40px; padding: 3px; font-size: 9px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; } .lp-dag .stip { border-radius: 3px; background: var(--info-bg); color: var(--info); padding: 2px 3px; font-size: 8.5px; font-weight: 700; } .lp-lijn { display: flex; flex-direction: column; gap: 5px; } .lp-lijn .staaf { height: 13px; border-radius: 4px; background: var(--accent-50); border: 1px solid #F5D3BC; } .lp-telefoon { width: 148px; border: 6px solid #16163A; border-radius: 20px; background: var(--card); padding: 8px 7px; display: flex; flex-direction: column; gap: 6px; } .lp-telefoon .kop { font-size: 10px; font-weight: 700; text-align: center; } /* De enige oranje knop op dit scherm. Staat onder het bord in dezelfde kolom, niet eroverheen — anders dekt hij precies af wat hij komt aanprijzen. */ .lp-start { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-pill); padding: 12px 28px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; } .lp-start:hover { background: var(--accent-600); } .lp-onder { display: flex; flex-direction: column; align-items: center; gap: 6px; } .lp-onder .note { font-size: 12px; color: var(--muted); margin: 0; } /* ── Rechts: wat je ziet, in woorden ─────────────────────────── */ .lp-verhaal { min-width: 0; } .lp-verhaal h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; line-height: 1.25; } .lp-verhaal .tel { font-size: 10.5px; color: var(--muted); margin: 0 0 10px; font-variant-numeric: tabular-nums; } .lp-verhaal ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .lp-verhaal li { font-size: 12.5px; line-height: 1.5; color: var(--muted); opacity: .55; border-inline-start: 2px solid transparent; padding-inline-start: 9px; transition: opacity .15s ease, color .15s ease; } .lp-verhaal li.nu { color: var(--ink); opacity: 1; border-inline-start-color: var(--ink); } .lp-verhaal li.geweest { opacity: .85; } @media (max-width: 1100px) { .lp-film { grid-template-columns: 1fr; gap: 14px; } /* Het bord eerst: op een smal scherm wil je zien wát het is voordat je een lijst met namen leest. */ .lp-midden { order: -1; } /* De hoofdstukken worden een rij chips die opzij schuift. */ /* Bewust géén scroll-behavior: smooth. Waar zacht schuiven niet werkt, slikt het óók het harde zetten van de stand op en blijft de rij staan — dan volgt de markering het hoofdstuk niet meer. Springen werkt altijd. */ .lp-clips { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; } .lp-clips h2, .lp-voortgang { display: none; } .lp-clip { white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; } .lp-verhaal ol { gap: 5px; } } @media (max-width: 620px) { #landing { padding: 20px 14px 16px; } .lp-kop { font-size: 24px; } .lp-stage { aspect-ratio: 4 / 3; min-height: 300px; } .lp-bord { gap: 6px; padding: 9px; } .lp-kolom { gap: 6px; } .lp-kaart { padding: 6px 7px; } .lp-kaart b { font-size: 11px; } .lp-chip { padding: 2px 5px; font-size: 9px; } .lp-venster { width: 92%; } /* Alle tien de functies moeten hier passen zónder te schuiven: de poster staat maar even, dus wat je moet scrollen zie je nooit. De omschrijving gaat eraf — die staat een stukje lager alsnog, per hoofdstuk. */ .lp-poster { padding: 9px; } .lp-pgrid { gap: 6px; grid-template-columns: repeat(2, 1fr); } .lp-pk { padding: 6px 8px; gap: 1px; } .lp-pk b { font-size: 11.5px; } .lp-pk span:last-child { display: none; } } /* Wie beweging heeft uitgezet krijgt geen film maar een boek: elk hoofdstuk staat stil in zijn eindbeeld, en rechts staan alle regels tegelijk. Je moet dan zelf doorklikken. Er gaat niets verloren behalve het vanzelf gaan. */ @media (prefers-reduced-motion: reduce) { .lp-kaart.nieuw, .lp-laag, .lp-typt i { animation: none; } .lp-ogen i, .lp-poot { animation: none; } .lp-vonken { display: none; } .lp-verhaal li { opacity: 1; color: var(--ink); } } /* ── Aanmelden met een code per mail ──────────────────────────── Staat onder de Google-knop, met een streep ertussen. Bewust even breed als die knop (280px), zodat de twee routes gelijkwaardig ogen — de e-mailroute is geen tweede keus maar een andere deur. */ .loginsep { display: flex; align-items: center; gap: 10px; width: min(280px, 100%); margin: 14px auto 10px; color: var(--muted); font-size: 13px; } .loginsep::before, .loginsep::after { content: ''; flex: 1; height: 1px; background: var(--line); } #mailLogin { display: flex; flex-direction: column; gap: 8px; width: min(280px, 100%); margin: 0 auto; } #mailLogin input { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 11px; background: var(--card); color: var(--ink); font: inherit; } #mailLogin input:focus { outline: none; border-color: var(--accent); } #mailLogin #mlCodeRow { display: flex; flex-direction: column; gap: 8px; } /* Zes cijfers uit elkaar: dan lees je terug wat je hebt ingetikt zonder te tellen, en zie je meteen of er eentje te veel of te weinig staat. */ #mailLogin #mlCode { text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: .35em; text-indent: .35em; font-variant-numeric: tabular-nums; } #mailLogin .note { margin: 2px 0 0; text-align: start; } #mailLogin .note.err { color: var(--danger); } /* ── De voortgangsbalk ────────────────────────────────────────── Eén regel boven het bord: wat er nu open staat, hoe ver je bent. Hij is bewust dun en stil — hij begeleidt het werk, hij is niet het werk. Zodra de ladder af is verdwijnt hij helemaal (`hidden`), dus hij kost dan ook geen hoogte meer. */ .ladderbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--card); font-size: 13px; } .lb-next { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* De naam van de stap is een knop naar de uitleg — de enige ingang voor sporten die nergens een menu-item hebben. Ziet eruit als tekst met nadruk, gedraagt zich als een knop. */ .lb-next b, .lb-step { color: var(--accent-text); font-weight: 700; } .lb-step { border: none; background: none; padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .lb-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .lb-track { flex: 0 0 120px; height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; } .lb-track i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .15s; } .lb-count { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { /* Op een telefoon is de kopbalk al vol en staat de kolomnavigatie onderin. Twee regels kostte daar 60px; met de meter weg is het er 30. Er gaat niets verloren: "5 van 45" zegt hetzelfde als het streepje, en van de twee is het getal het enige dat je op die breedte echt leest. */ .ladderbar { padding: 6px 12px; gap: 8px; } .lb-track { display: none; } } /* ── Nog op slot ──────────────────────────────────────────────── Gedimd, niet weg: zo blijft de app op elk moment herkenbaar en verspringt er niets zodra iets vrijkomt. Het menu-item wordt twee regels — de tweede zegt waaróp het wacht. */ [data-step] { position: relative; } .lk-locked { opacity: .5; cursor: default; } .lk-locked:hover { background: none; } .lk-why { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } /* Het gele uitroepteken: hier ben je. `--warn` betekent in de merkrichtlijn al "wacht op actie" — geen nieuwe kleur, en zeker geen tweede accent. Het is een knop: erop klikken legt uit wat de functie doet en wat er dichtblijft als je hem laat liggen. Vandaar ook een zichtbare focusring. */ .lk-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-inline-start: 6px; flex: 0 0 auto; padding: 0; border: none; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; vertical-align: middle; cursor: pointer; } .lk-mark:hover { background: var(--warn); color: var(--on-accent); } .lk-mark:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; } .lk-next { font-weight: 700; } /* Overgeslagen, maar er staat nog iets achter. Niet gedimd — je mag hem gewoon gebruiken — alleen gemarkeerd, want dit is de weg terug. */ .lk-parked { opacity: 1; } /* ── Urenregistratie ──────────────────────────────────────────── Eén venster voor de teller, het budget en de geboekte regels. De maten rekenen op de breekpunten die de rest van de app ook gebruikt: onder 560px valt alles onder elkaar, want twee velden naast elkaar worden op een telefoon allebei te smal om in te vullen. */ .tt-running { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-50); border: 1.5px solid var(--accent); border-radius: 12px; padding: 12px 14px; } /* Vaste breedte en cijfers van gelijke breedte: anders springt de hele regel bij elke tik van de klok. */ .tt-clock { font-size: 1.5rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 76px; } .tt-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tt-what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-running .hbtn { flex: 0 0 auto; } .tt-longrun { color: var(--danger); } .tt-start { display: flex; flex-direction: column; gap: 8px; } .tt-start .tt-go { width: 100%; } .tt-budget, .tt-team { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .tt-budget-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tt-budget-head .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .tt-budget-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; } .tt-bar { height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; margin: 8px 0 6px; } .tt-bar i { display: block; height: 100%; background: var(--ok); transition: width .3s; } .tt-bar.warn i { background: var(--accent); } .tt-bar.over i { background: var(--danger); } .tt-warn { font-size: .78rem; font-weight: 700; color: var(--accent-text); } .tt-warn.over { color: var(--danger); } .tt-listhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; } .tt-who { margin-inline-start: auto; } .tt-rows { display: flex; flex-direction: column; } .tt-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); } .tt-row.editing { display: block; } .tt-day { flex: 0 0 auto; font-size: .74rem; color: var(--muted); min-width: 62px; } .tt-dur { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; } .tt-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; } .tt-title, .tt-title .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-money { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); } .tt-row .mini { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: .8rem; padding: 2px 5px; border-radius: 5px; } .tt-row .mini:hover { background: var(--accent-50); color: var(--accent-text); } .tt-total { display: flex; gap: 8px; padding: 9px 0; font-variant-numeric: tabular-nums; } .tt-total b { flex: 1; } .tt-editbox { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 10px; } .tt-set { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; } .tt-set:first-child { border-top: none; margin-top: 0; padding-top: 0; } .tt-set .flbl .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } /* De chip op de kaart: alleen lezen, dus geen randje van een invulveld. */ .chip-t { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; border-radius: 999px; padding: 3px 10px; background: var(--fill); color: var(--muted); } .chip-t.over { background: var(--danger-bg); color: var(--danger); font-weight: 700; } @media (max-width: 560px) { /* Op een telefoon staat de klok bóven wat je aan het doen bent, en de stopknop over de volle breedte — die moet je met een duim kunnen raken. */ .tt-running { gap: 8px; } .tt-what { flex: 1 0 100%; order: 2; } .tt-running .hbtn { flex: 1 0 100%; order: 3; } .tt-day { min-width: 0; } .tt-row { flex-wrap: wrap; } .tt-title { flex: 1 0 100%; order: 3; white-space: normal; } .tt-title, .tt-title .note { white-space: normal; } } /* ── Merkteken ──────────────────────────────────────────────── */ .brandmark { flex-shrink: 0; border-radius: 7px; display: block; } .brandmark.big { width: 52px; height: 52px; border-radius: 13px; margin: 0 auto 10px; } /* ── Instellingen in stappen ────────────────────────────────── */ /* Genummerde stappen, één regel per instelling, en alle uitleg in een ⓘ — zo past het scherm op een telefoon zonder eindeloos scrollen. */ .setstep { border-top: 1px solid var(--line); padding-top: 12px; } .setstep:first-of-type { border-top: none; padding-top: 0; } .stephead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .stephead b { font-size: .92rem; font-weight: 600; } .stepnum { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .stepnum.done { background: var(--ok); color: var(--on-accent); } .stepnum.plain { background: var(--line); color: var(--muted); } .frow { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; } .frow > select, .frow > input { flex: 1; min-width: 120px; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .85rem; } .frow .flbl { flex: 0 0 132px; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 5px; } .frow .inline { display: flex; align-items: center; gap: 7px; font-size: .85rem; flex: 1; } .frow .inline input { width: 16px; height: 16px; accent-color: var(--accent); } @media (max-width: 560px) { .frow .flbl { flex: 0 0 100%; } } .advanced { margin-top: 10px; } .advanced summary { font-size: .78rem; color: var(--muted); cursor: pointer; } /* de ⓘ zelf: aanwijzen of aantikken toont de uitleg */ .tip { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: .6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; position: relative; } .tip:hover, .tip:focus { border-color: var(--accent); color: var(--accent); outline: none; } .tip .tipbox { display: none; position: absolute; bottom: 135%; inset-inline-start: -8px; width: 240px; max-width: calc(100vw - 40px); z-index: 50; background: var(--fill); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: .76rem; font-weight: 400; line-height: 1.5; color: var(--ink); text-align: start; box-shadow: var(--shadow-menu); } .tip:hover .tipbox, .tip:focus .tipbox { display: block; } /* ── Meldingen van de app ───────────────────────────────────── */ /* Midden op het scherm, oranje kader, anderhalve graad scheef en een korte veerbeweging — genoeg om te zien dat het van de app komt en niet van de browser. Goed nieuws draait naar links, een vraag naar rechts. */ /* width/margin expliciet, want de algemene dialog-regel hierboven zet een vaste breedte van 560px — dan staat het vlakje links in plaats van midden */ #popDlg { border: none; background: none; padding: 0; overflow: visible; width: max-content; max-width: calc(100vw - 24px); margin: auto; box-shadow: none; } #popDlg::backdrop { background: var(--scrim); } .popbody { width: min(340px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 2.5px solid var(--accent); border-radius: 16px; padding: 18px 18px 15px; text-align: center; box-shadow: var(--shadow-dlg), 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); transform: rotate(-1.5deg); animation: popIn .28s cubic-bezier(.2,1.4,.4,1); } @keyframes popIn { from { transform: rotate(-1.5deg) scale(.9); opacity: 0 } to { transform: rotate(-1.5deg) scale(1); opacity: 1 } } .popbody.ask { border-color: var(--accent-600); transform: rotate(1.3deg); animation-name: popInAsk; } @keyframes popInAsk { from { transform: rotate(1.3deg) scale(.9); opacity: 0 } to { transform: rotate(1.3deg) scale(1); opacity: 1 } } .popbody.oops { border-color: var(--danger); box-shadow: var(--shadow-dlg), 0 0 0 6px color-mix(in srgb, var(--danger) 10%, transparent); } .popbody .emo { font-size: 1.9rem; display: block; margin-bottom: 6px; } .popbody h4 { font-size: .98rem; font-weight: 600; margin-bottom: 5px; } .popbody p { font-size: .84rem; line-height: 1.55; color: var(--muted); white-space: pre-wrap; word-break: break-word; } .popbody .btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } .popbody .hbtn { flex: 0 1 auto; } .popbody.oops .hbtn.primary { background: var(--danger); border-color: var(--danger); } /* confetti: alleen bij echt goed nieuws, anders went het en wordt het ruis */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .confetti i { position: absolute; top: -20px; width: 7px; height: 11px; border-radius: 2px; animation: confFall 1.9s linear forwards; } @keyframes confFall { to { transform: translateY(105vh) rotate(420deg); opacity: .2 } } /* ── Leven op het bord ─────────────────────────────────────── Een kaart die de AI verplaatst loopt er zelf heen; nieuw werk bouwt zich op; wat op Klaar landt viert het. Alles hier is een laag erboven — de échte kaart staat al goed, zie js/anim.js. Onder 1100px staat het uit: daar is geen ruimte om iets te laten lopen. */ .botje { position: fixed; z-index: 9998; pointer-events: none; } .bo-kaart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); border-inline-start: 3px solid var(--accent); padding: 8px 10px 10px; box-shadow: var(--shadow-menu); animation: boWieg .34s ease-in-out infinite alternate; } .bo-t { font-size: .8rem; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bo-ogen { display: flex; gap: 6px; margin-bottom: 5px; } .bo-ogen i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); position: relative; animation: boKnipper 2.6s infinite; } /* Het witte puntje maakt van een stip een oog. Zonder dat kijkt het nergens naar en is het gewoon een bolletje. */ .bo-ogen i::after { content: ''; position: absolute; top: 1.5px; inset-inline-start: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--card); } .bo-poot { position: absolute; bottom: -9px; width: 3px; height: 10px; border-radius: 2px; background: var(--ink); transform-origin: top center; } .bo-poot.links { inset-inline-start: 32%; animation: boStap .34s ease-in-out infinite alternate; } .bo-poot.rechts { inset-inline-start: 62%; animation: boStap .34s ease-in-out infinite alternate-reverse; } @keyframes boStap { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } } @keyframes boWieg { from { transform: translateY(0); } to { transform: translateY(-3px); } } @keyframes boKnipper { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } } /* Even laten weten dat hij er is; daarna is het weer een gewone kaart. */ .task.net-aangekomen { animation: boLand .4s cubic-bezier(.2,.8,.3,1); } @keyframes boLand { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } } /* Nieuw werk bouwt zich op: eerst een streepje, dan de hele kaart. */ /* fill-mode both: tijdens de wachttijd (animation-delay, gezet vanuit js/anim.js) staat de kaart al ingeklapt in plaats van eerst compleet in beeld te springen. */ .task.bouwt { animation: boBouw .55s cubic-bezier(.2,.8,.3,1) both; transform-origin: top center; } .task.bouwt-af { animation: boGlans .7s ease; } @keyframes boBouw { 0% { transform: scaleY(.06); opacity: .2; } 45% { transform: scaleY(1.04); opacity: 1; } 100% { transform: none; } } @keyframes boGlans { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 7px transparent; } } /* Het feestje. */ .task.viert { animation: boJuich .7s cubic-bezier(.2,.8,.3,1); } @keyframes boJuich { 0% { transform: none; } 25% { transform: translateY(-7px) rotate(-2deg); } 50% { transform: translateY(0) rotate(1.5deg); } 75% { transform: translateY(-3px) rotate(-1deg); } 100% { transform: none; } } .vonken { position: fixed; z-index: 9999; pointer-events: none; } .vonken i { position: absolute; width: 6px; height: 6px; border-radius: 50%; animation: boVonk .9s cubic-bezier(.15,.7,.3,1) forwards; } @keyframes boVonk { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } } /* De high five: twee kaarten leunen naar elkaar toe, met de handen ertussen. */ .task.five-op { animation: boFiveOp .7s cubic-bezier(.2,.8,.3,1); } .task.five-neer { animation: boFiveNeer .7s cubic-bezier(.2,.8,.3,1); } @keyframes boFiveOp { 0%, 100% { transform: none; } 45% { transform: translateY(9px) rotate(2.5deg); } } @keyframes boFiveNeer { 0%, 100% { transform: none; } 45% { transform: translateY(-9px) rotate(-2.5deg); } } .high-five { position: fixed; z-index: 9999; pointer-events: none; font-size: 22px; transform: translate(-50%, -50%); animation: boKlap .7s ease forwards; } @keyframes boKlap { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } } /* Onder 1100px gebeurt er niets — js/anim.js begint er niet eens aan, dit is de vangnetregel voor het geval een scherm tijdens een beweging krimpt. */ @media (max-width: 1099px) { .botje, .vonken, .high-five { display: none; } .task.bouwt, .task.bouwt-af, .task.viert, .task.five-op, .task.five-neer, .task.net-aangekomen { animation: none; } } @media (prefers-reduced-motion: reduce) { .botje, .vonken, .high-five { display: none; } .bo-kaart, .bo-poot, .bo-ogen i { animation: none; } .task.bouwt, .task.bouwt-af, .task.viert, .task.five-op, .task.five-neer, .task.net-aangekomen { animation: none; } } /* ── Blok om te plakken, met kopieerknop ────────────────────── */ .codeblock { position: relative; margin: 8px 0; } .codeblock pre { background: var(--fill); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; padding-inline-end: 74px; font-family: ui-monospace, monospace; font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; } .codeblock .copy { position: absolute; top: 7px; inset-inline-end: 7px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 7px; padding: 3px 9px; font-size: .72rem; font-weight: 600; } .codeblock .copy:hover { border-color: var(--accent); color: var(--accent-text); } /* ── Kleurstalen bij een project ─────────────────────────────── */ .swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .swatch { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line); padding: 0; } .swatch:hover { transform: scale(1.08); } .swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── Bord op mobiel: één kolom per scherm ───────────────────── */ /* Kolommen zijn schermbreed en klikken vast bij het swipen, zodat je nooit tussen twee kolommen blijft hangen. De balk onderin zegt waar je bent en of er links of rechts nog een kolom staat. */ /* basis eerst, dan pas de media-query — anders wint deze regel alsnog */ #boardNav { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 6; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 6px; box-shadow: var(--shadow); } #boardNav button { border: 0; background: transparent; color: var(--ink); font-size: 1.15rem; line-height: 1; padding: 5px 11px; border-radius: var(--r-pill); } #boardNav button:disabled { opacity: .22; } #boardNav button:not(:disabled):active { background: var(--accent-50); } #navDots { display: flex; align-items: center; gap: 6px; padding: 0 5px; } #navDots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .15s ease; } #navDots i.on { background: var(--accent); width: 18px; border-radius: var(--r-pill); } #navLabel { font-size: .78rem; font-weight: 700; color: var(--muted); padding: 0 4px; white-space: nowrap; } @media (max-width: 900px) { /* Géén scroll-behavior: smooth hier. In combinatie met mandatory snapping wordt elke geanimeerde scroll per frame teruggesnapt naar de huidige kolom, waardoor de pijlen niets leken te doen. Vegen blijft native soepel; de pijlen springen direct. */ .board { grid-template-columns: repeat(5, calc(100vw - 36px)); scroll-snap-type: x mandatory; padding-bottom: 68px; } .col { scroll-snap-align: center; } #boardNav { display: flex; } } /* ── Rondleiding: cartoon-tekstballonnen ────────────────────── */ #tour { position: fixed; inset: 0; z-index: 9998; } #tourHole { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px var(--scrim-strong); transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease; pointer-events: none; } .toon { position: absolute; width: min(320px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; padding: 15px 17px; box-shadow: 5px 5px 0 var(--toon-shadow); animation: toonPop .18s ease-out; } @keyframes toonPop { from { transform: scale(.94); opacity: 0 } to { transform: scale(1); opacity: 1 } } .toon h4 { font-size: 1.02rem; margin-bottom: 5px; } .toon p { font-size: .87rem; line-height: 1.5; color: var(--muted); } .toon .toonfoot { display: flex; align-items: center; gap: 8px; margin-top: 13px; } .toon .step { font-size: .76rem; font-weight: 700; color: var(--muted); margin-inline-end: auto; } .toon .tbtn2 { border: 2px solid var(--ink); background: var(--card); border-radius: var(--r-pill); padding: 5px 14px; font-size: .8rem; font-weight: 700; color: var(--ink); } .toon .tbtn2.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* het staartje: twee driehoeken over elkaar, buitenste in inkt, binnenste wit */ .toon .tail, .toon .tail::after { position: absolute; width: 0; height: 0; border: 13px solid transparent; } .toon .tail::after { content: ''; } .toon.below .tail { top: -26px; border-bottom-color: var(--ink); } .toon.below .tail::after { top: -10px; left: -13px; border-bottom-color: var(--card); } .toon.above .tail { bottom: -26px; border-top-color: var(--ink); } .toon.above .tail::after { bottom: -10px; left: -13px; border-top-color: var(--card); } /* ── Rechts naar links (Arabisch) ───────────────────────────── */ /* De opmaak rekent in logische kanten (inline-start/-end), dus dir="rtl" op spiegelt de hele app vanzelf. Wat overblijft: pijlpunten wijzen de verkeerde kant op, want die tekens spiegelen niet mee. */ [dir="rtl"] #navPrev, [dir="rtl"] #navNext { transform: scaleX(-1); } /* ── Weergaven: wissel, kalender, tijdlijn ──────────────────── */ /* Alles hieronder staat op dezelfde tokens en breekpunten als het bord. Nieuwe kleuren zijn er niet: WAITING is overal een streepjesrand in --danger, een voorstel is --claude, en de projectkleur komt via --pcol. */ .vsw { display: flex; gap: 2px; background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; flex: 0 0 auto; } .vsw button { border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--r-pill); padding: 5px 10px; font-size: .82rem; line-height: 1; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .vsw button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); } .vsw.narrow { background: transparent; border: 0; padding: 0; } #boardNav, .pickbar { --nav-shadow: var(--shadow); } body:not([data-view="board"]) #boardNav { display: none; } .calendar, .timeline { padding: 14px 18px 80px; min-height: calc(100vh - 104px); } .calbar, .tlbar-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .calbar .sp, .tlbar-top .sp { flex: 1; } .calttl { font-size: 1rem; min-width: 9ch; text-align: center; } .vnotice { color: var(--warn); font-size: .78rem; cursor: help; } .vsaved { font-size: .78rem; color: var(--muted); } .vsaved .link { border: 0; background: none; color: var(--accent-text); cursor: pointer; padding: 0; font: inherit; } /* Kalender: raster links, strook rechts. Onder 900px onder elkaar. */ .calmain { display: grid; grid-template-columns: 1fr 240px; gap: 14px; align-items: start; } /* minmax(0, 1fr) en niet 1fr: de standaard-min van een kolom is zijn inhoud, dus één lange kaarttitel duwt de hele week scheef. Dezelfde val als bij de vensters hierboven — de kaart knipt zijn tekst zelf al af. */ .calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .calhead { font-size: .72rem; color: var(--muted); text-align: center; padding: 2px 0; text-transform: uppercase; } .daycell { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-height: 92px; padding: 4px; display: flex; flex-direction: column; gap: 3px; position: relative; } .daycell.out { opacity: .45; } .daycell.today { outline: 2px solid var(--accent); outline-offset: -1px; } .daycell.dragover { border-color: var(--accent); background: var(--accent-50); } .daycell.armed { border-style: dashed; border-color: var(--accent); cursor: pointer; } .dnum { font-size: .72rem; color: var(--muted); text-align: end; } .dmore, .dadd { border: 0; background: transparent; color: var(--muted); font-size: .72rem; cursor: pointer; padding: 1px; } .dadd { opacity: 0; align-self: center; font-size: 1rem; } .daycell:hover .dadd { opacity: .5; } /* Eén kaartvorm voor kalender, tijdlijn en de strook. */ .vcard { display: flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--pcol, transparent); border-radius: 6px; padding: 3px 5px; font-size: .75rem; cursor: pointer; box-shadow: 0 0 0 1px var(--pcol, transparent) inset; } .vcard .vt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .vcard .vw { color: var(--danger); font-size: .68rem; white-space: nowrap; } .vcard.wait { border: 1.5px dashed var(--danger); background: var(--danger-bg); } .vcard.proposal { border-color: var(--claude); } .vcard.picked { outline: 2px solid var(--accent); } .vcard.dragging { opacity: .45; } .vgrip { border: 0; background: transparent; color: var(--muted); cursor: grab; padding: 0 2px; font-size: .8rem; line-height: 1; flex: 0 0 auto; min-width: 18px; min-height: 18px; } .park { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .park.dragover, #parkBox.dragover { border-color: var(--accent); background: var(--accent-50); } .park label { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; } .park .cnt, .tlgroup .cnt { background: var(--fill); border-radius: var(--r-pill); padding: 0 6px; font-size: .72rem; color: var(--muted); } .parklist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .daysheet { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .daysheet label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .85rem; } .callegend { margin-top: 10px; font-size: .74rem; } /* De balk onderin zolang er een kaart is opgepakt — zelfde vorm als #boardNav. */ .pickbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; box-shadow: var(--shadow-menu); font-size: .82rem; } /* Tijdlijn: een grid over dagen, geen pixelrekenwerk. Spiegelt vanzelf in RTL. */ .tlscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } .tlinner { min-width: max-content; } .tlruler, .tlrow { display: grid; grid-template-columns: 180px 1fr; align-items: center; } .tlname { position: sticky; inset-inline-start: 0; background: var(--panel); z-index: 2; padding: 4px 8px; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .tltrack { display: grid; grid-template-columns: repeat(var(--days), var(--daypx)); min-height: 22px; align-items: center; } .tltrack.dragover { background: var(--accent-50); } .tlruler { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; background: var(--panel); } .tlday { font-size: .62rem; color: var(--muted); text-align: center; padding: 3px 0; overflow: hidden; } .tlday.today { color: var(--accent-text); font-weight: 700; } .tlday.mstart { border-inline-start: 1px solid var(--line); } .tlbar { height: 14px; border-radius: 7px; background: var(--pcol); position: relative; cursor: pointer; } .tlbar.due { background: transparent; display: flex; align-items: center; justify-content: center; } .tlbar.due .diamond { color: var(--pcol); font-size: .8rem; } .tlbar.open { mask-image: linear-gradient(to right, #000 65%, transparent); } .tlbar.over { background: var(--danger); } .tlbar.wait { background: repeating-linear-gradient(45deg, var(--pcol) 0 4px, transparent 4px 8px); border: 1px dashed var(--danger); } .tlbar .clipmark { position: absolute; inset-inline-start: -2px; top: -3px; color: var(--muted); font-size: .7rem; } .tlgroup summary { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: .8rem; font-weight: 600; cursor: pointer; border-top: 1px solid var(--line); } .gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .tlempty, .tlro { padding: 12px; } @media (max-width: 900px) { .calmain { grid-template-columns: 1fr; } .daycell { min-height: 62px; } .calendar, .timeline { padding: 12px 10px 80px; } } @media (max-width: 700px) { .vsw .vl { display: none; } } @media (max-width: 560px) { .viewbtn { max-width: 30vw; } .vsw button { padding: 4px 7px; } .daycell { min-height: 54px; padding: 2px; } .vcard { font-size: .7rem; } .tlruler, .tlrow { grid-template-columns: 120px 1fr; } } /* ── "Staat dit er misschien al?" ───────────────────────────── */ /* Verschijnt in het nieuwe-taakvenster en in het plakscherm. Geen alarm — een zachte hint met twee knoppen, want in de meeste gevallen wil je gewoon doorgaan met de nieuwe kaart. */ .simbox { background: var(--warn-bg, var(--fill)); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 4px 0; } .simhead { font-size: .76rem; color: var(--muted); margin-bottom: 5px; } .simrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .simrow .simt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; } .simrow .mini.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; } /* Weet de AI het niet, dan hoort de keuzelijst eruit te springen. Anders lees je over de vraag heen en staat het alsnog op het verkeerde bord. */ select.pickme { border-color: var(--accent); } .hintrow { margin: 6px 0; } .hintrow .row2 { display: flex; gap: 6px; align-items: center; } .hintrow .row2 input { flex: 1; min-width: 0; } .hintrow .row2 .hbtn { white-space: nowrap; } @media (max-width: 560px) { .simrow { flex-wrap: wrap; } .simrow .simt { flex: 1 0 100%; } /* Een bijlagenregel heeft geen knop achter zich, alleen de grootte. Die hoeft dus niet naar een eigen regel — en juist op de telefoon is delen de gewone route. */ .simrow.filerow .simt { flex: 1 1 auto; } } /* ── Kaarten samenvoegen ────────────────────────────────────── */ /* Het doel van een sleepbeweging licht op zodra je lang genoeg boven het midden hangt. Duidelijk anders dan .dragover op een kolom: dáár gaat het om herordenen, hier om samenvoegen. */ .task.mergetarget { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-50); transform: scale(1.02); } .task.merged { opacity: .55; } .task.merged .t { text-decoration: none; } .mergepair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .mergecard { border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 0; } .mergecard.keeps { border-color: var(--ok); } .mergecard.goes { border-color: var(--line); opacity: .75; } .mergecard .mlabel { font-size: .68rem; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .mergecard .mn { max-height: 5.4em; overflow: hidden; } @media (max-width: 560px) { .mergepair { grid-template-columns: 1fr; } }