/* ══════════════════════════════════════════════════════════════ Kerkgemak — ontwerpsysteem, overgenomen uit docs/kerkgemak-stijlgids.html. Dit bestand is de bron voor de applicatie zelf; de stijlgids blijft het naslagwerk voor de tokens en de "waarom". Wijzig een token hier én daar, of ze lopen uit elkaar. REGEL: staat er ergens in de app een letterlijke kleur of maat, dan is dat een fout. Alles verwijst naar een token hieronder. ══════════════════════════════════════════════════════════════ */ :root{ /* Basispalet — vast, geldt voor het hele platform */ --kg-navy: #16243F; --kg-navy-soft: #24375C; --kg-cream: #F8F4EA; --kg-paper: #FFFFFF; --kg-ink: #101828; --kg-ink-soft: #5A6478; --kg-line: #DDD6C6; /* Kerkkleur — het ENIGE dat per kerk verandert. Wordt door de server als inline style op gezet, zie layouts/beheer.blade.php. */ --kerk-accent: #E8A33D; --kerk-accent-dark: #B87A1C; --kerk-accent-ink: #16243F; /* Statuskleuren — vast, niet per kerk instelbaar */ --st-ok: #2E7D5B; --st-let-op: #C8791A; --st-actie: #B4342B; --st-ok-vlak: #EFF7F2; --st-ok-rand: #B9D6C7; --st-let-op-vlak: #FDF6EA; --st-let-op-rand: #EBD3AC; --st-actie-vlak: #FDF0EF; --st-actie-rand: #EEC0BC; --kg-code-vlak: #EFE9DA; --kg-navy-tekst: #C3CCDC; --font-display: 'Bricolage Grotesque', Georgia, serif; --font-body: 'Public Sans', -apple-system, system-ui, sans-serif; --tx-xs: 0.75rem; --tx-sm: 0.875rem; --tx-md: 1rem; --tx-lg: 1.25rem; --tx-xl: 1.75rem; --tx-2xl: 2.5rem; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Veldbreedtes — voor formuliervelden die smaller dan 100% moeten zijn (liednummer, jaartal, zoekveld, ...). Vervangt losse style="max-width:...px" in de Blade-views, zie .veld-* hieronder. */ --veld-w-xs: 80px; --veld-w-sm: 120px; --veld-w-md: 160px; --veld-w-lg: 200px; --veld-w-xl: 320px; --radius: 10px; --radius-sm: 6px; --shadow-block: 5px 5px 0 var(--kg-navy); --shadow-block-sm: 3px 3px 0 var(--kg-navy); --shadow-card: 0 1px 2px rgba(16,36,63,.06), 0 4px 12px rgba(16,36,63,.05); } *,*::before,*::after{box-sizing:border-box} img{max-width:100%; height:auto; display:block; border-radius:var(--radius-sm)} body{ margin:0; background:var(--kg-cream); color:var(--kg-ink); font-family:var(--font-body); font-size:var(--tx-md); line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-display); line-height:1.15; margin:0} h1{font-size:var(--tx-2xl); font-weight:800; letter-spacing:-.02em} h2{font-size:var(--tx-xl); font-weight:800; letter-spacing:-.01em} h3{font-size:var(--tx-lg); font-weight:600} p{margin:0 0 var(--sp-3)} a{color:var(--kg-navy)} code{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.85em; background:var(--kg-code-vlak); padding:1px 5px; border-radius:4px} label{font-size:var(--tx-sm); font-weight:600; display:block; margin-bottom:var(--sp-1)} input,select,textarea{ font-family:var(--font-body); font-size:var(--tx-md); color:var(--kg-ink); background:var(--kg-paper); border:1px solid var(--kg-line); border-radius:var(--radius-sm); padding:9px 12px; width:100%; } input:focus,select:focus,textarea:focus{outline:3px solid var(--kg-navy); outline-offset:1px} .veld{margin-bottom:var(--sp-4)} .veldfout{color:var(--st-actie); font-size:var(--tx-xs); margin-top:var(--sp-1)} /* ── Veldbreedtes: vervangt losse style="max-width:...px" (CLAUDE.md: "staat er een letterlijke maat in de code, dan is dat een fout"). .veld-strak haalt de standaard onderrand van .veld weg voor gebruik in een .row die de ruimte al zelf regelt. .veld-groeit-* is voor een veld dat met flex meegroeit maar niet onder zijn minimum mag komen (breekt dan naar een eigen regel op een smal scherm). ── */ .veld-xs{max-width:var(--veld-w-xs)} .veld-sm{max-width:var(--veld-w-sm)} .veld-md{max-width:var(--veld-w-md)} .veld-lg{max-width:var(--veld-w-lg)} .veld-xl{max-width:var(--veld-w-xl)} .veld-strak{margin:0} .veld-groeit-sm{flex:1; min-width:var(--veld-w-sm)} .veld-groeit-md{flex:1; min-width:var(--veld-w-md)} .veld-groeit-lg{flex:1; min-width:var(--veld-w-lg)} .veld-groeit-2x-lg{flex:2; min-width:var(--veld-w-lg)} /* ── Knoppen ── */ .btn{display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-body); font-size:var(--tx-sm); font-weight:600; padding:10px 18px; border-radius:var(--radius-sm); border:2px solid var(--kg-navy); background:var(--kerk-accent); color:var(--kerk-accent-ink); box-shadow:var(--shadow-block-sm); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; text-decoration:none} .btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--kg-navy)} .btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--kg-navy)} .btn:focus-visible{outline:3px solid var(--kg-navy); outline-offset:3px} .btn.secondary{background:var(--kg-paper)} .btn.quiet{background:transparent; border-color:transparent; box-shadow:none; color:var(--kg-navy); text-decoration:underline; text-underline-offset:3px} .btn.quiet:hover{transform:none; box-shadow:none} .btn.danger{background:var(--st-actie); color:#fff; border-color:var(--kg-navy)} .card{background:var(--kg-paper); border:1px solid var(--kg-line); border-radius:var(--radius); padding:var(--sp-4); box-shadow:var(--shadow-card)} .status{display:inline-flex; align-items:center; gap:6px; font-size:var(--tx-xs); font-weight:600; padding:3px 9px 3px 6px; border-radius:99px; border:1px solid} .status::before{content:''; width:7px; height:7px; border-radius:99px; background:currentColor} .status.ok{color:var(--st-ok); border-color:var(--st-ok-rand); background:var(--st-ok-vlak)} .status.let-op{color:var(--st-let-op); border-color:var(--st-let-op-rand); background:var(--st-let-op-vlak)} .status.actie{color:var(--st-actie); border-color:var(--st-actie-rand); background:var(--st-actie-vlak)} .row{display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; margin-top:var(--sp-4)} /* ── Tabel ── */ table{width:100%; border-collapse:collapse; margin-top:var(--sp-4); font-size:var(--tx-sm)} th,td{text-align:left; padding:var(--sp-3); border-bottom:1px solid var(--kg-line); vertical-align:top} th{font-family:var(--font-display); font-weight:600; font-size:var(--tx-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--kg-ink-soft)} tbody tr:hover{background:var(--kg-paper)} /* ── Beheer-omgeving: desktop-eerst, zijbalk (CLAUDE.md) ── */ .beheer-shell{display:flex; min-height:100vh} .beheer-zijbalk{width:240px; flex:none; background:var(--kg-navy); color:var(--kg-navy-tekst); padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-5); position:sticky; top:0; height:100vh; overflow-y:auto} .beheer-zijbalk .kerknaam{color:var(--kg-paper); font-family:var(--font-display); font-weight:600} .beheer-nav{display:flex; flex-direction:column; gap:2px} .beheer-nav a{color:var(--kg-navy-tekst); text-decoration:none; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); font-size:var(--tx-sm); font-weight:500} .beheer-nav a:hover{background:var(--kg-navy-soft)} .beheer-nav a.actief{background:var(--kg-navy-soft); color:var(--kg-paper); font-weight:700} .beheer-nav-kop{font-family:var(--font-body); font-size:var(--tx-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--kg-navy-tekst); opacity:.6; padding:var(--sp-3) var(--sp-3) 2px; margin-top:var(--sp-2)} .beheer-nav-kop:first-child{margin-top:0} .beheer-main{flex:1; padding:var(--sp-6) var(--sp-7); max-width:1180px} @media(max-width:820px){ .beheer-shell{flex-direction:column} .beheer-zijbalk{width:auto; position:static; height:auto; overflow-y:visible} .beheer-main{padding:var(--sp-4)} } /* ── Inloggen: geen appschil, gewoon een gecentreerde kaart ── */ .inlog-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-5)} .inlog-kaart{width:100%; max-width:380px} .inlog-kaart .kerknaam{font-family:var(--font-display); font-weight:700; font-size:var(--tx-lg); text-align:center; margin-bottom:var(--sp-5)} .inlog-kaart .btn{width:100%; justify-content:center} .inlog-fout{color:var(--st-actie); font-size:var(--tx-sm); margin-bottom:var(--sp-4)} .wie-ben-je-knop{display:block; width:100%; text-align:left; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm); border:2px solid var(--kg-line); background:var(--kg-paper); cursor:pointer; font-family:inherit; font-size:var(--tx-sm); margin-bottom:var(--sp-2); text-decoration:none; color:inherit} .wie-ben-je-knop:hover{border-color:var(--kg-navy)} .wie-ben-je-knop b{display:block; font-family:var(--font-display); font-size:var(--tx-md)} /* ── Leden-omgeving: mobiel-eerst, onderbalk, nooit meer dan vijf knoppen (CLAUDE.md §2/stijlgids §1) ── */ .leden-shell{display:flex; flex-direction:column; min-height:100vh; max-width:640px; margin:0 auto; background:var(--kg-paper)} .kerkbalk{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:var(--kg-paper); border-bottom:1px solid var(--kg-line)} .kerklogo{width:30px; height:30px; border-radius:7px; flex:none; background:var(--kerk-accent); color:var(--kerk-accent-ink); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:.8rem} .kerknaam{font-family:var(--font-display); font-weight:600; font-size:var(--tx-sm); line-height:1.1} .kerknaam span{display:block; font-family:var(--font-body); font-weight:400; font-size:10px; color:var(--kg-ink-soft); letter-spacing:.08em; text-transform:uppercase} .screenbody{flex:1; padding:var(--sp-4)} .screenbody h4{font-size:var(--tx-lg); margin-bottom:var(--sp-1)} .dagregel{font-size:var(--tx-xs); color:var(--kg-ink-soft); margin-bottom:var(--sp-4)} .taak{display:flex; gap:var(--sp-3); padding:var(--sp-3); background:var(--kg-paper); border:1px solid var(--kg-line); border-radius:var(--radius-sm); margin-bottom:var(--sp-2); align-items:flex-start} .taak.urgent{border-left:4px solid var(--kerk-accent)} .taak .t{font-size:var(--tx-sm); font-weight:600; line-height:1.3} .taak .s{font-size:var(--tx-xs); color:var(--kg-ink-soft)} .mini{font-size:var(--tx-xs); font-weight:600; color:var(--kerk-accent-dark); border:none; background:none; padding:0; cursor:pointer; text-decoration:underline; font-family:inherit} /* ── Kinderwerkzaal: grotere aanraakvlakken dan de norm (56px, ontwerp-en-navigatie.md §13) — bediend in een rumoerige zaal met één hand vrij, geen plek voor krappe knoppen. ── */ .kw-berichten{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--sp-2)} .kw-bericht{display:flex; align-items:center; justify-content:center; text-align:center; min-height:56px; min-width:56px; padding:var(--sp-2) var(--sp-3); font-family:var(--font-body); font-size:var(--tx-sm); font-weight:600; border-radius:var(--radius-sm); border:2px solid var(--kg-navy); background:var(--kerk-accent); color:var(--kerk-accent-ink); box-shadow:var(--shadow-block-sm); cursor:pointer} .kw-bericht:focus-visible{outline:3px solid var(--kg-navy); outline-offset:3px} .kw-vrije-tekst{margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--kg-line)} .kw-vrije-tekst .label-uitzondering{font-size:var(--tx-xs); color:var(--kg-ink-soft); display:block; margin-bottom:var(--sp-2)} .kw-vrije-tekst .row{margin-top:0} .kw-aanwezig-knop{display:flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:56px; min-width:56px; width:100%; padding:var(--sp-2) var(--sp-4); font-family:var(--font-body); font-size:var(--tx-sm); font-weight:600; border-radius:var(--radius-sm); border:2px solid var(--kg-line); background:var(--kg-paper); color:var(--kg-ink); cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; position:relative; overflow:hidden} .kw-aanwezig-knop.aanwezig{border-color:var(--st-ok); color:var(--st-ok); background:var(--st-ok-vlak)} .kw-aanwezig-knop:focus-visible{outline:3px solid var(--kg-navy); outline-offset:3px} .kw-aanwezig-knop .voortgang{position:absolute; inset:0 auto 0 0; width:0%; background:rgba(22,36,63,.12); pointer-events:none; transition:width .05s linear} .kw-aanwezig-knop.actief-bezig .voortgang{transition:none} .kw-hint{font-size:var(--tx-xs); color:var(--kg-ink-soft); text-align:center; margin-top:var(--sp-1)} .tabbar{display:flex; background:var(--kg-paper); border-top:1px solid var(--kg-line); position:sticky; bottom:0} .tab{flex:1; padding:9px 2px 11px; text-align:center; font-size:10px; color:var(--kg-ink-soft); border-top:3px solid transparent; cursor:pointer; font-weight:500; text-decoration:none; display:block} .tab .ic{display:block; font-size:17px; line-height:1.3} .tab.actief{color:var(--kg-navy); font-weight:700; border-top-color:var(--kerk-accent)} /* ── PWA-installatiehint (frontend-audit item 5, §23): de iPhone-in- tabblad-uitleg, zonder dat wordt gedaan alsof het scherm stuk is. ── */ .pwa-hint{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); background:var(--kg-navy); color:var(--kg-navy-tekst); padding:var(--sp-3) var(--sp-4); font-size:var(--tx-sm); max-width:640px; margin:0 auto} .pwa-hint strong{color:var(--kg-paper)} .pwa-hint button{flex:none; background:none; border:none; color:var(--kg-navy-tekst); font-size:var(--tx-lg); line-height:1; cursor:pointer; padding:var(--sp-1)} .pwa-hint button:focus-visible{outline:2px solid var(--kg-navy-tekst)} /* ── Liturgie-editor: twee kolommen op een breed scherm, bewerken links en het blad rechts (docs/kerkgemak-liturgie.html, §14) — één kolom op een smal scherm. ── */ .liturgie-editor{display:grid; grid-template-columns:1fr; gap:var(--sp-4); align-items:start} @media(min-width:900px){ .liturgie-editor{grid-template-columns:1.3fr 1fr} .liturgie-editor .blad{position:sticky; top:var(--sp-4)} } @media(prefers-reduced-motion:reduce){*{transition:none!important}}