General Update

2026-11-08 04:08:24 +00:00 · 2026-07-04 10:53:14 -04:00
parent 71bffad507
commit 33fa312645
18 changed files with 921 additions and 346 deletions
@@ -236,7 +236,7 @@
  }
  .btn-secondary {
    background: transparent;
-    color: var(--color-text);
+    color: var(--text);
    border: 1.5px solid var(--color-border);
  }
  .btn-secondary:hover {
@@ -291,3 +291,20 @@
    transition: none;
  }
 }
+
+/* ---------------------------------------------------------------------------
+ * View Transition name utility. Assigns `view-transition-name: sky` to a single
+ * hero/section field per page so the browser morphs the star/circuit field as
+ * one element across navigations (constellations <-> circuitry).
+ *
+ * IMPORTANT: the View Transitions API requires this name to be UNIQUE within a
+ * page snapshot. Assigning it to more than one element per page throws
+ * "Unexpected duplicate view-transition-name: sky" and aborts the transition.
+ * Only ONE field per page should ever carry `.vt-sky`.
+ *
+ * Implemented as a CSS class (not React inline style) so SSR + hydration
+ * attributes match exactly and React never rewrites the property.
+ * ------------------------------------------------------------------------- */
+.vt-sky {
+  view-transition-name: sky;
+}
@@ -4,121 +4,115 @@
 * Two-axis theming model for the site:
 *
 *   1. Global light/dark mode   -> set on <html data-theme="light|dark">
- *   2. Section surface tone     -> set on a wrapper via data-surface:
+ *   2. Section surface tone     -> set on <body data-surface="...">
 *        data-surface="neutral"      Home / About / Contact  (deep night-sky)
- *        data-surface="professional" Professional wing       (polished obsidian + gold)
- *        data-surface="interest"     Interests wing          (candlelit study under stars)
+ *        data-surface="professional" Professional wing       (obsidian + violet/gold)
+ *        data-surface="interest"     Interests wing          (candlelit study)
 *
- * The semantic tokens (--surface, --text, --accent, ...) are redefined for each
- * (data-theme x data-surface) combination below. Components only ever reference
- * the semantic tokens, so swapping either axis automatically restyles them.
+ * SELECTOR MODEL: data-theme lives on <html>, data-surface on <body>. We match
+ * the descendant combination `html[data-theme=...] body[data-surface=...]`.
+ * `:root` holds the light/neutral FALLBACK only; every other rule beats it via
+ * specificity (0,2,0) > (0,1,0).
 *
- * Palette direction: night-sky mystical — midnight indigo bases, star-gold
- * accents, mystic-violet secondary, nebula-teal tertiary. Light mode is
- * reinterpreted as a "twilight"/parchment variant so the toggle always works
- * without breaking the celestial mood.
+ * STATUS: DARK MODE IS FORCED (light mode deferred). The dark rules below are
+ * tuned for contrast first — --text / --text-muted / --text-subtle are kept
+ * bright against the deep surfaces so content always stands out. Light rules
+ * are retained for the day light mode is reintroduced.
 *
- * `theme-init.ts` (inlined in <head>) sets data-theme before paint to avoid a
- * flash of the wrong theme. data-surface is applied by the layout wrappers.
+ * `theme-init.ts` (inlined in <head>) pins data-theme="dark" before paint.
 */

 /* ===========================================================================
 * DEFAULT / NEUTRAL SURFACE (Home, About, Contact)
- * Deep midnight indigo with star-gold accents. The default night sky.
 * ======================================================================== */

-/* Light + neutral — twilight parchment (warm, low-contrast, still celestial). */
+/* Light + neutral — fallback (not currently used; dark is forced). */
 :root,
