/* ========================================================================= Local Fractional® — Brand Tokens Adapted from design-system/project/colors_and_type.css Single source of truth for brand colors, typography, spacing, motion. See design-system/project/README.md for full usage rules. ========================================================================= */ /* ------------------------------ FONTS ----------------------------------- */ @font-face { font-family: 'AdornS Engraved'; src: url('/assets/fonts/AdornS-Engraved.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* NOTE: Google Fonts (Source Sans 3 + Source Serif 4) are loaded via a direct in each page's using the async print/onload pattern. This avoids the render-blocking @import chain that was pushing mobile LCP to 4.2s. See index.html for the canonical load pattern. */ :root { /* ----- BRAND COLORS — PRIMARY ----- */ --lf-pegasus-black: #000000; --lf-heritage-gold: #BD9542; /* ----- SECONDARY / NEUTRAL ----- */ --lf-navy-deep: #0E1B2E; --lf-slate: #4A5568; --lf-ivory: #F7F3EC; --lf-parchment: #E8DCC4; /* ----- FUNCTIONAL ----- */ --lf-success: #2F855A; --lf-alert: #C53030; /* ----- GOLD SHADES (hover/press) ----- */ --lf-gold-600: #A17E36; --lf-gold-700: #8A6B2C; --lf-gold-100: #F1E6CB; /* ----- BLACK SHADES ----- */ --lf-black-800: #1A1A1A; --lf-black-600: #2E2E2E; /* ----- SEMANTIC TOKENS (use these in components) ----- */ --bg-page: var(--lf-ivory); --bg-surface: #FFFFFF; --bg-raised: var(--lf-parchment); --bg-inverse: var(--lf-navy-deep); --bg-inverse-deep: var(--lf-pegasus-black); --fg-primary: var(--lf-pegasus-black); --fg-secondary: var(--lf-slate); --fg-tertiary: #6B7280; --fg-inverse: var(--lf-ivory); --fg-accent: var(--lf-heritage-gold); --fg-link: var(--lf-navy-deep); --fg-link-hover:var(--lf-heritage-gold); --border-subtle: rgba(14, 27, 46, 0.08); --border-default: rgba(14, 27, 46, 0.16); --border-strong: var(--lf-navy-deep); --border-gold: var(--lf-heritage-gold); --rule-gold: var(--lf-heritage-gold); /* ----- TYPOGRAPHY FACES ----- */ --font-display: 'AdornS Engraved', 'Cinzel', 'IM Fell English SC', 'Trajan Pro', serif; --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-sans: 'Source Sans 3', 'Source Sans Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-tabular: var(--font-sans); /* ----- TYPE SCALE ----- */ --fs-display-xl: 72px; --fs-display-lg: 56px; --fs-h1: 36px; --fs-h2: 26px; --fs-h3: 20px; --fs-eyebrow: 13px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.5; --lh-loose: 1.7; --tracking-display: 0.08em; --tracking-eyebrow: 0.16em; --tracking-caps: 0.06em; --tracking-body: 0; --measure-body: 65ch; --measure-long: 75ch; /* ----- SPACING (4px grid) ----- */ --space-0: 0; --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; /* ----- RADII ----- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ----- SHADOWS ----- */ --shadow-xs: 0 1px 2px rgba(14, 27, 46, 0.06); --shadow-sm: 0 1px 3px rgba(14, 27, 46, 0.08), 0 1px 2px rgba(14, 27, 46, 0.04); --shadow-md: 0 4px 12px rgba(14, 27, 46, 0.08), 0 2px 4px rgba(14, 27, 46, 0.04); --shadow-lg: 0 12px 32px rgba(14, 27, 46, 0.12), 0 4px 8px rgba(14, 27, 46, 0.06); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ----- MOTION ----- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 420ms; /* ----- LAYOUT ----- */ --container-max: 1200px; --container-narrow: 720px; --grid-gutter: 24px; } /* ========================================================================= SEMANTIC ELEMENT STYLES Scoped to the .lf-brand root so it applies only within the draft. When Phase 7b ships, these rules get promoted to global scope. ========================================================================= */ .lf-brand { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .lf-brand h1, .lf-brand h2, .lf-brand h3 { font-family: var(--font-serif); color: var(--fg-primary); line-height: var(--lh-heading); margin: 0; font-weight: 600; } .lf-brand h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; } .lf-brand h2 { font-size: var(--fs-h2); } .lf-brand h3 { font-size: var(--fs-h3); } .lf-brand p { margin: 0; max-width: var(--measure-body); } .lf-brand a { color: var(--fg-link); text-decoration: underline; text-decoration-color: rgba(14,27,46,0.25); text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-standard); } .lf-brand a:hover { color: var(--fg-link-hover); text-decoration-color: currentColor; } /* ----- Eyebrow — gold all-caps label above headings ----- */ .lf-eyebrow { display: block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--fg-accent); text-transform: uppercase; font-weight: 600; margin: 0 0 var(--space-3); } /* ----- Gold rule — 2pt decorative divider ----- */ .lf-rule { border: 0; height: 2px; background: var(--rule-gold); width: 64px; margin: var(--space-7) 0; } /* ----- Buttons ----- */ .lf-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 600; line-height: 1; border: 0; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); letter-spacing: 0; } .lf-btn-primary { background: var(--lf-pegasus-black); color: var(--lf-ivory); } .lf-btn-primary:hover { background: var(--lf-black-800); text-decoration: none; color: var(--lf-ivory); } .lf-btn-primary:active { background: var(--lf-pegasus-black); transform: translateY(1px); } .lf-btn-gold { background: var(--lf-heritage-gold); color: var(--lf-pegasus-black); } .lf-btn-gold:hover { background: var(--lf-gold-600); text-decoration: none; color: var(--lf-pegasus-black); } .lf-btn-gold:active { background: var(--lf-gold-700); transform: translateY(1px); } .lf-btn-ghost { background: transparent; color: var(--lf-pegasus-black); padding-left: 0; padding-right: 0; } .lf-btn-ghost:hover { color: var(--lf-heritage-gold); background: transparent; text-decoration: none; } .lf-btn-lg { padding: 14px 28px; font-size: var(--fs-body-lg); } /* ----- Focus ring ----- */ .lf-brand a:focus-visible, .lf-brand button:focus-visible, .lf-brand input:focus-visible { outline: 2px solid var(--lf-heritage-gold); outline-offset: 2px; } /* ----- Card ----- */ .lf-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); } .lf-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ----- Containers ----- */ .lf-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-5); } .lf-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); } /* ----- Inverse surface ----- */ .lf-inverse { background: var(--bg-inverse); color: var(--fg-inverse); } .lf-inverse h1, .lf-inverse h2, .lf-inverse h3 { color: var(--fg-inverse); } .lf-inverse p { color: rgba(247, 243, 236, 0.82); } .lf-inverse a { color: var(--lf-heritage-gold); } /* ----- Entrance animation ----- */ @keyframes lfRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .lf-page { animation: lfRise var(--dur-slow) var(--ease-standard) both; } /* ----- Pegasus display wordmark ----- */ .lf-display { font-family: var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; }