/* ============================================ Dashboard Creatieve Ruimtemakers NDS Design Rules + Nimeto huisstijl ============================================ */ /* --- Font: Euclid Circular B --- */ @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Light-Italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Medium-Italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-SemiBold-Italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Euclid Circular B"; src: url("/fonts/Euclid-Circular-B-Bold-Italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* --- Design tokens (NDS) --- */ :root { --bg: #F7F4EE; --surface: #FFFDF8; --ink: #1F2A33; --ink-soft: #5B6770; --accent: #3E6B89; --accent-hover: #355A74; --accent-soft: #D5E2EB; --success: #4F7A5A; --warning: #9A6B2F; --danger: #B8433E; --danger-hover: #9A3834; --danger-soft: #F5DCDB; --border: #D8D3CB; --border-focus: var(--accent); --radius: 8px; --font: "Euclid Circular B", system-ui, -apple-system, sans-serif; --space-xs: 4px; --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Nimeto steunkleuren */ --nimeto-rood: #FF0C2F; --nimeto-groen: #58CC44; --nimeto-blauw: #30E0FD; --nimeto-geel: #FFE901; --nimeto-roze: #D481FF; --nimeto-lichtgroen: #FF9989; } /* --- Reset & basis --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-weight: 400; font-size: 1.0625rem; /* 17px */ line-height: 1.6; color: var(--ink); background-color: var(--bg); background-image: var(--pattern-img, none); background-size: var(--pattern-size, auto); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Achtergrond-patronen (subtiel Nimeto-paars) ────────────────── Activeer via data-bg attribuut op body, bv. . */ body[data-bg="dots"] { --pattern-img: radial-gradient(circle, rgba(99,14,253,0.12) 1.5px, transparent 1.5px); --pattern-size: 22px 22px; } body[data-bg="dots-big"] { --pattern-img: radial-gradient(circle, rgba(99,14,253,0.10) 3px, transparent 3px); --pattern-size: 40px 40px; } body[data-bg="cross"] { --pattern-img: linear-gradient(rgba(99,14,253,0.10) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(99,14,253,0.10) 1.5px, transparent 1.5px); --pattern-size: 30px 30px; } body[data-bg="diag"] { --pattern-img: repeating-linear-gradient( 45deg, transparent, transparent 18px, rgba(99,14,253,0.07) 18px, rgba(99,14,253,0.07) 20px ); } body[data-bg="waves"] { --pattern-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 Q 20 0, 40 20 T 80 20' stroke='%23630EFD' stroke-width='1.5' fill='none' opacity='0.18'/%3E%3C/svg%3E"); --pattern-size: 80px 40px; } body[data-bg="doodles"] { --pattern-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23630EFD' stroke-width='1.5' fill='none' opacity='0.18' stroke-linecap='round'%3E%3Ccircle cx='20' cy='30' r='4'/%3E%3Cpath d='M50 20 L60 20 M55 15 L55 25'/%3E%3Cpath d='M80 35 Q 85 25, 95 35 Q 105 45, 100 30'/%3E%3Cpath d='M15 70 Q 25 60, 30 75 T 45 80'/%3E%3Ccircle cx='75' cy='80' r='5'/%3E%3Cpath d='M95 95 L105 95 M100 90 L100 100'/%3E%3Cpath d='M40 100 Q 50 90, 55 105'/%3E%3C/g%3E%3C/svg%3E"); --pattern-size: 120px 120px; } body[data-bg="cubes"] { --pattern-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cg stroke='%23630EFD' stroke-width='1' fill='none' opacity='0.18'%3E%3Cpolygon points='30,4 52,16 52,40 30,52 8,40 8,16'/%3E%3Cpath d='M30 4 L30 28 M8 16 L30 28 M52 16 L30 28'/%3E%3C/g%3E%3C/svg%3E"); --pattern-size: 60px 52px; } body[data-bg="confetti"] { --pattern-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg opacity='0.22'%3E%3Crect x='10' y='15' width='6' height='2' fill='%23FF6C2F' transform='rotate(20 13 16)'/%3E%3Crect x='40' y='30' width='2' height='6' fill='%23630EFD' transform='rotate(45 41 33)'/%3E%3Ccircle cx='70' cy='20' r='2' fill='%2358CC44'/%3E%3Crect x='25' y='65' width='6' height='2' fill='%230496FF' transform='rotate(-30 28 66)'/%3E%3Ccircle cx='80' cy='75' r='2' fill='%23FF99B9'/%3E%3Crect x='55' y='85' width='5' height='2' fill='%23FFD901' transform='rotate(60 57 86)'/%3E%3C/g%3E%3C/svg%3E"); --pattern-size: 100px 100px; } /* Gradients — zachte voor lente/koel, felle pop voor warm/sunset */ body[data-bg="gradient-warm"] { background-image: linear-gradient(135deg, #FFD901 0%, #FF6C2F 50%, #FF2D74 100%); background-size: 100% 100%; } body[data-bg="gradient-cool"] { background-image: linear-gradient(135deg, #0496FF 0%, #7FB2FF 55%, #DCE9FF 100%); background-size: 100% 100%; } body[data-bg="gradient-spring"] { background-image: linear-gradient(135deg, #56CC44 0%, #A8E08F 55%, #ECF7DF 100%); background-size: 100% 100%; } body[data-bg="gradient-sunset"] { background-image: linear-gradient(135deg, #FF99B9 0%, #FF2D74 50%, #6530FD 100%); background-size: 100% 100%; } /* Solid kleur — background-color via inline style (--bg-color) */ body[data-bg="kleur"] { background-color: var(--bg-color, var(--bg)); background-image: none; } /* Custom foto — body achtergrond zonder white-wash, vol & gecentreerd */ body[data-bg="foto"] { background-image: var(--bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Vaste foto-achtergronden (presets in de achtergrond-kiezer) */ body[data-bg="preset-hero"], body[data-bg="preset-a"], body[data-bg="preset-b"], body[data-bg="preset-c"] { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } body[data-bg="preset-hero"] { background-image: url("/achtergronden/nimeto-hero.jpg"); } body[data-bg="preset-a"] { background-image: url("/achtergronden/bg-a.jpg"); } body[data-bg="preset-b"] { background-image: url("/achtergronden/bg-b.jpg"); } body[data-bg="preset-c"] { background-image: url("/achtergronden/bg-c.jpg"); } /* --- Typografie (NDS: max 65ch, SemiBold headings) --- */ h1 { font-weight: 600; font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--space-l); } h2 { font-weight: 600; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--space-m); } p { max-width: 65ch; margin-bottom: var(--space-m); } p:last-child { margin-bottom: 0; } /* --- Pagina-layout --- */ .pagina { min-height: 100vh; padding: var(--space-xl); max-width: 1140px; margin: 0 auto; } /* Op brede schermen: horizontale padding weg, content vult vol tot max-width zodat hij netjes uitlijnt met de tabnav-separator daarboven. */ @media (min-width: 1140px) { .pagina { padding-inline: 0; } } .pagina--met-tabs { padding-bottom: calc(var(--space-3xl) + 120px); } /* --- Topbar --- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-m) var(--space-l); max-width: 1140px; margin: 0 auto var(--space-l); border-bottom: 1px solid var(--border); } .topbar__titel { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 1.125rem; } /* Logo-PNG heeft transparante rand: groter renderen + negatieve marges om de witruimte te compenseren (links uitlijnen met de nav, balk compact houden). */ .topbar__logo { height: 44px; width: auto; flex: 0 0 auto; display: block; margin: -8px 0 -8px -21px; } .topbar__afdeling { font-weight: 300; opacity: 0.55; } .topbar__rechts { display: flex; align-items: center; gap: var(--space-s); } /* --- Tab-navigatie (student) --- */ .tabnav--desktop { display: none; } .tabnav--mobiel .tabnav__tab { min-width: 0; } /* alleen mobiel mag krimpen */ .tabnav--mobiel { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 0; background: var(--surface); border-top: 1px solid var(--border); padding: var(--space-s) 0; padding-bottom: calc(var(--space-s) + env(safe-area-inset-bottom, 0px)); z-index: 100; } .tabnav__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; max-width: 120px; padding: var(--space-s) var(--space-xs); font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; border-radius: var(--radius); transition: color 0.12s, background-color 0.12s; min-height: 48px; justify-content: center; } .tabnav__tab:hover { color: var(--ink); background: var(--accent-soft); text-decoration: none; } .tabnav__tab--actief { color: var(--accent); } .tabnav__tab--actief svg { stroke-width: 2.5; } .tabnav__tab:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: -3px; } .tabnav__tab svg { width: 24px; height: 24px; flex-shrink: 0; } /* --- Card --- */ .card { background: var(--surface); border-radius: var(--radius); padding: var(--space-xl); margin-bottom: var(--space-l); max-width: 1140px; margin-left: auto; margin-right: auto; } .card--narrow { max-width: 480px; } .card--center { display: flex; flex-direction: column; align-items: center; text-align: center; } .card__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-m); margin-bottom: var(--space-l); } .card__header h1 { margin-bottom: 0; } /* --- Formulieren (NDS: zichtbare labels, duidelijke rand, focus-state) --- */ label { display: block; font-weight: 500; margin-bottom: var(--space-xs); margin-top: var(--space-m); } label:first-of-type { margin-top: 0; } input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], select { display: block; width: 100%; font-family: var(--font); font-size: 1rem; font-weight: 400; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color 0.12s, background-color 0.12s; } input:focus, select:focus { outline: none; border-color: var(--border-focus); background: #F0F5F8; box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder { color: var(--ink-soft); opacity: 0.7; } input[type="file"] { font-family: var(--font); font-size: 0.9375rem; margin-bottom: var(--space-m); } /* --- Buttons (NDS: 44px+ target, zichtbare states, 1 primair per scherm) --- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; font-family: var(--font); font-weight: 500; font-size: 1rem; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.12s, background-color 0.12s, border-color 0.12s; line-height: 1.25; } .btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; } .btn:active { transform: translateY(1px); } .btn--primary { color: var(--surface); background: var(--accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--secundair { color: var(--ink); background: transparent; border-color: var(--border); } .btn--secundair:hover { border-color: var(--ink-soft); background: var(--accent-soft); } .btn--gevaar { color: var(--danger); background: transparent; border-color: var(--danger); } .btn--gevaar:hover { color: var(--surface); background: var(--danger); } .btn--klein { min-height: 40px; padding: 8px 16px; font-size: 0.875rem; } /* --- Links (NDS: kleur + onderstreping) --- */ .link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: color 0.12s; } .link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; } .link:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; border-radius: 2px; } /* --- Tabel --- */ .tabel-wrap { overflow-x: auto; margin-bottom: var(--space-m); } table { width: 100%; border-collapse: collapse; font-feature-settings: "tnum" 1; } thead th { text-align: left; font-weight: 600; padding: var(--space-s) var(--space-m); border-bottom: 2px solid var(--border); white-space: nowrap; } tbody td { padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:hover { background: var(--accent-soft); } /* --- Gegevens (profielpagina) --- */ .gegevens { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s) var(--space-l); } .gegevens dt { font-weight: 500; color: var(--ink-soft); } .gegevens dd { font-weight: 400; } /* --- Zoekbalk --- */ .zoekbalk { display: flex; gap: var(--space-s); margin-bottom: var(--space-l); } .zoekbalk input { flex: 1; } /* --- Formulier-acties --- */ .formulier__acties { display: flex; gap: var(--space-s); margin-top: var(--space-l); } .formulier__verwijder { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--border); } /* --- Meldingen --- */ .melding { padding: var(--space-m); border-radius: var(--radius); margin-bottom: var(--space-l); } .melding--fout { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); } .melding--fout ul { margin: 0; padding-left: var(--space-l); } .melding--succes { background: #E6F0E8; color: var(--success); border: 1px solid var(--success); } /* --- Hulpklassen --- */ .tekst--zacht { color: var(--ink-soft); font-size: 0.9375rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Tip-banner --- */ .tip-banner { display: flex; align-items: center; gap: var(--space-s); background: var(--accent-soft); padding: var(--space-s) var(--space-m); font-size: 0.875rem; } .tip-banner__tekst { margin: 0; flex: 1; } .tip-banner__sluit { flex-shrink: 0; background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: var(--space-xs); min-width: 44px; min-height: 44px; display: grid; place-items: center; } /* --- Profiel: split layout --- */ .profiel-split { display: flex; gap: var(--space-m); margin-bottom: var(--space-m); } .profiel-split__links { flex: 1; margin-bottom: 0; } .profiel-split__rechts { flex: 1; position: relative; } @media (max-width: 600px) { .profiel-split { flex-direction: column; } } /* --- Profiel: header + avatar --- */ .profiel-header { display: flex; align-items: center; gap: var(--space-l); } .profiel-avatar { flex-shrink: 0; width: 96px; height: 96px; aspect-ratio: 1 / 1; /* blijf gegarandeerd rond, ook als de layout krimpt */ border-radius: 50%; background: var(--accent); display: grid; place-items: center; overflow: visible; /* camera-knop steekt bewust buiten de cirkel */ position: relative; } .profiel-avatar__foto { position: absolute; inset: 0; /* vult de vaste cirkel; fotomaat rekt 'm niet op */ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .profiel-avatar__upload { position: absolute; bottom: 50%; right: -14px; transform: translateY(50%); width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); display: grid; place-items: center; cursor: pointer; transition: background 0.15s; z-index: 3; } .profiel-avatar__upload:hover { background: var(--accent-soft); } .profiel-avatar__upload svg { width: 12px; height: 12px; stroke: var(--accent); } .profiel-avatar__initialen { font-size: 2rem; font-weight: 600; color: var(--surface); text-transform: uppercase; letter-spacing: 1px; } .profiel-naam { margin: 0 0 var(--space-xs); } .profiel-info .tekst--zacht { margin: 0; } .profiel-opleiding { margin: var(--space-xs) 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--accent); } .profiel-coach { margin: 2px 0 0; font-size: 0.8125rem; color: var(--ink-soft); } /* --- Badge / visitekaartje --- */ .badge { background: var(--badge-bg, #1a1a2e); background-image: var(--badge-bg-img, none); background-size: cover; background-position: center; border-radius: 16px; padding: var(--space-l); display: flex; gap: var(--space-m); align-items: center; box-shadow: 0 4px 24px rgba(0,0,0,0.3); position: relative; overflow: hidden; height: 100%; box-sizing: border-box; } .badge::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 0; } .badge__portret { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--badge-accent, #e94560); display: grid; place-items: center; background: rgba(255,255,255,0.1); position: relative; z-index: 1; overflow: visible; } .badge__portret img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .badge__emoji { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: var(--badge-bg, #1a1a2e); border: 2px solid var(--badge-accent, #e94560); display: grid; place-items: center; font-size: 20px; line-height: 1; z-index: 2; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); } .badge__emoji--lt { top: -10px; left: -10px; } .badge__emoji--rb { bottom: -10px; right: -10px; } .badge__initialen { font-size: 1.5rem; font-weight: 600; color: var(--badge-accent, #e94560); } .badge__inhoud { flex: 1; min-width: 0; position: relative; z-index: 1; } .badge__naam { margin: 0; font-size: 1.2rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .badge__statement { margin: 5px 0 0; font-size: 0.875rem; color: rgba(255,255,255,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.5); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .badge__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; } .badge__tag { font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); font-weight: 500; } .badge__tag--lr { background: var(--badge-accent, #e94560); color: #fff; border-color: var(--badge-accent, #e94560); font-weight: 700; letter-spacing: 0.5px; } /* Badge edit knop (potloodje) */ .badge-edit-btn { position: absolute; top: var(--space-s); right: var(--space-s); width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; transition: background 0.15s; z-index: 3; } .badge-edit-btn:hover { background: rgba(255,255,255,0.3); } .badge-edit-btn svg { stroke: #fff; } /* Badge personalisatie paneel */ .badge-style-panel { margin-bottom: var(--space-m); } .badge-style-panel__inhoud { display: flex; align-items: center; gap: var(--space-l); margin-bottom: var(--space-m); } /* Achtergrond keuzes */ .badge-achtergronden { margin-top: var(--space-s); margin-bottom: var(--space-m); } .badge-achtergronden__keuzes { display: flex; gap: 8px; margin-top: var(--space-xs); flex-wrap: wrap; } .bg-keuze { width: 52px; height: 36px; border-radius: 6px; border: 2px solid var(--border); cursor: pointer; overflow: hidden; display: grid; place-items: center; background: #1a1a2e; transition: border-color 0.15s; padding: 0; } .bg-keuze img { width: 100%; height: 100%; object-fit: cover; } .bg-keuze--actief { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .bg-keuze__geen { font-size: 1rem; color: var(--ink-soft); } .bg-keuze--upload { border-style: dashed; cursor: pointer; } .bg-keuze--upload svg { stroke: var(--ink-soft); } /* Emoji picker */ .badge-emojis { margin-top: var(--space-s); } .badge-emojis__huidig { display: flex; gap: 8px; margin-top: var(--space-s); margin-bottom: var(--space-s); align-items: center; } .emoji-slot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); font-size: 22px; display: grid; place-items: center; cursor: pointer; transition: border-color 0.15s, transform 0.15s; } .emoji-slot:hover { border-color: var(--accent); transform: scale(1.08); } .emoji-slot__leeg { font-size: 18px; color: var(--ink-soft); } .emoji-slot--wis { width: 32px; height: 32px; font-size: 14px; color: var(--ink-soft); border-style: dashed; margin-left: 4px; } .emoji-picker { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: var(--space-s); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: 200px; overflow-y: auto; } .emoji-picker[hidden] { display: none; } .emoji-picker__item { width: 36px; height: 36px; border: none; background: none; font-size: 20px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; transition: background 0.1s; } .emoji-picker__item:hover { background: var(--accent-soft); } .veld--inline { display: flex; align-items: center; gap: var(--space-s); margin-bottom: 0; margin-top: 0; } .veld--inline .veld__label { margin-bottom: 0; } /* Kleur-kiezer: echte cirkel als swatch */ .kleur-kiezer { display: flex; flex-direction: column; align-items: center; gap: 6px; } .kleur-kiezer .veld__label { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; } .kleur-swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); position: relative; cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .kleur-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } /* --- Profiel: velden --- */ .veld { display: block; margin-bottom: var(--space-m); } .veld__label { display: block; font-weight: 500; margin-bottom: var(--space-xs); color: var(--ink-soft); font-size: 0.875rem; } .veld__invoer { width: 100%; padding: var(--space-s) var(--space-m); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 1rem; background: var(--surface); color: var(--ink); min-height: 44px; } .veld__invoer:disabled { opacity: 0.6; cursor: not-allowed; } .veld__invoer--tekstvak { resize: vertical; min-height: 80px; } .tekst--klein { font-size: 0.8125rem; } /* --- Profiel: tags/interesses --- */ .tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; font-size: 0.75rem; background: var(--surface); color: var(--ink); cursor: pointer; min-height: 28px; transition: background 0.15s, border-color 0.15s; user-select: none; } .tag:hover { border-color: var(--accent); } .tag--actief { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); } .tag--toevoegen { border-style: dashed; color: var(--ink-soft); font-size: 0.875rem; padding: 4px 8px; } .tag--toevoegen:disabled { opacity: 0.5; cursor: not-allowed; } .tag-teller { font-weight: 600; color: var(--ink-soft); } .tekst--vol { color: var(--warning); } .profiel-opslaan { width: 100%; margin-top: var(--space-m); } .knop-groep { display: flex; gap: var(--space-s); margin-top: var(--space-m); } /* --- Profiel: instellingen --- */ .instellingen-knop { display: flex; align-items: center; gap: var(--space-s); background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-s) var(--space-m); margin-top: var(--space-m); cursor: pointer; color: var(--ink-soft); font: inherit; font-size: 0.9375rem; min-height: 44px; transition: color 0.15s, border-color 0.15s; } .instellingen-knop:hover { color: var(--ink); border-color: var(--accent); } .instellingen-knop[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); } .instellingen-paneel { margin-top: var(--space-s); } .scheiding { border: none; border-top: 1px solid var(--border); margin: var(--space-m) 0; } .instelling { margin-bottom: var(--space-m); } .instelling--toggle { display: flex; align-items: center; gap: var(--space-s); cursor: pointer; } .instelling--toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); } .instructies { padding-left: var(--space-l); margin-top: var(--space-s); display: flex; flex-direction: column; gap: var(--space-s); } .instructies code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 0.875rem; } /* --- Reduced motion (NDS) --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --- Responsive --- */ @media (max-width: 600px) { body { font-size: 1rem; } .pagina { padding: var(--space-m); } .topbar { padding: var(--space-s) var(--space-m); } .card { padding: var(--space-m); } .card__header { flex-direction: column; align-items: flex-start; } .zoekbalk { flex-direction: column; } .formulier__acties { flex-direction: column; } .gegevens { grid-template-columns: 1fr; } /* Logo: op mobiel kleinere topbar-padding, dus de desktop -21px is te veel */ .topbar__logo { margin-left: 0; } /* Genoeg ruimte onderaan zodat inhoud niet achter de vaste onderbalk valt. (.pagina{padding:space-m} hierboven reset anders de padding-bottom.) */ .pagina--met-tabs { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } } /* Desktop: tabnav als horizontale balk onder de topbar */ @media (min-width: 601px) { .tabnav--mobiel { display: none; } .tabnav--desktop { display: flex; max-width: 1140px; margin: 0 auto; border-bottom: 1px solid var(--border); padding: 0; justify-content: flex-start; gap: var(--space-xs); background: transparent; } .tabnav--desktop .tabnav__tab { flex-direction: row; flex: 0; gap: var(--space-s); font-size: 0.9375rem; padding: var(--space-m) var(--space-l); border-radius: 0; border-bottom: 3px solid transparent; min-height: 48px; } .tabnav--desktop .tabnav__tab--actief { border-bottom-color: var(--accent); } .tabnav--desktop .tabnav__tab:hover { background: transparent; border-bottom-color: var(--border); } .tabnav--desktop .tabnav__tab--actief:hover { border-bottom-color: var(--accent); } .pagina--met-tabs { padding-bottom: var(--space-xl); } .heeft-tabnav .topbar { margin-bottom: 0; border-bottom: none; } } /* ============================================================ PRIKBORD & CHAT ============================================================ */ /* pk-hoofd: volledige breedte, eigen flow */ .pk-hoofd { width: 100%; } /* ── FAB: + knopje rechts bovenaan ── */ .pk-fab-rij { display: flex; justify-content: flex-end; margin-bottom: var(--space-m); position: relative; z-index: 50; } .pk-fab-wrap { position: relative; } .pk-fab { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; flex-shrink: 0; } .pk-fab:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .pk-fab--open { transform: rotate(45deg); background: var(--ink-soft); } .pk-fab--open:hover { transform: rotate(45deg) scale(1.08); } /* Popover formulier */ .pk-nieuw { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: calc(100vw - 32px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius, 12px); box-shadow: 0 8px 32px rgba(0,0,0,0.14); padding: var(--space-m); z-index: 200; } .pk-nieuw[hidden] { display: none; } /* Formulier */ .pk-form { display: flex; flex-direction: column; gap: var(--space-s); } .pk-form__kleuren { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 2px; } /* De radio-button is zelf de cirkel. Eén element → geen uitlijn-quirks. */ .pk-kleur-radio { appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.15); transition: box-shadow 0.15s; /* background-kleur komt van de inline style */ } .pk-kleur-radio:hover { box-shadow: 0 0 0 2px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.15); } /* Selectie = dunne halo-ring met gaatje (gap = popover-achtergrond) */ .pk-kleur-radio:checked { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink), 0 2px 5px rgba(0,0,0,0.18); } .prikbord-textarea { width: 100%; resize: vertical; min-height: 80px; padding: var(--space-s) var(--space-m); border: 1px solid var(--border); border-radius: var(--radius-s, 6px); background: var(--surface); color: var(--ink); font-size: 0.9375rem; font-family: inherit; line-height: 1.5; transition: border-color 0.15s; box-sizing: border-box; } .prikbord-textarea:focus { outline: none; border-color: var(--accent); } /* ── WYSIWYG-editor (contenteditable div) ── */ .prikbord-editor { width: 100%; min-height: 100px; max-height: 280px; overflow-y: auto; padding: var(--space-s) var(--space-m); border: 1px solid var(--border); border-radius: var(--radius-s, 6px); background: var(--surface); color: var(--ink); font-size: 0.9375rem; font-family: inherit; line-height: 1.5; box-sizing: border-box; transition: border-color 0.15s; outline: none; } .prikbord-editor:focus { border-color: var(--accent); } .prikbord-editor:empty::before { content: attr(data-placeholder); color: var(--ink-soft); opacity: 0.65; pointer-events: none; } .prikbord-editor h3 { font-size: 1.05rem; font-weight: 700; margin: 6px 0 4px; line-height: 1.25; } .prikbord-editor p { margin: 0 0 6px; } .prikbord-editor ul, .prikbord-editor ol { margin: 4px 0 6px; padding-left: 22px; } .prikbord-editor li { margin-bottom: 2px; } .prikbord-editor strong, .prikbord-editor b { font-weight: 700; } /* Toolbar-knop "actief" highlight als cursor in geformatteerde tekst staat */ .pk-rich-btn--actief { background: var(--ink); color: var(--surface); border-color: var(--ink); } /* ── Foto-rij (eigen rij onder textarea, niet meer naast Plaatsen) ── */ .pk-foto-rij { display: flex; align-items: center; gap: 10px; padding: 10px 4px 6px; /* meer ruimte boven/onder */ margin-top: 4px; border-top: 1px solid var(--border); } .pk-form__footer { display: flex; align-items: center; justify-content: flex-end; } .pk-form__footer { display: flex; align-items: center; gap: var(--space-s); } .pk-foto-label { cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; padding: 6px; border-radius: 6px; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .pk-foto-label:hover { color: var(--accent); background: rgba(0,0,0,0.04); } .pk-foto-naam { font-size: 0.8rem; color: var(--ink-soft); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-form__submit { margin-left: auto; } /* ── Post-it grid: vult de volledige breedte ── */ .pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-l); align-items: start; padding-top: 10px; } /* ── 3D flip wrapper ── */ .pk-kaart-wrap { perspective: 900px; transform: rotate(var(--pk-rot, 0deg)); transition: transform 0.2s ease; cursor: pointer; position: relative; margin-top: 18px; /* ruimte voor avatar-cirkel */ z-index: 0; } .pk-kaart-wrap:hover { transform: rotate(0deg) translateY(-4px); z-index: 2; } .pk-kaart-wrap.is-omgedraaid { transform: rotate(0deg); z-index: 5; } /* ── De kaart zelf (flipper) ── */ .pk-kaart { position: relative; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .pk-kaart-wrap.is-omgedraaid .pk-kaart { transform: rotateY(180deg); } /* ── Voorkant ── */ .pk-kaart__voor { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--pk-kleur, #fef08a); border-radius: 3px 10px 10px 3px; padding: 14px 14px 10px; box-shadow: 2px 4px 12px rgba(0,0,0,0.13), 0 1px 3px rgba(0,0,0,0.07); position: relative; /* Minimum maat zodat achterkant (visitekaartje) altijd genoeg ruimte heeft */ min-height: 260px; display: flex; flex-direction: column; /* translateZ houdt voorkant in eigen Z-laag, voorkomt doorschemeren */ transform: translateZ(1px); } /* Voet naar onderaan duwen binnen flex-kolom */ .pk-kaart__voor > .pk-kaart__voet { margin-top: auto; } /* Punaise bovenaan voorkant — krijgt accent-kleur van student's badge */ .pk-kaart__voor::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--pk-accent, rgba(0,0,0,0.22)); position: absolute; top: -5px; left: 50%; transform: translateX(-50%); box-shadow: 0 1px 3px rgba(0,0,0,0.35), inset -1px -1px 2px rgba(0,0,0,0.18); } /* ── Achterkant: badge ── */ .pk-kaart__achter { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* translateZ voorkomt Z-fighting met de voorkant tijdens animatie */ transform: rotateY(180deg) translateZ(1px); border-radius: 10px; overflow: hidden; box-shadow: 2px 4px 12px rgba(0,0,0,0.13); display: flex; flex-direction: column; /* Solide ondergrond als fallback, zodat voorkant nooit doorschemert */ background: var(--ink, #1a1a2e); } /* Hover-flip op desktop (touch-devices vallen terug op klik via JS). Niet flippen als de muis op de prullenbak of het vergroot-knopje staat — anders kun je die niet aanklikken want ze zitten op de voorkant. transition-delay: 1s zorgt voor "hover-intent" — je moet ~1s blijven hangen voordat de flip start. Beweeg je weg of naar de zoom-knop, dan klapt ie meteen terug (geen delay op terugweg). */ @media (hover: hover) and (pointer: fine) { .pk-kaart-wrap:hover:not(:has(.pk-kaart__verwijder:hover)):not(:has(.pk-vergroot-btn:hover)):not(:has(.pk-link:hover)) .pk-kaart { transform: rotateY(180deg); transition-delay: 0.8s; } } .pk-kaart__achter .badge--kaart { flex: 1; height: auto; min-height: 0; border-radius: 0; box-shadow: none; } /* ── Compact-variant van .badge voor de post-it achterkant ── foto klein links bovenaan, naam + tags rechts ernaast, statement onderaan over volle breedte met veel meer leesruimte. */ .badge--kaart { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: 14px 14px 12px; } .badge--kaart .badge__hoofd { display: flex; align-items: center; /* naam verticaal naast foto gecentreerd */ gap: 12px; position: relative; z-index: 1; } .badge--kaart .badge__portret { width: 54px; height: 54px; border-width: 2px; flex-shrink: 0; } .badge--kaart .badge__emoji { width: 22px; height: 22px; font-size: 12px; border-width: 1.5px; } .badge--kaart .badge__emoji--lt { top: -6px; left: -6px; } .badge--kaart .badge__emoji--rb { bottom: -6px; right: -6px; } .badge--kaart .badge__initialen { font-size: 1.1rem; } /* Naam zit nu direct in __hoofd (geen .badge__inhoud wrapper meer) */ .badge--kaart .badge__naam { font-size: 1rem; line-height: 1.15; margin: 0; flex: 1; min-width: 0; } /* Tags zitten nu OP EIGEN VOLLE-BREEDTE-RIJ, niet meer in smal kolommetje */ .badge--kaart .badge__tags { margin-top: 0; gap: 4px; position: relative; z-index: 1; } .badge--kaart .badge__tag { font-size: 0.58rem; padding: 2px 7px; border-radius: 8px; font-weight: 500; letter-spacing: 0; } .badge--kaart .badge__tag--lr { letter-spacing: 0.3px; font-weight: 700; } /* Statement: groter leesgebied, meer regels, dezelfde donkere overlay tegen achtergrond */ .badge--kaart .badge__statement { margin: 0; font-size: 0.8rem; line-height: 1.4; -webkit-line-clamp: 7; position: relative; z-index: 1; } .pk-achter__acties { display: flex; justify-content: center; gap: 8px; padding: 8px 10px; background: rgba(0,0,0,0.25); } .pk-chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.12s; } .pk-chat-btn:hover { background: rgba(255,255,255,0.28); } .pk-chat-btn--teams { background: #6264A7; border-color: #6264A7; } .pk-chat-btn--teams:hover { background: #54568f; } /* In popup context (hover) */ .pk-avatar__popup .badge--kaart { height: auto; min-height: 0; border-radius: 0; box-shadow: none; } /* ── Avatar: profielfoto cirkel rechts boven de kaart ── */ .pk-kaart__avatar-wrap { position: absolute; top: -18px; right: 10px; z-index: 3; } .pk-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2.5px solid white; background: var(--surface); /* Buitenste ring in student's badge-accent (valt weg als geen accent gezet) */ box-shadow: 0 0 0 2px var(--pk-accent, transparent), 0 1px 5px rgba(0,0,0,0.18); cursor: default; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Drijvende emoji's bij de avatar — zelfde stijl-idee als op het badge */ .pk-avatar__emoji { position: absolute; font-size: 14px; line-height: 1; pointer-events: none; z-index: 4; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } .pk-avatar__emoji--lt { top: -6px; left: -8px; transform: rotate(-12deg); } .pk-avatar__emoji--rb { bottom: -8px; right: -6px; transform: rotate(8deg); } .pk-avatar__foto { width: 100%; height: 100%; object-fit: cover; } .pk-avatar__initialen { font-size: 0.68rem; font-weight: 700; color: var(--ink-soft); line-height: 1; pointer-events: none; } /* Hover popup: het echte badge-visitekaartje */ .pk-avatar__popup { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.96); transform-origin: top right; transition: opacity 0.15s, transform 0.15s; z-index: 100; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.28); } .pk-kaart__avatar-wrap:hover .pk-avatar__popup { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } /* (badge in popup wordt nu afgehandeld via .pk-avatar__popup .badge--kaart hierboven) */ /* ── Verwijder knop (links boven) ── */ .pk-kaart__verwijder { position: absolute; top: 6px; left: 8px; } .pk-verwijder-btn { background: rgba(0,0,0,0.07); border: none; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: rgba(0,0,0,0.35); transition: color 0.15s, background 0.15s; padding: 0; } .pk-verwijder-btn:hover { color: #dc2626; background: rgba(220, 38, 38, 0.15); } /* ── Post-it tekst (rich: paragrafen, koppen, bullets, vet) ── */ .pk-kaart__tekst { margin: 6px 0 8px; font-size: 0.9rem; line-height: 1.5; color: rgba(0,0,0,0.78); word-break: break-word; } .pk-kaart__tekst p { margin: 0 0 6px; } .pk-kaart__tekst p:last-child { margin-bottom: 0; } .pk-kaart__tekst h3 { margin: 6px 0 4px; font-size: 0.96rem; font-weight: 700; line-height: 1.25; color: rgba(0,0,0,0.88); } .pk-kaart__tekst h3:first-child { margin-top: 0; } .pk-kaart__tekst ul { margin: 4px 0 6px; padding-left: 18px; } .pk-kaart__tekst li { margin-bottom: 2px; line-height: 1.4; } .pk-kaart__tekst strong { font-weight: 700; color: rgba(0,0,0,0.92); } /* Klikbare links in een post-it bericht */ .pk-kaart__tekst .pk-link, .pk-link { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; font-weight: 600; } .pk-kaart__tekst .pk-link:hover { color: #1e40af; } /* ── Rich-text toolbar boven de textarea ── */ .pk-rich-toolbar { display: flex; gap: 4px; padding: 0 2px 2px; } .pk-rich-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; font-size: 0.82rem; font-weight: 600; font-family: inherit; padding: 0; transition: background 0.12s, color 0.12s, border-color 0.12s; } .pk-rich-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--ink-soft); } .pk-rich-btn--bold { font-weight: 800; } .pk-rich-btn__tekst { font-weight: 700; letter-spacing: -0.5px; } /* ── Foto-hint label naast upload-knop ── */ .pk-foto-naam--hint { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.3; } .pk-foto-naam--hint .tekst--zacht { opacity: 0.7; font-size: 0.85em; } /* ── Foutmelding banner bovenaan prikbord ── */ .pk-melding { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; margin-bottom: var(--space-m); font-size: 0.88rem; transition: opacity 0.4s, transform 0.4s; } .pk-melding--fout { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } .pk-melding--weg { opacity: 0; transform: translateY(-8px); pointer-events: none; } .pk-melding span:not(.tekst--zacht) { flex: 1; } .pk-melding__sluit { background: transparent; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 4px; opacity: 0.7; } .pk-melding__sluit:hover { background: rgba(0,0,0,0.06); opacity: 1; } /* ── Polaroid foto frame ── */ .pk-polaroid { margin: 8px auto; background: white; padding: 5px 5px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.14); border-radius: 2px; width: fit-content; max-width: 100%; position: relative; } /* Vergroot-knop op polaroid */ .pk-vergroot-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.88); border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,0.22); color: rgba(0,0,0,0.6); z-index: 2; backdrop-filter: blur(4px); transition: background 0.15s, transform 0.15s; padding: 0; } .pk-vergroot-btn:hover { background: white; transform: scale(1.12); } /* ── Foto lightbox ── */ .pk-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .pk-lightbox[hidden] { display: none; } .pk-lightbox__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.82); cursor: pointer; } .pk-lightbox__inhoud { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-s); max-width: min(90vw, 820px); max-height: 90vh; } .pk-lightbox__sluit { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); color: white; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.15s; padding: 0; } .pk-lightbox__sluit:hover { background: rgba(255,255,255,0.3); } .pk-lightbox__foto { max-width: 100%; max-height: 76vh; border-radius: 6px; box-shadow: 0 4px 40px rgba(0,0,0,0.5); object-fit: contain; display: block; } .pk-lightbox__acties { display: flex; gap: var(--space-s); min-height: 36px; } .pk-lightbox__verwijder { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; background: rgba(220,38,38,0.85); border: 1px solid rgba(220,38,38,0.4); color: white; font-size: 0.82rem; font-family: inherit; cursor: pointer; transition: background 0.15s; } .pk-lightbox__verwijder:hover { background: rgba(185,28,28,0.95); } .pk-polaroid__foto { display: block; max-width: 100%; max-height: 180px; border-radius: 1px; object-fit: cover; } /* ── Voet: auteur + tijdstip ── */ .pk-kaart__voet { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,0.1); } .pk-kaart__auteur { font-size: 0.72rem; font-weight: 600; color: rgba(0,0,0,0.5); display: flex; align-items: center; gap: 4px; line-height: 1; } .pk-kaart__tijd { font-size: 0.68rem; color: rgba(0,0,0,0.38); white-space: nowrap; } /* Rol-badge: beheerder / docent */ .pk-rol-badge { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 5px; background: rgba(0,0,0,0.1); border-radius: 4px; color: rgba(0,0,0,0.45); } .pk-rol-badge--docent { background: rgba(139, 92, 246, 0.14); color: rgba(109, 40, 217, 0.7); } /* ── Leeg-state ── */ .pk-leeg { display: flex; flex-direction: column; align-items: center; gap: var(--space-s); padding: var(--space-xl) 0; color: var(--ink-soft); text-align: center; grid-column: 1 / -1; } .pk-leeg p { margin: 0; } /* Chat-zijbalk verwijderd op 2026-05-23 — chat krijgt later eigen tabblad. */ /* ──────────────────────────────────────────────────────────────────── Donker thema voor /dashboard — alleen actief als body data-thema="donker" heeft (gezet door dashboard-route). Maakt topbar/tabnav/links-strook leesbaar op donkere achtergronden. ──────────────────────────────────────────────────────────────────── */ body[data-thema="donker"] { color: #F7F4EE; } body[data-thema="donker"] .topbar { border-bottom-color: rgba(255,255,255,0.18); } body[data-thema="donker"] .topbar__titel { color: #fff; } body[data-thema="donker"] .topbar .btn--secundair { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.25); color: #fff; } body[data-thema="donker"] .topbar .btn--secundair:hover { background: rgba(255,255,255,0.18); } body[data-thema="donker"] .tabnav--desktop { border-bottom-color: rgba(255,255,255,0.18); } body[data-thema="donker"] .tabnav--desktop .tabnav__tab { color: rgba(255,255,255,0.7); } body[data-thema="donker"] .tabnav--desktop .tabnav__tab:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.35); } body[data-thema="donker"] .tabnav--desktop .tabnav__tab--actief { color: #fff; border-bottom-color: #fff; } body[data-thema="donker"] .tabnav--desktop .tabnav__tab--actief:hover { border-bottom-color: #fff; } /* Dashboard-pagina header */ body[data-thema="donker"] .dash-kop h1 { color: #fff; } body[data-thema="donker"] .nimeto-links { background: rgba(20,20,28,0.55); border-color: rgba(255,255,255,0.18); } body[data-thema="donker"] .nimeto-link { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); color: #fff; } body[data-thema="donker"] .nimeto-link:hover { background: rgba(255,255,255,0.18); } /* Dashboard-acties knoppen (Achtergrond + Widget): contrast-rand */ body[data-thema="donker"] .dash-kop__acties .btn--secundair { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.25); color: #fff; } body[data-thema="donker"] .dash-kop__acties .btn--secundair:hover { background: rgba(255,255,255,0.18); } /* Widget-kiezer (picker) blijft een licht paneel; forceer donkere inkt zodat de kop en item-teksten niet de lichte body-kleur erven (anders wit-op-licht). */ body[data-thema="donker"] .picker__inhoud { color: var(--ink); } body[data-thema="donker"] .picker__kop h2 { color: var(--ink); } body[data-thema="donker"] .picker__item-naam { color: var(--ink); } body[data-thema="donker"] .picker__item-besch { color: var(--ink-soft); }