feat(theme): implement tailwind design system and base tera templates

config.toml

@@ -29,3 +29,27 @@ enable_scanlines = true
 scanline_opacity = 0.08
 terminal_font = "JetBrains Mono, monospace"
 body_font = "Inter, sans-serif"
+
+obsidian = "#0a0a0c"
+surface_raised = "#121318"
+border_color = "#27272a"
+accent_cyan_hex = "#00f0ff"
+github_org_url = "https://github.com/tars-cloud"
+og_image = "/images/og-banner.png"
+logo_path = "/images/tars-logo.svg"
+status_label = "SYS // NOMINAL"
+
+[[extra.menu_items]]
+name = "Docs"
+url = "/docs/"
+external = false
+
+[[extra.menu_items]]
+name = "Downloads"
+url = "/downloads/"
+external = false
+
+[[extra.menu_items]]
+name = "GitHub"
+url = "https://github.com/tars-cloud"
+external = true

devenv.nix

@@ -17,7 +17,7 @@
     pkgs.jq
   ];
 
-  scripts.build.exec = "zola build && pagefind --site public";
+  scripts.build.exec = "tailwindcss -i styles/input.css -o static/css/custom.css --minify && zola build && pagefind --site public";
   scripts.check.exec = "zola check";
   scripts.serve.exec = "zola serve --drafts";
 
@@ -30,6 +30,7 @@
   '';
 
   enterTest = ''
+    tailwindcss -i styles/input.css -o static/css/custom.css --minify
     zola check
     zola build
   '';

styles/input.css

