/* ==========================================================================
iAmAI — Code Space shared shell
2026-06-02 site-wide redesign. Layers on top of design-tokens.css.
Usage:
Provides:
• Body background — soft deep black + corner vignette.
• Subtle code-rain "noise" in 4 corners (CSS-only, no JS).
• Heading + link defaults that match the DNA.
• Generic button + card classes (.cs-btn, .cs-btn--primary, .cs-card)
any page can adopt without touching its own styles.
• Sensible form input defaults (cyan focus ring on dark fields).
The shell never sets layout (no width/grid rules) so it never fights with
page-level layouts. Pages keep their own structure and just pick up the
look.
========================================================================== */
/* ── Base ─────────────────────────────────────────────────────────────── */
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
font-family: var(--cs-sans);
color: var(--cs-text);
background-color: var(--cs-bg);
/* Center vignette: cyan-tinted soft glow that fades to the deep-black
base. Adds depth without competing with content. The purple tinge in
the second stop keeps the DNA's "cyan→purple" undertone whispering. */
background-image:
radial-gradient(ellipse at 50% 0%,
rgba(0, 212, 255, 0.06) 0%,
transparent 55%),
radial-gradient(ellipse at 50% 100%,
rgba(139, 92, 246, 0.04) 0%,
transparent 50%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
line-height: 1.55;
}
/* Body vignette + corner code rain wrapped in one decorative layer.
The actual code rain lives in ::before/::after on .cs-bg-shell (added
to if a page wants the corner rain effect). */
.cs-bg-shell {
position: relative;
isolation: isolate;
}
/* Top-left + bottom-right rain columns. SVG-as-data-URI = no extra HTTP,
no JS, no animation cost. Opacity kept low so text reads cleanly above.
On RTL pages the corner effect is direction-agnostic (pure decoration). */
.cs-bg-shell::before,
.cs-bg-shell::after {
content: '';
position: fixed;
z-index: -1;
width: 260px; height: 260px;
pointer-events: none;
opacity: 0.10;
background-repeat: no-repeat;
background-size: contain;
/* Compact pattern of binary + hex tokens, faintly cyan. The exact glyph
mix mirrors the dashboard-v2 code-rain spec so the visual carries
across pages. */
background-image: url("data:image/svg+xml;utf8,");
}
.cs-bg-shell::before { top: 8px; left: 8px; }
.cs-bg-shell::after { bottom: 8px; right: 8px;
background-image: url("data:image/svg+xml;utf8,");
}
/* On phones the corner rain cramps the layout — hide below 720px so the
page breathes. */
@media (max-width: 720px) {
.cs-bg-shell::before, .cs-bg-shell::after { display: none; }
}
/* ── Typography defaults ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--cs-sans);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--cs-text);
margin: 0;
}
/* UX rule: H1 capped at 32px — keeps hero compact above-the-fold. */
h1 { font-size: clamp(24px, 3.5vw, 32px); }
h2 { font-size: clamp(20px, 2.5vw, 24px); }
h3 { font-size: clamp(18px, 2vw, 20px); }
p { color: var(--cs-text); }
small, .t-muted { color: var(--cs-text-mute); }
/* Anchors. Subtle on rest, cyan glow on hover. */
a {
color: var(--cs-cyan);
text-decoration: none;
transition: color 0.15s var(--ease), text-shadow 0.15s var(--ease);
}
a:hover {
color: var(--cs-cyan-2);
text-shadow: 0 0 16px var(--cs-cyan-glow);
}
/* Mono numerals: any element gets the Fira Code feel by class .cs-mono.
Used for stats, prices, timestamps. */
.cs-mono { font-family: var(--cs-mono); font-variant-numeric: tabular-nums; }
hr {
border: 0;
border-top: 1px solid var(--cs-border);
margin: var(--space-6) 0;
}
/* ── Buttons (generic — pages may extend) ─────────────────────────────── */
.cs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
border-radius: var(--radius-md);
font-family: var(--cs-sans);
font-weight: 700;
font-size: 14px;
line-height: 1;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--cs-text);
transition: transform 0.12s var(--ease),
background 0.15s var(--ease),
border-color 0.15s var(--ease),
box-shadow 0.15s var(--ease);
white-space: nowrap;
text-decoration: none;
}
.cs-btn:hover { transform: translateY(-1px); }
.cs-btn:active { transform: translateY(0); }
.cs-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.cs-btn--primary {
background: var(--cs-cyan);
color: #04141A;
border-color: var(--cs-cyan);
box-shadow: 0 0 0 0 transparent;
}
.cs-btn--primary:hover:not([disabled]) {
background: var(--cs-cyan-2);
box-shadow: 0 0 24px var(--cs-cyan-glow);
}
.cs-btn--ghost {
background: transparent;
color: var(--cs-text);
border-color: var(--cs-border-2);
}
.cs-btn--ghost:hover:not([disabled]) {
border-color: var(--cs-cyan);
color: var(--cs-cyan);
background: var(--cs-cyan-soft);
}
.cs-btn--purple {
background: linear-gradient(135deg, var(--cs-cyan) 0%, var(--cs-purple) 100%);
color: #04141A;
border-color: transparent;
}
.cs-btn--purple:hover:not([disabled]) {
box-shadow: 0 0 32px var(--cs-cyan-glow);
}
/* ── Cards ────────────────────────────────────────────────────────────── */
.cs-card {
background: var(--cs-bg-3);
border: 1px solid var(--cs-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-2);
}
.cs-card--elevated {
background: var(--cs-bg-3);
border-color: var(--cs-border-2);
box-shadow: var(--shadow-3);
}
.cs-card--glow {
border-color: var(--cs-cyan);
box-shadow: var(--shadow-cyan);
}
/* ── Form inputs ──────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
select, textarea {
font-family: var(--cs-sans);
font-size: 15px;
color: var(--cs-text);
background: var(--cs-bg-2);
border: 1px solid var(--cs-border-2);
border-radius: var(--radius-md);
padding: 11px 14px;
outline: none;
transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
width: 100%;
box-sizing: border-box;
}
input::placeholder, textarea::placeholder {
color: var(--cs-text-dim);
}
input:focus, select:focus, textarea:focus {
border-color: var(--cs-cyan);
box-shadow: 0 0 0 3px var(--cs-cyan-soft);
}
/* Some pages have inputs explicitly LTR (email/passwords) — leave them
alone; otherwise default to follow the document direction. */
[dir="rtl"] input:not([dir="ltr"]):not([type="email"]):not([type="password"]):not([type="url"]) {
text-align: right;
}
label {
font-size: 13px;
font-weight: 600;
color: var(--cs-text);
}
/* ── Chip / badge ─────────────────────────────────────────────────────── */
.cs-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 700;
background: var(--cs-bg-3);
border: 1px solid var(--cs-border);
color: var(--cs-text-mute);
}
.cs-chip--cyan { color: var(--cs-cyan); border-color: var(--cs-cyan); background: var(--cs-cyan-soft); }
.cs-chip--success { color: var(--cs-success); border-color: var(--cs-success); background: var(--cs-success-soft); }
.cs-chip--warn { color: var(--cs-warn); border-color: var(--cs-warn); background: var(--cs-warn-soft); }
.cs-chip--danger { color: var(--cs-danger); border-color: var(--cs-danger); background: var(--cs-danger-soft); }
/* ── Section wrapper (consistent max-width) ───────────────────────────── */
.cs-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-6);
}
/* ── Focus ring for keyboard nav (a11y) ───────────────────────────────── */
:focus-visible {
outline: 2px solid var(--cs-cyan);
outline-offset: 2px;
border-radius: 4px;
}
/* ── Reduce-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}