/* ============================================================ Francisco Seixas — Design Tokens Neo Brutalism · Warm Edition ============================================================ */ /* ---------- Local font · Space Grotesk (variable, supplied) ---------- */ @font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; } /* Inter and JetBrains Mono are loaded via in each page's for non-blocking font loading */ :root { /* ---------- Color · Raw palette ---------- */ --bg: #F5F0E8; /* warm off-white page background — never pure white */ --ink: #1A1A1A; /* primary text, borders, shadows */ --ink-dark: #2D2D2D; /* dark sections, footer */ --signal: #B5F222; /* Electric lime — PRIMARY CTAs ONLY (nav pill + hero buttons) */ --harvest: #C9A84C; /* Harvest Gold — metrics, arrows, tags, brand accents. NOT buttons. */ --harvest-deep: #A8893A; /* pressed / hover state for harvest */ --card: #EDE8DC; /* light card surface */ --card-dark: #2D2D2D; /* dark card surface */ --muted: #6B6B6B; /* secondary text */ --hairline: #1A1A1A; /* borders are always ink — never grey */ /* ---------- Color · Semantic ---------- */ --fg: var(--ink); --fg-muted: var(--muted); --fg-inverse: var(--bg); --surface: var(--bg); --surface-card: var(--card); --surface-dark: var(--card-dark); --cta: var(--signal); /* primary button fill */ --cta-ink: var(--ink); /* text on signal is always ink */ --accent: var(--harvest); --accent-ink: var(--ink); /* text on harvest is always ink, never white */ --border: var(--ink); /* ---------- Typography · Families ---------- */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Typography · Scale ---------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 48px; --text-4xl: 64px; --text-5xl: 88px; --text-6xl: 120px; /* ---------- Typography · Weights ---------- */ --w-body: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ---------- Type · Letter spacing ---------- */ --tracking-tight: -0.03em; --tracking-display: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-label: 0.14em; /* eyebrow labels in mono-uppercase */ /* ---------- Spacing scale (8pt rhythm) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- Borders ---------- */ --bw-1: 2px; /* default brutalist stroke */ --bw-2: 3px; /* emphasis */ --bw-3: 4px; /* XL hero cards */ --radius-0: 0; /* everything sharp */ --radius-pill: 9999px; /* navigation CTA exception */ /* ---------- Shadows · offset solid, zero blur ---------- */ --shadow-sm: 3px 3px 0 0 var(--ink); --shadow-md: 5px 5px 0 0 var(--ink); --shadow-lg: 8px 8px 0 0 var(--ink); --shadow-xl: 12px 12px 0 0 var(--ink); --shadow-press: 0px 0px 0 0 var(--ink); /* used when element compresses */ /* ---------- Motion ---------- */ --ease-brut: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; } /* ============================================================ Element defaults — opinionated, brand-consistent ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--w-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Headings · Space Grotesk, stacked & tight ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--w-bold); color: var(--fg); letter-spacing: var(--tracking-display); line-height: 0.95; margin: 0; text-wrap: balance; } h1 { font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl)); letter-spacing: var(--tracking-tight); line-height: 0.92; } h2 { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); } h3 { font-size: var(--text-2xl); line-height: 1.05; } h4 { font-size: var(--text-xl); line-height: 1.15; } h5 { font-size: var(--text-lg); line-height: 1.2; } h6 { font-size: var(--text-md); line-height: 1.3; } /* ---------- Body ---------- */ p { margin: 0; text-wrap: pretty; } p + p { margin-top: var(--s-4); } strong, b { font-weight: var(--w-semibold); color: var(--fg); } /* ---------- Eyebrow label (mono, uppercase, tracked) ---------- */ .label, .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); } /* ---------- Numbers & metrics ---------- */ .metric, .num, code, kbd, samp { font-family: var(--font-mono); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; } .metric-xl { font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); color: var(--fg); } /* ---------- Links ---------- */ a { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--harvest); } a:hover { text-decoration-color: var(--fg); } /* ---------- Muted / secondary ---------- */ .muted, .text-muted { color: var(--fg-muted); } /* ---------- Arrow decorators ---------- */ .arrow { color: var(--harvest); font-family: var(--font-display); font-weight: var(--w-bold); display: inline-block; } /* ============================================================ Utility primitives — reused across UI kit ============================================================ */ .brut-card { background: var(--surface-card); border: var(--bw-1) solid var(--border); border-radius: var(--radius-0); box-shadow: var(--shadow-md); padding: var(--s-6); } .brut-card--dark { background: var(--surface-dark); color: var(--fg-inverse); } .brut-card--dark * { color: inherit; } .brut-card--dark .muted { color: #9A9A9A; } .brut-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 14px 22px; background: var(--signal); /* primary CTA — electric lime */ color: var(--ink); font-family: var(--font-body); font-weight: var(--w-semibold); font-size: var(--text-base); letter-spacing: var(--tracking-normal); border: var(--bw-1) solid var(--ink); border-radius: var(--radius-0); box-shadow: var(--shadow-md); cursor: pointer; text-decoration: none; transition: transform var(--dur-fast) var(--ease-brut), box-shadow var(--dur-fast) var(--ease-brut); } .brut-btn:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-sm); } .brut-btn:active{ transform: translate(5px, 5px); box-shadow: var(--shadow-press); } .brut-btn--ghost { background: transparent; color: var(--ink); } .brut-btn--pill { border-radius: var(--radius-pill); /* nav CTA exception */ padding: 10px 20px; font-size: var(--text-sm); } .brut-input { background: var(--bg); border: var(--bw-1) solid var(--ink); border-radius: var(--radius-0); padding: 14px 16px; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink); box-shadow: var(--shadow-sm); outline: none; width: 100%; } .brut-input::placeholder { color: var(--muted); } .brut-input:focus { box-shadow: var(--shadow-md); } .brut-divider { height: 0; border: 0; border-top: var(--bw-1) solid var(--ink); margin: var(--s-6) 0; }