520 lines
16 KiB
CSS
520 lines
16 KiB
CSS
/* ============================================================
|
|
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);
|
|
}
|