custom.css
... ...
@@ -9,6 +9,15 @@
9 9
--link-visited: #c5a3ff;
10 10
--border: #333;
11 11
--code-bg: #1a1a1a;
12
+
13
+ /* Interactive hex map states */
14
+ --hex-zoom-accent: #6aa0ff;
15
+ --hex-zoom-bg: #1f2431;
16
+ --hex-article-accent: #5fc98e;
17
+ --hex-article-bg: #1c2b23;
18
+ --hex-disabled-accent: #666;
19
+ --hex-disabled-bg: #202020;
20
+ --focus-outline: rgba(155, 182, 255, 0.6);
12 21
}
13 22
14 23
/* Light override (respects browser/OS setting) */
... ...
@@ -21,6 +30,15 @@
21 30
--link-visited: #6a35b1;
22 31
--border: #ddd;
23 32
--code-bg: #f6f8fa;
33
+
34
+ /* Interactive hex map states */
35
+ --hex-zoom-accent: #0055dd;
36
+ --hex-zoom-bg: #e3f0ff;
37
+ --hex-article-accent: #00884d;
38
+ --hex-article-bg: #e6f7f0;
39
+ --hex-disabled-accent: #999;
40
+ --hex-disabled-bg: #f0f0f0;
41
+ --focus-outline: rgba(0, 68, 204, 0.4);
24 42
}
25 43
}
26 44
... ...
@@ -230,7 +248,7 @@ pre { background: var(--code-bg) !important; padding: 1rem 1.2rem !important; bo
230 248
/* Focus/hover states for keyboard + mouse */
231 249
#minibutton-home:focus,
232 250
#minibutton-home:hover {
233
- outline: 2px solid rgba(155,182,255,.6);
251
+ outline: 2px solid var(--focus-outline);
234 252
outline-offset: 2px;
235 253
}
236 254
... ...
@@ -378,15 +396,15 @@ h1.header-title {
378 396
/* Hover/focus glows */
379 397
.hex a[data-action="zoom"]:hover,
380 398
.hex a[data-action="zoom"]:focus-visible {
381
- box-shadow: 0 0 0 2px #6aa0ff inset, 0 0 0 1px #6aa0ff;
382
- background: #1f2431;
399
+ box-shadow: 0 0 0 2px var(--hex-zoom-accent) inset, 0 0 0 1px var(--hex-zoom-accent);
400
+ background: var(--hex-zoom-bg);
383 401
outline: 4px solid currentColor;
384 402
outline-offset: 4px;
385 403
}
386 404
.hex a[data-action="article"]:hover,
387 405
.hex a[data-action="article"]:focus-visible {
388
- box-shadow: 0 0 0 2px #5fc98e inset, 0 0 0 1px #5fc98e;
389
- background: #1c2b23;
406
+ box-shadow: 0 0 0 2px var(--hex-article-accent) inset, 0 0 0 1px var(--hex-article-accent);
407
+ background: var(--hex-article-bg);
390 408
outline: 2px solid currentColor;
391 409
outline-offset: 2px;
392 410
}
... ...
@@ -394,8 +412,8 @@ h1.header-title {
394 412
.hex a[data-action="none"]:focus-visible,
395 413
.hex .nolink:hover,
396 414
.hex .nolink:focus-visible {
397
- box-shadow: 0 0 0 2px #666 inset, 0 0 0 1px #666;
398
- background: #202020;
415
+ box-shadow: 0 0 0 2px var(--hex-disabled-accent) inset, 0 0 0 1px var(--hex-disabled-accent);
416
+ background: var(--hex-disabled-bg);
399 417
opacity: .75;
400 418
}
401 419