@pigmilcom/a11y 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -23
  2. package/dist/a11y.cdn.js +4 -4
  3. package/dist/index.css +347 -634
  4. package/dist/index.js +35 -35
  5. package/dist/index.min.css +1 -1
  6. package/dist/index.min.js +1 -1
  7. package/dist/index.min.mjs +1 -1
  8. package/dist/index.mjs +35 -35
  9. package/package.json +3 -6
  10. package/src/cdn.jsx +3 -4
package/dist/index.css CHANGED
@@ -2,649 +2,362 @@
2
2
 
3
3
  @pigmilcom/a11y — Global Accessibility Stylesheet
4
4
 
5
- Tailwind utilities are generated first (panel UI), followed by the
5
+ Widget UI classes (pgm-*) are defined first, followed by the
6
6
  accessibility class rules that get toggled on <html> by the widget.
7
7
 
8
- ──────────────────────────────────────── */
9
-
10
- .visible {
11
- visibility: visible;
12
- }
13
-
14
- .fixed {
15
- position: fixed;
16
- }
17
-
18
- .absolute {
19
- position: absolute;
20
- }
21
-
22
- .relative {
23
- position: relative;
24
- }
25
-
26
- .inset-0 {
27
- inset: 0px;
28
- }
29
-
30
- .bottom-5 {
31
- bottom: 1.25rem;
32
- }
33
-
34
- .left-0\.5 {
35
- left: 0.125rem;
36
- }
37
-
38
- .left-1\/2 {
39
- left: 50%;
40
- }
41
-
42
- .left-3\.5 {
43
- left: 0.875rem;
44
- }
45
-
46
- .left-5 {
47
- left: 1.25rem;
48
- }
49
-
50
- .right-1\.5 {
51
- right: 0.375rem;
52
- }
53
-
54
- .right-5 {
55
- right: 1.25rem;
56
- }
57
-
58
- .top-0\.5 {
59
- top: 0.125rem;
60
- }
61
-
62
- .top-1\.5 {
63
- top: 0.375rem;
64
- }
65
-
66
- .top-1\/2 {
67
- top: 50%;
68
- }
69
-
70
- .top-5 {
71
- top: 1.25rem;
72
- }
73
-
74
- .z-9998 {
75
- z-index: 9998;
76
- }
77
-
78
- .z-9999 {
79
- z-index: 9999;
80
- }
81
-
82
- .mb-2 {
83
- margin-bottom: 0.5rem;
84
- }
85
-
86
- .mt-0\.5 {
87
- margin-top: 0.125rem;
88
- }
89
-
90
- .block {
91
- display: block;
92
- }
93
-
94
- .inline {
95
- display: inline;
96
- }
97
-
98
- .flex {
99
- display: flex;
100
- }
101
-
102
- .h-1\.5 {
103
- height: 0.375rem;
104
- }
105
-
106
- .h-10 {
107
- height: 2.5rem;
108
- }
109
-
110
- .h-3 {
111
- height: 0.75rem;
112
- }
113
-
114
- .h-3\.5 {
115
- height: 0.875rem;
116
- }
117
-
118
- .h-4 {
119
- height: 1rem;
120
- }
121
-
122
- .h-5 {
123
- height: 1.25rem;
124
- }
125
-
126
- .h-6 {
127
- height: 1.5rem;
128
- }
129
-
130
- .max-h-\[min\(50vh\2c 340px\)\] {
131
- max-height: min(50vh, 340px);
132
- }
133
-
134
- .w-1\.5 {
135
- width: 0.375rem;
136
- }
137
-
138
- .w-10 {
139
- width: 2.5rem;
140
- }
141
-
142
- .w-3 {
143
- width: 0.75rem;
144
- }
145
-
146
- .w-3\.5 {
147
- width: 0.875rem;
148
- }
149
-
150
- .w-4 {
151
- width: 1rem;
152
- }
153
-
154
- .w-5 {
155
- width: 1.25rem;
156
- }
157
-
158
- .w-6 {
159
- width: 1.5rem;
160
- }
161
-
162
- .w-7 {
163
- width: 1.75rem;
164
- }
165
-
166
- .w-\[clamp\(280px\2c 90vw\2c 360px\)\] {
167
- width: clamp(280px, 90vw, 360px);
168
- }
169
-
170
- .w-full {
171
- width: 100%;
172
- }
173
-
174
- .min-w-0 {
175
- min-width: 0px;
176
- }
177
-
178
- .flex-1 {
179
- flex: 1 1 0%;
180
- }
181
-
182
- .shrink-0 {
183
- flex-shrink: 0;
184
- }
185
-
186
- .-translate-x-1\/2 {
187
- --tw-translate-x: -50%;
188
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
189
- }
190
-
191
- .-translate-y-1\/2 {
192
- --tw-translate-y: -50%;
193
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
194
- }
195
-
196
- .items-center {
197
- align-items: center;
198
- }
199
-
200
- .justify-center {
201
- justify-content: center;
202
- }
203
-
204
- .justify-between {
205
- justify-content: space-between;
206
- }
207
-
208
- .gap-1\.5 {
209
- gap: 0.375rem;
210
- }
211
-
212
- .gap-3 {
213
- gap: 0.75rem;
214
- }
215
-
216
- .overflow-y-auto {
217
- overflow-y: auto;
218
- }
219
-
220
- .rounded {
221
- border-radius: 0.25rem;
222
- }
223
-
224
- .rounded-full {
225
- border-radius: 9999px;
226
- }
227
-
228
- .border {
229
- border-width: 1px;
230
- }
231
-
232
- .border-b {
233
- border-bottom-width: 1px;
234
- }
235
-
236
- .border-t {
237
- border-top-width: 1px;
238
- }
239
-
240
- .border-\[\#00e5a0\] {
241
- --tw-border-opacity: 1;
242
- border-color: rgb(0 229 160 / var(--tw-border-opacity, 1));
243
- }
244
-
245
- .border-white\/10 {
246
- border-color: rgb(255 255 255 / 0.1);
247
- }
248
-
249
- .border-white\/15 {
250
- border-color: rgb(255 255 255 / 0.15);
251
- }
252
-
253
- .border-white\/\[0\.07\] {
254
- border-color: rgb(255 255 255 / 0.07);
255
- }
256
-
257
- .bg-\[\#00e5a0\] {
258
- --tw-bg-opacity: 1;
259
- background-color: rgb(0 229 160 / var(--tw-bg-opacity, 1));
260
- }
261
-
262
- .bg-\[rgba\(0\2c 229\2c 160\2c 0\.04\)\] {
263
- background-color: rgba(0,229,160,0.04);
264
- }
265
-
266
- .bg-\[rgba\(0\2c 229\2c 160\2c 0\.1\)\] {
267
- background-color: rgba(0,229,160,0.1);
268
- }
269
-
270
- .bg-\[rgba\(0\2c 229\2c 160\2c 0\.2\)\] {
271
- background-color: rgba(0,229,160,0.2);
272
- }
273
-
274
- .bg-\[rgba\(4\2c 6\2c 10\2c 0\.85\)\] {
275
- background-color: rgba(4,6,10,0.85);
276
- }
277
-
278
- .bg-\[rgba\(4\2c 6\2c 10\2c 0\.98\)\] {
279
- background-color: rgba(4,6,10,0.98);
280
- }
281
-
282
- .bg-black\/60 {
283
- background-color: rgb(0 0 0 / 0.6);
284
- }
285
-
286
- .bg-transparent {
287
- background-color: transparent;
288
- }
289
-
290
- .bg-white\/25 {
291
- background-color: rgb(255 255 255 / 0.25);
292
- }
293
-
294
- .px-4 {
295
- padding-left: 1rem;
296
- padding-right: 1rem;
297
- }
298
-
299
- .py-1\.5 {
300
- padding-top: 0.375rem;
301
- padding-bottom: 0.375rem;
302
- }
303
-
304
- .py-2\.5 {
305
- padding-top: 0.625rem;
306
- padding-bottom: 0.625rem;
307
- }
308
-
309
- .py-3 {
310
- padding-top: 0.75rem;
311
- padding-bottom: 0.75rem;
312
- }
313
-
314
- .text-left {
315
- text-align: left;
316
- }
317
-
318
- .text-center {
319
- text-align: center;
320
- }
321
-
322
- .text-\[0\.52rem\] {
323
- font-size: 0.52rem;
324
- }
325
-
326
- .text-\[0\.56rem\] {
327
- font-size: 0.56rem;
328
- }
329
-
330
- .text-\[0\.58rem\] {
331
- font-size: 0.58rem;
332
- }
333
-
334
- .text-\[0\.5rem\] {
335
- font-size: 0.5rem;
336
- }
337
-
338
- .text-\[0\.68rem\] {
339
- font-size: 0.68rem;
340
- }
341
-
342
- .text-\[0\.6rem\] {
343
- font-size: 0.6rem;
344
- }
345
-
346
- .text-\[0\.72rem\] {
347
- font-size: 0.72rem;
348
- }
349
-
350
- .font-medium {
351
- font-weight: 500;
352
- }
353
-
354
- .font-semibold {
355
- font-weight: 600;
356
- }
357
-
358
- .uppercase {
359
- text-transform: uppercase;
360
- }
361
-
362
- .leading-none {
363
- line-height: 1;
364
- }
365
-
366
- .leading-snug {
367
- line-height: 1.375;
368
- }
369
-
370
- .tracking-\[0\.04em\] {
371
- letter-spacing: 0.04em;
372
- }
373
-
374
- .tracking-\[0\.06em\] {
375
- letter-spacing: 0.06em;
376
- }
377
-
378
- .tracking-\[0\.12em\] {
379
- letter-spacing: 0.12em;
380
- }
381
-
382
- .tracking-\[0\.16em\] {
383
- letter-spacing: 0.16em;
384
- }
385
-
386
- .tracking-widest {
387
- letter-spacing: 0.1em;
388
- }
389
-
390
- .text-\[\#00e5a0\] {
391
- --tw-text-opacity: 1;
392
- color: rgb(0 229 160 / var(--tw-text-opacity, 1));
393
- }
394
-
395
- .text-\[\#eef1f8\] {
396
- --tw-text-opacity: 1;
397
- color: rgb(238 241 248 / var(--tw-text-opacity, 1));
398
- }
399
-
400
- .text-white\/20 {
401
- color: rgb(255 255 255 / 0.2);
402
- }
403
-
404
- .text-white\/25 {
405
- color: rgb(255 255 255 / 0.25);
406
- }
407
-
408
- .text-white\/30 {
409
- color: rgb(255 255 255 / 0.3);
410
- }
411
-
412
- .text-white\/35 {
413
- color: rgb(255 255 255 / 0.35);
414
- }
415
-
416
- .text-white\/50 {
417
- color: rgb(255 255 255 / 0.5);
418
- }
419
-
420
- .text-white\/55 {
421
- color: rgb(255 255 255 / 0.55);
422
- }
423
-
424
- .text-white\/60 {
425
- color: rgb(255 255 255 / 0.6);
426
- }
427
-
428
- .underline-offset-2 {
429
- text-underline-offset: 2px;
430
- }
431
-
432
- .shadow-2xl {
433
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
434
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
435
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
436
- }
437
-
438
- .shadow-lg {
439
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
440
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
441
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
442
- }
443
-
444
- .ring {
445
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
446
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
447
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
448
- }
449
-
450
- .grayscale {
451
- --tw-grayscale: grayscale(100%);
452
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
453
- }
454
-
455
- .invert {
456
- --tw-invert: invert(100%);
457
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
458
- }
459
-
460
- .filter {
461
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
462
- }
463
-
464
- .backdrop-blur-sm {
465
- --tw-backdrop-blur: blur(4px);
466
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
467
- }
468
-
469
- .transition-\[background\2c border-color\2c color\] {
470
- transition-property: background,border-color,color;
471
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
472
- transition-duration: 150ms;
473
- }
474
-
475
- .transition-\[background\2c border-color\] {
476
- transition-property: background,border-color;
477
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
478
- transition-duration: 150ms;
479
- }
480
-
481
- .transition-\[background\] {
482
- transition-property: background;
483
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
484
- transition-duration: 150ms;
485
- }
486
-
487
- .transition-\[border-color\2c color\2c background\] {
488
- transition-property: border-color,color,background;
489
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
490
- transition-duration: 150ms;
491
- }
492
-
493
- .transition-\[left\2c background\] {
494
- transition-property: left,background;
495
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
496
- transition-duration: 150ms;
497
- }
498
-
499
- .transition-colors {
500
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
501
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
502
- transition-duration: 150ms;
503
- }
504
-
505
- .duration-150 {
506
- transition-duration: 150ms;
507
- }
508
-
509
- .duration-200 {
510
- transition-duration: 200ms;
511
- }
512
-
513
- /* ── Text size ──────────────────────────────────────────────────────────────── */
514
-
515
- html.a11y-text-lg {
516
- font-size: 118% !important;
517
- }
518
-
519
- html.a11y-text-xl {
520
- font-size: 145% !important;
521
- }
522
-
523
- /* ── High contrast — boosts text/bg separation (filter set inline by JS) ───── */
524
-
525
- html.a11y-high-contrast body {
526
- --foreground: #ffffff;
527
- --background: #000000;
528
- }
529
-
530
- /* ── Invert — re-invert media so images/video stay natural ─────────────────── */
531
-
8
+ ──────────────────────────────────────── */
9
+
10
+ /* ── Widget UI ──────────────────────────────────────────────────────────────── */
11
+
12
+ /* Icons */
13
+ .pgm-icon { width: 1rem; height: 1rem; }
14
+ .pgm-icon-lg { width: 1.25rem; height: 1.25rem; }
15
+ .pgm-icon-sm { width: 0.875rem; height: 0.875rem;}
16
+
17
+ /* Trigger button */
18
+ .pgm-btn {
19
+ position: relative;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ width: 2.5rem;
24
+ height: 2.5rem;
25
+ border: 1px solid rgba(255,255,255,0.1);
26
+ background: rgba(4,6,10,0.85);
27
+ color: rgba(255,255,255,0.6);
28
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
29
+ transition: border-color 200ms, color 200ms, background 200ms;
30
+ cursor: pointer;
31
+ border-radius: 0.25rem;
32
+ padding: 0;
33
+ }
34
+ .pgm-btn:hover {
35
+ border-color: rgba(0,229,160,0.4);
36
+ background: rgba(0,229,160,0.08);
37
+ color: #00e5a0;
38
+ }
39
+ .pgm-btn:focus-visible {
40
+ outline: none;
41
+ box-shadow: 0 0 0 2px #00e5a0;
42
+ }
43
+
44
+ /* Modification dot */
45
+ .pgm-dot {
46
+ position: absolute;
47
+ top: 0.375rem;
48
+ right: 0.375rem;
49
+ width: 0.375rem;
50
+ height: 0.375rem;
51
+ border-radius: 9999px;
52
+ background: #00e5a0;
53
+ }
54
+
55
+ /* Backdrop */
56
+ .pgm-backdrop {
57
+ position: fixed;
58
+ inset: 0;
59
+ z-index: 9998;
60
+ background: rgba(0,0,0,0.6);
61
+ backdrop-filter: blur(4px);
62
+ }
63
+
64
+ /* Dialog */
65
+ .pgm-dialog {
66
+ position: fixed;
67
+ left: 50%;
68
+ top: 50%;
69
+ z-index: 9999;
70
+ width: clamp(280px,90vw,360px);
71
+ transform: translate(-50%,-50%);
72
+ border: 1px solid rgba(255,255,255,0.1);
73
+ background: rgba(4,6,10,0.98);
74
+ box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
75
+ }
76
+ @media (max-width: 480px) {
77
+ .pgm-dialog { width: calc(100vw - 2rem); }
78
+ }
79
+
80
+ /* Header */
81
+ .pgm-header {
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: space-between;
85
+ border-bottom: 1px solid rgba(255,255,255,0.07);
86
+ padding: 0.75rem 1rem;
87
+ }
88
+ .pgm-header-title {
89
+ font-size: 0.72rem;
90
+ font-weight: 600;
91
+ letter-spacing: 0.1em;
92
+ color: #eef1f8;
93
+ text-transform: uppercase;
94
+ margin: 0;
95
+ }
96
+ .pgm-header-subtitle {
97
+ margin-top: 0.125rem;
98
+ margin-bottom: 0;
99
+ font-size: 0.52rem;
100
+ letter-spacing: 0.12em;
101
+ color: rgba(255,255,255,0.35);
102
+ text-transform: uppercase;
103
+ }
104
+
105
+ /* Close button */
106
+ .pgm-close-btn {
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ width: 1.5rem;
111
+ height: 1.5rem;
112
+ color: rgba(255,255,255,0.3);
113
+ transition: color 150ms;
114
+ background: none;
115
+ border: none;
116
+ cursor: pointer;
117
+ padding: 0;
118
+ flex-shrink: 0;
119
+ }
120
+ .pgm-close-btn:hover { color: rgba(255,255,255,0.8); }
121
+ .pgm-close-btn:focus-visible {
122
+ outline: none;
123
+ box-shadow: 0 0 0 2px #00e5a0;
124
+ }
125
+
126
+ /* Text-size section */
127
+ .pgm-size-section {
128
+ border-bottom: 1px solid rgba(255,255,255,0.07);
129
+ padding: 0.75rem 1rem;
130
+ }
131
+ .pgm-size-header {
132
+ display: flex;
133
+ align-items: center;
134
+ justify-content: space-between;
135
+ margin-bottom: 0.5rem;
136
+ }
137
+ .pgm-size-label {
138
+ font-size: 0.6rem;
139
+ letter-spacing: 0.16em;
140
+ color: rgba(255,255,255,0.5);
141
+ text-transform: uppercase;
142
+ }
143
+ .pgm-size-value {
144
+ font-size: 0.56rem;
145
+ letter-spacing: 0.12em;
146
+ color: #00e5a0;
147
+ text-transform: uppercase;
148
+ }
149
+ .pgm-size-btns {
150
+ display: flex;
151
+ gap: 0.375rem;
152
+ }
153
+ .pgm-size-btn {
154
+ flex: 1;
155
+ border: 1px solid;
156
+ padding: 0.375rem 0;
157
+ text-align: center;
158
+ font-size: 0.58rem;
159
+ text-transform: uppercase;
160
+ letter-spacing: 0.1em;
161
+ transition: background 150ms, border-color 150ms, color 150ms;
162
+ background: none;
163
+ cursor: pointer;
164
+ }
165
+ .pgm-size-btn:focus-visible {
166
+ outline: none;
167
+ box-shadow: 0 0 0 2px #00e5a0;
168
+ }
169
+ .pgm-size-btn--active {
170
+ border-color: #00e5a0;
171
+ background: rgba(0,229,160,0.1);
172
+ color: #00e5a0;
173
+ }
174
+ .pgm-size-btn--inactive {
175
+ border-color: rgba(255,255,255,0.1);
176
+ background: transparent;
177
+ color: rgba(255,255,255,0.35);
178
+ }
179
+ .pgm-size-btn--inactive:hover {
180
+ border-color: rgba(255,255,255,0.25);
181
+ color: rgba(255,255,255,0.6);
182
+ }
183
+
184
+ /* Toggle list */
185
+ .pgm-toggle-list {
186
+ max-height: min(50vh,340px);
187
+ overflow-y: auto;
188
+ }
189
+
190
+ /* Toggle buttons */
191
+ .pgm-toggle-btn {
192
+ display: flex;
193
+ width: 100%;
194
+ align-items: center;
195
+ gap: 0.75rem;
196
+ padding: 0.625rem 1rem;
197
+ text-align: left;
198
+ transition: background 150ms;
199
+ background: none;
200
+ border: none;
201
+ cursor: pointer;
202
+ }
203
+ .pgm-toggle-btn:hover { background: rgba(255,255,255,0.03); }
204
+ .pgm-toggle-btn:focus-visible {
205
+ outline: none;
206
+ box-shadow: inset 0 0 0 2px #00e5a0;
207
+ }
208
+ .pgm-toggle-btn--on { background: rgba(0,229,160,0.04); }
209
+
210
+ /* Toggle icon */
211
+ .pgm-toggle-icon {
212
+ flex-shrink: 0;
213
+ transition: color 150ms;
214
+ color: rgba(255,255,255,0.3);
215
+ }
216
+ .pgm-toggle-icon--on { color: #00e5a0; }
217
+ .pgm-toggle-btn:hover .pgm-toggle-icon:not(.pgm-toggle-icon--on) {
218
+ color: rgba(255,255,255,0.5);
219
+ }
220
+
221
+ /* Toggle text */
222
+ .pgm-toggle-text { min-width: 0; flex: 1; }
223
+ .pgm-toggle-label {
224
+ display: block;
225
+ font-size: 0.68rem;
226
+ font-weight: 500;
227
+ line-height: 1;
228
+ letter-spacing: 0.04em;
229
+ transition: color 150ms;
230
+ color: rgba(255,255,255,0.55);
231
+ }
232
+ .pgm-toggle-label--on { color: #eef1f8; }
233
+ .pgm-toggle-desc {
234
+ margin-top: 0.125rem;
235
+ display: block;
236
+ font-size: 0.52rem;
237
+ line-height: 1.375;
238
+ letter-spacing: 0.06em;
239
+ color: rgba(255,255,255,0.25);
240
+ }
241
+
242
+ /* Pill toggle */
243
+ .pgm-pill {
244
+ position: relative;
245
+ height: 1rem;
246
+ width: 1.75rem;
247
+ flex-shrink: 0;
248
+ border-radius: 9999px;
249
+ border: 1px solid;
250
+ transition: background 200ms, border-color 200ms;
251
+ }
252
+ .pgm-pill--on { border-color: #00e5a0; background: rgba(0,229,160,0.2); }
253
+ .pgm-pill--off { border-color: rgba(255,255,255,0.15); background: transparent; }
254
+ .pgm-pill-knob {
255
+ position: absolute;
256
+ top: 0.125rem;
257
+ height: 0.75rem;
258
+ width: 0.75rem;
259
+ border-radius: 9999px;
260
+ transition: left 200ms, background 200ms;
261
+ }
262
+ .pgm-pill-knob--on { left: 0.875rem; background: #00e5a0; }
263
+ .pgm-pill-knob--off { left: 0.125rem; background: rgba(255,255,255,0.25); }
264
+
265
+ /* Footer */
266
+ .pgm-footer {
267
+ display: flex;
268
+ align-items: center;
269
+ justify-content: space-between;
270
+ gap: 0.75rem;
271
+ border-top: 1px solid rgba(255,255,255,0.07);
272
+ padding: 0.625rem 1rem;
273
+ }
274
+ .pgm-footer-note {
275
+ font-size: 0.5rem;
276
+ text-transform: uppercase;
277
+ letter-spacing: 0.1em;
278
+ color: rgba(255,255,255,0.2);
279
+ }
280
+ .pgm-reset-btn {
281
+ font-size: 0.56rem;
282
+ text-transform: uppercase;
283
+ letter-spacing: 0.12em;
284
+ color: rgba(255,255,255,0.3);
285
+ text-underline-offset: 0.125rem;
286
+ transition: color 150ms;
287
+ background: none;
288
+ border: none;
289
+ cursor: pointer;
290
+ padding: 0;
291
+ }
292
+ .pgm-reset-btn:hover { color: #ff6b6b; }
293
+ .pgm-reset-btn:disabled { cursor: not-allowed; opacity: 0.3; }
294
+ .pgm-reset-btn:focus-visible {
295
+ outline: none;
296
+ box-shadow: 0 0 0 2px #00e5a0;
297
+ }
298
+
299
+ /* ── Text size ──────────────────────────────────────────────────────────────── */
300
+ html.a11y-text-lg { font-size: 118% !important; }
301
+ html.a11y-text-xl { font-size: 145% !important; }
302
+
303
+ /* ── High contrast — boosts text/bg separation (filter set inline by JS) ───── */
304
+ html.a11y-high-contrast body {
305
+ --foreground: #ffffff;
306
+ --background: #000000;
307
+ }
308
+
309
+ /* ── Invert — re-invert media so images/video stay natural ─────────────────── */
532
310
  html.a11y-invert img,
533
311
  html.a11y-invert video,
534
312
  html.a11y-invert canvas,
535
- html.a11y-invert svg:not([data-a11y-skip]) {
536
- filter: invert(1) hue-rotate(180deg);
537
- }
538
-
539
- /* ── Reduce motion ──────────────────────────────────────────────────────────── */
540
-
313
+ html.a11y-invert svg:not([data-a11y-skip]) {
314
+ filter: invert(1) hue-rotate(180deg);
315
+ }
316
+
317
+ /* ── Reduce motion ──────────────────────────────────────────────────────────── */
541
318
  html.a11y-reduce-motion *,
542
319
  html.a11y-reduce-motion *::before,
543
- html.a11y-reduce-motion *::after {
544
- animation-duration: 0.01ms !important;
545
- animation-iteration-count: 1 !important;
546
- transition-duration: 0.01ms !important;
547
- scroll-behavior: auto !important;
548
- }
549
-
550
- /* ── Highlight links ────────────────────────────────────────────────────────── */
551
-
320
+ html.a11y-reduce-motion *::after {
321
+ animation-duration: 0.01ms !important;
322
+ animation-iteration-count: 1 !important;
323
+ transition-duration: 0.01ms !important;
324
+ scroll-behavior: auto !important;
325
+ }
326
+
327
+ /* ── Highlight links ────────────────────────────────────────────────────────── */
552
328
  html.a11y-highlight-links a,
553
- html.a11y-highlight-links [role="link"] {
554
- text-decoration: underline !important;
555
- text-underline-offset: 3px !important;
556
- outline: 2px solid !important;
557
- outline-offset: 2px !important;
558
- }
559
-
560
- /* ── Text spacing (WCAG 1.4.12) ─────────────────────────────────────────────── */
561
-
562
- html.a11y-text-spacing *:not(input):not(textarea) {
563
- letter-spacing: 0.12em !important;
564
- word-spacing: 0.18em !important;
565
- line-height: 1.85 !important;
566
- }
567
-
568
- /* ── ADHD friendly — kill all animation, add strong focus ring ──────────────── */
569
-
329
+ html.a11y-highlight-links [role="link"] {
330
+ text-decoration: underline !important;
331
+ text-underline-offset: 3px !important;
332
+ outline: 2px solid !important;
333
+ outline-offset: 2px !important;
334
+ }
335
+
336
+ /* ── Text spacing (WCAG 1.4.12) ─────────────────────────────────────────────── */
337
+ html.a11y-text-spacing *:not(input):not(textarea) {
338
+ letter-spacing: 0.12em !important;
339
+ word-spacing: 0.18em !important;
340
+ line-height: 1.85 !important;
341
+ }
342
+
343
+ /* ── ADHD friendly — kill all animation, add strong focus ring ──────────────── */
570
344
  html.a11y-adhd *,
571
345
  html.a11y-adhd *::before,
572
- html.a11y-adhd *::after {
573
- animation: none !important;
574
- transition: none !important;
575
- }
576
-
577
- html.a11y-adhd :focus-visible {
578
- outline: 3px solid #facc15 !important;
579
- outline-offset: 3px !important;
580
- border-radius: 2px !important;
581
- }
582
-
583
- /* ── Dyslexia-friendly — readable system font, generous spacing ─────────────── */
584
-
346
+ html.a11y-adhd *::after {
347
+ animation: none !important;
348
+ transition: none !important;
349
+ }
350
+ html.a11y-adhd :focus-visible {
351
+ outline: 3px solid #facc15 !important;
352
+ outline-offset: 3px !important;
353
+ border-radius: 2px !important;
354
+ }
355
+
356
+ /* ── Dyslexia-friendly — readable system font, generous spacing ─────────────── */
585
357
  html.a11y-dyslexia,
586
- html.a11y-dyslexia * {
587
- font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif !important;
588
- word-spacing: 0.22em !important;
589
- line-height: 1.95 !important;
590
- letter-spacing: 0.04em !important;
591
- }
592
-
593
- .hover\:border-\[rgba\(0\2c 229\2c 160\2c 0\.4\)\]:hover {
594
- border-color: rgba(0,229,160,0.4);
595
- }
596
-
597
- .hover\:border-white\/25:hover {
598
- border-color: rgb(255 255 255 / 0.25);
599
- }
600
-
601
- .hover\:bg-\[rgba\(0\2c 229\2c 160\2c 0\.08\)\]:hover {
602
- background-color: rgba(0,229,160,0.08);
603
- }
604
-
605
- .hover\:text-\[\#00e5a0\]:hover {
606
- --tw-text-opacity: 1;
607
- color: rgb(0 229 160 / var(--tw-text-opacity, 1));
608
- }
609
-
610
- .hover\:text-\[\#ff6b6b\]:hover {
611
- --tw-text-opacity: 1;
612
- color: rgb(255 107 107 / var(--tw-text-opacity, 1));
613
- }
614
-
615
- .hover\:text-white\/60:hover {
616
- color: rgb(255 255 255 / 0.6);
617
- }
618
-
619
- .hover\:text-white\/80:hover {
620
- color: rgb(255 255 255 / 0.8);
621
- }
622
-
623
- .focus-visible\:ring-2:focus-visible {
624
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
625
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
626
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
627
- }
628
-
629
- .focus-visible\:ring-\[\#00e5a0\]:focus-visible {
630
- --tw-ring-opacity: 1;
631
- --tw-ring-color: rgb(0 229 160 / var(--tw-ring-opacity, 1));
632
- }
633
-
634
- .disabled\:cursor-not-allowed:disabled {
635
- cursor: not-allowed;
636
- }
637
-
638
- .disabled\:opacity-30:disabled {
639
- opacity: 0.3;
640
- }
641
-
642
- .group:hover .group-hover\:text-white\/50 {
643
- color: rgb(255 255 255 / 0.5);
644
- }
645
-
646
- @media (max-width: 480px) {
647
- .max-\[480px\]\:w-\[calc\(100vw-2rem\)\] {
648
- width: calc(100vw - 2rem);
649
- }
358
+ html.a11y-dyslexia * {
359
+ font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif !important;
360
+ word-spacing: 0.22em !important;
361
+ line-height: 1.95 !important;
362
+ letter-spacing: 0.04em !important;
650
363
  }