Add Tactical Monolith design system and landing page to web app

Set up Tailwind CSS v4 with full design token system from Stitch project (obsidian surfaces, neon cyan/magenta/lime palette, Space Grotesk + Inter typography, 0px border-radius). Landing page includes hero section, side nav, module cards, system status panels, terminal log, and CRT overlay.
2026-03-20 20:24:19 +00:00
parent 18b2564c8e
commit 3d61911868
9 changed files with 1039 additions and 70 deletions
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -0,0 +1,115 @@
+@import "tailwindcss";
+
+@theme {
+  /* Surface Architecture */
+  --color-background: #0b0f10;
+  --color-surface: #0b0f10;
+  --color-surface-dim: #0b0f10;
+  --color-surface-bright: #272d2f;
+  --color-surface-variant: #212728;
+  --color-surface-container-lowest: #000000;
+  --color-surface-container-low: #101415;
+  --color-surface-container: #151a1c;
+  --color-surface-container-high: #1b2022;
+  --color-surface-container-highest: #212728;
+  --color-surface-tint: #aaffdc;
+
+  /* Primary — Cyan */
+  --color-primary: #aaffdc;
+  --color-primary-dim: #00edb4;
+  --color-primary-container: #00fdc1;
+  --color-primary-fixed: #00fdc1;
+  --color-primary-fixed-dim: #00edb4;
+  --color-on-primary: #00654b;
+  --color-on-primary-container: #005c44;
+  --color-on-primary-fixed: #004734;
+  --color-on-primary-fixed-variant: #00664c;
+  --color-inverse-primary: #006c51;
+
+  /* Secondary — Magenta */
+  --color-secondary: #ff51fa;
+  --color-secondary-dim: #ff51fa;
+  --color-secondary-container: #a900a9;
+  --color-secondary-fixed: #ffbdf3;
+  --color-secondary-fixed-dim: #ffa6f3;
+  --color-on-secondary: #400040;
+  --color-on-secondary-container: #fff5f9;
+  --color-on-secondary-fixed: #620061;
+  --color-on-secondary-fixed-variant: #920091;
+
+  /* Tertiary — Lime */
+  --color-tertiary: #f3ffca;
+  --color-tertiary-dim: #beee00;
+  --color-tertiary-container: #cafd00;
+  --color-tertiary-fixed: #cafd00;
+  --color-tertiary-fixed-dim: #beee00;
+  --color-on-tertiary: #516700;
+  --color-on-tertiary-container: #4a5e00;
+  --color-on-tertiary-fixed: #3a4a00;
+  --color-on-tertiary-fixed-variant: #526900;
+
+  /* Error */
+  --color-error: #ff716c;
+  --color-error-dim: #d7383b;
+  --color-error-container: #9f0519;
+  --color-on-error: #490006;
+  --color-on-error-container: #ffa8a3;
+
+  /* On-surface */
+  --color-on-background: #fafdfe;
+  --color-on-surface: #fafdfe;
+  --color-on-surface-variant: #a8acad;
+  --color-inverse-surface: #f7fafb;
+  --color-inverse-on-surface: #525657;
+
+  /* Outline */
+  --color-outline: #727677;
+  --color-outline-variant: #44494a;
+
+  /* Typography */
+  --font-headline: "Space Grotesk", sans-serif;
+  --font-body: "Inter", sans-serif;
+  --font-label: "Space Grotesk", sans-serif;
+
+  /* 0px border radius — enforced globally */
+  --radius: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+}
+
+/* Scanline CRT overlay */
+.scanlines {
+  background: linear-gradient(
+      rgba(18, 16, 16, 0) 50%,
+      rgba(0, 0, 0, 0.2) 50%
+    ),
+    linear-gradient(
+      90deg,
+      rgba(255, 0, 0, 0.03),
+      rgba(0, 255, 0, 0.01),
+      rgba(0, 0, 255, 0.03)
+    );
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}
+
+/* Glitch hover effect */
+.glitch-hover:hover {
+  text-shadow: 2px 0 #ff51fa, -2px 0 #00fdc1;
+}
+
+/* Ghost border — monolith inset shadow */
+.monolith-border {
+  box-shadow: inset 0 0 0 1px rgba(170, 255, 220, 0.1);
+}
+
+/* Crosshair cursor */
+body {
+  cursor: crosshair;
+}
+
+/* Selection colors */
+::selection {
+  background-color: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}