/* ============================================================ ALEKS FILMORE — Design System Foundations Ink + Paper • Electric Heartbreak • Literary Author Platform ============================================================ */ /* Webfonts — loaded from Google Fonts (matches production site). Substitutions flagged: original site uses self-hosted variants, but the three families are all available on Google Fonts unchanged. ----------------------------------------------------------- - Playfair Display (display serif, italic + bold) - Inter (body sans) - Space Mono (mono accent — captions, metadata) */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap'); :root { /* ─── CORE PALETTE — "Ink + Paper" ─────────────────────── */ --af-black: #010300; /* Silence and depth */ --af-cream: #F0E8C9; /* Clarity and memory (paper) */ --af-red: #FD0009; /* Pulse and danger (primary) */ --af-gray: #BFB9A3; /* Detachment and reflection */ --af-teal: #2AA87E; /* Accent — recovery, hope */ /* ─── EXTENDED INK SCALE (section backgrounds) ─────────── */ --af-void: #000000; --af-charcoal: #0E0F10; --af-slate: #1A1C20; --af-graphite: #151618; --af-muted: #1F2024; /* ─── FOREGROUND / NEUTRAL TINTS ───────────────────────── */ --af-cream-90: rgba(240, 232, 201, 0.90); --af-cream-70: rgba(240, 232, 201, 0.70); --af-cream-55: rgba(240, 232, 201, 0.55); --af-cream-35: rgba(240, 232, 201, 0.35); --af-cream-10: rgba(240, 232, 201, 0.10); --af-cream-05: rgba(240, 232, 201, 0.05); --af-red-20: rgba(253, 0, 9, 0.20); --af-red-10: rgba(253, 0, 9, 0.10); --af-teal-20: rgba(42, 168, 126, 0.20); --af-teal-10: rgba(42, 168, 126, 0.10); /* ─── SEMANTIC COLOR ROLES ─────────────────────────────── */ --af-bg: var(--af-black); --af-bg-paper: var(--af-cream); /* reading surfaces */ --af-fg: var(--af-cream); --af-fg-muted: var(--af-cream-70); --af-fg-subtle: var(--af-cream-35); --af-fg-ink: var(--af-black); /* text on paper */ --af-border: var(--af-cream-10); --af-border-strong:var(--af-cream-35); --af-accent: var(--af-red); /* pulse, CTA, underlines */ --af-accent-2: var(--af-teal); /* recovery, hope, badges */ /* ─── TYPOGRAPHY — FAMILIES ───────────────────────────── */ --af-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --af-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --af-font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ─── TYPE SCALE (fluid) ──────────────────────────────── */ --af-display-xl: clamp(3.75rem, 8vw, 5.5rem); /* Hero headlines, cover titles */ --af-display: clamp(3rem, 6vw, 4.5rem); /* Major page titles */ --af-headline: clamp(2rem, 4vw, 3rem); /* Section headlines */ --af-h1: clamp(2.25rem, 6vw, 3.25rem); --af-h2: clamp(1.75rem, 4.5vw, 2.25rem); --af-h3: clamp(1.375rem, 3.5vw, 1.75rem); --af-h4: clamp(1.125rem, 2.5vw, 1.375rem); --af-body-lg: 1.25rem; --af-body: 1rem; --af-caption: 0.75rem; /* ─── LINE HEIGHTS ────────────────────────────────────── */ --af-leading-tight: 1.1; --af-leading-snug: 1.3; --af-leading-normal: 1.6; --af-leading-relaxed: 1.85; /* long-form reading */ /* ─── LETTER SPACING ──────────────────────────────────── */ --af-track-tight: -0.03em; /* Display */ --af-track-headline:-0.02em; --af-track-body: 0; --af-track-caption: 0.15em; /* Uppercased mono captions */ --af-track-mono: 0.08em; /* ─── SPACING / LAYOUT ────────────────────────────────── */ --af-space-1: 0.25rem; --af-space-2: 0.5rem; --af-space-3: 0.75rem; --af-space-4: 1rem; --af-space-5: 1.5rem; --af-space-6: 2rem; --af-space-7: 3rem; --af-space-8: 4rem; --af-space-9: 5rem; --af-space-10: 8rem; --af-reading-width: 68ch; --af-container: 1400px; /* ─── RADII — KEPT SHARP ─────────────────────────────── */ /* Canon-craft uses hard corners (border-radius: 0) for buttons and editorial surfaces. Only forms/mobile softens slightly. */ --af-radius-0: 0; --af-radius-sm: 4px; --af-radius-md: 8px; /* form inputs on dark */ --af-radius-lg: 12px; /* cards, newsletter */ /* ─── SHADOWS / GLOWS ─────────────────────────────────── */ --af-shadow-cover: drop-shadow(-16px 24px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 40px rgba(253,0,9,0.15)); --af-glow-red: 0 0 80px rgba(253, 0, 9, 0.15), 0 0 120px rgba(253, 0, 9, 0.10); --af-glow-teal: 0 0 60px rgba(42, 168, 126, 0.15), 0 0 100px rgba(42, 168, 126, 0.08); --af-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5); /* ─── MOTION ───────────────────────────────────────────── */ --af-ease: cubic-bezier(0.4, 0, 0.2, 1); --af-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --af-dur-fast: 0.2s; --af-dur: 0.3s; --af-dur-slow: 0.5s; --af-dur-xslow: 0.8s; } /* ============================================================ SEMANTIC TYPE STYLES — apply directly to elements or use utility classes (h1, h2, p, .af-caption, etc.) ============================================================ */ body, .af-body { font-family: var(--af-font-body); font-size: var(--af-body); line-height: var(--af-leading-normal); color: var(--af-fg); background: var(--af-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .af-display, .af-headline { font-family: var(--af-font-display); font-weight: 700; letter-spacing: var(--af-track-headline); margin: 0; } .af-display-xl { font-family: var(--af-font-display); font-size: var(--af-display-xl); line-height: 0.95; font-weight: 500; letter-spacing: var(--af-track-tight); } .af-display { font-family: var(--af-font-display); font-size: var(--af-display); line-height: 1.05; font-weight: 500; letter-spacing: var(--af-track-headline); } .af-headline { font-family: var(--af-font-display); font-size: var(--af-headline); line-height: var(--af-leading-tight); font-weight: 500; } h1 { font-size: var(--af-h1); line-height: 1.15; font-weight: 800; } h2 { font-size: var(--af-h2); line-height: 1.2; font-weight: 700; } h3 { font-size: var(--af-h3); line-height: 1.25; font-weight: 700; } h4 { font-size: var(--af-h4); line-height: 1.3; font-weight: 600; } h5 { font-size: 1rem; line-height: 1.35; font-weight: 600; } h6 { font-size: 0.875rem; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } p, .af-p { font-family: var(--af-font-body); font-size: var(--af-body); line-height: var(--af-leading-relaxed); max-width: var(--af-reading-width); color: var(--af-fg-muted); } .af-body-lg { font-size: var(--af-body-lg); line-height: 1.6; } /* Mono caption — the signature "field note" micro-label. Used for dates, section eyebrows, badges, metadata. */ .af-caption { font-family: var(--af-font-mono); font-size: var(--af-caption); line-height: 1.4; text-transform: uppercase; letter-spacing: var(--af-track-caption); font-weight: 400; } .af-mono { font-family: var(--af-font-mono); } /* Editorial italic blockquote — the "pulled line" */ .af-quote { font-family: var(--af-font-display); font-style: italic; font-size: 1.5rem; line-height: 1.5; border-left: 2px solid var(--af-red); padding-left: 1.25rem; color: var(--af-fg); } /* Outlined numeral — used for movement numerals (I, II, III) */ .af-numeral-outline { font-family: var(--af-font-display); font-size: clamp(5rem, 15vw, 9rem); line-height: 1; font-weight: 500; -webkit-text-stroke: 1px var(--af-cream-35); color: transparent; } /* Electric gradient text — teal → red, used sparingly */ .af-gradient-electric { background: linear-gradient(135deg, var(--af-teal) 0%, var(--af-red) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Red text-glow — signature hero treatment */ .af-glow-red-text { text-shadow: 0 0 40px rgba(253, 0, 9, 0.4), 0 0 80px rgba(253, 0, 9, 0.2); } /* Selection: red tint on cream */ ::selection { background: var(--af-red-20); color: var(--af-fg); } /* Reading surface ("Paper") — inverts foreground to black-on-cream */ .af-paper { background: var(--af-cream); color: var(--af-black); } .af-paper h1, .af-paper h2, .af-paper h3, .af-paper h4, .af-paper h5, .af-paper h6 { color: var(--af-black); } .af-paper p { color: rgba(1, 3, 0, 0.75); } .af-paper a { color: var(--af-red); text-decoration: underline; text-underline-offset: 3px; }