/* ============================================================ Monochrome Personal Site — Colors & Type Foundations Strictly grayscale. Light is the only "accent." Load fonts via Google Fonts (see of any page): ============================================================ */ :root { /* ---- Surfaces ---- */ --color-bg: #000000; /* page background — pure black */ --color-surface: #161616; /* cards, panels */ --color-surface-2: #1f1f1f; /* raised / hover surfaces */ --color-border: #2a2a2a; /* hairline borders, dividers */ --color-border-strong: #3a3a3a; /* ---- Text / "ink" ---- */ --color-ink: #fafafa; /* primary text */ --color-ink-muted: #9a9a9a; /* secondary copy */ --color-ink-subtle: #5a5a5a; /* captions, footer, legal */ /* ---- "Accent" = pure light ---- */ --color-white: #ffffff; --color-on-light: #0a0a0a; /* dark text on white buttons */ /* ---- Emphasis = serif italic (monochrome, never hue) ---- */ /* Stress one word per headline with font-style: italic — see .t-em */ /* ---- Silver glow — the only "atmosphere" ---- */ --glow-silver: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.25) 38%, transparent 70%); --glow-white: 0 0 40px rgba(255,255,255,0.16); /* ============================================================ TYPE — families ============================================================ */ --font-display: "Newsreader", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif; /* ---- Base tokens (size / line-height / weight / tracking) ---- */ --display-size: clamp(3rem, 5.4vw, 4.5rem); /* 48 → 72px */ --display-lh: 1.08; --display-wght: 600; --display-trk: -0.01em; --h1-size: clamp(2.25rem, 4vw, 3rem); /* 36 → 48px */ --h1-lh: 1.12; --h1-wght: 600; --h1-trk: -0.005em; --h2-size: clamp(1.75rem, 2.6vw, 2rem); /* 28 → 32px */ --h2-lh: 1.18; --h2-wght: 600; --h2-trk: 0; --h3-size: 1.375rem; /* 22px */ --h3-lh: 1.3; --h3-wght: 600; --h3-trk: 0; --body-lg-size: 1.1875rem; /* 19px */ --body-lg-lh: 1.6; --body-size: 1rem; /* 16px */ --body-lh: 1.65; --small-size: 0.875rem; /* 14px */ --small-lh: 1.5; --mono-size: 0.8125rem; /* 13px */ --mono-lh: 1.5; --mono-wght: 500; --mono-trk: 0.04em; /* ============================================================ SPACING ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --container-max: 1180px; --container-narrow: 720px; /* ============================================================ RADII / BORDERS / SHADOWS ============================================================ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px; --border-hairline: 1px solid var(--color-border); --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.5); /* ---- Motion ---- */ --ease-soft: cubic-bezier(.2,.6,.2,1); --dur-ui: 200ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .t-display { font-family: var(--font-display); font-size: var(--display-size); line-height: var(--display-lh); font-weight: var(--display-wght); letter-spacing: var(--display-trk); color: var(--color-ink); } .t-h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: var(--h1-wght); letter-spacing: var(--h1-trk); color: var(--color-ink); } .t-h2 { font-family: var(--font-display); font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--h2-wght); letter-spacing: var(--h2-trk); color: var(--color-ink); } .t-h3 { font-family: var(--font-display); font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: var(--h3-wght); letter-spacing: var(--h3-trk); color: var(--color-ink); } .t-body-lg { font-family: var(--font-body); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); font-weight: 400; color: var(--color-ink-muted); } .t-body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); font-weight: 400; color: var(--color-ink-muted); } .t-small { font-family: var(--font-body); font-size: var(--small-size); line-height: var(--small-lh); color: var(--color-ink-subtle); } .t-mono { font-family: var(--font-body); font-size: var(--mono-size); line-height: var(--mono-lh); font-weight: var(--mono-wght); letter-spacing: var(--mono-trk); text-transform: uppercase; color: var(--color-ink-muted); } /* Emphasis — italicize one word inside a headline. Editorial, monochrome. The emphasized word stays pure white against the off-white of the rest. */ .t-em { font-style: italic; color: var(--color-white); }