/* ============================================================ theme.css — single source of truth for the site's visual design ------------------------------------------------------------ 1. Design tokens (:root, [data-theme="dark"]) 2. Reusable components (.pill, .card, .media, .eyebrow) 3. Shared a11y (focus-visible) Page layout lives in styles.css and consumes these tokens. Font faces live in fonts.css. See theme/README.md. ============================================================ */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* — Brand — one accent, used sparingly (UT Austin burnt orange) */ --accent: #bf5700; /* primary accent: hover, emphasis, active */ --accent-strong: #9c4700; /* darker shade for link text — AA contrast on light bg */ --accent-light: #f0e3d2; /* soft tint for subtle fills / highlights */ /* — Surfaces & text (light) — */ --bg: #f6f2e9; /* page background — warm paper */ --surface: #fbf8f1; /* cards, media wells, raised areas */ --text: #241f1a; /* headings, names, strong emphasis */ --text-body: #4a4339; /* default body copy */ --text-muted: #9b9384; /* captions, meta, labels */ --border: #e1d9c9; /* hairlines, dividers, card edges */ /* — Decorative Klee triad (favicon + footer colophon) — */ --klee-1: var(--accent); --klee-2: #cda866; --klee-3: #87937a; /* — Typography — */ --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Type scale — distinct roles, not just sizes */ --fs-name: 1.8rem; /* the name (h1) */ --fs-title: 1.02rem; /* entry / publication titles */ --fs-meta: 0.95rem; /* secondary running text (news) */ --fs-body: 15.5px; /* main body copy (set on ) */ --fs-sm: 0.86rem; /* author lists, dense body */ --fs-caption: 0.76rem; /* captions, social, email */ --fs-label: 0.72rem; /* section eyebrows, toggle */ --fs-fine: 0.70rem; /* pills, venue tags, fine print */ --leading: 1.62; /* body line-height */ --tracking-tight: -0.015em; /* large headings */ --tracking-label: 0.2em; /* uppercase eyebrows */ /* — Spacing scale (4px base rhythm) — */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 80px; /* — Radius — */ --radius-sm: 6px; /* media wells, thumbnails */ --radius: 12px; /* cards */ --radius-pill: 20px; /* pills, tags, toggle */ /* — Shadows — soft, low-contrast (flat design uses borders by default) — */ --shadow-sm: 0 1px 2px rgba(36, 31, 26, 0.04); --shadow: 0 4px 16px rgba(36, 31, 26, 0.06); /* — Motion — subtle only — */ --transition: 0.14s ease; } /* Dark theme: token overrides only. Set by main.js before first paint. */ [data-theme="dark"] { --accent: #e3781f; --accent-strong: #f0913a; /* lighter shade reads better on dark bg */ --accent-light: #3a2a18; --bg: #1b1813; --surface: #241f19; --text: #efe7d8; --text-body: #cdc3b2; --text-muted: #8c8475; --border: #3a342a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow: 0 4px 16px rgba(0, 0, 0, 0.40); } /* ---------- 2. REUSABLE COMPONENTS ---------- */ /* Pill — shared base for tag links, buttons, the theme toggle. Use `.pill` alone (toggle) or add `.pill--tag` for the smaller variant. */ .pill { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-fine); line-height: 1.4; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px; cursor: pointer; transition: border-color var(--transition), color var(--transition); } .pill:hover { border-color: var(--accent); color: var(--accent); } .pill--tag { padding: 3px 9px; color: var(--text-body); } /* Card — rounded surface with soft edge. For grouped/raised content. Add `.card--raised` to opt into the soft shadow. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-lg); } .card--raised { box-shadow: var(--shadow); } /* Media — rounded image/video container that clips its contents. Pair with fixed dimensions from the page layer. */ .media { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } /* Eyebrow — small uppercase mono label above sections. */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); } /* ---------- 3. SHARED A11Y ---------- */ a:focus-visible, button:focus-visible, .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }