/* ============================================================ AIGIS Solutions — Colors & Type ------------------------------------------------------------ Lifted directly from app/globals.css in the AIGIS-Website codebase. Two layers: 1. BASE TOKENS — raw palette + scale values 2. SEMANTIC TOKENS — what to actually reach for in components ============================================================ */ /* Webfonts. Both brand families are loaded LOCALLY from /fonts/ (brand-uploaded TTFs), so the design system is offline-safe and not dependent on Google Fonts. Segoe UI is a system stack — no import needed. ─── How to add a new font ───────────────────────────────────── 1. Drop the .ttf / .otf / .woff2 files into /fonts/. 2. Add one @font-face per weight + style below. The family name is what you'll reference in CSS; weight/style let the browser pick the right file when you write font-weight: 600 etc. 3. Reference it in the type stack vars (--font-heading, --font-body, --font-mono) further down this file, OR add a new var for a new role. ─────────────────────────────────────────────────────────────── */ /* ---------- Montserrat — local @font-face ---------- */ /* Display / heading family. 9 weights + matching italics. */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Montserrat-Medium.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Montserrat-Bold.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Montserrat-ExtraBold.ttf") format("truetype"); } /* ---------- IBM Plex Sans — variable font, local @font-face ---- Two files cover the entire 100–700 weight range plus italics. Variable fonts ship every weight in a single binary, so this is much smaller than the 14-file static set. Pairs metric-for-metric with IBM Plex Mono so body prose and terminal readouts share DNA. */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/IBMPlexSans-Variable.ttf") format("truetype-variations"); } @font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 100 700; font-display: swap; src: url("fonts/IBMPlexSans-Italic-Variable.ttf") format("truetype-variations"); } /* ---------- IBM Plex Mono — local @font-face ---------- */ /* All 7 weights + matching italics. font-display: swap so layout doesn't block on font load — falls back to the mono stack until the brand file is ready. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype"); } :root { /* ---------- 1. BASE PALETTE ---------- */ /* Warm parchment "shell" — the dominant page background. Think aged plastic on a retro hardware bezel. */ --shell: #ECE7DC; /* page background */ --panel: #F7F3EA; /* surfaces / cards */ --panel-strong: #E4DED2; /* recessed / framed surfaces */ --panel-accent: #D9D4C8; /* chips, tags, inset wells */ /* Forest green — the AIGIS hardware-deep accent. Used for headings, primary type, contact slab. */ --shell-deep: #264D36; /* Console — the black inside the command readout panels. Only used inside terminal/telemetry surfaces. */ --console: #0E1411; --console-ink: #DDE8D5; /* body text on console */ /* Signal — the radioactive green prompt glyph. The single brightest moment in the system; use sparingly. */ --signal: #B6E62A; --signal-soft: #D7F596; /* signal text on dark */ /* Ink — neutral typographic colors. */ --ink: #1C1C1C; --ink-muted: #4B6C8B; /* desaturated blue-grey, label tone */ /* Lines / dividers */ --line-soft: rgba(184, 177, 163, 0.35); /* Selection */ --selection: rgba(182, 230, 42, 0.28); /* ---------- 2. TYPE STACKS ---------- */ /* Heading — Montserrat. Geometric, structured, slightly tech. Use weights 600-800 for headlines, 500 for eyebrows. */ --font-heading: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; /* Body — IBM Plex Sans (variable, all weights). Pairs natively with IBM Plex Mono so prose + terminal readouts share metrics. Segoe UI stays as fallback for any browser that fails to load the local file. */ --font-body: "IBM Plex Sans", "Segoe UI", Calibri, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* Aliases kept for backwards compatibility with components that reach for --font-sans / --font-display. */ --font-sans: var(--font-body); --font-display: var(--font-heading); /* Mono — IBM Plex Mono. Used for terminal readouts, prompt chips, telemetry lines, and inline code. */ --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- 3. TYPE SCALE ---------- */ /* Hero / page-defining headline. ~text-5xl→7xl */ --fs-hero: clamp(2.75rem, calc(5vw + 1rem), 4.5rem); /* @kind font */ --lh-hero: 1.02; /* @kind font */ --tracking-hero: -0.02em; /* Section heading. ~text-3xl→5xl */ --fs-h2: clamp(1.875rem, calc(2.4vw + 1rem), 3rem); /* @kind font */ --lh-h2: 1.08; /* @kind font */ --tracking-h2: -0.01em; /* Sub-section heading. */ --fs-h3: 1.125rem; /* 18px */ --lh-h3: 1.45; /* @kind font */ /* Body. */ --fs-body: 1rem; /* 16px */ --lh-body: 1.75; /* @kind font */ /* generous, calm reading */ --fs-body-lg: 1.0625rem; /* 17px — long-form intros */ --lh-body-lg: 1.85; /* @kind font */ /* Small / meta. */ --fs-small: 0.875rem; /* 14px */ --lh-small: 1.65; /* @kind font */ /* Eyebrow / sectionlabel — the wide-tracked all-caps */ --fs-eyebrow: 0.75rem; /* 12px */ --tracking-eyebrow:0.18em; /* Terminal readout — always monospace, modest size */ --fs-mono: 0.8125rem; /* 13px */ --lh-mono: 1.55; /* @kind font */ --fs-mono-sm: 0.6875rem; /* 11px — readout labels */ --tracking-mono-sm:0.2em; /* ---------- 4. SPACING & RADIUS ---------- */ --radius-pill: 9999px; --radius-card: 16px; /* rounded-2xl */ --radius-card-lg: 24px; --radius-slab: 28px; /* big framed sections */ --radius-slab-xl: 32px; /* contact slab */ /* ---------- 5. SHADOWS ---------- */ --shadow-card: 0 1px 2px rgba(28, 28, 28, 0.04), 0 1px 1px rgba(28, 28, 28, 0.03); --shadow-slab: 0 20px 60px rgba(12, 22, 16, 0.16); --shadow-glow: 0 0 24px rgba(182, 230, 42, 0.18); --shadow-dot: 0 0 14px rgba(182, 230, 42, 0.22); /* ---------- 6. SEMANTIC ROLE TOKENS (theme-aware) ---------- Role-based names — reach for THESE in new components instead of the appearance-named palette above. They are remapped wholesale by [data-theme="dark"] below, so anything built on them flips themes for free. ─── Themes ──────────────────────────────────────────────── Two parallel themes ship in this system: • LIGHT ("ADSP1 / shell") — default, no attribute needed. • DARK ("console") — set data-theme="dark". ─── How to switch ───────────────────────────────────────── Put the attribute on for a whole page, or on ANY container to theme just that subtree: ← whole page
…
← scoped island Persisted toggle (drop in your app shell): const t = localStorage.getItem('aigis-theme') || 'light'; document.documentElement.dataset.theme = t; // on toggle: localStorage.setItem('aigis-theme', next) ──────────────────────────────────────────────────────────── */ color-scheme: light; --bg: var(--shell); /* page background */ --surface: var(--panel); /* cards / raised surfaces */ --surface-strong: var(--panel-strong); /* recessed / framed wells */ --surface-accent: var(--panel-accent); /* chips, tags, inset wells */ --text: var(--ink); /* primary text */ --text-body: rgba(28, 28, 28, 0.76);/* long-form prose */ --text-muted: var(--ink-muted); /* labels, meta */ --text-subtle: rgba(28, 28, 28, 0.55);/* faint captions */ --heading: var(--shell-deep); /* all heading weight */ --border: var(--line-soft); /* hairline dividers */ --border-strong: rgba(38, 77, 54, 0.18);/* visible card outlines */ /* Action / emphasis. In LIGHT, forest green carries primary action; signal green stays reserved for prompts, dots, single moments. */ --accent: var(--shell-deep); /* primary action surface */ --on-accent: var(--panel); /* text/icon ON --accent */ --accent-soft: var(--signal); /* highlight / reserved pop */ --accent-ring: rgba(38, 77, 54, 0.30);/* focus ring */ --shadow-1: var(--shadow-card); --shadow-2: var(--shadow-slab); } /* ============================================================ DARK THEME — "console" Promotes the terminal/telemetry aesthetic (near-black shell, radioactive signal-green) into a complete surface system. Remaps BOTH the role tokens AND the appearance-named palette, so components written against either layer flip automatically. Works on :root or any scoped container. ============================================================ */ [data-theme="dark"] { color-scheme: dark; /* --- raw dark palette additions --- */ --console-mid: #121E16; /* lifted console — default surface */ /* --- appearance-named palette, remapped for dark --- */ --shell: #0B130E; /* deepest page background */ --panel: #121E16; /* cards / raised surfaces */ --panel-strong: #18271C; /* recessed / framed wells */ --panel-accent: #1F3326; /* chips, tags, inset wells */ --shell-deep: #EAF3E5; /* headings invert to near-white */ --ink: #E6EFE0; /* primary text */ --ink-muted: #9DB0A4; /* desaturated green-grey labels */ --line-soft: rgba(216, 245, 150, 0.12); --selection: rgba(182, 230, 42, 0.30); /* --- role tokens, remapped for dark --- */ --bg: #0B130E; --surface: #121E16; --surface-strong: #18271C; --surface-accent: #1F3326; --text: #E6EFE0; --text-body: rgba(230, 239, 224, 0.78); --text-muted: #9DB0A4; --text-subtle: rgba(230, 239, 224, 0.52); --heading: #EDF4E8; --border: rgba(216, 245, 150, 0.12); --border-strong: rgba(216, 245, 150, 0.24); /* In DARK, signal green carries primary action — the boldest, most on-brand moment — on near-black text. */ --accent: var(--signal); /* #B6E62A */ --on-accent: #0B130E; --accent-soft: var(--signal-soft); /* #D7F596 */ --accent-ring: rgba(182, 230, 42, 0.45); /* deeper shadows + the signature signal glow read better on black */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-slab: 0 24px 70px rgba(0, 0, 0, 0.55); --shadow-1: var(--shadow-card); --shadow-2: var(--shadow-slab); } /* ============================================================ SEMANTIC ELEMENT STYLES Apply to bare elements so plain HTML inherits the language. ============================================================ */ html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 240ms ease, color 240ms ease; } *::selection { background: var(--selection); } h1 { font-family: var(--font-heading); font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--tracking-hero); font-weight: 700; color: var(--heading); margin: 0; } h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); font-weight: 700; color: var(--heading); margin: 0; } h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--heading); margin: 0; } p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); margin: 0; } a { color: var(--accent); text-decoration: none; transition: color 160ms ease; } a:hover { color: var(--text); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); } /* Eyebrow — used above almost every section heading. */ .aigis-eyebrow { font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-muted); } /* Command-readout label — tiny mono, used as the title bar of every console panel. */ .aigis-readout-label { font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; letter-spacing: var(--tracking-mono-sm); color: color-mix(in srgb, var(--signal) 70%, transparent); } /* Telemetry line — the >_key........value pattern. */ .aigis-telemetry { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); color: var(--signal); } * { box-sizing: border-box; }