@@ -0,0 +1,281 @@
+@import "tailwindcss";
+
+@theme {
+  --color-obsidian: #0a0a0c;
+  --color-surface-raised: #121318;
+  --color-border: #27272a;
+  --color-accent-cyan: #00f0ff;
+  --color-accent-cyan-bright: #00f3ff;
+  --color-accent-amber: #ffb700;
+  --color-text-primary: #f4f4f6;
+  --color-text-muted: #a1a1aa;
+  --color-phase-g: #00f0ff;
+  --color-phase-u: #38bdf8;
+  --color-phase-a: #a855f7;
+  --color-phase-r: #ffb700;
+  --color-phase-d: #22c55e;
+  --color-phase-s: #10b981;
+  --color-status-nominal: #10b981;
+  --color-status-warn: #ffb700;
+  --color-status-fault: #ef4444;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --shadow-glow-cyan: 0 0 18px rgba(0, 240, 255, 0.35);
+  --shadow-glow-amber: 0 0 18px rgba(255, 183, 0, 0.35);
+}
+
+:root {
+  --color-obsidian: #0a0a0c;
+  --color-surface-raised: #121318;
+  --color-border: #27272a;
+  --color-accent-cyan: #00f0ff;
+  --color-accent-cyan-bright: #00f3ff;
+  --color-accent-amber: #ffb700;
+  --color-text-primary: #f4f4f6;
+  --color-text-muted: #a1a1aa;
+  --color-phase-g: #00f0ff;
+  --color-phase-u: #38bdf8;
+  --color-phase-a: #a855f7;
+  --color-phase-r: #ffb700;
+  --color-phase-d: #22c55e;
+  --color-phase-s: #10b981;
+  --color-status-nominal: #10b981;
+  --color-status-warn: #ffb700;
+  --color-status-fault: #ef4444;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --shadow-glow-cyan: 0 0 18px rgba(0, 240, 255, 0.35);
+  --shadow-glow-amber: 0 0 18px rgba(255, 183, 0, 0.35);
+}
+
+/* Base document resets & typography */
+html,
+body {
+  background-color: var(--color-obsidian);
+  color: var(--color-text-primary);
+  font-family: var(--font-sans);
+  color-scheme: dark;
+}
+
+code,
+pre,
+kbd,
+samp,
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+/* Markdown prose container */
+.prose-tars {
+  color: var(--color-text-primary);
+  line-height: 1.75;
+}
+
+.prose-tars h1,
+.prose-tars h2,
+.prose-tars h3,
+.prose-tars h4 {
+  font-family: var(--font-mono);
+  color: var(--color-text-primary);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-top: 2rem;
+  margin-bottom: 0.75rem;
+}
+
+.prose-tars p,
+.prose-tars ul,
+.prose-tars ol,
+.prose-tars blockquote,
+.prose-tars pre,
+.prose-tars table {
+  margin-bottom: 1.25rem;
+}
+
+.prose-tars a {
+  color: var(--color-accent-cyan);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.prose-tars a:hover {
+  color: var(--color-accent-cyan-bright);
+}
+
+.prose-tars code {
+  background-color: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--color-accent-cyan);
+}
+
+.prose-tars pre {
+  background-color: var(--color-obsidian);
+  border: 1px solid var(--color-border);
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.prose-tars pre code {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--color-text-primary);
+}
+
+.prose-tars blockquote {
+  border-left: 2px solid var(--color-accent-amber);
+  padding-left: 1rem;
+  color: var(--color-text-muted);
+}
+
+.prose-tars table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.prose-tars th,
+.prose-tars td {
+  border: 1px solid var(--color-border);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.prose-tars th {
+  background-color: var(--color-surface-raised);
+  font-family: var(--font-mono);
+  color: var(--color-accent-cyan);
+}
+
+/* CRT scanline overlays */
+.crt-scanlines,
+.scanline-overlay {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0) 0px,
+    rgba(255, 255, 255, 0) 2px,
+    rgba(0, 240, 255, 0.04) 3px,
+    rgba(0, 0, 0, 0.22) 4px
+  );
+}
+
+.scanline-overlay {
+  pointer-events: none;
+}
+
+/* Phosphor glow effects */
+.glow-cyan {
+  box-shadow: var(--shadow-glow-cyan);
+}
+
+.glow-amber {
+  box-shadow: var(--shadow-glow-amber);
+}
+
+.text-glow-cyan {
+  text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
+}
+
+.text-glow-amber {
+  text-shadow: 0 0 12px rgba(255, 183, 0, 0.45);
+}
+
+.border-glow-cyan {
+  border-color: var(--color-accent-cyan);
+  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
+}
+
+/* Status indicator pulses and chips */
+@keyframes tars-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 8px currentColor;
+  }
+  50% {
+    opacity: 0.35;
+    box-shadow: 0 0 2px currentColor;
+  }
+}
+
+.status-pulse {
+  animation: tars-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.status-chip {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  line-height: 1;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-obsidian);
+}
+
+.status-chip-nominal {
+  color: var(--color-status-nominal);
+  border-color: rgba(16, 185, 129, 0.45);
+}
+
+.status-chip-amber {
+  color: var(--color-accent-amber);
+  border-color: rgba(255, 183, 0, 0.45);
+}
+
+.status-chip-danger {
+  color: var(--color-status-fault);
+  border-color: rgba(239, 68, 68, 0.45);
+}
+
+/* Tactical surface panel */
+.tactical-panel {
+  background-color: var(--color-surface-raised);
+  border: 1px solid var(--color-border);
+}
+
+/* Accessibility & high-contrast fallbacks */
+@media (prefers-contrast: more) {
+  html,
+  body {
+    background-color: #000000;
+    color: #ffffff;
+  }
+
+  .crt-scanlines,
+  .scanline-overlay {
+    background-image: none !important;
+  }
+
+  .glow-cyan,
+  .glow-amber,
+  .border-glow-cyan {
+    box-shadow: none !important;
+  }
+
+  .text-glow-cyan,
+  .text-glow-amber {
+    text-shadow: none !important;
+  }
+
+  .tactical-panel,
+  .status-chip {
+    border-color: #f4f4f6 !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .status-pulse {
+    animation: none !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}