/* theme.css — DESIGN SEAM * All visual decisions live here. Colors, typography, spacing, effects. * A designer can redefine the entire visual identity by editing only this file. * Order: this file must be linked first in . */ :root { /* Colors — dark, warm, grounded. Earthy accent, dark base. */ --color-text: #E8E2DA; /* Warm light — readable against dark, not stark white */ --color-text-secondary: #A89F95; /* Muted warm — supporting copy, captions */ --color-accent: #D4541E; /* Ring corner — burnt terracotta, unchanged */ --color-accent-hover: #E8622A; /* Brighter rust on dark — needs to pop more */ --color-bg: #1C1A18; /* Dark canvas — warm near-black, not cold grey */ --color-bg-alt: #242220; /* Slightly lifted — alternating sections */ --color-bg-dark: #141210; /* Deepest — contact section, step into the ring */ --color-border: #3A3632; /* Visible on dark — still subtle */ --color-white: #E8E2DA; /* "White" text is warm, not #ffffff */ /* Typography — Work Sans (headings) + Source Sans 3 (body). No boxing-cliché fonts. */ --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; /* Type scale */ --size-h1: 3rem; /* 48px — hero: "Mike McWilliams" */ --size-h2: 2rem; /* 32px — section headings */ --size-h3: 1.25rem; /* 20px — card titles, pricing names */ --size-body: 1rem; /* 16px — all body copy */ --size-small: 0.875rem; /* 14px — captions, footnotes, form labels */ --size-tiny: 0.75rem; /* 12px — tags, metadata */ /* Heading line-heights — tighter, like someone leaning in to talk */ --line-height-h1: 1.15; --line-height-heading: 1.25; --line-height-body: 1.65; --line-height-small: 1.5; /* Heading letter-spacing — slightly tightened */ --letter-spacing-h1: -0.02em; --letter-spacing-heading: -0.01em; /* Heading font weights */ --weight-h1: 700; --weight-heading: 600; --weight-body: 400; --weight-medium: 500; /* Spacing — open and airy, but not empty. Space says "I'm not rushing you." */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 2rem; /* 32px */ --space-lg: 6rem; /* 96px — desktop section padding */ --space-lg-tablet: 4.5rem; /* 72px — tablet section padding */ --space-lg-mobile: 3.5rem; /* 56px — mobile section padding */ --space-xl: 8rem; /* 128px — hero top/bottom desktop */ /* Card spacing */ --card-gap: 24px; /* desktop gap between cards */ --card-gap-mobile: 16px; /* mobile gap between cards */ --card-padding: 32px; /* desktop card padding */ --card-padding-mobile: 24px; /* mobile card padding */ /* Layout widths */ --max-width-reading: 640px; /* about section, intro paragraphs */ --max-width-grid: 960px; /* audience cards, pricing */ --max-width-hero: 720px; /* hero text constraint */ /* Effects — flat colors only. No gradients, no drop shadows. Borders are honest. */ --radius: 4px; /* like the edge of a well-used training pad */ --transition: 0.2s ease; /* color transitions only, no transforms */ }