/* ============================================================================ AaronMHampton.com — Foundations: Color + Type ---------------------------------------------------------------------------- A monochrome, editorial-engineering system. Hedvig Letters Serif carries display + headings. General Sans carries body + UI prose. IBM Plex Mono carries labels, metadata, annotations. One restrained "editor's red" accent is reserved for annotation marks and rare emphasis only. Load order: import this file, then add data-theme="light|dark" to . Defaults to light if no attribute is present. ========================================================================== */ /* Mono + display are CDN-delivered (Google Fonts); General Sans text is self-hosted */ @import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* ---- Self-hosted brand text face (path relative to THIS file at project root) -- */ @font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("fonts/GeneralSans-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } /* ============================================================================ 1. TYPE FAMILIES ---------------------------------------------------------------------------- Display/headings → Hedvig Letters Serif (refined editorial serif) Body/UI/prose → General Sans (clean grotesque, self-hosted) Labels/meta/code → IBM Plex Mono (the engineering / annotation voice) --font-serif is kept as an alias of the text face for back-compat. ========================================================================== */ :root { --font-display: "Hedvig Letters Serif", Georgia, "Times New Roman", serif; --font-text: "General Sans", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-sans: var(--font-text); --font-serif: var(--font-text); /* alias: body usages resolve to General Sans */ } /* ============================================================================ 2. TYPE SCALE (mobile-first; display sizes scale fluidly) ---------------------------------------------------------------------------- Body reading size is generous (18px) — this is a reading-first site. Labels/metadata drop to mono at 12–14px with wide tracking. ========================================================================== */ :root { --text-2xs: 0.6875rem; /* 11px — micro labels, plot ticks */ --text-xs: 0.75rem; /* 12px — mono eyebrow labels, footnote marks */ --text-sm: 0.875rem; /* 14px — metadata, captions, UI */ --text-base: 1.125rem; /* 18px — body prose */ --text-lg: 1.25rem; /* 20px — lead paragraph, large UI */ --text-xl: 1.5rem; /* 24px — h4 / card titles */ --text-2xl: 1.875rem; /* 30px — h3 */ --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* 32→44 h2 */ --text-4xl: clamp(2.5rem, 1.6rem + 4vw, 4rem); /* 40→64 h1 */ --text-5xl: clamp(3rem, 1.6rem + 6.4vw, 5.5rem); /* 48→88 display */ /* Line heights */ --leading-tight: 1.08; /* display + large headings */ --leading-snug: 1.2; /* sub-headings */ --leading-normal: 1.45; /* UI / mono */ --leading-relaxed: 1.65; /* body prose */ /* Tracking */ --tracking-tight: -0.02em; /* display serif */ --tracking-normal: 0; --tracking-wide: 0.04em; /* mono labels */ --tracking-wider: 0.14em; /* eyebrow / small-caps */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Display face (Hedvig Letters Serif) ships a single 400 master — heading classes use this so they render real glyphs, never a synthesized bold. */ --weight-display: 400; /* Measure (line length) */ --measure-prose: 68ch; --measure-narrow: 54ch; } /* ============================================================================ 3. COLOR — LIGHT (default) : true-neutral ink on paper ========================================================================== */ :root, :root[data-theme="light"] { /* Backgrounds */ --bg: #ffffff; /* page */ --surface-1: #fafafa; /* subtle panels / code blocks */ --surface-2: #f2f2f2; /* inset wells / hover fills */ --surface-3: #e9e9e9; /* pressed / active fills */ /* Foreground (ink) */ --fg-1: #111111; /* primary text, headings */ --fg-2: #555555; /* secondary text, body de-emphasis */ --fg-3: #8a8a8a; /* muted — captions, metadata */ --fg-4: #b4b4b4; /* faintest — disabled, placeholders */ /* Lines / hairlines */ --line-1: #e4e4e4; /* default hairline rule */ --line-2: #d6d6d6; /* stronger divider */ --line-3: #c4c4c4; /* input borders */ --dot: #cfcfcf; /* diagrammatic dot-grid / plots */ /* Inversion (for inverted blocks, buttons) */ --ink: #111111; /* solid ink fill */ --paper: #ffffff; /* solid paper text on ink */ /* Signature accent — editor's red. Annotation marks + rare emphasis ONLY. */ --annotation: #a3322a; --annotation-soft: rgba(163, 50, 42, 0.10); /* Interactive (monochrome) */ --link: #111111; --link-hover: #555555; --focus-ring: #111111; /* Selection */ --selection-bg: #111111; --selection-fg: #ffffff; color-scheme: light; } /* ============================================================================ 4. COLOR — DARK : ink becomes paper, paper becomes graphite ========================================================================== */ :root[data-theme="dark"] { --bg: #0f0f10; --surface-1: #161617; --surface-2: #1d1d1f; --surface-3: #262628; --fg-1: #f4f4f3; --fg-2: #a8a8a6; --fg-3: #757573; --fg-4: #525251; --line-1: #262628; --line-2: #303032; --line-3: #3a3a3c; --dot: #343436; --ink: #f4f4f3; --paper: #0f0f10; --annotation: #e0796d; --annotation-soft: rgba(224, 121, 109, 0.14); --link: #f4f4f3; --link-hover: #a8a8a6; --focus-ring: #f4f4f3; --selection-bg: #f4f4f3; --selection-fg: #0f0f10; color-scheme: dark; } /* Respect OS preference when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg:#0f0f10; --surface-1:#161617; --surface-2:#1d1d1f; --surface-3:#262628; --fg-1:#f4f4f3; --fg-2:#a8a8a6; --fg-3:#757573; --fg-4:#525251; --line-1:#262628; --line-2:#303032; --line-3:#3a3a3c; --dot:#343436; --ink:#f4f4f3; --paper:#0f0f10; --annotation:#e0796d; --annotation-soft: rgba(224,121,109,0.14); --link:#f4f4f3; --link-hover:#a8a8a6; --focus-ring:#f4f4f3; --selection-bg:#f4f4f3; --selection-fg:#0f0f10; color-scheme: dark; } } /* ============================================================================ 5. SPACING / RADII / SHADOW / MOTION (system tokens) ========================================================================== */ :root { /* 4px base spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* Radii — sharp by default; editorial/diagrammatic favors crisp corners */ --radius-0: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Hairline width */ --hair: 1px; /* Elevation — used sparingly. Hairlines do most structural work. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.12); /* Motion — restrained; fades + short eases. No bounce. */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; /* Diagrammatic dot-grid (background utility) */ --dot-gap: 24px; --dot-size: 1.5px; } :root[data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); } /* ============================================================================ 6. SEMANTIC ELEMENT STYLES (opt-in utility classes + element defaults) ---------------------------------------------------------------------------- Use the classes in markup, or apply to base elements within a .prose block. ========================================================================== */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } .t-display { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-display); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } .t-h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: var(--leading-snug); color: var(--fg-1); text-wrap: balance; } .t-h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-display); line-height: var(--leading-snug); color: var(--fg-1); } .t-lead { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; } .t-body { font-family: var(--font-serif); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-1); text-wrap: pretty; } .t-small { font-family: var(--font-serif); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); } /* Mono — the engineering/annotation voice */ .t-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); } .t-meta { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: var(--tracking-wide); color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--fg-2); } .t-code { font-family: var(--font-mono); font-size: 0.9375em; color: var(--fg-1); background: var(--surface-1); border: var(--hair) solid var(--line-1); border-radius: var(--radius-sm); padding: 0.1em 0.35em; } /* Annotation / footnote — the signature editorial mark */ .t-annotation { font-family: var(--font-mono); font-size: var(--text-sm); font-style: normal; line-height: var(--leading-normal); color: var(--annotation); } .t-footnote { font-family: var(--font-serif); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); } .fn-mark { /* superscript footnote reference */ font-family: var(--font-mono); font-size: 0.7em; vertical-align: super; line-height: 0; color: var(--annotation); margin-left: 0.1em; } /* ============================================================================ 7. SIGNATURE MOTIF UTILITIES ========================================================================== */ /* Hairline rules */ .rule { border: 0; border-top: var(--hair) solid var(--line-1); margin: 0; } .rule-2 { border: 0; border-top: var(--hair) solid var(--line-2); margin: 0; } .rule-dotted { border: 0; border-top: var(--hair) dotted var(--line-3); margin: 0; } /* Diagrammatic dot grid background */ .dot-grid { background-image: radial-gradient(var(--dot) var(--dot-size), transparent var(--dot-size)); background-size: var(--dot-gap) var(--dot-gap); background-position: -1px -1px; } /* Engineering ruled grid (fine lines) */ .line-grid { background-image: linear-gradient(to right, var(--line-1) var(--hair), transparent var(--hair)), linear-gradient(to bottom, var(--line-1) var(--hair), transparent var(--hair)); background-size: var(--dot-gap) var(--dot-gap); } /* Plotted point — small crosshair marker for diagrammatic accents */ .plot-point { position: relative; width: 7px; height: 7px; display: inline-block; } .plot-point::before, .plot-point::after { content: ""; position: absolute; background: var(--fg-1); } .plot-point::before { left: 3px; top: 0; width: var(--hair); height: 7px; } .plot-point::after { top: 3px; left: 0; height: var(--hair); width: 7px; } /* Eyebrow / section index label */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); display: inline-flex; align-items: center; gap: var(--space-2); } /* Margin note — pin small mono notes to the side of content */ .margin-note { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); color: var(--annotation); } /* ============================================================================ 8. FOCUS / LINK / SELECTION defaults ========================================================================== */ a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.18em; text-decoration-color: var(--line-3); transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease); } a:hover { color: var(--link-hover); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }