source: Klonkt/src/assets/css/style.css@ cb6b1ad

main
Last change on this file since cb6b1ad was 7bc636b, checked in by Robin <robin@…>, 4 months ago

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