-[data-theme="light"][data-surface="neutral"],
-[data-theme="light"][data-surface="neutral"] body {
-  --surface: #f3eee0; /* aged parchment / star-map paper */
-  --surface-raised: #fbf7ec;
-  --surface-sunken: #e7dfca;
-  --text: #1c1830; /* deep indigo ink */
+html[data-theme='light'] body[data-surface='neutral'] {
+  --surface: #efe7d2;
+  --surface-raised: #f7f0dc;
+  --surface-sunken: #e3d9bd;
+  --text: #1b1730;
  --text-muted: #4a445e;
  --text-subtle: #6b6582;
-  --border: #d8cdb0;
-  --accent: #9a6b1a; /* deeper gold for AA on light */
-  --accent-contrast: #fbf7ec;
-  --secondary: #6f5fb6; /* mystic violet */
+  --border: #d2c6a2;
+  --accent: #7e5512;
+  --accent-contrast: #f7f0dc;
+  --secondary: #5e4f9e;
 }

-/* Dark + neutral — the canonical night sky. */
-[data-theme="dark"][data-surface="neutral"],
-[data-theme="dark"][data-surface="neutral"] body {
-  --surface: #0b1026; /* midnight indigo */
-  --surface-raised: #161b3a; /* indigo panel */
-  --surface-sunken: #070a1a; /* near-black void */
-  --text: #f4f1e8; /* star-white */
-  --text-muted: #c7c3df;
-  --text-subtle: #8e89b5;
-  --border: #2c3160;
-  --accent: #e8b54a; /* star gold */
-  --accent-contrast: #0b1026;
-  --secondary: #8b7bd8; /* mystic violet */
+/* Dark + neutral — the canonical deep mystical nightscape. High-contrast text. */
+html[data-theme='dark'] body[data-surface='neutral'] {
+  --surface: #070a1c; /* near-void midnight indigo */
+  --surface-raised: #11163a; /* indigo panel, violet-edged */
+  --surface-sunken: #04061a; /* deep cosmic void */
+  --text: #f6f4ff; /* near-white for max legibility */
+  --text-muted: #d4d0f0; /* bright enough to read clearly on deep blue */
+  --text-subtle: #a8a2d8; /* lifted from the old #7e79b8 for contrast */
+  --border: #2e3470;
+  --accent: #f0c262; /* slightly lifted gold for pop on dark */
+  --accent-contrast: #070a1c;
+  --secondary: #b3a4ec; /* brighter violet, easier on the eye */
 }

 /* ===========================================================================
- * PROFESSIONAL SURFACE
- * Polished obsidian: deepest indigo with gold + subtle violet. Confident,
- * precise, the "polished wing" from the spec — now with a starlit edge.
+ * PROFESSIONAL SURFACE — violet-dominant obsidian, dark by default.
 * ======================================================================== */

-[data-surface="professional"] {
-  --surface: #0a0e22;
-  --surface-raised: #141a38;
-  --surface-sunken: #05081a;
-  --text: #f4f1e8;
-  --text-muted: #c5c0db;
-  --text-subtle: #8782ad;
-  --border: #292e57;
-  --accent: #e8b54a;
-  --accent-contrast: #0a0e22;
-  --secondary: #8b7bd8;
+body[data-surface='professional'],
+html[data-theme='dark'] body[data-surface='professional'] {
+  --surface: #080a20;
+  --surface-raised: #121638;
+  --surface-sunken: #040517;
+  --text: #f6f4ff;
+  --text-muted: #cec9f2;
+  --text-subtle: #a59fd6;
+  --border: #2e3270;
+  --accent: #f0c262;
+  --accent-contrast: #080a20;
+  --secondary: #b3a4ec;
 }

-/* Light professional: keeps a dignified deep tone, slightly lifted so the
- * global toggle is never jarring next to a parchment Home page. */
-[data-theme="light"][data-surface="professional"] {
-  --surface: #1a1f44;
-  --surface-raised: #252b54;
-  --surface-sunken: #141838;
-  --text: #f4f1e8;
-  --text-muted: #d4d0ec;
-  --text-subtle: #aaa5cd;
-  --border: #3a3f72;
+html[data-theme='light'] body[data-surface='professional'] {
+  --surface: #21183f;
+  --surface-raised: #2c2152;
+  --surface-sunken: #18113a;
+  --text: #f1edff;
+  --text-muted: #d5cff0;
+  --text-subtle: #aaa3d6;
+  --border: #3c3170;
+  --accent: #7e5512;
+  --accent-contrast: #f1edff;
+  --secondary: #b6a6e8;
 }

 /* ===========================================================================
- * INTEREST SURFACE
- * Candlelit study under a starfield: warm amber-gold bases with deep indigo
- * text by default (light), flipping to a warm brown-indigo at night. The
- * "fun wing" stays inviting, now with an esoteric warmth.
+ * INTEREST SURFACE — warm plum-brown night, dark by default.
 * ======================================================================== */

-[data-theme="light"][data-surface="interest"],
-[data-surface="interest"] {
-  --surface: #f6ecd2; /* warm candlelight parchment */
-  --surface-raised: #fdf5dc;
-  --surface-sunken: #ecdcb4;
-  --text: #241a2e; /* plum-indigo ink */
-  --text-muted: #5c4a3a;
-  --text-subtle: #826a52;
-  --border: #ddc79a;
-  --accent: #9a6b1a; /* deeper gold for AA */
-  --accent-contrast: #fdf5dc;
-  --secondary: #6f5fb6; /* mystic violet */
+body[data-surface='interest'],
+html[data-theme='dark'] body[data-surface='interest'] {
+  --surface: #170f24; /* warm plum-brown night */
+  --surface-raised: #221630;
+  --surface-sunken: #100920;
+  --text: #fbf2e4; /* warm near-white */
+  --text-muted: #ecdcc6; /* lifted for contrast */
+  --text-subtle: #c4ab8e; /* lifted from #a99a86 */
+  --border: #3e2f4a;
+  --accent: #f0c262;
+  --accent-contrast: #170f24;
+  --secondary: #c8abe0;
 }

-[data-theme="dark"][data-surface="interest"] {
-  --surface: #1a1320; /* warm brown-indigo night */
-  --surface-raised: #261c2e;
-  --surface-sunken: #120d18;
-  --text: #f6ecd2; /* warm starlight */
-  --text-muted: #ddcbb0;
-  --text-subtle: #b09a82;
-  --border: #3a2c1f;
-  --accent: #e8b54a; /* star gold */
-  --accent-contrast: #1a1320;
-  --secondary: #b09a78; /* warm gold-bronze secondary at night */
+html[data-theme='light'] body[data-surface='interest'] {
+  --surface: #f4e9cf;
+  --surface-raised: #fdf4d9;
+  --surface-sunken: #e8d8b2;
+  --text: #22152e;
+  --text-muted: #5c4733;
+  --text-subtle: #826a4f;
+  --border: #d8c290;
+  --accent: #7e5512;
+  --accent-contrast: #fdf4d9;
+  --secondary: #5e4f9e;
 }