Migrated from Claude Design

2026-07-29 13:49:23 -07:00
parent be12d33fde
commit 96fc643cb7
37 changed files with 3888 additions and 2 deletions
@@ -0,0 +1,519 @@
+/* ============================================================
+   CYBERSTEEL DESIGN SYSTEM — styles.css
+   Retrofuturist. Technical. Direct.
+   Gruvbox-derived palette + Art Deco type system.
+   ============================================================ */
+
+/* ============================================================
+   BRAND FONTS — IBM PLEX SANS + IBM PLEX MONO
+
+   Plex Sans is the PRIMARY brand face — used for display, body,
+   and condensed roles. Proportional, readable, professional;
+   carries the Cybersteel voice into long-form and dense UI.
+
+   Plex Mono is the PRIMARY MONOSPACE face — used for code,
+   terminal output, data values, timestamps, and any tabular or
+   log-like content where character alignment matters. It is also
+   the right pick for hardware-grade hero / status moments where
+   the terminal aesthetic is the point.
+
+   Both faces share the same designer (IBM) and the same skeletal
+   proportions, so they sit together cleanly on the same screen
+   (Sans for prose + labels, Mono for code + status).
+
+   Both families: SIL OFL — free for commercial and embedded use.
+   Self-hosted from /fonts (woff2). No external CDN dependency.
+   ============================================================ */
+
+/* Light 300 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
+}
+
+/* Regular 400 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Italic.woff2') format('woff2');
+}
+
+/* Medium 500 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
+}
+
+/* Semibold 600 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
+}
+
+/* Bold 700 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Bold.woff2') format('woff2');
+}
+
+/* ── IBM PLEX SANS ── */
+
+/* Light 300 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
+}
+
+/* Regular 400 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Italic.woff2') format('woff2');
+}
+
+/* Medium 500 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
+}
+
+/* Semibold 600 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
+}
+
+/* Bold 700 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2');
+}
+
+:root {
+
+  /* ── BASE BACKGROUNDS (warm dark, Gruvbox-derived) ── */
+  --bg-shell:    #1d2021;   /* topbar, sidebar, nav chrome, modal backdrops */
+  --bg-page:     #313131;   /* default page canvas, main content area */
+  --bg-surface:  #3c3836;   /* cards, panels, drawers, input fields, code blocks, table rows */
+  --bg-active:   #504945;   /* selected rows, active nav items, hover states */
+  --bg-disabled: #665c54;   /* disabled buttons/inputs — fg-muted text only, intentionally low contrast */
+  --bg-border:   #7c6f64;   /* borders, dividers, rules, input outlines — never use as a text surface */
+
+  /* RGB triplets for rgba() use */
+  --bg-page-rgb:   49, 49, 49;
+  --bg-surface-rgb:   60, 56, 54;
+  --bg-active-rgb:   80, 73, 69;
+
+  /* ── BASE FOREGROUNDS (warm cream/ivory) ── */
+  --fg-heading:   #fbf1c7;   /* hero text, page headings, display titles */
+  --fg-body:      #f2e2ba;   /* primary body text, default readable content */
+  --fg-secondary: #e0d0a8;   /* labels, secondary descriptions, table data */
+  --fg-caption:   #cebd9e;   /* captions, metadata, timestamps, placeholders */
+  --fg-muted:     #b8a98e;   /* disabled text, token labels, subtle UI annotations */
+
+  /* ── ACCENT — GOLD (signature, Art Deco) ── */
+  --gold-bright:  #fabd2f;  /* primary interactive, focus rings        */
+  --gold-dim:     #d79921;  /* borders, decorative rules               */
+  --gold-muted:   #b57614;  /* hover states, pressed accents           */
+  --amber:        #ffb000;  /* terminal amber glow, CRT reference      */
+
+  /* ── ACCENT — RED ── */
+  --red-bright:   #fb4934;
+  --red-dim:      #cc241d;
+  --red-muted:    #9d0006;
+
+  /* ── ACCENT — GREEN ── */
+  --green-bright: #b8bb26;
+  --green-dim:    #98971a;
+  --green-muted:  #79740e;
+
+  /* ── ACCENT — BLUE / TEAL ── */
+  --blue-bright:  #83a598;
+  --blue-dim:     #458588;
+  --blue-muted:   #076678;
+
+  /* ── ACCENT — ORANGE ── */
+  --orange-bright: #fe8019;
+  --orange-dim:    #d65d0e;
+  --orange-muted:  #af3a03;
+
+  /* ── ACCENT — AQUA ── */
+  --aqua-bright:  #8ec07c;
+  --aqua-dim:     #689d6a;
+  --aqua-muted:   #427b58;
+
+  /* ── ACCENT — PURPLE ── */
+  --purple-bright: #d3869b;
+  --purple-dim:    #b16286;
+  --purple-muted:  #8f3f71;
+
+  /* ── SEMANTIC COLORS ── */
+  --color-primary:     var(--gold-bright);
+  --color-primary-dim: var(--gold-dim);
+  --color-danger:      var(--red-bright);
+  --color-danger-dim:  var(--red-dim);
+  --color-success:     var(--green-bright);
+  --color-success-dim: var(--green-dim);
+  --color-warning:     var(--orange-bright);
+  --color-warning-dim: var(--orange-dim);
+  --color-info:        var(--blue-bright);
+  --color-info-dim:    var(--blue-dim);
+  --color-link:        var(--blue-bright);
+  --color-link-hover:  var(--gold-bright);
+  --color-focus:       var(--gold-bright);
+
+  /* ── SURFACES ── */
+  --surface-page:      var(--bg-page);
+  --surface-raised:    var(--bg-surface);
+  --surface-overlay:   var(--bg-shell);
+  --surface-hover:     var(--bg-active);
+  --surface-active:    var(--bg-surface);
+
+  /* ── BORDERS ── */
+  --border:            var(--bg-border);            /* structural borders       */
+  --border-subtle:     var(--bg-disabled);            /* very faint separators    */
+  --border-accent:     var(--gold-dim);       /* decorative/active        */
+  --border-focus:      var(--gold-bright);    /* focus rings              */
+  --border-danger:     var(--red-dim);
+  --border-success:    var(--green-dim);
+
+  /* ── SHADOWS ── */
+  /* Flat design — no drop shadows. Elevation expressed through bg + border only. */
+  --shadow-sm:   none;
+  --shadow-md:   none;
+  --shadow-lg:   none;
+  --shadow-inset: none;
+  --shadow-gold:  0 0 0 1px var(--gold-dim);  /* focus/active ring — only permitted shadow use */
+
+  /* ── GRADIENTS ── */
+  --gradient-gold-fade:   linear-gradient(135deg, rgba(250,189,47,0.08) 0%, transparent 60%);  /* @kind color */
+  --gradient-amber-fade:  linear-gradient(180deg, rgba(255,176,0,0.06) 0%, transparent 100%);  /* @kind color */
+  --gradient-dark-fade:   linear-gradient(180deg, var(--bg-shell) 0%, var(--bg-page) 100%);
+  --gradient-card:        linear-gradient(135deg, rgba(250,189,47,0.04) 0%, rgba(40,40,40,0) 100%);  /* @kind color */
+  --gradient-scanline:    repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0,0,0,0.03) 2px,
+    rgba(0,0,0,0.03) 4px
+  );  /* @kind color */
+
+  /* ── SPACING (8px base grid) ── */
+  --space-chip:      4px;   /* badge/tag padding, icon-label gap, border offsets, micro nudges */
+  --space-element:   8px;   /* inline element gaps, chip/pill padding, icon inset, tight row spacing */
+  --space-component: 12px;  /* button vertical padding, input inset, list row gap, label-to-field gap */
+  --space-group:     16px;  /* card inset, input horizontal padding, form field gap, default gap */
+  --space-cluster:   20px;  /* grouped nav items, related form section spacing, compact panel inset */
+  --space-panel:     24px;  /* sidebar/panel inset, modal body padding, drawer inset, section subheader gap */
+  --space-block:     32px;  /* between distinct content blocks, card grid gutter, toolbar height */
+  --space-content:   40px;  /* major content group spacing, dialog padding, page sub-section gap */
+  --space-section:   48px;  /* page section breaks, feature group dividers, hero subheading gap */
+  --space-region:    64px;  /* hero vertical padding, layout area spacing, large feature gaps */
+  --space-zone:      80px;  /* page-scale layout spacing, full-width section vertical rhythm */
+  --space-canvas:    96px;  /* page margins, full-bleed hero top padding, maximum layout gutter */
+
+  /* ── BORDER RADIUS ── */
+  --radius-none: 0px;
+  --radius-sm:   4px;
+  --radius-md:   6px;   /* default — confirmed */
+  --radius-lg:   10px;
+  --radius-pill: 999px;
+
+  /* ── TRANSITIONS ── */
+  --transition-press:   55ms ease-out;   /* @kind other */ /* entering active/pressed state */
+  --transition-ui:      180ms ease-out;  /* @kind other */ /* releasing, hover changes */
+  --transition-hover:   150ms ease-out;  /* @kind other */ /* hover enter/exit */
+  --transition-modal:   200ms ease;      /* @kind other */ /* overlays, modals */
+
+  /* ── INTERACTION PATTERN (ghost buttons) ── */
+  /* default: transparent bg, colored border + fg2 text                     */
+  /* hover:   20% accent tint bg, colored border, fg1 text (--transition-hover) */
+  /* press:   full accent-bright fill, white text (--transition-press)      */
+  /* release: back to hover/default (--transition-ui)                       */
+
+  /* ── TYPOGRAPHY — Font Families ──
+     Plex Sans is the primary face for display, body, and
+     condensed roles. Plex Mono is the primary monospace face
+     for code, terminal output, data values, and timestamps.
+
+     For a fully terminal-styled surface (status dashboard,
+     console, hardware-grade hero), set --font-display /
+     --font-body / --font-condensed to var(--font-mono) on the
+     surface root, or apply the .mono-mode class.
+  */
+  --font-sans:      'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;
+
+  --font-display:   var(--font-sans);
+  --font-body:      var(--font-sans);
+  --font-condensed: var(--font-sans);
+
+  /* ── TYPOGRAPHY — Scale (1.25 modular ratio, base 16px) ── */
+  --text-xs:   11px;   /* status badges, fine print              */
+  --text-sm:   13px;   /* secondary labels, captions             */
+  --text-base: 15px;   /* default body text                      */
+  --text-md:   16px;   /* slightly prominent body                */
+  --text-lg:   18px;   /* subheadings, emphasized labels         */
+  --text-xl:   22px;   /* H3 level                               */
+  --text-2xl:  28px;   /* H2 level                               */
+  --text-3xl:  36px;   /* H1 level                               */
+  --text-4xl:  48px;   /* display / hero                         */
+  --text-5xl:  64px;   /* hero display                           */
+  --text-6xl:  96px;   /* max scale; masthead only               */
+
+  /* ── TYPOGRAPHY — Weight ── */
+  --weight-light:   300;
+  --weight-regular: 400;
+  --weight-medium:  500;
+  --weight-semibold:600;
+  --weight-bold:    700;
+  --weight-black:   900;
+
+  /* ── TYPOGRAPHY — Line Heights ── */
+  --leading-tight:  1.15;
+  --leading-snug:   1.3;
+  --leading-normal: 1.5;
+  --leading-loose:  1.7;
+  --leading-mono:   1.4;
+
+  /* ── TYPOGRAPHY — Letter Spacing ── */
+  --tracking-tight:   -0.02em;
+  --tracking-normal:   0em;
+  --tracking-wide:     0.05em;
+  --tracking-wider:    0.1em;
+  --tracking-widest:   0.2em;   /* ALL CAPS labels */
+}
+
+
+/* ── SEMANTIC ELEMENT DEFAULTS ── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  background-color: var(--bg-page);
+  color: var(--fg-body);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  font-weight: var(--weight-regular);
+  line-height: var(--leading-normal);
+}
+
+/* ── HEADINGS ── */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: var(--weight-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-wide);
+  color: var(--fg-heading);
+  margin: 0 0 var(--space-group);
+}
+
+h1 {
+  font-size: var(--text-3xl);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+h2 {
+  font-size: var(--text-2xl);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+h3 {
+  font-size: var(--text-xl);
+  font-family: var(--font-condensed);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-normal);
+}
+
+h4 {
+  font-size: var(--text-lg);
+  font-family: var(--font-condensed);
+  font-weight: var(--weight-semibold);
+}
+
+h5 {
+  font-size: var(--text-base);
+  font-family: var(--font-condensed);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+}
+
+h6 {
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  font-weight: var(--weight-regular);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--fg-caption);
+}
+
+/* ── BODY TEXT ── */
+p {
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--fg-secondary);
+  margin: 0 0 var(--space-group);
+}
+
+small {
+  font-size: var(--text-sm);
+  color: var(--fg-caption);
+}
+
+/* ── LINKS ── */
+a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color var(--transition-ui);
+}
+
+a:hover {
+  color: var(--color-link-hover);
+}
+
+/* ── CODE ── */
+code, kbd, samp, pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: var(--leading-mono);
+}
+
+code {
+  color: var(--gold-bright);
+  background: var(--bg-surface);
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+pre {
+  background: var(--bg-shell);
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--gold-dim);
+  padding: var(--space-group) var(--space-panel);
+  overflow-x: auto;
+  color: var(--fg-body);
+}
+
+/* ── LABELS & CAPS ── */
+.label {
+  font-family: var(--font-condensed);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--fg-caption);
+}
+
+.label-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+/* ── FOCUS ── */
+:focus-visible {
+  outline: 1px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/* ── MONO MODE ──
+   Flip a surface into fully terminal-styled type: display, body,
+   and condensed roles all resolve to IBM Plex Mono. Use for
+   consoles, status dashboards, IDE-like tools, and hardware-grade
+   hero moments where the terminal aesthetic IS the point.
+
+       <body class="mono-mode"> … </body>
+
+   Or, scope it programmatically:
+       :root { --font-body: var(--font-mono); … }
+*/
+.mono-mode {
+  --font-display:   var(--font-mono);
+  --font-body:      var(--font-mono);
+  --font-condensed: var(--font-mono);
+}