source: Klonkt/src/assets/css/style.css@ 2900f1d

main
Last change on this file since 2900f1d was 2900f1d, checked in by roboburr <roboburr@…>, 3 months ago

fix: button text unreadable on hover (a:hover overrode accent button text color)

The global a:hover{color:var(--accent)} flipped the text color of every accent
button that is an <a> to the accent color → text = button background = unreadable
(noticeable on sites with a vivid accent, e.g. sound-fabrics #ef2840). Override
added: button anchors keep their own text color on hover (.btn/.epk-btn = ink;
primary/danger/success/feature = white). style.css cache-buster v9->v10.

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 127.3 KB
RevLine 
[7bc636b]1/* ============================================================
2 LOKALE FONTS — SIL OFL 1.1 licensed, self-hosted
3 Geen third-party requests, geen privacy-leak naar Google.
4 Variable WOFF2 bestanden onder /assets/fonts/
5 Licenses in /assets/fonts/licenses/
6 ============================================================ */
7@font-face {
8 font-family: 'Fraunces';
9 font-style: normal;
10 font-display: swap;
11 font-weight: 100 900;
12 src: url('/assets/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
13 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
14}
15@font-face {
16 font-family: 'Fraunces';
17 font-style: italic;
18 font-display: swap;
19 font-weight: 100 900;
20 src: url('/assets/fonts/fraunces-latin-full-italic.woff2') format('woff2-variations');
21 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
22}
23@font-face {
24 font-family: 'Literata';
25 font-style: normal;
26 font-display: swap;
27 font-weight: 400 700;
28 src: url('/assets/fonts/literata-latin-opsz-normal.woff2') format('woff2-variations');
29 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
30}
31@font-face {
32 font-family: 'Literata';
33 font-style: italic;
34 font-display: swap;
35 font-weight: 400 700;
36 src: url('/assets/fonts/literata-latin-opsz-italic.woff2') format('woff2-variations');
37 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
38}
39@font-face {
40 font-family: 'Plus Jakarta Sans';
41 font-style: normal;
42 font-display: swap;
43 font-weight: 400 700;
44 src: url('/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
45 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
46}
47@font-face {
48 font-family: 'Plus Jakarta Sans';
49 font-style: italic;
50 font-display: swap;
51 font-weight: 400 700;
52 src: url('/assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2-variations');
53 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
54}
55
56/* PrutCMS publieke stijl — editorial-ish, geen emoji-UI */
57
58:root {
59 --font-display: 'Fraunces', Georgia, serif;
60 --font-body: 'Literata', Georgia, serif;
61 --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
62 --font-mono: ui-monospace, Menlo, Consolas, monospace;
63 --radius: 8px; --transition: 180ms cubic-bezier(.4,0,.2,1);
64 --safe-top: env(safe-area-inset-top, 0); --safe-bot: env(safe-area-inset-bottom, 0);
65 color-scheme: light dark;
66}
67
68/* ============================================================
69 PALETTES — elk palette definieert alleen bg/tekst/rand shades.
70 --accent wordt LOS ingesteld via de accent-kleur config (inline in template).
71 Palette-selector: <html data-palette="forest"> en optioneel data-theme="dark"|"light".
72 Als geen data-palette = Sage default.
73 ============================================================ */
74
75/* ── SAGE (default) ── warme crème ── */
76:root,
77[data-palette="sage"] {
78 --paper: #faf8f3; --paper-2: #f2ede0;
79 --ink: #1a1a1a; --ink-soft: #3d3833; --ink-muted: #6b6560; --ink-faint: #a8a29e;
80 --rule: #e8e2d5; --rule-2: #d4ccb8;
81}
82@media (prefers-color-scheme: dark) {
83 :root:not([data-theme="light"]):not([data-palette]),
84 [data-palette="sage"]:not([data-theme="light"]) {
85 --paper: #1c1a17; --paper-2: #252220;
86 --ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
87 --rule: #3d3833; --rule-2: #4d4740;
88 }
89}
90[data-theme="dark"]:not([data-palette]),
91[data-theme="dark"][data-palette="sage"] {
92 --paper: #1c1a17; --paper-2: #252220;
93 --ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
94 --rule: #3d3833; --rule-2: #4d4740;
95}
96
97/* ── PAPER ── minimalistisch wit → zwart ── */
98[data-palette="paper"] {
99 --paper: #ffffff; --paper-2: #f4f4f5;
100 --ink: #09090b; --ink-soft: #27272a; --ink-muted: #52525b; --ink-faint: #a1a1aa;
101 --rule: #e4e4e7; --rule-2: #d4d4d8;
102}
103@media (prefers-color-scheme: dark) {
104 [data-palette="paper"]:not([data-theme="light"]) {
105 --paper: #0a0a0a; --paper-2: #18181b;
106 --ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
107 --rule: #27272a; --rule-2: #3f3f46;
108 }
109}
110[data-theme="dark"][data-palette="paper"] {
111 --paper: #0a0a0a; --paper-2: #18181b;
112 --ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
113 --rule: #27272a; --rule-2: #3f3f46;
114}
115
116/* ── OCEAN ── koel blauw-grijs → diep navy ── */
117[data-palette="ocean"] {
118 --paper: #f0f6fb; --paper-2: #dce9f4;
119 --ink: #0f1e2e; --ink-soft: #1e3a52; --ink-muted: #475569; --ink-faint: #94a3b8;
120 --rule: #c7d9ea; --rule-2: #a8c0d6;
121}
122@media (prefers-color-scheme: dark) {
123 [data-palette="ocean"]:not([data-theme="light"]) {
124 --paper: #0a1929; --paper-2: #152a3f;
125 --ink: #e0f2fe; --ink-soft: #bfdbfe; --ink-muted: #93c5fd; --ink-faint: #64748b;
126 --rule: #1e3a52; --rule-2: #2a4a68;
127 }
128}
129[data-theme="dark"][data-palette="ocean"] {
130 --paper: #0a1929; --paper-2: #152a3f;
131 --ink: #e0f2fe; --ink-soft: #bfdbfe; --ink-muted: #93c5fd; --ink-faint: #64748b;
132 --rule: #1e3a52; --rule-2: #2a4a68;
133}
134
135/* ── FOREST ── olijfgroen → donker bos ── */
136[data-palette="forest"] {
137 --paper: #f2f6ed; --paper-2: #e1ead6;
138 --ink: #1a2e15; --ink-soft: #2d4a26; --ink-muted: #5a6f52; --ink-faint: #8aa080;
139 --rule: #ccddbd; --rule-2: #adc396;
140}
141@media (prefers-color-scheme: dark) {
142 [data-palette="forest"]:not([data-theme="light"]) {
143 --paper: #0d1f12; --paper-2: #1a331e;
144 --ink: #dcf2d0; --ink-soft: #b8d8a8; --ink-muted: #8aad7c; --ink-faint: #5a7a50;
145 --rule: #2d4a30; --rule-2: #3d5e42;
146 }
147}
148[data-theme="dark"][data-palette="forest"] {
149 --paper: #0d1f12; --paper-2: #1a331e;
150 --ink: #dcf2d0; --ink-soft: #b8d8a8; --ink-muted: #8aad7c; --ink-faint: #5a7a50;
151 --rule: #2d4a30; --rule-2: #3d5e42;
152}
153
154/* ── STONE ── beige bruin → koffie ── */
155[data-palette="stone"] {
156 --paper: #f5f0e8; --paper-2: #e7ddce;
157 --ink: #2b2218; --ink-soft: #4a3a2a; --ink-muted: #78614a; --ink-faint: #a8927b;
158 --rule: #d6c6ac; --rule-2: #bda98a;
159}
160@media (prefers-color-scheme: dark) {
161 [data-palette="stone"]:not([data-theme="light"]) {
162 --paper: #1a130b; --paper-2: #2d2416;
163 --ink: #f5e9d5; --ink-soft: #d4c0a3; --ink-muted: #a8927b; --ink-faint: #786452;
164 --rule: #3d2f1e; --rule-2: #534029;
165 }
166}
167[data-theme="dark"][data-palette="stone"] {
168 --paper: #1a130b; --paper-2: #2d2416;
169 --ink: #f5e9d5; --ink-soft: #d4c0a3; --ink-muted: #a8927b; --ink-faint: #786452;
170 --rule: #3d2f1e; --rule-2: #534029;
171}
172
173/* ── MIDNIGHT ── lavendel → donker paars ── */
174[data-palette="midnight"] {
175 --paper: #f3f1f8; --paper-2: #e3ddf0;
176 --ink: #1e1a2e; --ink-soft: #332c4d; --ink-muted: #5e5478; --ink-faint: #9288a8;
177 --rule: #d4cae3; --rule-2: #b8a9cc;
178}
179@media (prefers-color-scheme: dark) {
180 [data-palette="midnight"]:not([data-theme="light"]) {
181 --paper: #0f0a1f; --paper-2: #1c1432;
182 --ink: #e9def7; --ink-soft: #c4b5d9; --ink-muted: #9d88b8; --ink-faint: #6b5a85;
183 --rule: #2d1f4a; --rule-2: #3d2b5e;
184 }
185}
186[data-theme="dark"][data-palette="midnight"] {
187 --paper: #0f0a1f; --paper-2: #1c1432;
188 --ink: #e9def7; --ink-soft: #c4b5d9; --ink-muted: #9d88b8; --ink-faint: #6b5a85;
189 --rule: #2d1f4a; --rule-2: #3d2b5e;
190}
191
192/* ── SUNSET ── roze crème → diep paars-roze ── */
193[data-palette="sunset"] {
194 --paper: #fdf4f3; --paper-2: #f7e1dc;
195 --ink: #2e1618; --ink-soft: #4d282b; --ink-muted: #7a4a4e; --ink-faint: #b08589;
196 --rule: #ebcac3; --rule-2: #d9a8a0;
197}
198@media (prefers-color-scheme: dark) {
199 [data-palette="sunset"]:not([data-theme="light"]) {
200 --paper: #1f0a14; --paper-2: #321525;
201 --ink: #fce7f3; --ink-soft: #f0c5d3; --ink-muted: #c896a8; --ink-faint: #8a6878;
202 --rule: #4a1f35; --rule-2: #5e2d43;
203 }
204}
205[data-theme="dark"][data-palette="sunset"] {
206 --paper: #1f0a14; --paper-2: #321525;
207 --ink: #fce7f3; --ink-soft: #f0c5d3; --ink-muted: #c896a8; --ink-faint: #8a6878;
208 --rule: #4a1f35; --rule-2: #5e2d43;
209}
210
211/* ── CREAM ── warm papier → caramel-donker ── */
212[data-palette="cream"] {
213 --paper: #fefaf0; --paper-2: #f5ebd5;
214 --ink: #2a1f0f; --ink-soft: #4a3820; --ink-muted: #786140; --ink-faint: #ad9068;
215 --rule: #e8d9b0; --rule-2: #d1bc8a;
216}
217@media (prefers-color-scheme: dark) {
218 [data-palette="cream"]:not([data-theme="light"]) {
219 --paper: #1a1208; --paper-2: #2e2012;
220 --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
221 --rule: #3d2c16; --rule-2: #523d1f;
222 }
223}
224[data-theme="dark"][data-palette="cream"] {
225 --paper: #1a1208; --paper-2: #2e2012;
226 --ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
227 --rule: #3d2c16; --rule-2: #523d1f;
228}
229
230/* Accent-tint wordt berekend uit --accent, zodat hij meegaat bij elke accent-keuze.
231 Wordt in template inline gezet; hier alleen een fallback. */
232:root { --accent: #c2410c; --accent-soft: #ea580c; --accent-tint: #fef2e8; }
233
234* { box-sizing: border-box; }
[c3ad46d]235html {
236 -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
237 overscroll-behavior-y: none;
238 /* Horizontaal clippen op ROOT-niveau: dit propageert naar de viewport (geen
239 horizontale scroll) ZONDER position:fixed te breken — html is sowieso de
240 document-scroller. De body mag GEEN overflow-x krijgen, want dan zou die een
241 tweede scroll-container worden en zou de fixed bottom-tab meeschuiven. */
242 overflow-x: hidden;
243}
[7bc636b]244body {
245 margin: 0;
246}
[93d6345]247
248/* ── Thema-scrollbar: slank, afgerond, subtiel — vervangt de standaard chunky
249 browser-scrollbar (met pijltjes) die niet bij het donkere thema past.
250 Werkt op de pagina én op interne scrollers (queue, chat-thread, dropdowns). ── */
251* {
252 scrollbar-width: thin;
253 scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
254}
255::-webkit-scrollbar { width: 10px; height: 10px; }
256::-webkit-scrollbar-track { background: transparent; }
257::-webkit-scrollbar-thumb {
258 background-color: color-mix(in srgb, var(--ink) 24%, transparent);
259 border-radius: 999px;
260 border: 2px solid transparent; /* transparante rand → optisch slanker (≈6px) */
261 background-clip: content-box;
262}
263::-webkit-scrollbar-thumb:hover {
264 background-color: color-mix(in srgb, var(--accent) 60%, var(--ink));
265}
266::-webkit-scrollbar-corner { background: transparent; }
[441f5d6]267
268/* Login/auth = focus-scherm. Bij htmx-navigatie naar login blijft de bottom-tab
269 uit de vorige pagina in de DOM staan → hier verbergen zodat het login-scherm
270 net zo "kaal" is als bij een full-load (waar de tab niet eens gerenderd wordt). */
271body.on-auth .bottom-tab { display: none; }
[7bc636b]272body:not(.admin) {
273 min-height: 100dvh;
274 background: var(--paper); color: var(--ink);
275 font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
276 font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
277 -webkit-font-smoothing: antialiased;
278 /* v9.4 — Sticky footer: body als flex-kolom, main groeit, footer onderaan */
279 display: flex;
280 flex-direction: column;
281}
282body:not(.admin) #pcms-main { flex: 1 0 auto; }
283body:not(.admin) .site-footer { flex-shrink: 0; }
284body:not(.admin)::before {
285 content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
286 background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 3%, transparent), transparent 60%),
287 radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%);
288}
289::selection { background: var(--accent-tint); color: var(--accent); }
290
291h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 450; line-height: 1.15; letter-spacing: -0.015em; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 144, "SOFT" 50; }
292h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); letter-spacing: -0.022em; }
293h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); margin: 1.5rem 0 .4rem; }
294h3 { font-size: 1.375rem; margin: 1.25rem 0 .3rem; }
295p { margin: 0 0 .85em; text-wrap: pretty; hyphens: auto; }
296a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: color var(--transition), text-decoration-color var(--transition); }
297a:hover { color: var(--accent); text-decoration-color: var(--accent); }
[2900f1d]298/* Knop-ankers houden hun eigen tekstkleur bij hover. Zonder dit overschrijft de
299 globale a:hover{color:accent} de knop-tekst → die wordt dezelfde kleur als de
300 accent-achtergrond en valt weg (vooral op sites met een felle accent). */
301a.btn:hover, a.epk-btn:hover { color: var(--ink); }
302a.btn-primary:hover, a.btn-danger:hover, a.btn-success:hover, a.button:hover,
303a.epk-btn-primary:hover, a.dls-btn:hover, a.sh-tix:hover, a.dl-go:hover { color: #fff; text-decoration-color: currentColor; }
[7bc636b]304a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; text-decoration: none; }
305blockquote { margin: 2em 0; padding: .25em 0 .25em 1.25em; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.15em; color: var(--ink-soft); }
306code { font-family: var(--font-mono); font-size: .9em; padding: .15em .4em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; }
307pre { font-family: var(--font-mono); font-size: .85rem; padding: 1.25em 1.5em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; line-height: 1.5; }
308pre code { padding: 0; background: none; border: none; }
309hr { border: 0; border-top: 1px solid var(--rule); margin: 3em auto; max-width: 4rem; }
310
311/* Container — schaalt mee met schermgrootte.
312 42rem default (optimale leesbreedte voor tekst),
313 breder op HD/2.5K/4K waar je meer ademruimte hebt.
314 Grid-view heeft z'n eigen bredere variant (zie .feed-grid). */
315/* Container max-width schaalt per schermformaat.
316 42rem is optimale leesbreedte voor tekst. Op grotere schermen
317 ademruimte geven zonder uitwaaieren. Grid apart geregeld. */
318.container { max-width: 42rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
319
320/* Laptop / Full HD — 1440px viewport of groter */
321@media (min-width: 1440px) {
322 .container { max-width: 56rem; }
323}
324/* Desktop / QHD 2.5K — 1920px viewport of groter */
325@media (min-width: 1920px) {
326 .container { max-width: 72rem; }
327}
328/* 4K UHD — 2560px viewport of groter */
329@media (min-width: 2560px) {
330 .container { max-width: 88rem; }
331}
332
333/* Grid-view tiles: Instagram-feel. Max-width schaalt met gekozen kolommen zodat
334 tegels niet te groot of te klein worden. */
335@media (min-width: 1200px) {
336 body[data-grid-cols="4"] .feed-grid.container { max-width: 80rem; }
337 body[data-grid-cols="3"] .feed-grid.container { max-width: 64rem; }
338 body[data-grid-cols="2"] .feed-grid.container { max-width: 48rem; }
339}
340@media (min-width: 1920px) {
341 body[data-grid-cols="4"] .feed-grid.container { max-width: 96rem; }
342}
343
344.icon { width: 1.125em; height: 1.125em; flex-shrink: 0; vertical-align: -0.15em; stroke: currentColor; fill: none; display: inline-block; }
345
346/* Masthead */
347.masthead {
348 border-bottom: 1px solid var(--rule);
349 padding: calc(1rem + var(--safe-top)) 0 1rem;
[c2a9522]350 /* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
351 frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
352 dekkend, dus solide bg i.p.v. blur. */
353 background: color-mix(in srgb, var(--paper) 94%, transparent);
[7bc636b]354 position: sticky; top: 0; z-index: 20;
355}
356.masthead-inner { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
357.masthead-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
358.site-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variation-settings: "opsz" 72, "SOFT" 100; letter-spacing: -0.015em; text-decoration: none; color: var(--ink); line-height: 1; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
359.site-title:hover { color: var(--accent); }
360/* v9.0 — nav-home icon (replaces site-title text in nav) */
361.nav-home {
362 display: inline-flex; align-items: center; justify-content: center;
363 width: 2.25rem; height: 2.25rem;
364 color: var(--ink-soft); text-decoration: none;
365 border-radius: 6px; border: 1px solid transparent;
366 transition: all var(--transition);
367}
368.nav-home:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }
369.nav-home .icon { width: 1.15rem; height: 1.15rem; }
370.top-nav { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
371.nav-link, .nav-btn {
372 font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
373 color: var(--ink-soft); text-decoration: none;
374 padding: .5rem .85rem; border-radius: 6px;
375 background: transparent; border: 1px solid transparent;
376 cursor: pointer;
377 display: inline-flex; align-items: center; gap: .4rem;
378 min-height: 2.25rem;
379 transition: all var(--transition);
380}
381.nav-link:hover, .nav-btn:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }
382.nav-link-muted { color: var(--ink-muted); }
383.nav-label { display: none; }
384@media (min-width: 560px) { .nav-label { display: inline; } }
385
386/* Article */
387main { padding-top: 2rem; }
388.page { padding-block: 2rem 3rem; }
389page-container { display: block; font-size: 1.125rem; line-height: 1.75; }
390page-container h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); margin-bottom: 1rem; letter-spacing: -0.025em; }
391page-container img, page-container iframe, page-container video { max-width: 100%; height: auto; display: block; margin: 2rem auto; border-radius: var(--radius); }
392page-container audio { width: 100%; margin: 1.5rem 0; }
393page-container figure { margin: 2rem 0; }
394page-container figcaption { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); text-align: center; margin-top: .5rem; }
395page-container[contenteditable="true"] { outline: 2px dashed var(--accent); outline-offset: .5rem; border-radius: var(--radius); }
396
397.empty { text-align: center; padding: 4rem 1rem; }
398.empty h1 { font-size: 2rem; }
399.empty p { color: var(--ink-muted); }
400
401/* Embeds */
402.pcms-embed, .folio-embed { margin: 2rem 0; }
403.pcms-embed iframe, .folio-embed iframe { width: 100%; display: block; border: 0; border-radius: var(--radius); }
404
405/* Article footer */
406.article-footer { display: flex; justify-content: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--rule); }
407
408/* Buttons */
409.button {
410 font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
411 padding: .6rem 1.1rem; min-height: 2.5rem;
412 display: inline-flex; align-items: center; gap: .5rem;
413 background: var(--ink); color: var(--paper);
414 border: 1px solid var(--ink);
415 border-radius: 6px;
416 text-decoration: none; cursor: pointer;
417 transition: all var(--transition);
418}
419.button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
420.button-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
421.button-ghost:hover { background: var(--paper-2); border-color: var(--accent); color: var(--accent); }
422
423/* Pagination */
424.pagination {
425 display: grid;
426 grid-template-columns: 1fr 1fr;
427 gap: 1rem;
428 padding-block: 2rem 4rem;
429 margin-top: 2rem;
430 border-top: 1px solid var(--rule);
431}
432a.pagination-item {
433 display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
434 border: 2px solid var(--rule-2, var(--rule));
435 border-radius: var(--radius);
436 text-decoration: none; transition: all .15s ease; font-size: .9rem;
437 background: var(--paper-2);
438 min-height: 5rem;
439 min-width: 0;
440 overflow: hidden;
441 cursor: pointer;
442 box-shadow: 0 1px 0 rgba(0,0,0,.02);
443 -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 30%, transparent);
444 position: relative;
445}
446.pagination-item:not(a) {
447 display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
448 border: 1px dashed var(--rule); border-radius: var(--radius);
449 font-size: .9rem; background: transparent; min-height: 5rem;
450 min-width: 0; overflow: hidden;
451}
452.pagination-next { flex-direction: row-reverse; text-align: right; }
453a.pagination-item:hover {
454 border-color: var(--accent);
455 background: color-mix(in srgb, var(--accent) 5%, var(--paper-2));
456 transform: translateY(-2px);
457 box-shadow: 0 4px 12px rgba(0,0,0,.08);
458}
459a.pagination-item:active {
460 transform: translateY(0);
461 transition-duration: .05s;
462}
463.pagination-disabled { opacity: .5; cursor: default; font-style: italic; }
464.pagination-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
465.pagination-label {
466 display: block; font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
467 letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
468 margin-bottom: .15rem;
469}
470.pagination-slug {
471 display: block; font-size: .72rem; color: var(--ink-muted);
472 opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
473 font-style: italic;
474}
475.pagination-title {
476 display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink);
477 font-variation-settings: "opsz" 72; font-style: normal;
478 line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
479 font-size: 1.05rem;
480 text-decoration: underline;
481 text-decoration-color: var(--rule-2, var(--rule));
482 text-decoration-thickness: 1px;
483 text-underline-offset: 3px;
484 transition: text-decoration-color .15s;
485}
486a.pagination-item:hover .pagination-title {
487 text-decoration-color: var(--accent);
488}
489.pagination .icon {
490 width: 1.75em; height: 1.75em; flex-shrink: 0;
491 color: var(--accent);
492 transition: transform .15s;
493}
494a.pagination-prev:hover .icon { transform: translateX(-4px); }
495a.pagination-next:hover .icon { transform: translateX(4px); }
496
497/* Pinned-targets → accent-tint en dikkere rand voor duidelijkheid */
498.pagination-item.is-pinned {
499 background: color-mix(in srgb, var(--accent) 8%, var(--paper-2));
500 border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
501}
502a.pagination-item.is-pinned:hover {
503 background: color-mix(in srgb, var(--accent) 15%, var(--paper-2));
504 border-color: var(--accent);
505}
506
507@media (max-width: 800px) { .pagination { grid-template-columns: 1fr; } }
508
509/* Footer */
510.site-footer { padding: 2rem 0 calc(2rem + var(--safe-bot)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
511.site-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; }
512.site-footer a { color: var(--ink-muted); text-decoration-color: var(--rule); }
513.site-footer a:hover { color: var(--accent); }
514.site-footer-links { display: flex; gap: 1rem; }
515.sep { color: var(--ink-faint); margin: 0 .5rem; }
516.footer-tagline { font-style: italic; opacity: .8; }
517
518@media print {
519 .masthead, .pagination, .site-footer, .article-footer, .top-nav { display: none; }
520 body { background: #fff; color: #000; }
521}
522@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
523
524/* ============================================================
525 V7 ADDITIONS — post metadata UI + audio player + post-images
526 ============================================================ */
527
528/* Post header */
529.post-header { margin: 0 0 2rem; }
530.post-cover {
531 margin: 0 0 1.5rem;
532 border-radius: 8px;
533 overflow: hidden;
534 background: color-mix(in srgb, var(--fg) 4%, transparent);
535}
536.post-cover img {
537 display: block;
538 width: 100%;
539 height: auto;
540 max-height: 50vh;
541 object-fit: cover;
542}
543.post-title { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.02em; }
544
545/* Pin banner — duidelijk zichtbaar dat een post gepind is */
546.post-pin-banner {
547 display: inline-flex;
548 align-items: center;
549 gap: .5rem;
550 background: color-mix(in srgb, var(--accent) 14%, transparent);
551 border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
552 color: var(--accent);
553 padding: .4rem .8rem;
554 border-radius: 999px;
555 font-size: .75rem;
556 font-weight: 600;
557 text-transform: uppercase;
558 letter-spacing: .08em;
559 margin: 0 0 .85rem;
560 line-height: 1;
561}
562.post-pin-banner-icon { font-size: 1rem; line-height: 1; }
563.post-pin-banner-sep { opacity: .5; }
564.post-pin-banner-pos { opacity: .85; }
565.post-date {
566 color: var(--fg-muted, #888);
567 font-size: .85rem;
568 letter-spacing: .05em;
569 text-transform: uppercase;
570 margin: 0 0 1.5rem;
571}
572
573/* Post-images in content (resize + align) */
574.post-image {
575 margin: 1.5rem 0;
576}
577.post-image img {
578 display: block;
579 height: auto;
580 border-radius: 6px;
581 max-width: 100%;
582}
583.post-image figcaption {
584 font-size: .85rem;
585 color: var(--fg-muted, #888);
586 margin-top: .5rem;
587 font-style: italic;
588 text-align: center;
589}
590.post-image--small img { max-width: 240px; }
591.post-image--medium img { max-width: 440px; }
592.post-image--large img { max-width: 720px; }
593.post-image--full img { width: 100%; max-width: 100%; }
594.post-image--left { text-align: left; }
595.post-image--left img { margin-left: 0; margin-right: auto; }
596.post-image--center { text-align: center; }
597.post-image--center img { margin-left: auto; margin-right: auto; }
598.post-image--right { text-align: right; }
599.post-image--right img { margin-left: auto; margin-right: 0; }
600
601/* Mini-player + bottom-tab clearance: applied to .pcms-main so the footer
602 is NOT pushed below the viewport bottom. The bars are position:fixed so
603 they overlap whatever they sit on top of; the padding ensures the last
604 content row isn't covered. Footer naturally follows main and now sits
605 exactly at viewport-bottom on short pages (sticky footer flex). */
606.pcms-main { padding-bottom: 5.5rem; }
607body.has-audio-player .pcms-main { padding-bottom: 5.5rem; }
608
609/* ============================================================
610 AUDIO PLAYER v7.1 — SVG iconen, thema-aware, geen emoji
611 ============================================================ */
612.audio-player {
613 position: fixed;
614 left: 0; right: 0; bottom: 0;
615 background: color-mix(in srgb, var(--paper, #fff) 96%, var(--ink, #000));
616 border-top: 1px solid var(--rule, rgba(0,0,0,.1));
617 color: var(--ink, #222);
618 z-index: 1000;
619 backdrop-filter: blur(12px);
620 -webkit-backdrop-filter: blur(12px);
621 box-shadow: 0 -4px 20px rgba(0,0,0,.04);
622}
623[data-theme="dark"] .audio-player {
624 background: color-mix(in srgb, var(--paper, #1a1a1a) 92%, #fff);
625 box-shadow: 0 -4px 20px rgba(0,0,0,.3);
626}
627.audio-player-inner {
628 display: grid;
629 grid-template-columns: minmax(0, 1.6fr) auto minmax(180px, 2fr) auto;
630 gap: 1rem;
631 align-items: center;
632 padding: .65rem 1.25rem;
633 max-width: 1400px;
634 margin: 0 auto;
635}
636
637/* v9.0 — Clickable trigger dat cover + meta combineert zodat klikken erop sheet opent */
638.audio-player-expand-trigger {
639 display: flex;
640 align-items: center;
641 gap: .65rem;
642 min-width: 0;
643 background: none;
644 border: none;
645 padding: 0;
646 margin: 0;
647 cursor: pointer;
648 color: inherit;
649 text-align: left;
650 font: inherit;
651 border-radius: 6px;
652 transition: background .15s;
653}
654.audio-player-expand-trigger:hover {
655 background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
656}
657
658/* Cover art */
659.audio-player-cover {
660 width: 48px; height: 48px;
661 border-radius: 4px;
662 background: linear-gradient(135deg,
663 var(--accent, #c2410c),
664 color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
665 background-size: cover;
666 background-position: center;
667 flex-shrink: 0;
668 position: relative;
669}
670.audio-player-cover.has-image {
671 background-blend-mode: normal;
672}
673
674/* Meta — titel + artiest */
675.audio-player-meta {
676 min-width: 0;
677 display: flex;
678 flex-direction: column;
679 gap: 2px;
680}
681.audio-player-title-wrap {
682 overflow: hidden;
683 white-space: nowrap;
684 position: relative;
685}
686.audio-player-title {
687 display: inline-block;
688 font-family: var(--font-ui, inherit);
689 font-weight: 600;
690 font-size: .9rem;
691 line-height: 1.3;
692 letter-spacing: -.01em;
693 color: var(--ink, inherit);
694 white-space: nowrap;
695}
696.audio-player-title.is-overflowing {
697 animation: audio-title-marquee 6s ease-in-out infinite alternate;
698}
699@keyframes audio-title-marquee {
700 0%, 8% { transform: translateX(0); }
701 92%, 100% { transform: translateX(calc(-1 * var(--audio-shift, 0px))); }
702}
703.audio-player-artist {
704 font-family: var(--font-ui, inherit);
705 font-size: .74rem;
706 line-height: 1.3;
707 color: var(--ink-muted, rgba(0,0,0,.55));
708 white-space: nowrap;
709 overflow: hidden;
710 text-overflow: ellipsis;
711}
712
713/* Controls — prev / play / next */
714.audio-player-controls {
715 display: flex;
716 gap: .1rem;
717 align-items: center;
718}
719.audio-btn {
720 background: transparent;
721 border: none;
722 color: inherit;
723 cursor: pointer;
724 padding: .5rem;
725 border-radius: 50%;
726 transition: background .15s, color .15s, transform .08s;
727 display: inline-flex;
728 align-items: center;
729 justify-content: center;
730 position: relative;
731}
732.audio-btn svg {
733 width: 18px; height: 18px;
734 display: block;
735}
736.audio-btn:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
737.audio-btn:active { transform: scale(.94); }
738.audio-btn-play {
739 background: var(--accent, #c2410c);
740 color: #fff;
741 width: 38px; height: 38px;
742 padding: 0;
743}
744.audio-btn-play:hover {
745 background: color-mix(in srgb, var(--accent, #c2410c) 85%, #fff);
746}
747[data-theme="dark"] .audio-btn-play:hover {
748 background: color-mix(in srgb, var(--accent, #c2410c) 85%, #000);
749}
750.audio-btn-play svg { width: 16px; height: 16px; }
751.audio-btn-play .icon-pause { display: none; }
752.audio-player.is-playing .audio-btn-play .icon-play { display: none; }
753.audio-player.is-playing .audio-btn-play .icon-pause { display: block; }
754
755/* Progress bar */
756.audio-player-progress {
757 display: flex;
758 gap: .75rem;
759 align-items: center;
760 min-width: 0;
761}
762.audio-time {
763 font-size: .7rem;
764 color: var(--ink-muted, rgba(0,0,0,.55));
765 font-variant-numeric: tabular-nums;
766 min-width: 2.7em;
767 text-align: center;
768}
769.audio-seek {
770 flex: 1;
771 min-width: 0;
772 cursor: pointer;
773 padding: .5rem 0;
774 position: relative;
775}
776.audio-seek-bar {
777 height: 3px;
778 background: color-mix(in srgb, var(--ink, #000) 12%, transparent);
779 border-radius: 2px;
780 overflow: hidden;
781 transition: height .15s;
782}
783.audio-seek:hover .audio-seek-bar { height: 5px; }
784.audio-seek-fill {
785 height: 100%;
786 background: var(--accent, #c2410c);
787 width: 0%;
788 transition: width .1s linear;
789}
790
791/* Volume — popup on hover */
792.audio-player-volume {
793 position: relative;
794 display: flex;
795 align-items: center;
796}
797.audio-btn .icon-mute { display: none; }
798.audio-player.is-muted .audio-btn .icon-vol { display: none; }
799.audio-player.is-muted .audio-btn .icon-mute { display: block; }
800.audio-volume-popup {
801 position: absolute;
802 bottom: calc(100% + 8px);
803 left: 50%;
804 transform: translateX(-50%) scale(.95);
805 transform-origin: bottom center;
806 background: var(--paper, #fff);
807 border: 1px solid var(--rule, rgba(0,0,0,.1));
808 border-radius: 8px;
809 padding: .75rem .5rem;
810 box-shadow: 0 4px 16px rgba(0,0,0,.15);
811 opacity: 0;
812 pointer-events: none;
813 transition: opacity .15s, transform .15s, visibility .15s;
814 height: 110px;
815 visibility: hidden;
816}
817/* Invisible bridge tussen knop en popup zodat hover niet breekt */
818.audio-volume-popup::after {
819 content: '';
820 position: absolute;
821 bottom: -12px;
822 left: -10px;
823 right: -10px;
824 height: 16px;
825}
826[data-theme="dark"] .audio-volume-popup {
827 background: color-mix(in srgb, var(--paper, #111) 92%, #fff);
828}
829.audio-player-volume:hover .audio-volume-popup,
830.audio-player-volume:focus-within .audio-volume-popup,
831.audio-player-volume.is-open .audio-volume-popup {
832 opacity: 1;
833 visibility: visible;
834 transform: translateX(-50%) scale(1);
835 pointer-events: auto;
836}
837.audio-volume-popup input[type=range] {
838 /* Standard vertical slider — replaces deprecated -webkit-appearance: slider-vertical. */
839 writing-mode: vertical-lr;
840 direction: rtl;
841 width: 6px;
842 height: 90px;
843 accent-color: var(--accent, #c2410c);
844 /* Grotere hit-area via pseudo-touch padding */
845 padding: 0 12px;
846 box-sizing: content-box;
847 cursor: pointer;
848}
849
850/* Mobile */
851@media (max-width: 720px) {
852 .audio-player-inner {
853 /* v9.0 — 3 cols: expand-trigger (cover+meta) | controls | volume */
854 grid-template-columns: minmax(0, 1fr) auto auto;
855 gap: .5rem;
856 padding: .5rem .8rem;
857 }
858 .audio-player-progress {
859 display: none;
860 }
861 .audio-player-cover { width: 40px; height: 40px; }
862 .audio-btn-play { width: 34px; height: 34px; }
863 body.has-audio-player .pcms-main { padding-bottom: 4.2rem; }
864 /* Verberg titel-artiest op bijzonder smal, verstop volume op mobile */
865 .audio-player-volume { display: none; }
866}
867
868/* Ultra-small schermen (iPhone 4 = 320px; iPhone SE 1st gen = 320px;
869 iPhone mini ~360px). v9.3 — alles vanaf 320px moet werken; daaronder
870 accepteren we wel/niet. */
871@media (max-width: 380px) {
872 .audio-player-inner {
873 gap: .35rem;
874 padding: .4rem .6rem;
875 }
876 .audio-player-expand-trigger {
877 gap: .45rem;
878 }
879 .audio-player-cover { width: 36px; height: 36px; }
880 .audio-player-title { font-size: .88rem; }
881 .audio-player-artist { font-size: .72rem; }
882 .audio-player-controls { gap: .15rem; }
883 .audio-btn { width: 30px; height: 30px; }
884 .audio-btn svg { width: 16px; height: 16px; }
885 .audio-btn-play { width: 32px; height: 32px; }
886 .audio-btn-play svg { width: 18px; height: 18px; }
887
888 /* v9.3 — Tracklist compact op smalle telefoons.
889 Leader 28×28, kleinere gap, padding strakker. Tijd in monoscript blijft
890 leesbaar; titel krijgt 5-10px meer ruimte. */
891 .pat-row {
892 grid-template-columns: 28px 1fr auto;
893 gap: .5rem;
894 padding: .45rem .65rem;
895 }
896 .pat-row .pat-num,
897 .pat-row .pat-cover {
898 width: 28px;
899 height: 28px;
900 }
901 .pat-row::before {
902 left: .65rem;
903 width: 28px; height: 28px;
904 -webkit-mask-size: 22px 22px;
905 mask-size: 22px 22px;
906 }
907 .pat-row .pat-title { font-size: .92rem; }
908 .pat-row .pat-artist { font-size: .74rem; }
909 .pat-row .pat-duration { font-size: .74rem; }
910
911 /* v9.3 — Album binnen post: cover + tracks compacter */
912 .post-album-cover {
913 width: 90px;
914 height: 90px;
915 }
916 .post-album-header {
917 gap: .65rem;
918 padding: .65rem;
919 }
920 .post-album-title { font-size: 1rem; }
921
922 /* v9.3 — Profile-header bovenin compacter */
923 .profile-photo {
924 width: 48px !important;
925 height: 48px !important;
926 }
927 .profile-content {
928 gap: .65rem;
929 }
930
931 /* v9.3 — Install-app modal: minder padding, kleinere knoppen */
932 .install-modal-inner {
933 padding: 1rem;
934 }
935 .install-app-btn {
936 padding: .55rem 1rem;
937 font-size: .9rem;
938 }
939
[c3ad46d]940 /* v9.3 — horizontaal clippen gebeurt nu globaal op html (zie de html-regel
941 bovenaan). Hier bewust NIETS op body zetten: body als scroll-container zou
942 de fixed bottom-tab op mobiel laten meeschuiven. */
[7bc636b]943}
944
945/* iPhone 4 / iPhone SE 1st gen / iPhone 5/5s (320px) — strakste niveau */
946@media (max-width: 340px) {
947 .audio-player-inner {
948 padding: .35rem .5rem;
949 }
950 .audio-player-artist { display: none; }
951 .audio-player-cover { width: 32px; height: 32px; }
952 body.has-audio-player .pcms-main { padding-bottom: 3.6rem; }
953 /* Expand-sheet wat strakker */
954 .audio-sheet-panel {
955 padding: .5rem 1rem 1.5rem;
956 }
957 .audio-sheet-title { font-size: 1.2rem; }
958 .audio-sheet-artist { font-size: .9rem; }
959 .audio-sheet-play { width: 60px; height: 60px; }
960 .audio-sheet-play svg { width: 26px; height: 26px; }
961 .audio-sheet-btn { width: 42px; height: 42px; }
962 .audio-sheet-btn svg { width: 24px; height: 24px; }
963 .audio-sheet-controls { gap: 1rem; }
964
965 /* v9.3 — Op iPhone 4 (320px): tracklist nog strakker */
966 .pat-row {
967 grid-template-columns: 26px 1fr auto;
968 gap: .4rem;
969 padding: .4rem .55rem;
970 }
971 .pat-row .pat-num,
972 .pat-row .pat-cover {
973 width: 26px;
974 height: 26px;
975 }
976 .pat-row::before {
977 left: .55rem;
978 width: 26px; height: 26px;
979 -webkit-mask-size: 20px 20px;
980 mask-size: 20px 20px;
981 }
982 .pat-row .pat-artist {
983 display: none; /* op extreem smal weglaten ten gunste van titel */
984 }
985 .pat-row .pat-title { font-size: .9rem; }
986 .pat-row .pat-duration { font-size: .72rem; }
987
988 /* Container padding reduceren voor max content-breedte */
989 .container {
990 padding-inline: 1rem !important;
991 }
992
993 /* Post-cover (de grote bovenste) krimpen */
994 .post-cover {
995 max-height: 200px;
996 }
997}
998
999/* ============================================================
1000 v9.0 — Audio player expand-sheet (Spotify-style "now playing")
1001 Slide-up half-screen met grote cover, track info, big controls
1002 ============================================================ */
1003.audio-sheet {
1004 position: fixed;
1005 inset: 0;
1006 z-index: 1100;
1007 pointer-events: none;
1008 opacity: 0;
1009 transition: opacity .25s ease;
1010}
1011.audio-sheet.is-open {
1012 pointer-events: auto;
1013 opacity: 1;
1014}
1015.audio-sheet-backdrop {
1016 position: absolute;
1017 inset: 0;
1018 /* v9.3 — Blur en overlay-dim allebei via CSS-variabele --pcms-sheet-progress
1019 (1 = volledig, 0 = weg). JS update tijdens drag; CSS-transition pakt
1020 open/close af. Sterke blur (24px) zodat 't effect goed zichtbaar is. */
1021 background: rgb(0 0 0 / calc(.4 * var(--pcms-sheet-progress, 1)));
1022 backdrop-filter: blur(calc(24px * var(--pcms-sheet-progress, 1)));
1023 -webkit-backdrop-filter: blur(calc(24px * var(--pcms-sheet-progress, 1)));
1024 transition: background .25s ease,
1025 backdrop-filter .25s ease,
1026 -webkit-backdrop-filter .25s ease;
1027 will-change: backdrop-filter, background;
1028}
1029/* Tijdens drag: instant updates vanuit JS, geen transition */
1030.audio-sheet-panel.is-dragging ~ .audio-sheet-backdrop,
1031.audio-sheet-backdrop.is-dragging {
1032 transition: none;
1033}
1034.audio-sheet-panel {
1035 position: absolute;
1036 left: 0; right: 0; bottom: 0;
1037 background: var(--paper, #fff);
1038 border-top-left-radius: 20px;
1039 border-top-right-radius: 20px;
1040 box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
1041 padding: .75rem 1.5rem 2rem;
1042 max-height: 85vh;
1043 overflow-y: auto;
1044 /* v9.2.1 — scroll blijft binnen panel, geen chaining naar body (iOS-proof) */
1045 overscroll-behavior: contain;
1046 touch-action: pan-y;
1047 /* Hide scrollbar but keep scrollable */
1048 scrollbar-width: none; /* Firefox */
1049 -ms-overflow-style: none; /* IE/Edge */
1050 transform: translateY(100%);
1051 transition: transform .3s cubic-bezier(.22, .9, .3, 1),
1052 opacity .3s cubic-bezier(.22, .9, .3, 1);
1053 display: flex;
1054 flex-direction: column;
1055 gap: 1rem;
1056 color: var(--ink);
1057}
1058.audio-sheet-panel::-webkit-scrollbar {
1059 display: none; /* Chrome/Safari */
1060}
1061/* Body scroll lock wanneer sheet open is */
1062body.audio-sheet-locked {
1063 overflow: hidden;
1064}
1065.audio-sheet.is-open .audio-sheet-panel {
1066 transform: translateY(0);
1067}
1068
1069/* v9.3 — Drag-zone: pill bovenaan + cover. Hele strook is touch-target voor
1070 swipe-down-to-close. Pull-to-refresh is uitgeschakeld op html-niveau dus
1071 geen interferentie. Onder de cover (info/progress/controls/queue) werkt
1072 normale touch — knoppen, scroll in queue, etc. */
1073.audio-sheet-drag-zone {
1074 flex-shrink: 0;
1075 display: flex;
1076 flex-direction: column;
1077 align-items: stretch;
1078 gap: 1rem;
1079 /* v9.3 — touch-action: pan-y staat verticale scroll toe (zodat queue
1080 eronder scrollt als gebruiker omhoog veegt over cover). Onze JS
1081 detecteert intent: alleen omlaag-swipe vanaf de top sluit de sheet,
1082 omhoog-swipe = scroll. */
1083 touch-action: pan-y;
1084 user-select: none;
1085 -webkit-user-select: none;
1086 cursor: grab;
1087 margin: -.75rem -1.5rem 0;
1088 padding: .75rem 1.5rem 0;
1089}
1090.audio-sheet-drag-zone:active { cursor: grabbing; }
1091
1092/* v9.4 — Drag alleen actief op touch-only apparaten (telefoons).
1093 Desktop met muis + tablets met muis-cursor → geen drag-grip,
1094 gebruiker sluit via × pill-knop bovenin of klik op backdrop. */
1095@media (hover: hover) and (pointer: fine) {
1096 .audio-sheet-drag-zone {
1097 touch-action: auto;
1098 cursor: default;
1099 pointer-events: none;
1100 }
1101 /* Pill blijft klikbaar als sluit-knop */
1102 .audio-sheet-drag-zone .audio-sheet-handle {
1103 pointer-events: auto;
1104 cursor: pointer;
1105 }
1106}
1107
1108/* Pill (handle) gecentreerd boven de cover */
1109.audio-sheet-drag-zone .audio-sheet-handle {
1110 margin: 0 auto .25rem;
1111}
1112
1113/* Tijdens dragging: panel volgt vinger realtime; geen transition */
1114.audio-sheet-panel.is-dragging {
1115 transition: none;
1116 will-change: transform;
1117}
1118[data-theme="dark"] .audio-sheet-panel {
1119 background: var(--paper, #1a1a1a);
1120 box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
1121}
1122/* Drag-handle + close button in één */
1123.audio-sheet-handle {
1124 display: block;
1125 width: 48px;
1126 height: 4px;
1127 border-radius: 2px;
1128 background: color-mix(in srgb, var(--ink, #000) 25%, transparent);
1129 border: none;
1130 margin: 0 auto .5rem;
1131 padding: 0;
1132 cursor: pointer;
1133 flex-shrink: 0;
1134 position: relative;
1135}
1136.audio-sheet-handle::before {
1137 content: "";
1138 position: absolute;
1139 /* v9.3 — Drag-strip wrapper neemt nu de hit-area-rol over. ::before
1140 blijft als kleine extra padding voor click-comfort. */
1141 inset: -10px -20px;
1142}
1143.audio-sheet-handle:hover {
1144 background: color-mix(in srgb, var(--ink, #000) 45%, transparent);
1145}
1146/* Grote cover */
1147.audio-sheet-cover {
1148 width: 100%;
1149 max-width: 360px;
1150 aspect-ratio: 1/1;
1151 margin: 0 auto;
1152 border-radius: 12px;
1153 background: linear-gradient(135deg,
1154 var(--accent, #c2410c),
1155 color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
1156 background-size: cover;
1157 background-position: center;
1158 box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
1159 flex-shrink: 0;
1160}
1161[data-theme="dark"] .audio-sheet-cover {
1162 box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
1163}
1164.audio-sheet-info {
1165 text-align: center;
1166 padding: 0 1rem;
1167}
1168.audio-sheet-title {
1169 font-family: var(--font-display, inherit);
1170 font-size: 1.5rem;
1171 font-weight: 600;
1172 line-height: 1.2;
1173 margin: 0 0 .25rem;
1174 letter-spacing: -0.01em;
1175 color: var(--ink);
1176}
1177.audio-sheet-artist {
1178 font-size: 1rem;
1179 color: var(--ink-muted, var(--ink));
1180 opacity: .7;
1181}
1182.audio-sheet-album {
1183 margin-top: .35rem;
1184 font-size: .82rem;
1185 opacity: .5;
1186 text-transform: uppercase;
1187 letter-spacing: .05em;
1188}
1189.audio-sheet-album:empty { display: none; }
1190/* Progress + time */
1191.audio-sheet-progress {
1192 display: grid;
1193 grid-template-columns: auto 1fr auto;
1194 gap: .6rem;
1195 align-items: center;
1196 padding: 0 .5rem;
1197}
1198.audio-sheet-progress .audio-seek { width: 100%; }
1199.audio-sheet-progress .audio-time {
1200 font-size: .78rem;
1201 opacity: .55;
1202}
1203/* Grote controls */
1204.audio-sheet-controls {
1205 display: flex;
1206 align-items: center;
1207 justify-content: center;
1208 gap: 1.75rem;
1209}
1210.audio-sheet-btn {
1211 width: 48px;
1212 height: 48px;
1213 padding: 0;
1214}
1215.audio-sheet-btn svg { width: 28px; height: 28px; }
1216.audio-sheet-play {
1217 width: 72px;
1218 height: 72px;
1219 border-radius: 50%;
1220 background: var(--accent, #c2410c);
1221 color: var(--paper, #fff);
1222 border: none;
1223 cursor: pointer;
1224 display: inline-flex;
1225 align-items: center;
1226 justify-content: center;
1227 transition: transform .1s;
1228}
1229.audio-sheet-play:hover { transform: scale(1.05); }
1230.audio-sheet-play:active { transform: scale(.95); }
1231.audio-sheet-play svg { width: 30px; height: 30px; }
1232.audio-sheet-play .icon-pause { display: none; }
1233/* v9.2.1 — sheet staat nu als sibling van .audio-player buiten de balk,
1234 dus ancestor-selector .audio-player.is-playing werkt niet meer voor de
1235 sheet. JS zet is-playing ook rechtstreeks op sheet.play (regel 551 app.js). */
1236.audio-sheet-play.is-playing .icon-play { display: none; }
1237.audio-sheet-play.is-playing .icon-pause { display: block; }
1238/* v9.2.1 — fallback: als sheet buiten alle ancestors zit, tag body */
1239body.audio-is-playing .audio-sheet-play .icon-play { display: none; }
1240body.audio-is-playing .audio-sheet-play .icon-pause { display: block; }
1241
1242/* v9.3 — Loading state: roterende spiraal (het roboburr logo).
1243 Button-achtergrond wordt transparant, play/pause svgs verbergen, en de
1244 spiraal verschijnt als roterende background via ::after pseudo-element.
1245 Cool-effect: zachte hue-drift geeft de kleur een levend gevoel. */
1246.audio-player.is-loading .audio-btn-play,
1247.audio-player.is-loading .audio-sheet-play,
1248body.audio-is-loading .audio-sheet-play,
1249.pat-row.is-loading {
1250 pointer-events: none;
1251}
1252.audio-player.is-loading .audio-btn-play,
1253.audio-player.is-loading .audio-sheet-play,
1254body.audio-is-loading .audio-sheet-play {
1255 background: transparent;
1256 box-shadow: none;
1257}
1258
1259/* v9.3 — Play/pause-icons in de player-knoppen faden smooth uit/in tijdens
1260 loading. Pseudo-spiraal faded tegelijkertijd in (geen instant pop). */
1261.audio-btn-play > svg,
1262.audio-sheet-play > svg {
1263 transition: opacity .35s cubic-bezier(.4, 0, .2, 1),
1264 transform .35s cubic-bezier(.4, 0, .2, 1);
1265}
1266.audio-player.is-loading .audio-btn-play > svg,
1267.audio-player.is-loading .audio-sheet-play > svg,
1268body.audio-is-loading .audio-sheet-play > svg {
1269 opacity: 0;
1270 transform: scale(.7);
1271}
1272.pat-row.is-loading .pat-play-icon > svg,
1273.pat-row.is-loading .pat-num,
1274.pat-row.is-loading .pat-cover {
1275 opacity: 0;
1276}
1277
1278/* v9.3 — Spiraal als pseudo-element, ALTIJD aanwezig met opacity 0 default.
1279 Bij is-loading faden 'ie smooth in (opacity + scale-bounce), bij klaar
1280 faden 'ie weer uit. Pure accent-kleur, geen hue-drift. */
1281.audio-player .audio-btn-play,
1282.audio-player .audio-sheet-play,
1283.pat-row .pat-play-icon {
1284 position: relative;
1285}
1286.audio-btn-play::after,
1287.audio-sheet-play::after {
1288 content: "";
1289 position: absolute;
1290 inset: 0;
1291 background-color: var(--accent, #c2410c);
1292 -webkit-mask: url('/assets/spinner.svg') center/contain no-repeat;
1293 mask: url('/assets/spinner.svg') center/contain no-repeat;
1294 opacity: 0;
1295 transform: scale(.6);
1296 transition: opacity .4s cubic-bezier(.4, 0, .2, 1),
1297 transform .4s cubic-bezier(.34, 1.56, .64, 1);
1298 pointer-events: none;
1299 animation: pcms-spiral-spin 1.2s linear infinite paused;
1300 will-change: opacity, transform;
1301}
1302.audio-player.is-loading .audio-btn-play::after,
1303.audio-player.is-loading .audio-sheet-play::after,
1304body.audio-is-loading .audio-sheet-play::after {
1305 opacity: 1;
1306 transform: scale(1);
1307 animation-play-state: running;
1308}
1309/* Pat-row keeps its existing ::before spinner from earlier change.
1310 Voor backward-compat als oude HTML nog .pat-play-icon::after spinner had */
1311.pat-row.is-loading .pat-play-icon::after {
1312 content: "";
1313 position: absolute;
1314 inset: 0;
1315 background-color: var(--accent, #c2410c);
1316 -webkit-mask: url('/assets/spinner.svg') center/contain no-repeat;
1317 mask: url('/assets/spinner.svg') center/contain no-repeat;
1318 opacity: 1;
1319 animation: pcms-spiral-spin 1.2s linear infinite;
1320 pointer-events: none;
1321}
1322@keyframes pcms-spiral-spin {
1323 to { transform: scale(1) rotate(-360deg); }
1324}
1325/* Queue list */
1326.audio-sheet-queue {
1327 margin-top: .5rem;
1328 padding-top: 1rem;
1329 border-top: 1px solid var(--rule);
1330}
1331.audio-sheet-queue-label {
1332 font-size: .75rem;
1333 text-transform: uppercase;
1334 letter-spacing: .08em;
1335 opacity: .5;
1336 font-weight: 600;
1337 margin-bottom: .5rem;
1338 padding: 0 .5rem;
1339}
1340.audio-sheet-queue-list {
1341 list-style: none;
1342 padding: 0;
1343 margin: 0;
1344 display: flex;
1345 flex-direction: column;
1346 gap: 2px;
1347}
1348.audio-sheet-queue-item {
1349 display: flex;
1350 align-items: center;
1351 gap: .75rem;
1352 padding: .5rem .6rem;
1353 border-radius: 6px;
1354 cursor: pointer;
1355 transition: background .15s;
1356 background: none;
1357 border: none;
1358 width: 100%;
1359 color: inherit;
1360 font: inherit;
1361 text-align: left;
1362}
1363.audio-sheet-queue-item:hover {
1364 background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
1365}
1366.audio-sheet-queue-item.is-current {
1367 background: color-mix(in srgb, var(--accent, #c2410c) 14%, transparent);
1368 color: var(--accent, #c2410c);
1369}
1370.audio-sheet-queue-cover {
1371 width: 36px;
1372 height: 36px;
1373 border-radius: 4px;
1374 background-size: cover;
1375 background-position: center;
1376 background-color: var(--rule);
1377 flex-shrink: 0;
1378}
1379.audio-sheet-queue-meta {
1380 flex: 1;
1381 min-width: 0;
1382 display: flex;
1383 flex-direction: column;
1384}
1385.audio-sheet-queue-title {
1386 font-size: .9rem;
1387 font-weight: 500;
1388 overflow: hidden;
1389 text-overflow: ellipsis;
1390 white-space: nowrap;
1391}
1392.audio-sheet-queue-artist {
1393 font-size: .75rem;
1394 opacity: .55;
1395 overflow: hidden;
1396 text-overflow: ellipsis;
1397 white-space: nowrap;
1398}
1399.audio-sheet-queue-duration {
1400 font-family: ui-monospace, monospace;
1401 font-size: .72rem;
1402 opacity: .5;
1403 flex-shrink: 0;
1404}
1405
1406/* Desktop: sheet is max 480px wide and centered for bigger screens */
1407@media (min-width: 720px) {
1408 .audio-sheet-panel {
1409 left: 50%;
1410 right: auto;
1411 width: 480px;
1412 transform: translate(-50%, 100%);
1413 border-top-left-radius: 20px;
1414 border-top-right-radius: 20px;
1415 }
1416 .audio-sheet.is-open .audio-sheet-panel {
1417 transform: translate(-50%, 0);
1418 }
1419}
1420
1421/* v9.2.1 — Mobiel: sheet is fullscreen, alleen te sluiten via handle-knop bovenin.
1422 Geen rounded corners, volledige viewport, safe-area voor notches/status bar. */
1423@media (max-width: 719.98px) {
1424 .audio-sheet-panel {
1425 inset: 0;
1426 max-height: none;
1427 border-top-left-radius: 0;
1428 border-top-right-radius: 0;
1429 box-shadow: none;
1430 padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
1431 padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
1432 }
1433 /* v9.3 — Backdrop blijft visible op mobile zodat drag-gesture de blur
1434 laat doorschemeren naar helder. */
1435}
1436
1437/* ============================================================
1438 Mobile masthead + pagination
1439 ============================================================ */
1440@media (max-width: 600px) {
1441 .masthead-inner { gap: .35rem; }
1442 .site-title { font-size: 1.2rem; }
1443 .site-subtitle { display: none; }
1444 .top-nav { gap: .1rem; }
1445 .nav-label { display: none; }
1446 .nav-btn, .nav-link {
1447 padding: .4rem .45rem;
1448 min-width: 38px;
1449 justify-content: center;
1450 }
1451 .pagination { flex-direction: column; gap: .5rem; }
1452 .pagination-item { width: 100%; }
1453}
1454@media (max-width: 400px) {
1455 .masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }
1456 .masthead-inner { gap: .25rem; }
1457 .site-title { font-size: 1.05rem; }
1458 .nav-btn, .nav-link {
1459 padding: .35rem .3rem;
1460 min-width: 34px;
1461 }
1462 .nav-btn .icon, .nav-link .icon { width: 1rem; height: 1rem; }
1463 /* PWA-install knop verbergen op klein scherm — kan ook via menu */
1464 .nav-install-btn { display: none !important; }
1465}
1466@media (max-width: 340px) {
1467 .site-title { font-size: .95rem; }
1468 .nav-btn, .nav-link { padding: .3rem .25rem; min-width: 30px; }
1469 /* Theme-toggle verbergen op ultra-klein — kan via user-menu */
1470 [data-pcms-theme-toggle] { display: none; }
1471}
1472
1473.post-date-ago {
1474 margin-left: .5em;
1475 opacity: .6;
1476 font-size: .9em;
1477 font-style: italic;
1478 text-transform: none;
1479 letter-spacing: 0;
1480}
1481
1482/* HTMX loading indicator — subtle progress-bar aan de top van de content */
1483.pcms-loading {
1484 position: fixed;
1485 top: 0; left: 0;
1486 height: 2px;
1487 width: 0%;
1488 background: var(--accent, #c2410c);
1489 z-index: 9999;
1490 transition: width .3s ease, opacity .2s;
1491 opacity: 0;
1492 pointer-events: none;
1493}
1494.pcms-loading.htmx-request {
1495 opacity: 1;
1496 width: 80%;
1497 transition: width 6s cubic-bezier(.1,.9,.2,1), opacity .2s;
1498}
1499/* subtile fade wanneer content gewisseld wordt */
1500#pcms-main.htmx-swapping {
1501 opacity: .5;
1502 transition: opacity .15s;
1503}
1504
1505/* Masthead brand group (site-title + optional tagline) */
1506.masthead-brand { display: flex; flex-direction: column; gap: 2px; }
1507.site-subtitle {
1508 font-family: var(--font-ui, inherit);
1509 font-size: .75rem;
1510 color: var(--ink-muted, rgba(0,0,0,.55));
1511 letter-spacing: 0;
1512 line-height: 1.3;
1513}
1514
1515/* ============================================================
1516 v7.3 — TAGS, TYPE, ARCHIEF, ZOEK, RELATED, SPECIAL VIEWS
1517 ============================================================ */
1518
1519/* Post-meta row — datum + type-chip + tags samen onder de titel */
1520.post-meta {
1521 display: flex;
1522 flex-wrap: wrap;
1523 align-items: center;
1524 gap: .5rem .85rem;
1525 margin-top: .5rem;
1526}
1527.post-meta .post-date { margin: 0; }
1528
1529/* Type-chip (groter, als een label) */
1530.post-type-chip {
1531 display: inline-flex;
1532 align-items: center;
1533 padding: .2rem .6rem;
1534 background: color-mix(in srgb, var(--accent) 10%, transparent);
1535 color: var(--accent);
1536 border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
1537 border-radius: 999px;
1538 font-family: var(--font-ui);
1539 font-size: .72rem;
1540 font-weight: 600;
1541 text-decoration: none;
1542 letter-spacing: .04em;
1543 text-transform: uppercase;
1544 transition: background .15s;
1545}
1546.post-type-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
1547
1548/* Tag-chips — klein, subtiel, gelinkt */
1549.post-tags, .post-list-tags {
1550 display: inline-flex;
1551 flex-wrap: wrap;
1552 gap: .3rem;
1553}
1554.tag-chip {
1555 display: inline-block;
1556 padding: .15rem .55rem;
1557 background: color-mix(in srgb, var(--ink) 5%, transparent);
1558 color: var(--ink-muted);
1559 border-radius: 999px;
1560 font-family: var(--font-ui);
1561 font-size: .72rem;
1562 font-weight: 500;
1563 text-decoration: none;
1564 transition: background .15s, color .15s;
1565}
1566.tag-chip:hover {
1567 background: color-mix(in srgb, var(--accent) 12%, transparent);
1568 color: var(--accent);
1569}
1570
1571/* ============================================================
1572 SPECIAL PAGES (archief, tag, type, zoek)
1573 ============================================================ */
1574.special-page .post-header { margin-bottom: 2rem; }
1575.special-eyebrow {
1576 font-size: .72rem;
1577 color: var(--ink-muted);
1578 text-transform: uppercase;
1579 letter-spacing: .12em;
1580 margin: 0 0 .25rem;
1581}
1582
1583/* Archief: jaar-overzicht */
1584.archive-years {
1585 display: flex;
1586 flex-direction: column;
1587 gap: 2rem;
1588}
1589.archive-year h2 {
1590 font-family: var(--font-display);
1591 font-size: 1.75rem;
1592 margin: 0 0 .75rem;
1593}
1594.archive-year h2 a {
1595 color: var(--ink);
1596 text-decoration: none;
1597}
1598.archive-year h2 a:hover { color: var(--accent); }
1599.archive-year h2 .admin-muted { font-size: .9rem; font-weight: normal; color: var(--ink-muted); }
1600.archive-months {
1601 list-style: none;
1602 padding: 0; margin: 0;
1603 display: grid;
1604 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
1605 gap: .5rem;
1606}
1607.archive-months li {
1608 display: flex;
1609 align-items: center;
1610 gap: .4rem;
1611 padding: .55rem .75rem;
1612 background: color-mix(in srgb, var(--ink) 3%, transparent);
1613 border-radius: var(--radius);
1614 transition: background .15s;
1615}
1616.archive-months li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
1617.archive-months a {
1618 color: var(--ink);
1619 text-decoration: none;
1620 font-weight: 500;
1621 font-size: .95rem;
1622}
1623.archive-months .admin-muted { font-size: .75rem; color: var(--ink-muted); margin-left: auto; }
1624
1625/* Archief: jaar drill-down */
1626.archive-month-list {
1627 display: flex;
1628 flex-direction: column;
1629 gap: 2rem;
1630}
1631.archive-month h2 {
1632 font-family: var(--font-display);
1633 font-size: 1.35rem;
1634 margin: 0 0 .5rem;
1635 padding-bottom: .35rem;
1636 border-bottom: 1px solid var(--rule);
1637}
1638.archive-month h2 a {
1639 color: var(--ink);
1640 text-decoration: none;
1641}
1642.archive-month h2 a:hover { color: var(--accent); }
1643
1644/* Compact post-list (gebruikt in archief drill-down per maand) */
1645.post-compact-list {
1646 list-style: none;
1647 padding: 0; margin: 0;
1648 display: flex;
1649 flex-direction: column;
1650}
1651.post-compact-list li {
1652 border-bottom: 1px solid var(--rule);
1653}
1654.post-compact-list li:last-child { border-bottom: none; }
1655.post-compact-list a {
1656 display: grid;
1657 grid-template-columns: 3em 1fr;
1658 gap: .75rem;
1659 padding: .6rem .2rem;
1660 text-decoration: none;
1661 color: var(--ink);
1662 transition: background .12s;
1663 border-radius: 4px;
1664}
1665.post-compact-list a:hover {
1666 background: color-mix(in srgb, var(--accent) 6%, transparent);
1667}
1668.post-compact-date {
1669 color: var(--ink-muted);
1670 font-size: .8rem;
1671 align-self: center;
1672}
1673.post-compact-title { font-weight: 500; font-size: 1rem; align-self: center; }
1674.post-compact-list.large a { grid-template-columns: 4em 1fr; padding: .8rem .3rem; }
1675.post-compact-list.large .post-compact-title { font-family: var(--font-display); font-size: 1.15rem; }
1676.post-compact-excerpt {
1677 grid-column: 2;
1678 color: var(--ink-muted);
1679 font-size: .88rem;
1680 line-height: 1.5;
1681}
1682
1683/* Post-list (gebruikt in tag / type / zoek pagina's) */
1684.post-list {
1685 list-style: none;
1686 padding: 0; margin: 0;
1687 display: flex;
1688 flex-direction: column;
1689 gap: 1.5rem;
1690}
1691.post-list-item {
1692 display: grid;
1693 grid-template-columns: 120px 1fr;
1694 gap: 1.25rem;
1695 padding-bottom: 1.5rem;
1696 border-bottom: 1px solid var(--rule);
1697}
1698.post-list-item:last-child { border-bottom: none; }
1699.post-list-item:has(> .post-list-cover + .post-list-body) { grid-template-columns: 120px 1fr; }
1700.post-list-item:not(:has(.post-list-cover)) { grid-template-columns: 1fr; }
1701.post-list-cover {
1702 display: block;
1703 aspect-ratio: 1;
1704 overflow: hidden;
1705 border-radius: var(--radius);
1706}
1707.post-list-cover img {
1708 width: 100%; height: 100%;
1709 object-fit: cover;
1710 display: block;
1711}
1712.post-list-body { display: flex; flex-direction: column; gap: .35rem; }
1713.post-list-meta {
1714 color: var(--ink-muted);
1715 font-size: .75rem;
1716 display: flex; gap: .35rem; align-items: center;
1717}
1718.post-list-title {
1719 font-family: var(--font-display);
1720 font-size: 1.3rem;
1721 font-weight: 450;
1722 margin: 0;
1723 line-height: 1.2;
1724}
1725.post-list-title a {
1726 color: var(--ink);
1727 text-decoration: none;
1728}
1729.post-list-title a:hover { color: var(--accent); }
1730.post-list-excerpt {
1731 color: var(--ink-muted);
1732 font-size: .95rem;
1733 margin: 0;
1734 line-height: 1.5;
1735}
1736
1737/* Zoek-formulier binnen special view */
1738.search-form {
1739 display: flex;
1740 gap: .5rem;
1741 margin-bottom: 2rem;
1742}
1743.search-form input[type=search] {
1744 flex: 1;
1745 padding: .75rem 1rem;
1746 background: var(--paper-2);
1747 border: 1px solid var(--rule);
1748 border-radius: var(--radius);
1749 font: inherit;
1750 color: var(--ink);
1751}
1752.search-form input[type=search]:focus {
1753 outline: none;
1754 border-color: var(--accent);
1755 box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
1756}
1757
1758/* ============================================================
1759 SEARCH OVERLAY (masthead → full-screen zoekbalk)
1760 ============================================================ */
1761.search-overlay {
1762 position: fixed;
1763 inset: 0;
1764 background: color-mix(in srgb, var(--ink) 50%, transparent);
1765 z-index: 1500;
1766 display: flex;
1767 justify-content: center;
1768 align-items: flex-start;
1769 padding-top: 10vh;
1770 backdrop-filter: blur(6px);
1771 -webkit-backdrop-filter: blur(6px);
1772}
1773.search-overlay[hidden] { display: none; }
1774.search-overlay-form {
1775 width: min(90vw, 600px);
1776 background: var(--paper);
1777 border-radius: calc(var(--radius) * 1.5);
1778 padding: .75rem 1rem;
1779 display: flex;
1780 align-items: center;
1781 gap: .6rem;
1782 box-shadow: 0 20px 60px rgba(0,0,0,.3);
1783 border: 1px solid var(--rule);
1784}
1785.search-overlay-form .icon {
1786 width: 1.2rem; height: 1.2rem;
1787 color: var(--ink-muted);
1788 flex-shrink: 0;
1789}
1790.search-overlay-form input[type=search] {
1791 flex: 1;
1792 background: transparent;
1793 border: none;
1794 font-family: var(--font-body);
1795 font-size: 1.1rem;
1796 color: var(--ink);
1797 padding: .5rem 0;
1798}
1799.search-overlay-form input[type=search]:focus { outline: none; }
1800.search-overlay-form .nav-btn {
1801 background: transparent;
1802 border: none;
1803 color: var(--ink-muted);
1804 cursor: pointer;
1805 font-size: 1.25rem;
1806 line-height: 1;
1807 padding: .3rem .5rem;
1808}
1809.search-overlay-form .nav-btn:hover { color: var(--ink); }
1810body.search-open { overflow: hidden; }
1811
1812/* ============================================================
1813 RELATED POSTS (onder elke post-view)
1814 ============================================================ */
1815.related-posts {
1816 margin-top: 2.5rem;
1817 padding-top: 2rem;
1818 border-top: 1px solid var(--rule);
1819}
1820.related-title {
1821 font-family: var(--font-mono);
1822 font-size: .7rem;
1823 color: var(--ink-muted);
1824 text-transform: uppercase;
1825 letter-spacing: .12em;
1826 margin: 0 0 1rem;
1827}
1828.related-grid {
1829 list-style: none;
1830 padding: 0; margin: 0;
1831 display: grid;
1832 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1833 gap: 1rem;
1834}
1835.related-grid a {
1836 display: flex;
1837 flex-direction: column;
1838 gap: .5rem;
1839 text-decoration: none;
1840 color: var(--ink);
1841 border: 1px solid var(--rule);
1842 border-radius: var(--radius);
1843 overflow: hidden;
1844 transition: border-color .15s, transform .15s;
1845 height: 100%;
1846}
1847.related-grid a:hover {
1848 border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
1849 transform: translateY(-2px);
1850}
1851.related-cover {
1852 display: block;
1853 aspect-ratio: 16/10;
1854 background-size: cover;
1855 background-position: center;
1856 background-color: var(--paper-2);
1857}
1858
1859/* v9.4 — Wanneer related-cover ook .grid-tile-gradient class heeft (lege cover
1860 fallback), erft 'ie automatisch de hue/gradient/title styling van grid-tiles.
1861 Geen aparte related-cover-gradient meer nodig. */
1862.related-body {
1863 display: flex;
1864 flex-direction: column;
1865 gap: .25rem;
1866 padding: .6rem .75rem .9rem;
1867}
1868.related-meta { color: var(--ink-muted); font-size: .7rem; }
1869.related-name {
1870 font-family: var(--font-display);
1871 font-weight: 450;
1872 font-size: 1rem;
1873 line-height: 1.25;
1874}
1875
1876/* ============================================================
1877 MOBILE TWEAKS voor v7.3
1878 ============================================================ */
1879@media (max-width: 600px) {
1880 .post-list-item { grid-template-columns: 1fr; }
1881 .post-list-cover { aspect-ratio: 16/9; }
1882 .archive-months { grid-template-columns: repeat(2, 1fr); }
1883 .related-grid { grid-template-columns: 1fr; }
1884 .search-overlay { padding-top: 4vh; }
1885}
1886
1887/* ============================================================
1888 v7.4 — PROFILE HEADER + VIEW SWITCHER + GRID + POST-TYPE LAYOUTS
1889 MOBILE-FIRST — belangrijkste eis
1890 ============================================================ */
1891
1892/* -------- PROFILE HEADER (Optie C: full op home, compact op post/special) -------- */
1893
1894.profile-header {
1895 background: var(--paper-2, var(--paper));
1896 border-bottom: 1px solid var(--rule);
1897 transition: padding .25s ease, background .2s;
1898}
1899/* Mobiel default = full-mode padding */
1900.profile-header { padding: 1.25rem 0; }
1901.profile-header-inner {
1902 display: flex;
1903 gap: .9rem;
1904 align-items: flex-start;
1905}
1906
1907.profile-photo {
1908 flex-shrink: 0;
1909 width: 80px;
1910 height: 80px;
1911 border-radius: 50%;
1912 overflow: hidden;
1913 display: block;
1914 background: var(--paper);
1915 border: 2px solid var(--rule);
1916 transition: width .25s ease, height .25s ease, border-color .2s;
1917 text-decoration: none;
1918}
1919.profile-photo:hover { border-color: var(--accent); }
1920.profile-photo img {
1921 width: 100%; height: 100%;
1922 object-fit: cover;
1923 display: block;
1924}
1925.profile-photo-fallback {
1926 display: flex;
1927 align-items: center;
1928 justify-content: center;
1929 width: 100%; height: 100%;
1930 background: var(--accent);
1931 color: var(--paper);
1932 font-family: var(--font-display);
1933 font-weight: 700;
1934 font-size: 2.2rem;
1935 text-transform: uppercase;
1936 line-height: 1;
1937 transition: font-size .25s ease;
1938}
1939
1940.profile-info {
1941 flex: 1;
1942 min-width: 0;
1943 display: flex;
1944 flex-direction: column;
1945 gap: .3rem;
1946}
1947.profile-name {
1948 margin: 0;
1949 font-family: var(--font-display);
1950 font-size: 1.2rem;
1951 font-weight: 500;
1952 line-height: 1.15;
1953 transition: font-size .25s ease;
1954}
1955.profile-name a {
1956 color: var(--ink);
1957 text-decoration: none;
1958}
1959.profile-name a:hover { color: var(--accent); }
1960.profile-bio {
1961 margin: 0;
1962 color: var(--ink-muted);
1963 font-size: .92rem;
1964 line-height: 1.45;
1965 max-height: 200px;
1966 overflow: hidden;
1967 transition: max-height .25s ease, margin .25s ease, opacity .2s;
1968}
1969.profile-links {
1970 list-style: none;
1971 padding: 0;
1972 margin: .15rem 0 0;
1973 display: flex;
1974 flex-wrap: wrap;
1975 gap: .4rem;
1976 max-height: 50px;
1977 overflow: hidden;
1978 transition: max-height .25s ease, margin .25s ease, opacity .2s;
1979}
1980.profile-links li { margin: 0; }
1981.profile-links a {
1982 display: inline-flex;
1983 align-items: center;
1984 justify-content: center;
1985 width: 40px;
1986 height: 40px;
1987 border-radius: 50%;
1988 background: color-mix(in srgb, var(--ink) 5%, transparent);
1989 color: var(--ink-muted);
1990 text-decoration: none;
1991 transition: background .15s, color .15s;
1992}
1993.profile-links a:hover {
1994 background: color-mix(in srgb, var(--accent) 15%, transparent);
1995 color: var(--accent);
1996}
1997.profile-links .icon { width: 1.1rem; height: 1.1rem; }
1998
1999/* -------- COMPACT MODE: op post + special pages -------- */
2000
2001.on-post .profile-header,
2002.on-special .profile-header {
2003 padding: .5rem 0;
2004}
2005.on-post .profile-photo,
2006.on-special .profile-photo {
2007 width: 36px;
2008 height: 36px;
2009 border-width: 1px;
2010}
2011.on-post .profile-photo-fallback,
2012.on-special .profile-photo-fallback {
2013 font-size: 1rem;
2014}
2015.on-post .profile-name,
2016.on-special .profile-name {
2017 font-size: 1rem;
2018 align-self: center;
2019}
2020.on-post .profile-bio,
2021.on-special .profile-bio,
2022.on-post .profile-links,
2023.on-special .profile-links {
2024 display: none;
2025}
2026.on-post .profile-header-inner,
2027.on-special .profile-header-inner {
2028 align-items: center;
2029 justify-content: flex-start;
2030 gap: .6rem;
2031}
2032.on-post .profile-info,
2033.on-special .profile-info {
2034 flex: 0 1 auto;
2035 min-width: 0;
2036}
2037.on-post .profile-name,
2038.on-special .profile-name {
2039 text-align: left;
2040}
2041
2042/* -------- DESKTOP: meer ruimte, grotere foto -------- */
2043@media (min-width: 768px) {
2044 .profile-header { padding: 2rem 0; }
2045 .profile-photo { width: 120px; height: 120px; }
2046 .profile-photo-fallback { font-size: 3.2rem; }
2047 .profile-name { font-size: 1.5rem; }
2048 .profile-bio { font-size: 1rem; }
2049 .profile-header-inner { gap: 1.5rem; }
2050 .on-post .profile-header,
2051 .on-special .profile-header { padding: .6rem 0; }
2052 .on-post .profile-photo,
2053 .on-special .profile-photo { width: 42px; height: 42px; }
2054 /* Compact mode: gap blijft klein, ook op desktop */
2055 .on-post .profile-header-inner,
2056 .on-special .profile-header-inner { gap: .75rem; }
2057 .on-post .profile-name,
2058 .on-special .profile-name { font-size: 1.1rem; }
2059}
2060
2061/* -------- VIEW SWITCHER -------- */
2062.view-switcher-wrap {
2063 border-bottom: 1px solid var(--rule);
2064 background: var(--paper);
[ee25d45]2065 /* Bottom margin gives breathing room between the switcher bar and the
2066 first post. margin-top staat in shared-styles.ejs (de winnende inline
2067 <style>) — symmetrisch op 1.5rem. */
[7bc636b]2068 margin-bottom: 1.5rem;
2069}
2070.view-switcher {
2071 display: flex;
2072 justify-content: center;
2073 gap: .35rem;
2074 /* Slimmer bar — was .6rem, now .35rem so the bar reads as a divider
2075 rather than a row of weight equal to the header. */
2076 padding: .35rem 0;
2077}
2078.view-switch-btn {
2079 display: inline-flex;
2080 align-items: center;
2081 gap: .4rem;
2082 padding: .35rem .85rem; /* was .55rem 1rem */
2083 min-height: 32px; /* was 44px */
2084 background: transparent;
2085 border: 1px solid var(--rule);
2086 border-radius: 999px;
2087 color: var(--ink-muted);
2088 font-family: var(--font-ui);
2089 font-size: .82rem; /* was .85rem */
2090 cursor: pointer;
2091 transition: all .15s;
2092}
2093.view-switch-btn:hover {
2094 color: var(--ink);
2095 border-color: var(--ink-muted);
2096}
[d15b27f]2097/* Actieve state: puur afgeleid van body[data-feed-view]. Geen .is-active class meer.
2098 Niet op de Archive-pagina: daar is geen "huidige" timeline/grid-keuze, dus beide
2099 knoppen blijven neutraal (grijs). */
2100body[data-feed-view="timeline"]:not(.on-archive) .view-switch-btn[data-view="timeline"],
2101body[data-feed-view="grid"]:not(.on-archive) .view-switch-btn[data-view="grid"] {
[7bc636b]2102 background: var(--ink);
2103 color: var(--paper);
2104 border-color: var(--ink);
2105}
2106.view-switch-btn .icon { width: 1rem; height: 1rem; }
2107
2108/* -------- FEED TOGGLE VIA BODY --------
[c974223]2109 Grid-modus werkt op de feed (home, cirkel). Het ARCHIEF negeert de grid-keuze
2110 bewust: dat is altijd de chronologische jaar/maand-lijst (de switcher is daar
2111 grijs en springt bij klik terug naar de feed). Post-pagina's tonen de
2112 feed-timeline article sowieso altijd. Alle andere body-classes negeren
[7bc636b]2113 data-feed-view en houden timeline visible. */
2114body.on-home[data-feed-view="grid"] .feed-timeline,
2115body.on-home[data-feed-view="grid"] .pagination,
2116body.on-home[data-feed-view="grid"] .related-posts,
2117body.on-home[data-feed-view="grid"] .article-footer,
[9f81a09]2118body.on-cirkel[data-feed-view="grid"] .feed-timeline {
[7bc636b]2119 display: none !important;
2120}
[c974223]2121/* Grid-sectie alleen zichtbaar op de feed in grid-mode (NIET op archief) */
[7bc636b]2122.feed-grid { display: none; }
2123body.on-home[data-feed-view="grid"] .feed-grid,
[9f81a09]2124body.on-cirkel[data-feed-view="grid"] .feed-grid { display: block; }
[7bc636b]2125
2126/* -------- GRID VIEW TILES (Instagram-stijl) -------- */
2127.feed-grid {
2128 padding: 1rem 0 2rem;
2129}
2130.grid-tiles {
2131 display: grid;
2132 gap: 4px;
2133 grid-template-columns: repeat(2, 1fr);
2134}
2135.grid-tile {
2136 position: relative;
2137 display: block;
2138 aspect-ratio: 1;
2139 background-size: cover;
2140 background-position: center;
2141 background-color: var(--paper-2);
2142 overflow: hidden;
2143 text-decoration: none;
2144 color: var(--ink);
2145 transition: transform .2s;
2146 cursor: pointer;
2147 -webkit-tap-highlight-color: rgba(0,0,0,.1);
2148}
2149.grid-tile:hover { transform: scale(0.98); }
2150.grid-tile-overlay {
2151 position: absolute;
2152 inset: 0;
2153 padding: .6rem;
2154 display: flex;
2155 align-items: flex-end;
2156 background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 50%);
2157 opacity: 0;
2158 transition: opacity .2s;
2159 pointer-events: none; /* klik moet naar de <a> eronder gaan, niet naar de overlay */
2160}
2161.grid-tile-overlay strong {
2162 color: #fff;
2163 font-family: var(--font-display);
2164 font-size: .9rem;
2165 font-weight: 500;
2166 line-height: 1.15;
2167 display: -webkit-box;
2168 -webkit-line-clamp: 3;
2169 -webkit-box-orient: vertical;
2170 overflow: hidden;
2171}
2172@media (hover: hover) {
2173 .grid-tile:hover .grid-tile-overlay { opacity: 1; }
2174}
2175@media (hover: none) {
2176 /* Op touch-devices altijd overlay tonen zodat titels zichtbaar zijn */
2177 .grid-tile-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 70%); }
2178}
2179
2180.grid-tile-gradient {
2181 background-image: none;
2182 background-color: hsl(var(--tile-hue, 30), 40%, 85%);
2183 background-image: linear-gradient(135deg, hsl(var(--tile-hue, 30), 45%, 88%), hsl(calc(var(--tile-hue, 30) + 30), 35%, 75%));
2184 display: flex;
2185 align-items: center;
2186 justify-content: center;
2187 padding: 1rem;
2188 text-align: center;
2189}
2190[data-theme="dark"] .grid-tile-gradient,
2191.grid-tile-gradient[data-theme="dark"] {
2192 background-image: linear-gradient(135deg, hsl(var(--tile-hue, 30), 30%, 18%), hsl(calc(var(--tile-hue, 30) + 30), 25%, 12%));
2193}
2194.grid-tile-title {
2195 font-family: var(--font-display);
2196 font-size: 1rem;
2197 font-weight: 500;
2198 color: var(--ink);
2199 line-height: 1.2;
2200 display: -webkit-box;
2201 -webkit-line-clamp: 4;
2202 -webkit-box-orient: vertical;
2203 overflow: hidden;
2204 z-index: 1;
2205}
2206
2207.grid-tile-pin {
2208 position: absolute;
2209 top: .5rem;
2210 right: .5rem;
2211 display: inline-flex;
2212 align-items: center;
2213 gap: .25rem;
2214 padding: .2rem .55rem;
2215 background: var(--accent);
2216 color: #fff;
2217 border-radius: 999px;
2218 font-family: var(--font-ui);
2219 font-size: .65rem;
2220 font-weight: 700;
2221 text-transform: uppercase;
2222 letter-spacing: .06em;
2223 z-index: 3;
2224 box-shadow: 0 2px 6px rgba(0,0,0,.3);
2225 pointer-events: none;
2226}
2227.grid-tile-pin::before {
2228 content: "📌";
2229 font-size: .9em;
2230 line-height: 1;
2231}
2232/* Pinned-tile overall highlight: accent border + subtle inner glow */
2233.grid-tile.is-pinned {
2234 outline: 3px solid var(--accent);
2235 outline-offset: -3px;
2236 z-index: 1;
2237}
2238.grid-tile.is-pinned:hover {
2239 outline-offset: -2px;
2240}
2241.grid-tile-type {
2242 position: absolute;
2243 top: .4rem;
2244 left: .4rem;
2245 padding: .15rem .5rem;
2246 background: rgba(0,0,0,.55);
2247 color: #fff;
2248 border-radius: 999px;
2249 font-family: var(--font-ui);
2250 font-size: .6rem;
2251 font-weight: 600;
2252 text-transform: uppercase;
2253 letter-spacing: .05em;
2254 z-index: 2;
2255}
2256
2257@media (min-width: 600px) {
2258 .grid-tiles { grid-template-columns: repeat(3, 1fr); }
2259}
2260@media (min-width: 900px) {
2261 .grid-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
2262}
2263
2264/* -------- POST-TYPE SPECIFIEKE LAYOUTS -------- */
2265
2266/* Foto-post: beeld prominent, geen titel bovenaan, caption onder */
2267.feed-timeline[data-post-type="foto"] .post-title {
2268 font-size: 1.1rem;
2269 color: var(--ink-muted);
2270 font-weight: 400;
2271}
2272.feed-timeline[data-post-type="foto"] .post-cover {
2273 margin: 0 -1rem 1rem;
2274 border-radius: 0;
2275}
2276.feed-timeline[data-post-type="foto"] .post-cover img {
2277 width: 100%;
2278 border-radius: 0;
2279}
2280
2281/* Post-caption onder de cover */
2282.post-caption {
2283 font-family: var(--font-body);
2284 font-size: 1rem;
2285 color: var(--ink);
2286 line-height: 1.5;
2287 margin: 0 0 1.25rem;
2288 padding: 0 0 1rem;
2289 border-bottom: 1px solid var(--rule);
2290 white-space: pre-wrap;
2291}
2292.feed-timeline[data-post-type="foto"] .post-caption {
2293 font-size: 1.05rem;
2294 margin-top: -.5rem;
2295 padding-bottom: 1.25rem;
2296}
2297
2298/* Audio/video posts — type-chip helder, content eronder zoals normaal */
2299.feed-timeline[data-post-type="audio"] .post-title,
2300.feed-timeline[data-post-type="video"] .post-title {
2301 font-size: 1.5rem;
2302}
2303
2304@media (min-width: 768px) {
2305 .feed-timeline[data-post-type="foto"] .post-cover {
2306 margin: 0 0 1.5rem;
2307 border-radius: var(--radius);
2308 }
2309}
2310
2311/* -------- ADMIN EDIT-BUTTON op post-view (alleen zichtbaar voor ingelogde admin) -------- */
2312.post-edit-btn {
2313 position: absolute;
2314 top: 1rem;
2315 right: 1rem;
2316 display: inline-flex;
2317 align-items: center;
2318 justify-content: center;
2319 width: 44px;
2320 height: 44px;
2321 background: var(--paper);
2322 border: 1px solid var(--rule);
2323 border-radius: 50%;
2324 color: var(--ink-muted);
2325 text-decoration: none;
2326 box-shadow: 0 2px 8px rgba(0,0,0,.08);
2327 transition: background .15s, color .15s, transform .15s, border-color .15s;
2328 z-index: 10;
2329}
2330.post-edit-btn:hover {
2331 background: var(--accent);
2332 border-color: var(--accent);
2333 color: var(--paper);
2334 transform: scale(1.05);
2335}
2336.post-edit-btn .icon {
2337 width: 1.1rem;
2338 height: 1.1rem;
2339}
2340/* Zorg dat de article relative is zodat absolute positionering werkt */
2341.feed-timeline { position: relative; }
2342
2343@media (min-width: 768px) {
2344 .post-edit-btn {
2345 top: 1.5rem;
2346 right: 1.5rem;
2347 }
2348}
2349
2350/* ============================================================
2351 v8.0 — ACCENT SPAN + POST-TABLE (published posts)
2352 ============================================================ */
2353.post span.accent,
2354.post-content span.accent,
2355article span.accent,
2356page-container span.accent {
2357 color: var(--accent);
2358 font-weight: 500;
2359}
2360
2361.post-table,
2362article table.post-table {
2363 width: 100%;
2364 max-width: 100%;
2365 border-collapse: collapse;
2366 margin: 1.25rem 0;
2367 font-size: .95rem;
2368 display: block;
2369 overflow-x: auto;
2370 -webkit-overflow-scrolling: touch;
2371}
2372.post-table thead { background: color-mix(in srgb, var(--accent) 10%, transparent); }
2373.post-table th,
2374.post-table td {
2375 padding: .6rem .8rem;
2376 text-align: left;
2377 border: 1px solid var(--rule);
2378 vertical-align: top;
2379}
2380.post-table th {
2381 font-family: var(--font-ui);
2382 font-weight: 600;
2383 font-size: .88rem;
2384 color: var(--ink);
2385 letter-spacing: .02em;
2386}
2387.post-table tbody tr:nth-child(even) {
2388 background: color-mix(in srgb, var(--ink) 3%, transparent);
2389}
2390@media (min-width: 700px) {
2391 .post-table { display: table; overflow: visible; }
2392}
2393
2394/* ============================================================
2395 v8.0 fix — grid-cols picker (desktop only) + grid col overrides
2396 ============================================================ */
2397
2398/* Switcher-wrap bevat nu ook de cols-picker; layout side-by-side */
2399.view-switcher-wrap .container {
2400 display: flex;
2401 align-items: center;
2402 justify-content: center;
2403 gap: 1rem;
2404 flex-wrap: wrap;
2405}
2406
[64b90c0]2407/* Solo / Cirkel scope-switcher (alleen in circle-modus) — segmented toggle, centraal.
2408 Hoge specificiteit (+ !important op tekst) zodat 'ie globale link-stijlen wint. */
2409.view-switcher-wrap .feed-scope {
2410 display: inline-flex;
2411 background: var(--paper-2);
2412 border: 1px solid var(--rule);
2413 border-radius: 999px;
2414 padding: 3px;
2415}
2416.view-switcher-wrap .feed-scope-btn {
2417 display: inline-flex;
2418 align-items: center;
2419 padding: .32rem .95rem;
2420 min-height: 30px;
2421 border: none !important;
2422 border-radius: 999px !important;
2423 background: transparent !important;
2424 color: var(--ink-muted) !important;
2425 font-family: var(--font-ui);
2426 font-size: .82rem;
2427 font-weight: 500 !important;
2428 text-decoration: none !important;
2429 cursor: pointer;
2430 transition: all .15s;
2431}
2432.view-switcher-wrap .feed-scope-btn:hover { color: var(--ink) !important; }
2433.view-switcher-wrap .feed-scope-btn.is-active {
2434 background: var(--ink) !important;
2435 color: var(--paper) !important;
2436}
[9f81a09]2437
[7bc636b]2438.grid-cols-picker {
2439 display: none; /* default hidden — desktop + grid-active maakt 'm zichtbaar */
2440 gap: 2px;
2441 padding: 0;
2442}
2443.grid-cols-btn {
2444 display: inline-flex;
2445 align-items: center;
2446 justify-content: center;
2447 min-width: 36px;
2448 height: 32px;
2449 padding: 0 .6rem;
2450 background: transparent;
2451 border: 1px solid var(--rule);
2452 color: var(--ink-muted);
2453 font-family: var(--font-ui);
2454 font-size: .85rem;
2455 font-weight: 500;
2456 cursor: pointer;
2457 transition: all .12s;
2458}
2459.grid-cols-btn:first-child { border-radius: 999px 0 0 999px; }
2460.grid-cols-btn:last-child { border-radius: 0 999px 999px 0; }
2461.grid-cols-btn:not(:first-child):not(:last-child) { border-left: none; border-right: none; }
2462.grid-cols-btn:hover { color: var(--ink); }
2463/* Active state puur via body[data-grid-cols] — geen is-active-class meer. */
2464body[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
2465body[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
2466body[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] {
2467 background: var(--ink);
2468 color: var(--paper);
2469 border-color: var(--ink);
2470}
2471
[1578f5d]2472/* Desktop + grid-view → toon cols-picker (op de home-feed; niet op archief) */
[7bc636b]2473@media (min-width: 600px) {
[1578f5d]2474 body.on-home[data-feed-view="grid"] .grid-cols-picker {
[7bc636b]2475 display: inline-flex;
2476 }
2477}
2478
2479/* Kolom-overrides op desktop. Mobiel negeert dit (staat vast op 2). */
2480@media (min-width: 600px) {
2481 body.on-home[data-grid-cols="2"] .grid-tiles { grid-template-columns: repeat(2, 1fr); }
2482 body.on-home[data-grid-cols="3"] .grid-tiles { grid-template-columns: repeat(3, 1fr); }
2483 body.on-home[data-grid-cols="4"] .grid-tiles { grid-template-columns: repeat(4, 1fr); }
2484}
2485
2486/* Gradient-tile: iets meer contrast voor light + dark mode zodat titel altijd leesbaar is */
2487.grid-tile-gradient {
2488 background-image: linear-gradient(135deg,
2489 hsl(var(--tile-hue, 30), 55%, 72%),
2490 hsl(calc(var(--tile-hue, 30) + 40), 45%, 60%));
2491}
2492[data-theme="dark"] .grid-tile-gradient {
2493 background-image: linear-gradient(135deg,
2494 hsl(var(--tile-hue, 30), 40%, 30%),
2495 hsl(calc(var(--tile-hue, 30) + 40), 30%, 18%));
2496}
2497.grid-tile-gradient .grid-tile-title {
2498 color: #fff;
2499 text-shadow: 0 1px 3px rgba(0,0,0,.25);
2500}
2501[data-theme="dark"] .grid-tile-gradient .grid-tile-title {
2502 color: #fff;
2503 text-shadow: 0 1px 2px rgba(0,0,0,.5);
2504}
2505
2506/* ============================================================
2507 v8.0.2 — COMPACT DESIGN OVERRIDES
2508 Tighter masthead, padding, margins overall. Profiel-header
2509 collapse/expand blijft zoals 'ie was.
2510 ============================================================ */
2511
2512/* Masthead: compacter */
2513.masthead { padding: calc(.55rem + var(--safe-top)) 0 .55rem; }
2514.masthead-inner { gap: 1rem; }
2515.site-title { font-size: 1.25rem; }
2516.nav-link, .nav-btn { padding: .4rem .7rem; min-height: 2rem; font-size: .82rem; }
2517
2518/* Main content padding */
2519main { padding-top: 1rem; }
2520.page { padding-block: 1rem 1.75rem; }
2521
2522/* View switcher-bar strakker */
2523.view-switcher { padding: .4rem 0; gap: .3rem; }
2524.view-switch-btn { padding: .4rem .85rem; min-height: 38px; font-size: .8rem; }
2525.grid-cols-btn { min-width: 32px; height: 28px; padding: 0 .5rem; font-size: .8rem; }
2526
2527/* Post header spacing terug */
2528.post-header { margin: 0 0 1.25rem; }
2529.post-title { margin-bottom: .35rem; }
2530.post-meta { font-size: .78rem; }
2531.post-tags { margin-top: .6rem; gap: .3rem; }
2532.post-tag { font-size: .7rem; padding: .15rem .55rem; }
2533
2534/* Article footer + pagination compacter */
2535.article-footer { padding-top: 1.25rem; margin-top: 1.5rem; }
2536.pagination { padding-block: 1.25rem 2rem; margin-top: 1.5rem; }
2537.pagination-item { padding: .75rem .95rem; min-height: 4rem; }
2538.pagination-title { font-size: .95rem; }
2539
2540/* Site footer compacter */
2541.site-footer { padding: 1.25rem 0 calc(1.25rem + var(--safe-bot)); margin-top: 2rem; font-size: .78rem; }
2542.site-footer-inner { gap: .75rem; }
2543
2544/* Profiel-header: full mode iets minder riant (compact mode blijft hetzelfde) */
2545.profile-header { padding: 1rem 0; }
2546.profile-photo { width: 72px; height: 72px; }
2547.profile-photo-fallback { font-size: 1.8rem; }
2548.profile-name { font-size: 1.2rem; }
2549.profile-bio { font-size: .85rem; margin-top: .15rem; }
2550.profile-links { margin-top: .5rem; gap: .4rem; }
2551.profile-links a { width: 32px; height: 32px; }
2552
2553@media (min-width: 768px) {
2554 .profile-header { padding: 1.35rem 0; }
2555 .profile-photo { width: 92px; height: 92px; }
2556 .profile-photo-fallback { font-size: 2.4rem; }
2557 .profile-name { font-size: 1.4rem; }
2558 .profile-bio { font-size: .95rem; }
2559 .profile-header-inner { gap: 1.1rem; }
2560 /* Compact-mode op desktop blijft klein zoals we hadden afgesproken */
2561 .on-post .profile-photo,
2562 .on-special .profile-photo { width: 42px; height: 42px; }
2563}
2564
2565/* Grid-tegels iets strakker gaten */
2566.grid-tiles { gap: 3px; }
2567
2568/* Post-cover margin */
2569.post-cover { margin: 0 0 1rem; }
2570
2571/* Audio player wat lichter */
2572#pcms-audio-bar { padding: .55rem 1rem; }
2573
2574/* v8.1 — pagination CTA + mobile tap target */
2575.pagination-cta {
2576 display: inline-block;
2577 font-family: var(--font-ui);
2578 font-size: .72rem;
2579 font-weight: 600;
2580 color: var(--accent);
2581 margin-top: .35rem;
2582 letter-spacing: .02em;
2583 opacity: .9;
2584}
2585a.pagination-item:hover .pagination-cta { opacity: 1; }
2586
2587/* Mobiel: nog meer tap-feedback + iets prominenter */
2588@media (max-width: 640px) {
2589 a.pagination-item {
2590 padding: 1.1rem 1rem;
2591 min-height: 5.5rem;
2592 border-width: 2px;
2593 }
2594 a.pagination-item:active {
2595 background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
2596 transform: scale(.98);
2597 }
2598 .pagination-title { font-size: 1rem; }
2599 .pagination-cta { font-size: .75rem; }
2600 .pagination .icon { width: 1.5em; height: 1.5em; }
2601}
2602
2603
2604
2605/* v8.3 / v9.4 — PWA install button (alleen zichtbaar als browser install ondersteunt) */
2606.nav-install-btn[hidden] { display: none; }
2607.nav-install-btn {
2608 position: relative;
2609 display: inline-flex;
2610 align-items: center;
2611 justify-content: center;
2612 gap: .35rem;
2613 background: linear-gradient(135deg,
2614 var(--accent),
2615 color-mix(in srgb, var(--accent) 80%, #000));
2616 color: #fff;
2617 border: none;
2618 border-radius: .65rem;
2619 padding: .45rem .85rem;
2620 font-size: .8rem;
2621 font-weight: 600;
2622 line-height: 1;
2623 cursor: pointer;
2624 overflow: hidden;
2625 isolation: isolate;
2626 box-shadow:
2627 0 1px 0 rgba(255,255,255,.15) inset,
2628 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
2629 transition:
2630 transform .15s cubic-bezier(.4, 0, .2, 1),
2631 box-shadow .2s ease,
2632 filter .15s ease;
2633}
2634.nav-install-btn::before {
2635 content: "";
2636 position: absolute;
2637 top: 0;
2638 left: -100%;
2639 width: 60%;
2640 height: 100%;
2641 background: linear-gradient(110deg,
2642 transparent 30%,
2643 rgba(255,255,255,.22) 50%,
2644 transparent 70%);
2645 z-index: -1;
2646 animation: pcmsInstallShimmer 4s ease-in-out infinite;
2647 pointer-events: none;
2648}
2649.nav-install-btn:hover {
2650 transform: translateY(-1px);
2651 filter: brightness(1.08);
2652 box-shadow:
2653 0 1px 0 rgba(255,255,255,.2) inset,
2654 0 4px 10px color-mix(in srgb, var(--accent) 50%, transparent);
2655}
2656.nav-install-btn:active { transform: translateY(0); }
2657.nav-install-btn .icon {
2658 flex-shrink: 0;
2659 transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
2660}
2661.nav-install-btn:hover .icon { transform: translateY(-1px); }
2662@media (prefers-reduced-motion: reduce) {
2663 .nav-install-btn::before { animation: none; left: -100%; }
2664 .nav-install-btn:hover { transform: none; }
2665 .nav-install-btn:hover .icon { transform: none; }
2666}
2667/* Als PWA al draait (standalone mode) — verberg install-prompt knop volledig */
2668@media all and (display-mode: standalone) {
2669 #pwa-install-btn { display: none !important; }
2670}
2671
2672/* ========== v8.9.9 — Privé-post indicators ========== */
2673.post-private-banner {
2674 display: flex;
2675 align-items: center;
2676 gap: .6rem;
2677 padding: .75rem 1rem;
2678 background: color-mix(in srgb, #eab308 12%, var(--paper, #fff));
2679 border: 1px solid color-mix(in srgb, #eab308 40%, transparent);
2680 border-radius: 8px;
2681 margin: 0 0 1rem;
2682 font-size: .88rem;
2683 color: var(--ink, #1a1a1a);
2684}
2685.post-private-banner strong {
2686 color: #b45309;
2687}
2688
2689.grid-tile-private {
2690 position: absolute;
2691 top: 8px;
2692 left: 8px;
2693 padding: 3px 8px;
2694 background: rgba(0,0,0,0.7);
2695 color: #fde68a;
2696 font-size: .7rem;
2697 font-weight: 700;
2698 border-radius: 999px;
2699 z-index: 3;
2700 backdrop-filter: blur(4px);
2701 -webkit-backdrop-filter: blur(4px);
2702}
2703
2704/* ========== v8.9.10 — Social chip (inline in post-body) ========== */
2705.social-chip {
2706 display: inline-flex;
2707 align-items: center;
2708 gap: .45rem;
2709 padding: .35rem .75rem;
2710 background: color-mix(in srgb, var(--accent) 10%, transparent);
2711 border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
2712 border-radius: 999px;
2713 color: var(--ink, #1a1a1a);
2714 text-decoration: none;
2715 font-family: var(--font-ui, system-ui);
2716 font-size: .85rem;
2717 font-weight: 600;
2718 line-height: 1.2;
2719 transition: all .15s;
2720 vertical-align: middle;
2721 margin: 0 .1rem;
2722}
2723.social-chip:hover {
2724 background: var(--accent);
2725 color: #fff;
2726 border-color: var(--accent);
2727 text-decoration: none;
2728 transform: translateY(-1px);
2729 box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
2730}
2731.social-chip .icon {
2732 width: 16px;
2733 height: 16px;
2734 flex-shrink: 0;
2735}
2736.social-chip-icon-only {
2737 width: 36px;
2738 height: 36px;
2739 padding: 0;
2740 justify-content: center;
2741 border-radius: 50%;
2742}
2743.social-chip-icon-only .icon {
2744 width: 18px;
2745 height: 18px;
2746}
2747
2748/* v8.9.34 — player hidden state + post audio blocks
2749 v9.3 — Hide-rules uitgeschakeld: mini-player blijft permanent zichtbaar
2750 zodat 'ie niet meer verdwijnt bij browser-back of navigatie. */
2751.audio-player.is-hidden {
2752 /* display: none !important; */
2753}
2754body:not(.has-audio-player) #pcms-audio-player.is-hidden {
2755 /* display: none !important; */
2756}
2757
2758/* Post audio track — single track row in een post */
2759/* Lokale audio-track — visueel consistent met .post-audio-external */
2760.post-audio-track {
2761 display: flex;
2762 align-items: center;
2763 gap: .75rem;
2764 padding: .65rem .85rem;
2765 background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, transparent));
2766 border: 1px solid var(--rule, rgba(0,0,0,.08));
2767 border-radius: 10px;
2768 margin: .75rem 0;
2769 transition: background .15s, border-color .15s;
2770}
2771.post-audio-track:hover {
2772 border-color: var(--accent, #c2410c);
2773 background: color-mix(in srgb, var(--accent, #c2410c) 5%, var(--paper-2, transparent));
2774}
2775.post-audio-track .pat-play {
2776 flex-shrink: 0;
2777 width: 42px;
2778 height: 42px;
2779 border-radius: 8px; /* zelfde rounded-square als pae-icon */
2780 border: none;
2781 background: var(--accent, #c2410c);
2782 color: var(--paper, #fff);
2783 cursor: pointer;
2784 display: inline-flex;
2785 align-items: center;
2786 justify-content: center;
2787 transition: transform .1s, background .15s;
2788 padding: 0;
2789 position: relative;
2790 overflow: hidden;
2791}
2792.post-audio-track .pat-play:hover { transform: scale(1.04); }
2793.post-audio-track .pat-play:active { transform: scale(.96); }
2794.post-audio-track .pat-play svg,
2795.post-audio-track .pat-play .pat-sitelogo {
2796 width: 100%; height: 100%;
2797 position: absolute;
2798 top: 0; left: 0;
2799 transition: opacity .15s;
2800}
2801.post-audio-track .pat-play .icon-play,
2802.post-audio-track .pat-play .icon-pause {
2803 width: 18px; height: 18px;
2804 position: absolute;
2805 top: 50%; left: 50%;
2806 transform: translate(-50%, -50%);
2807 fill: currentColor;
2808 opacity: 0; /* verborgen tot hover of is-current */
2809}
2810/* Site logo: object-cover binnen 42x42 box */
2811.post-audio-track .pat-play .pat-sitelogo {
2812 object-fit: cover;
2813 opacity: 1;
2814}
2815.post-audio-track .pat-play .pat-sitelogo-fallback {
2816 padding: 11px; /* SVG music-note iets kleiner in box */
2817 opacity: 1;
2818}
2819/* Bij hover: site logo faded, play-icoon verschijnt */
2820.post-audio-track:hover .pat-play .pat-sitelogo { opacity: 0.25; }
2821.post-audio-track:hover .pat-play .icon-play { opacity: 1; }
2822/* Bij current + playing: toon pause-icon */
2823.post-audio-track.is-current .pat-play .pat-sitelogo { opacity: 0.25; }
2824.post-audio-track.is-current .pat-play .icon-play { opacity: 1; }
2825.post-audio-track.is-current.is-playing .pat-play .icon-play { opacity: 0; }
2826.post-audio-track.is-current.is-playing .pat-play .icon-pause { opacity: 1; }
2827.post-audio-track.is-current {
2828 border-color: var(--accent, #c2410c);
2829 background: color-mix(in srgb, var(--accent, #c2410c) 10%, transparent);
2830}
2831.post-audio-track .pat-meta {
2832 flex: 1;
2833 min-width: 0;
2834 display: flex;
2835 flex-direction: column;
2836 gap: 2px;
2837}
2838.post-audio-track .pat-title {
2839 display: block;
2840 font-weight: 600;
2841 color: var(--ink);
2842 font-size: .95rem;
2843 overflow: hidden;
2844 text-overflow: ellipsis;
2845 white-space: nowrap;
2846}
2847.post-audio-track .pat-artist {
2848 display: block;
2849 font-size: .78rem;
2850 color: var(--ink-muted, var(--ink));
2851 opacity: .65;
2852 overflow: hidden;
2853 text-overflow: ellipsis;
2854 white-space: nowrap;
2855}
2856.post-audio-track .pat-duration {
2857 flex-shrink: 0;
2858 font-family: ui-monospace, monospace;
2859 font-size: .8rem;
2860 opacity: .55;
2861}
2862
2863/* Album block in een post */
2864.post-album {
2865 position: relative;
2866 border: 1px solid var(--rule, rgba(0,0,0,.1));
2867 border-radius: 14px;
2868 overflow: hidden;
2869 margin: 1.25rem 0;
2870 background: var(--paper-2, color-mix(in srgb, var(--ink) 3%, transparent));
2871}
2872.post-album-header {
2873 display: flex;
2874 gap: .75rem;
2875 padding: .55rem .7rem;
2876 align-items: center;
2877}
2878.post-album-cover {
2879 width: 120px;
2880 height: 120px;
2881 border-radius: 8px;
2882 background-size: cover;
2883 background-position: center;
2884 background-color: var(--rule);
2885 flex-shrink: 0;
2886}
2887/* v9.0 — Collage van track-covers als album-cover leeg is */
2888.post-album-cover-collage {
2889 display: grid;
2890 grid-template-columns: 1fr 1fr;
2891 grid-template-rows: 1fr 1fr;
2892 gap: 0;
2893 overflow: hidden;
2894 background: transparent;
2895}
2896.post-album-cover-collage .post-album-cover-tile {
2897 background-size: cover;
2898 background-position: center;
2899 width: 100%;
2900 height: 100%;
2901}
2902/* Empty state: gradient met muziek-noot */
2903.post-album-cover-empty {
2904 display: flex;
2905 align-items: center;
2906 justify-content: center;
2907 background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--paper-2)), color-mix(in srgb, var(--accent) 10%, var(--paper)));
2908 color: var(--accent, #c2410c);
2909}
2910.post-album-cover-empty svg {
2911 width: 42%;
2912 height: 42%;
2913 opacity: .55;
2914}
2915.post-album-info {
2916 flex: 1;
2917 min-width: 0;
2918}
2919.post-album-label {
2920 text-transform: uppercase;
2921 font-size: .68rem;
2922 letter-spacing: .1em;
2923 opacity: .55;
2924 margin: 0 0 .15rem;
2925 font-weight: 700;
2926}
2927.post-album-title {
2928 font-family: var(--font-display);
2929 font-size: 1.1rem;
2930 font-weight: 600;
2931 margin: 0 0 .1rem;
2932 line-height: 1.15;
2933 letter-spacing: -0.01em;
2934}
2935.post-album-artist {
2936 font-size: .88rem;
2937 opacity: .8;
2938 margin: 0 0 .12rem;
2939 line-height: 1.25;
2940}
2941.post-album-meta {
2942 font-size: .74rem;
2943 opacity: .55;
2944 margin: 0;
2945 line-height: 1.2;
2946}
2947.post-album-playall {
2948 margin-top: .75rem;
2949 padding: .45rem .9rem;
2950 background: var(--accent, #c2410c);
2951 color: var(--paper, #fff);
2952 border: none;
2953 border-radius: 6px;
2954 font-weight: 600;
2955 cursor: pointer;
2956 font-size: .88rem;
2957 display: inline-flex;
2958 align-items: center;
2959 gap: .35rem;
2960}
2961.post-album-playall:hover { filter: brightness(1.08); }
2962
2963/* ============================================================
2964 v9.0 — Album cover clickable button
2965 ============================================================ */
2966.post-album-cover-btn {
2967 position: relative;
2968 background: none;
2969 border: none;
2970 padding: 0;
2971 margin: 0;
2972 cursor: pointer;
2973 flex-shrink: 0;
2974 border-radius: 8px;
2975 overflow: hidden;
2976 display: block;
2977 width: auto;
2978 /* v9.1 — voorkom mobile 300ms double-tap zoom delay, anders zou 2× snel klikken
2979 een zoom triggeren i.p.v. 2× click-events */
2980 touch-action: manipulation;
2981 -webkit-tap-highlight-color: transparent;
2982}
2983.post-album-cover-btn .post-album-cover {
2984 display: block;
2985 width: 76px;
2986 height: 76px;
2987 border-radius: 7px;
2988 background-size: cover;
2989 background-position: center;
2990 background-color: var(--rule);
2991 transition: transform .25s ease;
2992}
2993.post-album-cover-btn:hover .post-album-cover {
2994 transform: scale(1.04);
2995}
2996.post-album-cover-btn .post-album-cover-empty {
2997 background: linear-gradient(135deg,
2998 color-mix(in srgb, var(--accent, #c2410c) 35%, var(--paper)),
2999 color-mix(in srgb, var(--accent, #c2410c) 10%, var(--paper-2)));
3000 display: flex;
3001 align-items: center;
3002 justify-content: center;
3003}
3004.post-album-cover-btn .post-album-cover-empty svg {
3005 width: 28px;
3006 height: 28px;
3007 color: color-mix(in srgb, var(--accent, #c2410c) 60%, transparent);
3008}
3009/* Play overlay op hover */
3010.post-album-cover-play {
3011 position: absolute;
3012 inset: 0;
3013 display: flex;
3014 align-items: center;
3015 justify-content: center;
3016 background: rgba(0, 0, 0, .35);
3017 opacity: 0;
3018 transition: opacity .2s ease;
3019 border-radius: 8px;
3020 pointer-events: none;
3021}
3022.post-album-cover-play svg {
3023 width: 48px;
3024 height: 48px;
3025 color: #fff;
3026 filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
3027}
3028.post-album-cover-btn:hover .post-album-cover-play,
3029.post-album-cover-btn:focus-visible .post-album-cover-play {
3030 opacity: 1;
3031}
3032
3033/* ============================================================
3034 v1 P52 — Admin actions overlay (edit / delete)
3035 Only rendered when the viewer has god role. Sits top-right
3036 of the card so it doesn't compete with the cover play affordance.
3037 ============================================================ */
3038.post-album-actions {
3039 position: absolute;
3040 top: .4rem;
3041 right: .4rem;
3042 display: flex;
3043 gap: .25rem;
3044 z-index: 2;
3045}
3046.post-album-action {
3047 width: 28px;
3048 height: 28px;
3049 border-radius: 6px;
3050 border: 1px solid var(--rule);
3051 background: color-mix(in srgb, var(--paper) 78%, transparent);
3052 backdrop-filter: blur(8px);
3053 -webkit-backdrop-filter: blur(8px);
3054 color: var(--ink);
3055 display: inline-flex;
3056 align-items: center;
3057 justify-content: center;
3058 cursor: pointer;
3059 text-decoration: none;
3060 opacity: .65;
3061 padding: 0;
3062 transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
3063 -webkit-tap-highlight-color: transparent;
3064}
3065.post-album-action:hover,
3066.post-album-action:focus-visible {
3067 opacity: 1;
3068 transform: translateY(-1px);
3069 outline: none;
3070}
3071.post-album-action.is-danger:hover,
3072.post-album-action.is-danger:focus-visible {
3073 background: color-mix(in srgb, #c2410c 18%, var(--paper));
3074 border-color: color-mix(in srgb, #c2410c 45%, var(--rule));
3075 color: #c2410c;
3076}
3077.post-album-action svg {
3078 width: 15px;
3079 height: 15px;
3080 display: block;
3081}
3082
3083/* ============================================================
3084 v9.0 — Compacte tracklist (informatief, niet-klikbaar)
3085 ============================================================ */
3086.post-album-tracks {
3087 list-style: none;
3088 padding: 0;
3089 margin: 0;
3090 border-top: 1px solid var(--rule);
3091}
3092/* v9.4 — Playlist insert modal rows */
3093.pli-row {
3094 display: flex;
3095 align-items: center;
3096 gap: .75rem;
3097 padding: .65rem .5rem;
3098 border-bottom: 1px solid var(--border);
3099}
3100.pli-row:last-child { border-bottom: none; }
3101.pli-row-cover {
3102 width: 44px;
3103 height: 44px;
3104 border-radius: 6px;
3105 background-size: cover;
3106 background-position: center;
3107 background-color: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3108 flex-shrink: 0;
3109 display: flex;
3110 align-items: center;
3111 justify-content: center;
3112 font-size: 1.4rem;
3113}
3114.pli-row-info {
3115 flex: 1;
3116 min-width: 0;
3117}
3118.pli-row-title {
3119 font-weight: 600;
3120 overflow: hidden;
3121 text-overflow: ellipsis;
3122 white-space: nowrap;
3123}
3124.pli-row-meta {
3125 font-size: .82rem;
3126 overflow: hidden;
3127 text-overflow: ellipsis;
3128 white-space: nowrap;
3129}
3130.post-playlist-placeholder {
3131 margin: 1rem 0;
3132 user-select: none;
3133}
3134
3135/* v9.4 — Generic modal classes (gebruikt door playlist-editor en andere modals) */
3136.pcms-modal-backdrop {
3137 position: fixed;
3138 inset: 0;
3139 background: rgba(0, 0, 0, .6);
3140 display: flex;
3141 align-items: center;
3142 justify-content: center;
3143 z-index: 9000;
3144 padding: 1rem;
3145 box-sizing: border-box;
3146 overflow-y: auto;
3147}
3148.pcms-modal {
3149 background: var(--paper, #fff);
3150 color: var(--ink, #000);
3151 border-radius: 12px;
3152 width: 100%;
3153 max-width: 640px;
3154 max-height: calc(100vh - 2rem);
3155 display: flex;
3156 flex-direction: column;
3157 overflow: hidden;
3158 box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
3159}
3160.pcms-modal-header {
3161 display: flex;
3162 align-items: center;
3163 justify-content: space-between;
3164 padding: 1rem 1.25rem;
3165 border-bottom: 1px solid var(--border);
3166 flex-shrink: 0;
3167}
3168.pcms-modal-header h3 { font-size: 1.1rem; }
3169.pcms-modal-close {
3170 background: transparent;
3171 border: none;
3172 font-size: 1.6rem;
3173 line-height: 1;
3174 cursor: pointer;
3175 padding: .25rem .5rem;
3176 color: var(--fg-muted, #666);
3177 border-radius: 4px;
3178}
3179.pcms-modal-close:hover {
3180 background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3181}
3182.pcms-modal-body {
3183 padding: 1.25rem;
3184 overflow-y: auto;
3185 overscroll-behavior: contain;
3186 flex: 1;
3187 min-height: 0;
3188}
3189.pcms-modal-footer {
3190 display: flex;
3191 gap: .5rem;
3192 justify-content: flex-end;
3193 padding: .75rem 1.25rem;
3194 border-top: 1px solid var(--border);
3195 flex-shrink: 0;
3196 background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
3197}
3198
3199/* On mobile: full-screen modal */
3200@media (max-width: 600px) {
3201 .pcms-modal-backdrop {
3202 padding: 0;
3203 }
3204 .pcms-modal {
3205 border-radius: 0;
3206 max-width: 100%;
3207 max-height: 100vh;
3208 height: 100vh;
3209 }
3210}
3211
3212/* v9.4 — Media → Playlists tab */
3213.playlists-page-header {
3214 display: flex;
3215 flex-wrap: wrap;
3216 gap: 1rem;
3217 align-items: center;
3218 justify-content: space-between;
3219 margin-bottom: 1.25rem;
3220}
3221.playlists-page-header > p { flex: 1; min-width: 200px; }
3222.playlists-grid {
3223 display: grid;
3224 grid-template-columns: 1fr;
3225 gap: .75rem;
3226}
3227@media (min-width: 720px) {
3228 .playlists-grid { grid-template-columns: repeat(2, 1fr); }
3229}
3230@media (min-width: 1100px) {
3231 .playlists-grid { grid-template-columns: repeat(3, 1fr); }
3232}
3233.playlist-card {
3234 display: grid;
3235 grid-template-columns: 64px 1fr auto;
3236 gap: .75rem;
3237 align-items: center;
3238 padding: .75rem;
3239 border: 1px solid var(--border);
3240 border-radius: var(--radius);
3241 background: var(--paper, #fff);
3242}
3243.playlist-card-cover {
3244 width: 64px;
3245 height: 64px;
3246 border-radius: 8px;
3247 overflow: hidden;
3248 background-color: color-mix(in srgb, var(--ink, #000) 6%, transparent);
3249 display: flex;
3250 align-items: center;
3251 justify-content: center;
3252}
3253.playlist-card-cover img {
3254 width: 100%;
3255 height: 100%;
3256 object-fit: cover;
3257}
3258.playlist-card-cover-empty { font-size: 1.6rem; opacity: .5; }
3259.playlist-card-info { min-width: 0; }
3260.playlist-card-title {
3261 font-weight: 600;
3262 overflow: hidden;
3263 text-overflow: ellipsis;
3264 white-space: nowrap;
3265}
3266.playlist-card-artist,
3267.playlist-card-meta {
3268 font-size: .82rem;
3269 overflow: hidden;
3270 text-overflow: ellipsis;
3271 white-space: nowrap;
3272}
3273.playlist-card-actions {
3274 display: flex;
3275 gap: .25rem;
3276 flex-shrink: 0;
3277}
3278
3279/* v9.4 — Playlist editor modal (mobile-friendly, single-column) */
3280.pl-editor {
3281 /* Erft van .pcms-modal */
3282}
3283.pl-editor-meta {
3284 display: grid;
3285 grid-template-columns: 1fr;
3286 gap: .75rem;
3287 margin-bottom: 1rem;
3288}
3289@media (min-width: 560px) {
3290 .pl-editor-meta {
3291 grid-template-columns: 1fr 1fr;
3292 }
3293 .pl-editor-meta .pl-editor-field-full { grid-column: 1 / -1; }
3294}
3295.pl-editor-field {
3296 display: flex;
3297 flex-direction: column;
3298 gap: .25rem;
3299 min-width: 0;
3300}
3301.pl-editor-field span {
3302 font-size: .82rem;
3303 color: var(--fg-muted, #666);
3304 font-weight: 500;
3305}
3306.pl-editor-field input,
3307.pl-editor-field select {
3308 width: 100%;
3309 box-sizing: border-box;
3310 padding: .5rem .65rem;
3311 font-size: .95rem;
3312 border: 1px solid var(--border);
3313 border-radius: 6px;
3314 background: var(--paper, #fff);
3315 color: var(--ink, #000);
3316}
3317.pl-editor-field input:focus,
3318.pl-editor-field select:focus {
3319 outline: 2px solid var(--accent, #5a8a5a);
3320 outline-offset: -1px;
3321}
3322.pl-editor-section-title {
3323 margin: 1.25rem 0 .5rem;
3324 font-size: 1rem;
3325 font-weight: 600;
3326}
3327.pl-tracks-selected {
3328 border: 1px solid var(--border);
3329 border-radius: var(--radius);
3330 background: var(--paper, #fff);
3331 min-height: 60px;
3332 margin-bottom: 1rem;
3333 padding: .25rem;
3334}
3335.pl-tracks-empty {
3336 padding: 1.5rem;
3337 text-align: center;
3338 color: var(--fg-muted, #666);
3339 font-size: .9rem;
3340}
3341.pl-track-row {
3342 display: grid;
3343 grid-template-columns: 32px 36px 1fr auto;
3344 gap: .5rem;
3345 align-items: center;
3346 padding: .5rem;
3347 border-bottom: 1px solid var(--border);
3348 background: var(--paper, #fff);
3349 user-select: none;
3350 touch-action: pan-x;
3351}
3352.pl-track-row:last-child { border-bottom: none; }
3353.pl-track-row.is-dragging {
3354 opacity: .55;
3355 transform: scale(.98);
3356 background: color-mix(in srgb, var(--accent, #5a8a5a) 10%, transparent);
3357 border-radius: 6px;
3358}
3359.pl-track-row.drop-target-above {
3360 box-shadow: inset 0 2px 0 0 var(--accent, #5a8a5a);
3361}
3362.pl-track-row.drop-target-below {
3363 box-shadow: inset 0 -2px 0 0 var(--accent, #5a8a5a);
3364}
3365.pl-track-handle {
3366 cursor: grab;
3367 font-size: 1.2rem;
3368 line-height: 1;
3369 color: var(--fg-muted, #666);
3370 display: flex;
3371 align-items: center;
3372 justify-content: center;
3373 height: 32px;
3374 width: 32px;
3375 border-radius: 4px;
3376 flex-shrink: 0;
3377}
3378.pl-track-handle:active { cursor: grabbing; }
3379.pl-track-handle:hover {
3380 background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3381}
3382.pl-track-num {
3383 text-align: center;
3384 color: var(--fg-muted, #666);
3385 font-size: .85rem;
3386 width: 36px;
3387}
3388.pl-track-info {
3389 min-width: 0;
3390 overflow: hidden;
3391}
3392.pl-track-title {
3393 font-weight: 500;
3394 overflow: hidden;
3395 text-overflow: ellipsis;
3396 white-space: nowrap;
3397}
3398.pl-track-artist {
3399 font-size: .78rem;
3400 color: var(--fg-muted, #666);
3401 overflow: hidden;
3402 text-overflow: ellipsis;
3403 white-space: nowrap;
3404}
3405.pl-track-remove {
3406 background: transparent;
3407 border: none;
3408 cursor: pointer;
3409 padding: .35rem;
3410 border-radius: 4px;
3411 color: var(--fg-muted, #666);
3412 font-size: 1.2rem;
3413 line-height: 1;
3414}
3415.pl-track-remove:hover {
3416 background: color-mix(in srgb, #c00 12%, transparent);
3417 color: #c00;
3418}
3419
3420/* Available tracks panel */
3421.pl-tracks-available-panel {
3422 border: 1px solid var(--border);
3423 border-radius: var(--radius);
3424 background: var(--paper, #fff);
3425}
3426.pl-tracks-available-search {
3427 padding: .5rem;
3428 border-bottom: 1px solid var(--border);
3429}
3430.pl-tracks-available-search input {
3431 width: 100%;
3432 box-sizing: border-box;
3433}
3434.pl-tracks-available-list {
3435 max-height: 30vh;
3436 overflow-y: auto;
3437}
3438.pl-track-row-available {
3439 display: grid;
3440 grid-template-columns: 1fr auto;
3441 gap: .5rem;
3442 align-items: center;
3443 padding: .5rem;
3444 border-bottom: 1px solid var(--border);
3445 cursor: pointer;
3446}
3447.pl-track-row-available:last-child { border-bottom: none; }
3448.pl-track-row-available:hover {
3449 background: color-mix(in srgb, var(--accent, #5a8a5a) 8%, transparent);
3450}
3451.pl-track-row-available.is-already-added {
3452 opacity: .4;
3453 pointer-events: none;
3454}
3455.pl-track-add-btn {
3456 background: transparent;
3457 border: 1px solid var(--border);
3458 border-radius: 4px;
3459 padding: .25rem .5rem;
3460 cursor: pointer;
3461 font-size: .85rem;
3462 color: var(--accent, #5a8a5a);
3463}
3464
3465/* v9.3 — Tracklist items zijn nu klikbare <button class="pat-row"> binnen <li>.
3466 De LI is puur een container zonder visuele styling; alles gebeurt op de button. */
3467.post-album-track-compact {
3468 padding: 0;
3469 margin: 0;
3470 border-bottom: 1px solid var(--rule);
3471 list-style: none;
3472}
3473.post-album-track-compact:last-child { border-bottom: none; }
3474
3475.pat-row {
3476 display: grid;
3477 grid-template-columns: 32px 1fr auto;
3478 gap: .65rem;
3479 align-items: center;
3480 width: 100%;
3481 padding: .5rem .85rem;
3482 background: transparent;
3483 border: none;
3484 color: inherit;
3485 font: inherit;
3486 font-size: .82rem;
3487 text-align: left;
3488 cursor: pointer;
3489 position: relative;
3490 transition: background .15s ease;
3491}
3492.pat-row:hover {
3493 background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
3494}
3495.pat-row:active { transform: scale(.995); }
3496[data-theme="dark"] .pat-row:hover {
3497 background: color-mix(in srgb, var(--paper, #fff) 10%, transparent);
3498}
3499
3500/* Leader: track-nummer OF cover-thumb (afhankelijk van kind).
3501 v9.3 — pat-leader is altijd 32×32, met overgang voor spinner-vervanging. */
3502.pat-row .pat-num,
3503.pat-row .pat-cover {
3504 width: 32px;
3505 height: 32px;
3506 border-radius: 4px;
3507 flex-shrink: 0;
3508 transition: opacity .25s ease, transform .25s ease;
3509}
3510.pat-row .pat-num {
3511 font-family: ui-monospace, monospace;
3512 font-size: .8rem;
3513 opacity: .5;
3514 display: flex;
3515 align-items: center;
3516 justify-content: center;
3517}
3518.pat-row .pat-cover {
3519 background-size: cover;
3520 background-position: center;
3521 background-color: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3522}
3523
3524/* v9.3 — Loading-spiraal als overlay op de leader-kolom.
3525 pat-num/pat-cover faden uit, spinner faded in via ::before. */
3526.pat-row::before {
3527 content: "";
3528 position: absolute;
3529 left: .85rem; top: 50%;
3530 width: 32px; height: 32px;
3531 transform: translateY(-50%);
3532 color: var(--accent, #c2410c);
3533 background-color: currentColor;
3534 -webkit-mask: url('/assets/spinner.svg') center/26px 26px no-repeat;
3535 mask: url('/assets/spinner.svg') center/26px 26px no-repeat;
3536 opacity: 0;
3537 transition: opacity .25s ease;
3538 pointer-events: none;
3539 animation: pat-spinner-rotate 1.2s linear infinite;
3540 animation-play-state: paused;
3541}
3542.pat-row.is-loading::before {
3543 opacity: 1;
3544 animation-play-state: running;
3545}
3546.pat-row.is-loading .pat-num,
3547.pat-row.is-loading .pat-cover {
3548 opacity: 0;
3549 transform: scale(.85);
3550}
3551@keyframes pat-spinner-rotate {
3552 from { transform: translateY(-50%) rotate(0deg); }
3553 to { transform: translateY(-50%) rotate(-360deg); }
3554}
3555
3556/* Meta-kolom */
3557.pat-row .pat-meta {
3558 display: flex;
3559 flex-direction: column;
3560 min-width: 0;
3561 gap: 1px;
3562 overflow: hidden;
3563}
3564.pat-row .pat-title {
3565 font-weight: 500;
3566 overflow: hidden;
3567 text-overflow: ellipsis;
3568 white-space: nowrap;
3569}
3570.pat-row .pat-artist {
3571 font-size: .72rem;
3572 opacity: .6;
3573 overflow: hidden;
3574 text-overflow: ellipsis;
3575 white-space: nowrap;
3576}
3577.pat-row .pat-duration {
3578 font-family: ui-monospace, monospace;
3579 font-size: .72rem;
3580 opacity: .55;
3581 font-variant-numeric: tabular-nums;
3582 white-space: nowrap;
3583}
3584.pat-row .pat-duration-empty {
3585 opacity: .25;
3586}
3587
3588/* is-current — actieve track in de player */
3589.pat-row.is-current {
3590 background: color-mix(in srgb, var(--accent, #c2410c) 12%, transparent);
3591}
3592.pat-row.is-current .pat-title,
3593.pat-row.is-current .pat-artist { color: var(--accent, #c2410c); }
3594
3595/* v9.3 — Marquee bij actief afspelen: titel scrollt heen-en-weer.
3596 --pat-shift wordt door JS gezet (= overflow in pixels). Bij 0 → geen
3597 beweging want translateX(0) blijft 0.
3598 Snelle cyclus (6s) met korte rust aan beide uiteinden (8%) zodat 't
3599 vlot voelt zonder onleesbaar te zijn. */
3600.pat-row.is-current.is-playing .pat-title {
3601 animation: pat-title-marquee 6s ease-in-out infinite alternate;
3602 text-overflow: clip;
3603 overflow: visible;
3604 will-change: transform;
3605}
3606@keyframes pat-title-marquee {
3607 0%, 8% { transform: translateX(0); }
3608 92%, 100% { transform: translateX(calc(-1 * var(--pat-shift, 0px))); }
3609}
3610
3611/* ============================================================
3612 v9.0 — CSS-migratie voor OUDE opgeslagen albums
3613 Oude posts hebben <li class="post-audio-track"> met play-knoppen + cover-spans.
3614 We renderen die VISUEEL als compact, zonder de HTML aan te passen.
3615 ============================================================ */
3616.post-album-tracks .post-audio-track {
3617 display: grid;
3618 grid-template-columns: 28px 1fr auto;
3619 gap: .75rem;
3620 align-items: center;
3621 padding: .5rem .85rem;
3622 margin: 0;
3623 border: none;
3624 border-bottom: 1px solid var(--rule);
3625 background: transparent;
3626 border-radius: 0;
3627 cursor: default;
3628 font-size: .92rem;
3629}
3630.post-album-tracks .post-audio-track:last-child { border-bottom: none; }
3631/* Verberg de cover-thumb en play-button in OUDE saved posts */
3632.post-album-tracks .post-audio-track .pat-cover,
3633.post-album-tracks .post-audio-track .pat-play {
3634 display: none !important;
3635}
3636.post-album-tracks .post-audio-track .pat-num {
3637 font-family: ui-monospace, monospace;
3638 font-size: .8rem;
3639 opacity: .45;
3640 text-align: center;
3641 width: auto;
3642}
3643.post-album-tracks .post-audio-track .pat-meta {
3644 display: flex;
3645 flex-direction: column;
3646 min-width: 0;
3647 gap: 1px;
3648}
3649.post-album-tracks .post-audio-track .pat-title {
3650 font-weight: 500;
3651 overflow: hidden;
3652 text-overflow: ellipsis;
3653 white-space: nowrap;
3654}
3655.post-album-tracks .post-audio-track .pat-artist {
3656 font-size: .78rem;
3657 opacity: .6;
3658}
3659.post-album-tracks .post-audio-track .pat-duration {
3660 font-family: ui-monospace, monospace;
3661 font-size: .78rem;
3662 opacity: .55;
3663}
3664.post-album-tracks .post-audio-track.is-current {
3665 background: color-mix(in srgb, var(--accent, #c2410c) 10%, transparent);
3666}
3667.post-album-tracks .post-audio-track.is-current .pat-num,
3668.post-album-tracks .post-audio-track.is-current .pat-title {
3669 color: var(--accent);
3670}
3671
3672@media (max-width: 540px) {
3673 .post-album-header { flex-direction: column; }
3674 .post-album-cover-btn .post-album-cover { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1/1; }
3675}
3676@media (max-width: 380px) {
3677 .post-album-header { padding: .75rem; gap: .75rem; }
3678 .post-album-cover-btn .post-album-cover { max-width: 180px; }
3679 .post-album-title { font-size: 1.15rem; }
3680 .post-album-meta { font-size: .8rem; }
3681 .post-album-track-compact,
3682 .post-album-tracks .post-audio-track {
3683 grid-template-columns: 24px 1fr auto;
3684 gap: .5rem;
3685 padding: .4rem .6rem;
3686 font-size: .85rem;
3687 }
3688 .post-album-track-compact .pat-duration,
3689 .post-album-tracks .post-audio-track .pat-duration {
3690 font-size: .72rem;
3691 }
3692 /* Queue items in expand-sheet */
3693 .audio-sheet-queue-item { padding: .4rem .45rem; gap: .55rem; }
3694 .audio-sheet-queue-cover { width: 32px; height: 32px; }
3695 .audio-sheet-queue-title { font-size: .85rem; }
3696 .audio-sheet-queue-artist { font-size: .7rem; }
3697}
3698
3699/* External track (SoundCloud / YouTube / Spotify / etc) — klikbaar maar link-naar-platform */
3700.post-audio-external {
3701 display: flex;
3702 align-items: center;
3703 gap: .75rem;
3704 padding: .65rem .85rem;
3705 background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, transparent));
3706 border: 1px solid var(--rule, rgba(0,0,0,.08));
3707 border-radius: 10px;
3708 margin: .75rem 0;
3709 text-decoration: none;
3710 color: var(--ink);
3711 transition: background .15s, border-color .15s;
3712}
3713.post-audio-external:hover {
3714 border-color: var(--accent);
3715 background: color-mix(in srgb, var(--accent) 5%, var(--paper-2, transparent));
3716}
3717.post-audio-external .pae-icon {
3718 flex-shrink: 0;
3719 width: 42px;
3720 height: 42px;
3721 border-radius: 8px;
3722 display: inline-flex;
3723 align-items: center;
3724 justify-content: center;
3725 background: var(--platform-color, #555);
3726 color: #fff;
3727 font-size: 1.2rem;
3728}
3729.post-audio-external .pae-icon-svg svg {
3730 width: 60%;
3731 height: 60%;
3732 fill: currentColor;
3733}
3734/* Per-platform vult de box net wat anders — brand-specifiek geoptimaliseerd */
3735.post-audio-external[data-platform="soundcloud"] .pae-icon-svg svg { width: 72%; height: auto; }
3736.post-audio-external[data-platform="spotify"] .pae-icon-svg svg { width: 72%; height: 72%; }
3737.post-audio-external[data-platform="youtube"] .pae-icon-svg svg { width: 68%; height: auto; }
3738.post-audio-external[data-platform="bandcamp"] .pae-icon-svg svg { width: 62%; height: auto; }
3739.post-audio-external[data-platform="apple"] .pae-icon-svg svg { width: 58%; height: 58%; }
3740.post-audio-external[data-platform="tidal"] .pae-icon-svg svg { width: 68%; height: auto; }
3741.post-audio-external[data-platform="deezer"] .pae-icon-svg svg { width: 65%; height: auto; }
3742.post-audio-external[data-platform="mixcloud"] .pae-icon-svg svg { width: 75%; height: auto; }
3743.post-audio-external[data-platform="soundcloud"] .pae-icon { background: #ff5500; }
3744.post-audio-external[data-platform="spotify"] .pae-icon { background: #1db954; }
3745.post-audio-external[data-platform="youtube"] .pae-icon { background: #ff0000; }
3746.post-audio-external[data-platform="bandcamp"] .pae-icon { background: #1da0c3; }
3747.post-audio-external[data-platform="apple"] .pae-icon { background: #fa243c; }
3748.post-audio-external[data-platform="tidal"] .pae-icon { background: #000; }
3749.post-audio-external[data-platform="deezer"] .pae-icon { background: #a238ff; }
3750.post-audio-external[data-platform="mixcloud"] .pae-icon { background: #314359; }
3751.post-audio-external[data-platform="other"] .pae-icon { background: #555; }
3752.post-audio-external .pae-meta {
3753 flex: 1;
3754 min-width: 0;
3755 display: flex;
3756 flex-direction: column;
3757 gap: 2px;
3758}
3759.post-audio-external .pae-title {
3760 display: block;
3761 font-weight: 600;
3762 overflow: hidden;
3763 text-overflow: ellipsis;
3764 white-space: nowrap;
3765 color: var(--ink);
3766}
3767.post-audio-external .pae-platform {
3768 display: block;
3769 font-size: .78rem;
3770 opacity: .65;
3771 text-transform: capitalize;
3772}
3773.post-audio-external .pae-go {
3774 flex-shrink: 0;
3775 opacity: .5;
3776 font-size: 1.1rem;
3777}
3778
3779/* =========================================================================
3780 v9.0 — Video player (inline)
3781 ========================================================================= */
3782
3783.post-video-figure {
3784 margin: 1.25rem 0;
3785 max-width: 100%;
3786}
3787
3788.post-video {
3789 display: block;
3790 width: 100%;
3791 max-width: 100%;
3792 height: auto;
3793 border-radius: 10px;
3794 background: #000;
3795 box-shadow: 0 4px 20px rgba(0,0,0,.15);
3796}
3797
3798.post-video-caption {
3799 margin-top: .5rem;
3800 font-size: .88rem;
3801 color: var(--ink-muted, color-mix(in srgb, var(--ink) 60%, transparent));
3802 text-align: center;
3803 line-height: 1.5;
3804}
3805
3806.post-video-caption strong {
3807 display: inline;
3808 font-weight: 600;
3809 color: var(--ink);
3810}
3811
3812@media (max-width: 640px) {
3813 .post-video-figure { margin: .75rem -.5rem; }
3814 .post-video { border-radius: 6px; }
3815}
3816
3817/* v9.3 — Floating "Bewerken" knop voor album-blokken in de post-editor.
3818 Verschijnt bij hover over een .post-album binnen #visual en wordt via JS
3819 geplaatst op de rechterbovenhoek van het blok. Niet in de opgeslagen HTML. */
3820.pcms-album-edit-overlay {
3821 position: absolute;
3822 z-index: 1000;
3823 transform: translateX(-100%);
3824 display: inline-flex;
3825 align-items: center;
3826 gap: .35rem;
3827 padding: .35rem .7rem;
3828 background: var(--accent, #c2410c);
3829 color: #fff;
3830 border: none;
3831 border-radius: 6px;
3832 font-size: .82rem;
3833 font-weight: 600;
3834 cursor: pointer;
3835 box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
3836 transition: transform .12s ease, box-shadow .12s ease;
3837}
3838.pcms-album-edit-overlay:hover {
3839 transform: translateX(-100%) translateY(-1px);
3840 box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
3841}
3842.pcms-album-edit-overlay:active {
3843 transform: translateX(-100%) translateY(0);
3844 box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
3845}
3846
3847/* v9.3 — Drag-and-drop in de album-builder selected-lijst */
3848.ab-selected-row { cursor: default; }
3849.ab-selected-row .ab-drag-handle {
3850 display: inline-flex;
3851 align-items: center;
3852 justify-content: center;
3853 width: 18px;
3854 height: 100%;
3855 color: color-mix(in srgb, currentColor 40%, transparent);
3856 cursor: grab;
3857 user-select: none;
3858 font-size: .9rem;
3859 letter-spacing: -2px;
3860 flex-shrink: 0;
3861}
3862.ab-selected-row:hover .ab-drag-handle {
3863 color: color-mix(in srgb, currentColor 70%, transparent);
3864}
3865.ab-selected-row.is-dragging {
3866 opacity: .35;
3867 cursor: grabbing;
3868}
3869.ab-selected-row.is-dragging .ab-drag-handle { cursor: grabbing; }
3870/* Drop-indicator lijnen boven/onder de target rij */
3871.ab-selected-row.is-drag-target-before {
3872 box-shadow: 0 -2px 0 0 var(--accent, #c2410c) inset, 0 2px 0 0 var(--accent, #c2410c);
3873 /* Gebruik outline voor cross-browser zichtbaarheid */
3874 position: relative;
3875}
3876.ab-selected-row.is-drag-target-before::before {
3877 content: "";
3878 position: absolute;
3879 top: -1px; left: 0; right: 0;
3880 height: 2px;
3881 background: var(--accent, #c2410c);
3882 pointer-events: none;
3883}
3884.ab-selected-row.is-drag-target-after::after {
3885 content: "";
3886 position: absolute;
3887 bottom: -1px; left: 0; right: 0;
3888 height: 2px;
3889 background: var(--accent, #c2410c);
3890 pointer-events: none;
3891}
3892.ab-selected-row.is-drag-target-after { position: relative; }
3893
3894/* v9.3 — Playlist fallback states (missing of empty playlist reference in post) */
3895.post-playlist-missing, .post-playlist-empty {
3896 padding: 1rem;
3897 margin: .75rem 0;
3898 background: color-mix(in srgb, var(--accent, #c2410c) 8%, transparent);
3899 border: 1px dashed color-mix(in srgb, var(--accent, #c2410c) 30%, transparent);
3900 border-radius: 8px;
3901 font-size: .9rem;
3902}
3903.post-playlist-missing em, .post-playlist-empty em {
3904 opacity: .8;
3905}
3906
3907/* v9.3 — Install-app footer-knop */
3908.site-footer-install {
3909 display: flex;
3910 justify-content: center;
3911 padding: 1rem 1rem 1.25rem;
3912 border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
3913 margin-top: .5rem;
3914}
3915
3916/* v9.4 — Cooler install-knop: gradient + shimmer + perfect centering.
3917 Twee kleur-stops voor diepte, animated shimmer-streep om aandacht te trekken,
3918 icon perfect verticaal gecentreerd via flex (was: net iets te hoog tov tekst). */
3919.install-app-btn {
3920 position: relative;
3921 display: inline-flex;
3922 align-items: center;
3923 justify-content: center;
3924 gap: .55rem;
3925 padding: .8rem 1.6rem;
3926 background: linear-gradient(135deg,
3927 var(--accent, #c2410c),
3928 color-mix(in srgb, var(--accent, #c2410c) 80%, #000));
3929 color: #fff;
3930 border: none;
3931 border-radius: 999px;
3932 font: inherit;
3933 font-weight: 600;
3934 font-size: .95rem;
3935 line-height: 1;
3936 letter-spacing: .01em;
3937 cursor: pointer;
3938 overflow: hidden;
3939 isolation: isolate;
3940 box-shadow:
3941 0 1px 0 rgba(255,255,255,.15) inset,
3942 0 -2px 0 rgba(0,0,0,.1) inset,
3943 0 4px 14px color-mix(in srgb, var(--accent, #c2410c) 40%, transparent),
3944 0 1px 3px rgba(0,0,0,.18);
3945 transition:
3946 transform .15s cubic-bezier(.4, 0, .2, 1),
3947 box-shadow .2s ease,
3948 filter .15s ease;
3949}
3950.install-app-btn svg {
3951 flex-shrink: 0;
3952 /* subtle bounce-on-hover trigger, separate animation */
3953 transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
3954}
3955.install-app-btn span {
3956 line-height: 1;
3957}
3958
3959/* Shimmer-streep die langzaam over de knop loopt — "alive" effect */
3960.install-app-btn::before {
3961 content: "";
3962 position: absolute;
3963 top: 0;
3964 left: -100%;
3965 width: 60%;
3966 height: 100%;
3967 background: linear-gradient(110deg,
3968 transparent 30%,
3969 rgba(255,255,255,.25) 50%,
3970 transparent 70%);
3971 z-index: -1;
3972 animation: pcmsInstallShimmer 4s ease-in-out infinite;
3973 pointer-events: none;
3974}
3975@keyframes pcmsInstallShimmer {
3976 0%, 35% { left: -100%; }
3977 65%, 100% { left: 200%; }
3978}
3979
3980.install-app-btn:hover {
3981 transform: translateY(-2px) scale(1.02);
3982 filter: brightness(1.06);
3983 box-shadow:
3984 0 1px 0 rgba(255,255,255,.2) inset,
3985 0 -2px 0 rgba(0,0,0,.1) inset,
3986 0 8px 24px color-mix(in srgb, var(--accent, #c2410c) 55%, transparent),
3987 0 2px 6px rgba(0,0,0,.2);
3988}
3989.install-app-btn:hover svg {
3990 transform: translateY(-2px);
3991}
3992.install-app-btn:active {
3993 transform: translateY(0) scale(.98);
3994 transition-duration: .05s;
3995}
3996.install-app-btn:focus-visible {
3997 outline: 2px solid var(--accent, #c2410c);
3998 outline-offset: 3px;
3999}
4000
4001/* Reduced motion: shimmer uit, alleen statisch */
4002@media (prefers-reduced-motion: reduce) {
4003 .install-app-btn::before { animation: none; left: -100%; }
4004 .install-app-btn:hover { transform: none; }
4005 .install-app-btn:hover svg { transform: none; }
4006}
4007
4008/* Install-instructions modal */
4009.install-modal {
4010 position: fixed;
4011 inset: 0;
4012 z-index: 10000;
4013 display: flex;
4014 align-items: center;
4015 justify-content: center;
4016 padding: 1rem;
4017}
4018.install-modal-backdrop {
4019 position: absolute;
4020 inset: 0;
4021 background: rgba(0,0,0,.55);
4022 backdrop-filter: blur(3px);
4023}
4024.install-modal-panel {
4025 position: relative;
4026 z-index: 1;
4027 background: var(--paper);
4028 color: var(--ink);
4029 border: 1px solid var(--rule);
4030 border-radius: 14px;
4031 padding: 1.5rem;
4032 max-width: 440px;
4033 width: 100%;
4034 max-height: 90vh;
4035 overflow-y: auto;
4036 box-shadow: 0 20px 60px rgba(0,0,0,.4);
4037}
4038.install-modal-panel h3 { font-size: 1.15rem; color: var(--ink); }
4039.install-modal-panel h4 {
4040 margin: 1rem 0 .4rem;
4041 font-size: .92rem;
4042 letter-spacing: .03em;
4043 text-transform: uppercase;
4044 opacity: .7;
4045 color: var(--ink);
4046}
4047.install-modal-panel p { color: var(--ink); }
4048.install-steps {
4049 margin: 0;
4050 padding-left: 1.35rem;
4051 display: flex;
4052 flex-direction: column;
4053 gap: .45rem;
4054 font-size: .95rem;
4055 line-height: 1.45;
4056 color: var(--ink);
4057}
4058.install-steps li::marker { color: var(--accent); font-weight: 700; }
4059.install-apk-block {
4060 margin-top: 1.25rem;
4061 padding-top: 1rem;
4062 border-top: 1px dashed var(--rule);
4063}
4064.install-apk-link {
4065 display: inline-flex;
4066 align-items: center;
4067 margin-top: .4rem;
4068 padding: .6rem 1rem;
4069 background: var(--accent);
4070 color: #fff;
4071 border-radius: 8px;
4072 text-decoration: none;
4073 font-weight: 600;
4074}
4075.install-apk-link:hover { filter: brightness(1.08); }
4076.install-modal-actions {
4077 display: flex;
4078 justify-content: flex-end;
4079 margin-top: 1.25rem;
4080}
4081.install-modal-actions .btn {
4082 padding: .5rem 1rem;
4083 background: var(--paper-2);
4084 border: 1px solid var(--rule);
4085 border-radius: 8px;
4086 color: var(--ink);
4087 cursor: pointer;
4088 font: inherit;
4089 font-weight: 500;
4090}
4091.install-modal-actions .btn:hover {
4092 background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
4093 border-color: var(--accent);
4094 color: var(--accent);
4095}
4096
4097@media (max-width: 520px) {
4098 .install-modal-panel { padding: 1.2rem; }
4099 .install-app-btn { width: 100%; justify-content: center; }
4100}
4101
4102/* v9.3 — Install-modal: choice-blocks met voor/nadelen */
4103.install-choice {
4104 margin-top: 1.25rem;
4105 padding: 1rem;
4106 border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
4107 border-radius: 10px;
4108 background: color-mix(in srgb, currentColor 3%, transparent);
4109}
4110.install-choice + .install-choice { margin-top: 1rem; }
4111.install-choice h4 {
4112 margin: 0 0 .75rem;
4113 font-size: 1rem;
4114 letter-spacing: 0;
4115 text-transform: none;
4116 opacity: 1;
4117}
4118.install-pros-cons {
4119 display: flex;
4120 gap: 1rem;
4121 margin: .5rem 0 1rem;
4122}
4123.install-pros,
4124.install-cons {
4125 flex: 1;
4126 min-width: 0;
4127 font-size: .85rem;
4128 line-height: 1.45;
4129}
4130.install-pros strong,
4131.install-cons strong {
4132 display: block;
4133 margin-bottom: .35rem;
4134 font-size: .82rem;
4135 letter-spacing: .02em;
4136}
4137.install-pros strong { color: #16a34a; }
4138.install-cons strong { color: #dc2626; }
4139.install-pros ul,
4140.install-cons ul {
4141 margin: 0;
4142 padding-left: 1.1rem;
4143 display: flex;
4144 flex-direction: column;
4145 gap: .25rem;
4146}
4147.install-pros li::marker { color: #16a34a; }
4148.install-cons li::marker { color: #dc2626; }
4149
4150.install-choice-cta {
4151 display: inline-flex;
4152 align-items: center;
4153 justify-content: center;
4154 gap: .35rem;
4155 margin-top: .5rem;
4156 padding: .7rem 1.1rem;
4157 background: var(--accent, #c2410c);
4158 color: #fff;
4159 border: none;
4160 border-radius: 8px;
4161 text-decoration: none;
4162 font: inherit;
4163 font-weight: 600;
4164 font-size: .95rem;
4165 cursor: pointer;
4166 transition: filter .12s ease;
4167}
4168.install-choice-cta:hover { filter: brightness(1.08); }
4169.install-choice-note {
4170 margin: .5rem 0 0;
4171 padding: .6rem .8rem;
4172 background: color-mix(in srgb, currentColor 4%, transparent);
4173 border-left: 3px solid var(--accent, #c2410c);
4174 border-radius: 4px;
4175 font-size: .9rem;
4176 line-height: 1.45;
4177}
4178
4179@media (max-width: 520px) {
4180 .install-pros-cons { flex-direction: column; gap: .75rem; }
4181}
4182
4183/* v9.4 — Soft fade-overgang tussen posts bij navigatie.
4184 Fade-out is rustig (450ms): oude content vervaagt geleidelijk terwijl
4185 de scroll-naar-top loopt. Fade-in is snel (180ms) met een lichte blur-
4186 onscherp → scherp animatie zodat de nieuwe content niet abrupt verschijnt. */
4187#pcms-main {
4188 transition: opacity .45s ease-out;
4189}
4190#pcms-main.is-pcms-transitioning-out {
4191 opacity: 0;
4192}
4193#pcms-main.is-pcms-transitioning-in {
4194 opacity: 0;
4195 filter: blur(6px);
4196 animation: pcmsFadeIn .18s ease-out forwards;
4197 will-change: opacity, filter;
4198}
4199@keyframes pcmsFadeIn {
4200 from { opacity: 0; filter: blur(6px); }
4201 to { opacity: 1; filter: blur(0); }
4202}
4203
4204/* Respecteer reduced-motion voorkeur (iOS/Android accessibility setting) */
4205@media (prefers-reduced-motion: reduce) {
4206 #pcms-main {
4207 transition: opacity .15s ease-out;
4208 }
4209 #pcms-main.is-pcms-transitioning-in {
4210 filter: none;
4211 animation: none;
4212 opacity: 1;
4213 }
4214}
Note: See TracBrowser for help on using the repository browser.