/* ============================================================ Verbalysis — design system Light & dark theme via [data-thema] on . ============================================================ */ /* ---------- Lettertypes (lokaal, geen externe requests) ---------- */ @font-face { font-family: 'Inter Var'; src: url('../vendor/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono Var'; src: url('../vendor/fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; } /* ---------- Design-tokens ---------- */ :root { --font-ui: 'Inter Var', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono Var', ui-monospace, 'SF Mono', Menlo, monospace; --radius-s: 8px; --radius-m: 12px; --radius-l: 18px; --topbar-h: 56px; --rail-b: 72px; --sidebar-b: 264px; --paneel-b: 304px; --schaduw-1: 0 1px 3px rgba(16, 18, 32, .07), 0 4px 14px rgba(16, 18, 32, .05); --schaduw-2: 0 8px 30px rgba(10, 12, 24, .16); --overgang: 160ms cubic-bezier(.4, 0, .2, 1); } :root, :root[data-thema='licht'] { color-scheme: light; --bg: #f3f4f9; --rail-bg: #e8eaf3; --sidebar-bg: #edeff6; --chat-bg: #ffffff; --paneel-bg: #f8f9fc; --surface: #ffffff; --surface-2: #eef0f7; --surface-hover: rgba(88, 92, 220, .07); --invoer-bg: #f1f2f8; --tekst: #181a26; --tekst-2: #565c70; --tekst-3: #6b7186; --accent: #5657d4; --accent-tekst: #4a4bc6; --accent-contrast: #ffffff; --accent-zacht: rgba(86, 87, 212, .12); --accent-2: #0d9d92; --gradient: linear-gradient(135deg, #5f5bd8 0%, #0ea5a3 100%); --rand: #e2e4ee; --rand-sterk: #cfd3e2; --groen: #16a34a; --rood: #dc2626; --code-bg: #f6f7fb; --code-rand: #e6e8f2; --code-kop-bg: #eceef6; /* Syntax-kleuren (highlight.js) — licht */ --syn-keyword: #7c3aed; --syn-string: #0f7b4b; --syn-number: #b45309; --syn-comment: #8a90a4; --syn-func: #1d4ed8; --syn-type: #0e7490; --syn-attr: #a21caf; } :root[data-thema='donker'] { color-scheme: dark; --bg: #0d0f17; --rail-bg: #0a0c12; --sidebar-bg: #111420; --chat-bg: #161a26; --paneel-bg: #12151f; --surface: #1b1f2d; --surface-2: #222738; --surface-hover: rgba(130, 133, 255, .1); --invoer-bg: #1e2231; --tekst: #e9ebf5; --tekst-2: #9ba1b7; --tekst-3: #8a90a8; --accent: #8285ff; --accent-tekst: #9a9dff; --accent-contrast: #10131c; --accent-zacht: rgba(130, 133, 255, .16); --accent-2: #2dd4bf; --gradient: linear-gradient(135deg, #7b7dff 0%, #2dd4bf 100%); --rand: #252a3b; --rand-sterk: #333950; --groen: #4ade80; --rood: #f87171; --code-bg: #12151f; --code-rand: #262b3d; --code-kop-bg: #1a1e2c; --schaduw-1: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3); --schaduw-2: 0 10px 36px rgba(0, 0, 0, .5); /* Syntax-kleuren — donker */ --syn-keyword: #c4b5fd; --syn-string: #6ee7b7; --syn-number: #fcd34d; --syn-comment: #6b7189; --syn-func: #93c5fd; --syn-type: #67e8f9; --syn-attr: #f0abfc; } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--tekst); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; } p { margin: 0; } a { color: var(--accent-tekst); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } img, svg { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent-zacht); } /* Scrollbalken */ * { scrollbar-width: thin; scrollbar-color: var(--rand-sterk) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--rand-sterk); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .visueel-verborgen { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ============================================================ App-skelet ============================================================ */ .app { display: flex; flex-direction: column; height: 100dvh; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 14px; background: var(--rail-bg); border-bottom: 1px solid var(--rand); flex-shrink: 0; z-index: 40; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--tekst); } .logo:hover { text-decoration: none; } .logo-merk { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; } .topbar .menu-knop { display: none; } .zoek-trigger { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 560px; margin: 0 auto; height: 36px; padding: 0 12px; border-radius: var(--radius-m); background: var(--invoer-bg); border: 1px solid var(--rand); color: var(--tekst-3); font-size: 13.5px; transition: border-color var(--overgang), background var(--overgang); } .zoek-trigger:hover { border-color: var(--rand-sterk); color: var(--tekst-2); } .zoek-trigger svg { width: 15px; height: 15px; flex-shrink: 0; } .zoek-trigger kbd { margin-left: auto; font-family: var(--font-ui); font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--rand); color: var(--tekst-3); } .topbar-acties { display: flex; align-items: center; gap: 8px; margin-left: auto; } .icoon-knop { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--tekst-2); transition: background var(--overgang), color var(--overgang); } .icoon-knop:hover { background: var(--surface-hover); color: var(--tekst); } .icoon-knop svg { width: 19px; height: 19px; } /* ---------- Avatar ---------- */ .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; user-select: none; } .avatar.klein { width: 28px; height: 28px; font-size: 11px; } .avatar.groot { width: 44px; height: 44px; font-size: 16px; } .avatar-wrap { position: relative; flex-shrink: 0; } .online-stip { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--groen); border: 2.5px solid var(--chat-bg); } /* ---------- Hoofd-layout ---------- */ .layout { display: grid; grid-template-columns: var(--rail-b) var(--sidebar-b) minmax(0, 1fr) var(--paneel-b); flex: 1; min-height: 0; } /* ---------- Rail (groepsiconen) ---------- */ .rail { background: var(--rail-bg); padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow-y: auto; border-right: 1px solid var(--rand); } .rail-knop { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; font-size: 19px; font-weight: 700; background: var(--surface); color: var(--tekst-2); border: 1px solid var(--rand); transition: border-radius var(--overgang), background var(--overgang), color var(--overgang), border-color var(--overgang); } .rail-knop:hover { border-radius: 13px; color: var(--tekst); } .rail-knop.actief { border-radius: 13px; background: var(--groep-kleur, var(--accent)); border-color: transparent; color: var(--groep-tekst, var(--accent-contrast)); } .rail-knop.actief::before { content: ''; position: absolute; left: -13px; width: 4px; height: 26px; border-radius: 0 4px 4px 0; background: var(--tekst); } .rail-knop .notif { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rood); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; } .rail-scheiding { width: 30px; height: 1px; background: var(--rand-sterk); margin: 3px 0; flex-shrink: 0; } .rail-knop.rail-home svg { width: 21px; height: 21px; } .rail-knop.rail-plus { font-size: 22px; font-weight: 400; color: var(--accent-tekst); } .rail-knop.rail-plus:hover { background: var(--accent); color: var(--accent-contrast); } /* ---------- Sidebar (kanalen / navigatie) ---------- */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--rand); display: flex; flex-direction: column; min-height: 0; } .sidebar-kop { padding: 16px 16px 12px; border-bottom: 1px solid var(--rand); } .sidebar-kop h2 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; } .sidebar-kop .sub { font-size: 12.5px; color: var(--tekst-3); margin-top: 3px; } .sidebar-body { flex: 1; overflow-y: auto; padding: 10px 8px 16px; } .sidebar-sectie { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-3); padding: 12px 10px 5px; } .kanaal-knop, .nav-knop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: var(--radius-s); color: var(--tekst-2); font-size: 14.5px; font-weight: 500; text-align: left; transition: background var(--overgang), color var(--overgang); } .kanaal-knop:hover, .nav-knop:hover { background: var(--surface-hover); color: var(--tekst); } .kanaal-knop.actief, .nav-knop.actief { background: var(--accent-zacht); color: var(--accent-tekst); font-weight: 600; } .kanaal-knop .hekje { color: var(--tekst-3); font-weight: 400; } .kanaal-knop.actief .hekje { color: var(--accent-tekst); } .nav-knop svg { width: 17px; height: 17px; flex-shrink: 0; } .sidebar-voet { padding: 10px; border-top: 1px solid var(--rand); display: flex; align-items: center; gap: 10px; } .sidebar-voet .naam { font-size: 13.5px; font-weight: 600; line-height: 1.2; } .sidebar-voet .rol { font-size: 11.5px; color: var(--tekst-3); line-height: 1.3; } .sidebar-voet .info { min-width: 0; flex: 1; } .sidebar-voet .info > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Hoofdgedeelte ---------- */ .hoofd { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-bg); } .hoofd-kop { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 52px; border-bottom: 1px solid var(--rand); flex-shrink: 0; } .hoofd-kop h1 { font-size: 15.5px; display: flex; align-items: center; gap: 7px; min-width: 0; } .hoofd-kop h1 .hekje { color: var(--tekst-3); font-weight: 500; } .hoofd-kop .kanaal-info { font-size: 13px; color: var(--tekst-3); border-left: 1px solid var(--rand); padding-left: 12px; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .hoofd-kop .rechts { margin-left: auto; display: flex; gap: 4px; } /* ---------- Berichtenstroom ---------- */ .berichten { flex: 1; overflow-y: auto; padding: 20px 18px 10px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; } .kanaal-intro { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--rand); } .kanaal-intro .intro-icoon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 10px; } .kanaal-intro h3 { font-size: 20px; } .kanaal-intro p { color: var(--tekst-2); font-size: 14px; margin-top: 4px; } .dag-scheiding { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; color: var(--tekst-3); font-size: 11.5px; font-weight: 600; } .dag-scheiding::before, .dag-scheiding::after { content: ''; flex: 1; height: 1px; background: var(--rand); } .bericht { display: flex; align-items: flex-start; gap: 13px; padding: 7px 10px; margin: 1px -10px; border-radius: var(--radius-m); position: relative; } .bericht:hover { background: var(--surface-hover); } .bericht.uitgelicht { animation: uitlichten 2.2s ease-out; } @keyframes uitlichten { 0%, 55% { background: var(--accent-zacht); box-shadow: inset 0 0 0 1px var(--accent); } 100% { background: transparent; box-shadow: none; } } .bericht-body { min-width: 0; flex: 1; } .bericht-kop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .bericht-kop .naam { font-weight: 650; font-size: 14.5px; cursor: pointer; } .bericht-kop .naam:hover { text-decoration: underline; } .bericht-kop .rol-label { font-size: 10.5px; font-weight: 600; padding: 1.5px 7px; border-radius: 20px; background: var(--accent-zacht); color: var(--accent-tekst); } .bericht-kop .tijd { font-size: 11.5px; color: var(--tekst-3); } .bericht-tekst { margin-top: 2px; word-wrap: break-word; color: var(--tekst); } .bericht-tekst p + p { margin-top: 6px; } .bericht-tekst code:not(.hljs) { font-family: var(--font-mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--rand); border-radius: 5px; padding: 1.5px 5px; } .bericht-tekst ol, .bericht-tekst ul { margin: 6px 0 0; padding-left: 22px; } .bericht-tekst li { margin-top: 3px; } /* Bericht-acties (verschijnen bij hover) */ .bericht-acties { position: absolute; top: -14px; right: 10px; display: none; gap: 2px; background: var(--surface); border: 1px solid var(--rand); border-radius: 10px; padding: 3px; box-shadow: var(--schaduw-1); } .bericht:hover .bericht-acties, .bericht:focus-within .bericht-acties { display: flex; } .bericht-acties button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; font-size: 14px; color: var(--tekst-2); } .bericht-acties button:hover { background: var(--surface-hover); color: var(--tekst); } .bericht-acties button.actief { color: var(--accent-tekst); } .bericht-acties svg { width: 16px; height: 16px; } /* Reacties */ .reacties { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .reactie { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 9px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--rand); font-size: 12.5px; font-weight: 600; color: var(--tekst-2); transition: border-color var(--overgang), background var(--overgang); } .reactie:hover { border-color: var(--accent); } .reactie.eigen { background: var(--accent-zacht); border-color: var(--accent); color: var(--accent-tekst); } /* ---------- Codeblokken ---------- */ .codeblok { margin-top: 8px; border: 1px solid var(--code-rand); border-radius: var(--radius-m); overflow: hidden; background: var(--code-bg); max-width: 780px; } .codeblok-kop { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--code-kop-bg); border-bottom: 1px solid var(--code-rand); font-family: var(--font-mono); font-size: 11.5px; color: var(--tekst-3); } .codeblok-kop .taal { font-weight: 600; text-transform: lowercase; } .kopieer-knop { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--tekst-2); transition: background var(--overgang), color var(--overgang); } .kopieer-knop:hover { background: var(--surface-hover); color: var(--tekst); } .kopieer-knop.gekopieerd { color: var(--groen); } .kopieer-knop svg { width: 13px; height: 13px; } .codeblok pre { margin: 0; padding: 13px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; tab-size: 4; } .codeblok code.hljs { background: transparent; padding: 0; display: block; } /* Syntax-kleuren */ .hljs { color: var(--tekst); } .hljs-keyword, .hljs-literal, .hljs-selector-tag, .hljs-built_in { color: var(--syn-keyword); } .hljs-string, .hljs-regexp, .hljs-selector-attr { color: var(--syn-string); } .hljs-number, .hljs-symbol { color: var(--syn-number); } .hljs-comment, .hljs-quote, .hljs-meta { color: var(--syn-comment); font-style: italic; } .hljs-title, .hljs-title.function_, .hljs-selector-id { color: var(--syn-func); } .hljs-title.class_, .hljs-type, .hljs-selector-class, .hljs-section { color: var(--syn-type); } .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-params { color: var(--syn-attr); } /* ---------- Formules (KaTeX) ---------- */ .formule-blok { margin-top: 8px; padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--rand); border-radius: var(--radius-m); overflow-x: auto; max-width: 780px; } .katex { font-size: 1.08em; } .formule-blok .katex-display { margin: 0; } .formule-fout { font-family: var(--font-mono); font-size: 13px; color: var(--rood); } /* ---------- Invoerbalk (composer) ---------- */ .composer { padding: 6px 18px 16px; flex-shrink: 0; } .composer-binnen { background: var(--invoer-bg); border: 1px solid var(--rand); border-radius: var(--radius-l); transition: border-color var(--overgang), box-shadow var(--overgang); } .composer-binnen:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); } .composer textarea { display: block; width: 100%; min-height: 44px; max-height: 200px; padding: 12px 16px 4px; background: transparent; border: none; resize: none; outline: none; line-height: 1.5; } .composer textarea::placeholder { color: var(--tekst-3); } .composer-acties { display: flex; align-items: center; gap: 3px; padding: 4px 8px 7px; } .composer-hulp { margin-left: auto; font-size: 11px; color: var(--tekst-3); padding-right: 6px; } .verstuur-knop { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); transition: opacity var(--overgang), transform var(--overgang); } .verstuur-knop:disabled { opacity: .35; cursor: default; } .verstuur-knop:not(:disabled):hover { transform: scale(1.06); } .verstuur-knop svg { width: 16px; height: 16px; } /* ---------- Rechterpaneel ---------- */ .paneel { background: var(--paneel-bg); border-left: 1px solid var(--rand); overflow-y: auto; padding: 16px 14px 24px; min-height: 0; } .paneel-sectie + .paneel-sectie { margin-top: 22px; } .paneel-sectie > h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-3); padding: 0 6px 8px; } .lid-rij { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: var(--radius-s); text-align: left; transition: background var(--overgang); } .lid-rij:hover { background: var(--surface-hover); } .lid-rij .info { min-width: 0; flex: 1; } .lid-rij .naam { font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lid-rij .rol { font-size: 11.5px; color: var(--tekst-3); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lid-rij.offline { opacity: .55; } .match-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: var(--accent-zacht); color: var(--accent-tekst); } /* ---------- Kaarten (home / ontdek) ---------- */ .paginabody { flex: 1; overflow-y: auto; padding: 26px clamp(18px, 4vw, 44px) 48px; } .pagina-binnen { max-width: 1060px; margin: 0 auto; } .hero { margin-bottom: 26px; } .hero h1 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -0.025em; } .hero .sub { color: var(--tekst-2); margin-top: 6px; font-size: 15px; max-width: 60ch; } .sectie-kop { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 13px; } .sectie-kop h2 { font-size: 17px; } .sectie-kop .sectie-sub { font-size: 13px; color: var(--tekst-3); } .sectie-kop .sectie-actie { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent-tekst); white-space: nowrap; } .sectie-kop .sectie-actie:hover { text-decoration: underline; } .kaarten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .groep-kaart { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius-l); text-align: left; transition: border-color var(--overgang), transform var(--overgang), box-shadow var(--overgang); cursor: pointer; } .groep-kaart:hover { border-color: var(--groep-kleur, var(--accent)); transform: translateY(-2px); box-shadow: var(--schaduw-1); } .groep-kaart .kaart-kop { display: flex; align-items: center; gap: 12px; } .groep-kaart .groep-icoon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; font-weight: 700; color: #fff; flex-shrink: 0; } .groep-kaart h3 { font-size: 15.5px; overflow-wrap: anywhere; } .groep-kaart .leden-aantal { font-size: 12px; color: var(--tekst-3); margin-top: 1px; } .groep-kaart .beschrijving { font-size: 13.5px; color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .groep-kaart .kaart-voet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; } .tag-chip { font-size: 11px; font-weight: 600; padding: 2.5px 9px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--rand); color: var(--tekst-2); white-space: nowrap; } .tag-chip.match { background: var(--accent-zacht); border-color: transparent; color: var(--accent-tekst); } /* Post-kaarten (trending) */ .post-kaart { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius-l); text-align: left; cursor: pointer; transition: border-color var(--overgang), box-shadow var(--overgang); } .post-kaart:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw-1); } .post-kaart .post-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tekst-3); flex-wrap: wrap; } .post-kaart .kanaal-badge { font-weight: 600; padding: 2px 8px; border-radius: 6px; color: #fff; font-size: 11px; } .post-kaart .post-tekst { font-size: 13.5px; color: var(--tekst-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-kaart .post-voet { display: flex; gap: 10px; font-size: 12px; color: var(--tekst-3); } /* Mensen-kaarten */ .persoon-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 16px; background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius-l); text-align: left; cursor: pointer; transition: border-color var(--overgang), box-shadow var(--overgang); } .persoon-kaart:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw-1); } .persoon-kaart .p-kop { display: flex; align-items: center; gap: 11px; width: 100%; } .persoon-kaart h3 { font-size: 14.5px; } .persoon-kaart .rol { font-size: 12px; color: var(--tekst-3); } .persoon-kaart .p-tags { display: flex; flex-wrap: wrap; gap: 5px; } /* Interesse-chips (onboarding & home) */ .chips-rij { display: flex; flex-wrap: wrap; gap: 8px; } .keuze-chip { padding: 7px 15px; border-radius: 24px; border: 1.5px solid var(--rand-sterk); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--tekst-2); transition: all var(--overgang); } .keuze-chip:hover { border-color: var(--accent); color: var(--accent-tekst); } .keuze-chip.gekozen { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* Lege staat */ .leeg-staat { text-align: center; padding: 44px 20px; color: var(--tekst-3); } .leeg-staat .emoji { font-size: 34px; margin-bottom: 10px; } .leeg-staat h3 { color: var(--tekst-2); font-size: 16px; } .leeg-staat p { font-size: 13.5px; margin-top: 5px; } /* ---------- Knoppen ---------- */ .knop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius-m); font-size: 14px; font-weight: 600; transition: all var(--overgang); white-space: nowrap; } .knop.primair { background: var(--accent); color: var(--accent-contrast); } .knop.primair:hover { filter: brightness(1.08); } .knop.secundair { background: var(--surface-2); color: var(--tekst); border: 1px solid var(--rand); } .knop.secundair:hover { border-color: var(--rand-sterk); } .knop.spook { color: var(--tekst-2); } .knop.spook:hover { background: var(--surface-hover); color: var(--tekst); } .knop.klein { padding: 6px 13px; font-size: 13px; border-radius: 9px; } .knop:disabled { opacity: .45; cursor: default; } .knop svg { width: 15px; height: 15px; } /* ---------- Zoek-overlay ---------- */ .overlay { position: fixed; inset: 0; background: rgba(9, 10, 18, .55); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: min(12vh, 110px) 16px 16px; z-index: 100; animation: overlay-in 140ms ease-out; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } .zoek-venster { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius-l); box-shadow: var(--schaduw-2); overflow: hidden; display: flex; flex-direction: column; max-height: min(65vh, 560px); animation: venster-in 160ms cubic-bezier(.3, 1.2, .5, 1); } @keyframes venster-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } } .zoek-invoer-rij { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--rand); } .zoek-invoer-rij svg { width: 18px; height: 18px; color: var(--tekst-3); flex-shrink: 0; } .zoek-invoer-rij input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; } .zoek-invoer-rij input::placeholder { color: var(--tekst-3); } .zoek-invoer-rij kbd { font-family: var(--font-ui); font-size: 11px; padding: 3px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--rand); color: var(--tekst-3); } .zoek-resultaten { overflow-y: auto; padding: 8px; } .zoek-groep-titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-3); padding: 12px 12px 5px; } .zoek-resultaat { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: var(--radius-m); text-align: left; } .zoek-resultaat:hover, .zoek-resultaat.gefocust { background: var(--surface-hover); } .zoek-resultaat .zr-icoon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0; } .zoek-resultaat .zr-info { min-width: 0; flex: 1; } .zoek-resultaat .zr-titel { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zoek-resultaat .zr-sub { font-size: 12px; color: var(--tekst-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zoek-resultaat .zr-titel mark, .zoek-resultaat .zr-sub mark { background: var(--accent-zacht); color: var(--accent-tekst); border-radius: 3px; padding: 0 1px; } .zoek-voet { padding: 9px 16px; border-top: 1px solid var(--rand); font-size: 11.5px; color: var(--tekst-3); display: flex; gap: 14px; } .zoek-voet kbd { font-family: var(--font-ui); font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--rand); } /* ---------- Modals ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(9, 10, 18, .55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px; z-index: 110; animation: overlay-in 140ms ease-out; overflow-y: auto; } .modal { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--rand); border-radius: 20px; box-shadow: var(--schaduw-2); padding: 26px; animation: venster-in 180ms cubic-bezier(.3, 1.2, .5, 1); max-height: calc(100dvh - 36px); overflow-y: auto; } .modal.breed { max-width: 600px; } .modal-kop { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .modal-kop h2 { font-size: 19px; flex: 1; } .modal-kop .sluit-knop { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--tekst-3); flex-shrink: 0; } .modal-kop .sluit-knop:hover { background: var(--surface-hover); color: var(--tekst); } .modal .modal-sub { color: var(--tekst-2); font-size: 14px; margin-bottom: 18px; } .veld { margin-bottom: 16px; } .veld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tekst-2); } .veld input[type='text'], .veld textarea, .veld select { width: 100%; padding: 10px 13px; border-radius: var(--radius-m); border: 1px solid var(--rand-sterk); background: var(--invoer-bg); outline: none; transition: border-color var(--overgang), box-shadow var(--overgang); } .veld input:focus, .veld textarea:focus, .veld select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-zacht); } .veld textarea { resize: vertical; min-height: 70px; } .veld .hint { font-size: 12px; color: var(--tekst-3); margin-top: 5px; } .modal-acties { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .kleur-keuze { display: flex; gap: 9px; flex-wrap: wrap; } .kleur-stip { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; transition: transform var(--overgang); } .kleur-stip:hover { transform: scale(1.12); } .kleur-stip.gekozen { border-color: var(--tekst); } /* Profiel-modal */ .profiel-kop { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; } .profiel-kop .info h2 { font-size: 19px; } .profiel-kop .handle { color: var(--tekst-3); font-size: 13px; } .profiel-rol { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 20px; background: var(--accent-zacht); color: var(--accent-tekst); margin-top: 5px; } .profiel-bio { color: var(--tekst-2); font-size: 14px; margin: 12px 0 16px; } .profiel-sectie h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-3); margin-bottom: 8px; } .profiel-sectie + .profiel-sectie { margin-top: 16px; } /* ---------- Toasts ---------- */ .toast-houder { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; } .toast { background: var(--tekst); color: var(--bg); padding: 10px 18px; border-radius: var(--radius-m); font-size: 13.5px; font-weight: 600; box-shadow: var(--schaduw-2); animation: toast-in 200ms cubic-bezier(.3, 1.2, .5, 1); max-width: min(420px, calc(100vw - 40px)); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .toast.weg { opacity: 0; transform: translateY(8px); transition: all 250ms ease; } /* ---------- Mobiele navigatie ---------- */ .mobiele-nav { display: none; background: var(--rail-bg); border-top: 1px solid var(--rand); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); flex-shrink: 0; z-index: 40; } .mobiele-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px; font-size: 10.5px; font-weight: 600; color: var(--tekst-3); } .mobiele-nav button.actief { color: var(--accent-tekst); } .mobiele-nav button svg { width: 21px; height: 21px; } /* Drawer-gedrag op mobiel */ .drawer-schaduw { display: none; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(9, 10, 18, .45); z-index: 48; animation: overlay-in 140ms ease-out; } /* ============================================================ Responsief ============================================================ */ .topbar #zoek-knop-mobiel { display: none; } @media (max-width: 1150px) { .layout { grid-template-columns: var(--rail-b) var(--sidebar-b) minmax(0, 1fr); } .paneel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(var(--paneel-b), 88vw); transform: translateX(105%); transition: transform 220ms cubic-bezier(.4, 0, .2, 1); z-index: 50; box-shadow: none; } .paneel.open { transform: none; box-shadow: var(--schaduw-2); } .drawer-schaduw.paneel-open { display: block; } } @media (max-width: 840px) { .layout { grid-template-columns: minmax(0, 1fr); } .rail, .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; z-index: 52; transform: translateX(-110%); transition: transform 220ms cubic-bezier(.4, 0, .2, 1); } .rail { left: 0; width: var(--rail-b); } .sidebar { left: 0; width: min(84vw, calc(var(--rail-b) + var(--sidebar-b))); padding-left: var(--rail-b); } .app.menu-open .rail, .app.menu-open .sidebar { transform: none; } .app.menu-open .rail { z-index: 53; } .app.menu-open .drawer-schaduw { display: block; } .sidebar { box-shadow: var(--schaduw-2); } .topbar .menu-knop { display: grid; } .topbar #zoek-knop-mobiel { display: grid; } .zoek-trigger { display: none; } .toast-houder { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .mobiele-nav { display: flex; } .topbar { padding: 0 10px; } .berichten { padding: 16px 12px 8px; } .composer { padding: 4px 10px 10px; } .hoofd-kop { padding: 0 12px; } .hoofd-kop .kanaal-info { display: none; } .paginabody { padding: 20px 16px 40px; } .bericht { gap: 10px; } .bericht .avatar { width: 32px; height: 32px; font-size: 12px; } .modal { padding: 20px; border-radius: 16px; } } @media (max-width: 480px) { .kaarten-grid { grid-template-columns: 1fr; } .topbar-acties .avatar { width: 32px; height: 32px; } .hero h1 { font-size: 21px; } } /* ---------- Onboarding ---------- */ .onboarding-logo { width: 58px; height: 58px; border-radius: 17px; margin-bottom: 14px; } .onboarding-stap-titel { font-size: 21px; margin-bottom: 4px; } .veld-rij { display: flex; gap: 12px; flex-wrap: wrap; } .veld-rij .veld { min-width: 140px; } .akkoord-rij { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 2px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--surface-2); font-size: 13px; color: var(--tekst-2); line-height: 1.5; cursor: pointer; } .akkoord-rij input { margin: 2px 0 0; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } .akkoord-rij a { font-weight: 600; } /* ---------- Upvotes (Reddit-style) ---------- */ .stem { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 20px; border: 1px solid var(--rand); background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--tekst-2); transition: border-color var(--overgang), color var(--overgang), background var(--overgang); } .stem svg { width: 12px; height: 12px; } .stem:hover { border-color: var(--accent); color: var(--accent-tekst); } .stem.actief { background: var(--accent-zacht); border-color: var(--accent); color: var(--accent-tekst); } .stem.statisch { pointer-events: none; } /* ---------- Code attachments (snippet cards + side panel) ---------- */ .snippet-kaart { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; margin-top: 8px; padding: 11px 14px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--surface-2); text-align: left; transition: border-color var(--overgang), background var(--overgang); } .snippet-kaart:hover { border-color: var(--accent); background: var(--surface); } .snippet-icoon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-zacht); color: var(--accent-tekst); flex-shrink: 0; } .snippet-icoon svg { width: 19px; height: 19px; } .snippet-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .snippet-naam { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snippet-meta { font-size: 11.5px; color: var(--tekst-3); } .snippet-open { font-size: 12.5px; font-weight: 600; color: var(--accent-tekst); white-space: nowrap; flex-shrink: 0; } .lade-schaduw { position: fixed; inset: 0; background: rgba(9, 10, 18, .5); backdrop-filter: blur(2px); z-index: 120; animation: overlay-in 140ms ease-out; } .lade { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface); border-left: 1px solid var(--rand); box-shadow: var(--schaduw-2); z-index: 121; display: flex; flex-direction: column; animation: lade-in 220ms cubic-bezier(.3, 1, .4, 1); } @keyframes lade-in { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } } .lade-kop { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rand); flex-shrink: 0; } .lade-titel { min-width: 0; flex: 1; } .lade-titel h2 { font-size: 15.5px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lade-meta { font-size: 12px; color: var(--tekst-3); } .lade-body { flex: 1; overflow-y: auto; padding: 18px; } .lade-body .codeblok { max-width: none; } .lade-uitleg { margin-bottom: 16px; } .lade-uitleg h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-3); margin-bottom: 6px; } .lade-uitleg .bericht-tekst { color: var(--tekst-2); font-size: 14px; } .lade-voet { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rand); flex-shrink: 0; } /* ---------- Experts & services ---------- */ .tarief-badge { flex-shrink: 0; margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--rand-sterk); color: var(--tekst-2); white-space: nowrap; } .tarief-badge.gratis { background: rgba(22, 163, 74, .12); border-color: transparent; color: var(--groen); } .dienst-rij { padding: 11px 13px; border: 1px solid var(--rand); border-radius: var(--radius-m); background: var(--surface-2); } .dienst-rij + .dienst-rij { margin-top: 8px; } .dienst-rij .dienst-kop { display: flex; align-items: center; gap: 10px; font-size: 14px; } .dienst-rij p { font-size: 13px; color: var(--tekst-2); margin-top: 3px; } /* ---------- Education list (profile) ---------- */ .opleiding-lijst { list-style: none; margin: 0; padding: 0; } .opleiding-lijst li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--rand); font-size: 14px; } .opleiding-lijst li:last-child { border-bottom: none; } .opleiding-lijst li span { font-size: 12.5px; color: var(--tekst-3); } /* ---------- Language menu ---------- */ .taal-menu { position: fixed; top: calc(var(--topbar-h) + 4px); right: 60px; min-width: 170px; background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius-m); box-shadow: var(--schaduw-2); padding: 5px; z-index: 130; animation: venster-in 140ms cubic-bezier(.3, 1.2, .5, 1); } .taal-optie { display: block; width: 100%; padding: 8px 12px; border-radius: 8px; text-align: left; font-size: 14px; font-weight: 500; color: var(--tekst-2); } .taal-optie:hover { background: var(--surface-hover); color: var(--tekst); } .taal-optie.actief { color: var(--accent-tekst); font-weight: 600; } @media (max-width: 840px) { .taal-menu { right: 12px; } }