/* ═══════════════════════════════════════════════════════════
RICHIE — PORTFOLIO DESIGN SYSTEM
design-system.css · v1.0 · April 2026
Import in every page:
═══════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
1. SPACING SCALE (8-point base)
Usage: var(--space-1) = 8px, --space-2 = 16px, etc.
───────────────────────────────────────────────────────── */
:root {
--space-0: 4px; /* hairline gap / icon padding */
--space-1: 8px; /* tight internal spacing */
--space-2: 16px; /* default component gap */
--space-3: 24px; /* section internal padding */
--space-4: 32px; /* card padding / section gap */
--space-5: 48px; /* section vertical rhythm */
--space-6: 64px; /* large section breaks */
--space-7: 80px; /* hero / page-level breathing room */
--space-8:128px; /* max vertical hero padding */
}
/* ─────────────────────────────────────────────────────────
2. BORDER RADIUS SCALE
One radius per shape type — never mix within a page.
───────────────────────────────────────────────────────── */
:root {
--radius-xs: 4px; /* tags / code chips */
--radius-sm: 8px; /* inner elements (images, inputs) */
--radius-md: 12px; /* cards — the primary card radius */
--radius-lg: 20px; /* modals / overlapping panels */
--radius-xl: 32px; /* stacking section top corners */
--radius-pill: 100px;/* buttons, status pills */
}
/* ─────────────────────────────────────────────────────────
3. TYPOGRAPHY SCALE (JetBrains Mono throughout)
Scale: 11 / 12 / 13 / 14 / 16 / 20 / 28 / 36 / 48 / 72
───────────────────────────────────────────────────────── */
:root {
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Font sizes */
--text-2xs: 11px; /* legal, meta, timestamps */
--text-xs: 12px; /* eyebrows, labels, tags */
--text-sm: 13px; /* nav links, captions */
--text-base:14px; /* body text — default */
--text-md: 16px; /* comfortable long-form body */
--text-lg: 20px; /* lead / standfirst */
--text-xl: 28px; /* card titles, small headings */
--text-2xl: 36px; /* section headings */
--text-3xl: 48px; /* page-level headings */
--text-4xl: 72px; /* hero / display */
/* Line heights */
--leading-tight: 1.1;
--leading-snug: 1.3;
--leading-normal: 1.55;
--leading-relaxed:1.75;
/* Letter spacing */
--tracking-tight: -0.03em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--tracking-wider: 0.10em;
}
/* ─────────────────────────────────────────────────────────
4. CURSOR — shared across all pages, desktop / fine-pointer only
Ring follows instantly; dot lags for organic feel.
Scoped to the portfolio shell — doesn't break external links.
───────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
.portfolio-page,
.portfolio-page * { cursor: none !important; }
#ds-cursor-ring {
position: fixed;
width: 14px; height: 14px;
border-radius: 50%;
border: 1.5px solid currentColor;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
mix-blend-mode: exclusion;
color: inherit;
transition: width .18s ease, height .18s ease, border-color .18s ease;
}
#ds-cursor-dot {
position: fixed;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--roughy, #c94a1a);
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
}
.portfolio-page:has(a:hover) #ds-cursor-ring,
.portfolio-page:has(button:hover) #ds-cursor-ring {
width: 30px; height: 30px;
}
}
/* ─────────────────────────────────────────────────────────
5. NAVIGATION — breadcrumb pattern (all pages)
───────────────────────────────────────────────────────── */
.ds-nav {
position: fixed;
inset: 0 0 auto 0;
height: 56px;
display: flex;
align-items: center;
padding: 0 var(--space-4);
border-bottom: 1px solid var(--border, rgba(27,26,23,.09));
background: var(--nav-bg, rgba(244,242,236,.9));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 200;
font-family: var(--font-mono);
gap: var(--space-1);
}
/* Logo */
.ds-nav-logo {
font-size: var(--text-sm);
font-weight: 600;
color: var(--rangoon, #1b1a17);
text-decoration: none;
display: flex;
align-items: center;
gap: 3px;
}
.ds-nav-logo-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 3px;
background: var(--roughy, #c94a1a);
margin-bottom: 5px;
flex-shrink: 0;
}
/* Breadcrumb */
.ds-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
margin-left: var(--space-2);
}
.ds-breadcrumb-sep { color: var(--border-strong, rgba(27,26,23,.25)); }
.ds-breadcrumb-back { color: var(--ink-light, #595959); text-decoration: none; transition: color .2s; }
.ds-breadcrumb-back:hover { color: var(--ink, #1b1a17); }
.ds-breadcrumb-now { color: var(--ink, #1b1a17); font-weight: 500; }
/* Right links */
.ds-nav-links {
margin-left: auto;
display: flex;
gap: var(--space-4);
list-style: none;
}
.ds-nav-links a {
font-size: var(--text-sm);
color: var(--ink-light, #595959);
text-decoration: none;
transition: color .2s;
}
.ds-nav-links a:hover { color: var(--ink, #1b1a17); }
/* ─────────────────────────────────────────────────────────
6. SHARED CARD — base card style
Extend per-project with modifier classes.
───────────────────────────────────────────────────────── */
.ds-card {
background: var(--bg, #fff);
border: 1px solid var(--border, rgba(27,26,23,.09));
border-radius: var(--radius-md); /* 12px — consistent everywhere */
overflow: hidden;
font-family: var(--font-mono);
}
/* ─────────────────────────────────────────────────────────
7. SHARED TAG / PILL
───────────────────────────────────────────────────────── */
.ds-tag {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: 500;
padding: var(--space-0) var(--space-1);
border-radius: var(--radius-xs);
background: var(--friar, #edeae2);
border: 1px solid var(--border, rgba(27,26,23,.09));
color: var(--ink-mid, #4a4a48);
}
.ds-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-mono);
font-size: var(--text-2xs);
font-weight: 500;
padding: 5px var(--space-2);
border-radius: var(--radius-pill);
border: 1px solid var(--border, rgba(27,26,23,.09));
}
/* ─────────────────────────────────────────────────────────
8. SHARED BUTTONS
───────────────────────────────────────────────────────── */
.ds-btn-dark {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-family: var(--font-mono);
font-size: var(--text-base);
font-weight: 500;
background: var(--rangoon, #1b1a17);
color: var(--pampas, #f4f2ec);
padding: 14px var(--space-4);
border-radius: var(--radius-pill);
text-decoration: none;
border: none;
cursor: none;
transition: background .22s, transform .22s;
}
.ds-btn-dark:hover { background: var(--roughy, #c94a1a); transform: translateY(-2px); }
.ds-btn-ghost {
font-family: var(--font-mono);
font-size: var(--text-base);
font-weight: 400;
color: var(--muted, #6b6760);
background: none;
border: none;
cursor: none;
text-decoration: none;
transition: color .2s;
}
.ds-btn-ghost:hover { color: var(--rangoon, #1b1a17); }
/* ─────────────────────────────────────────────────────────
9. SCROLL REVEAL — shared animation
───────────────────────────────────────────────────────── */
.ds-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s cubic-bezier(.22,1,.36,1),
transform .6s cubic-bezier(.22,1,.36,1);
}
.ds-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ─────────────────────────────────────────────────────────
10. AVAILABILITY DOT — shared pulse
───────────────────────────────────────────────────────── */
.ds-avail-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--fern, #5cb85c);
animation: ds-pulse 2.4s ease-in-out infinite;
}
@keyframes ds-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
/* ─────────────────────────────────────────────────────────
UTILITY — visually hidden (accessibility)
───────────────────────────────────────────────────────── */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}