/* ========================================================================== VANYAR — Colors & Type Source: /uploads/color palette.pdf + Logo Presentation Vanyar 041426.pdf ========================================================================== */ /* Fonts — loaded via in the HTML for faster render. Kept here as reference: the original @import was: @import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;1,400;1,500;1,600&family=Marcellus&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); See README.md "Typography" for substitution notes. */ :root { /* ---------- PRIMARY PALETTE ----------------------------------------- */ --alabaster: #F2F2F2; /* primary light / paper */ --spruce: #002D2D; /* primary deep — "Spruce" */ --onyx: #1D1D1D; /* primary dark neutral */ --gold: #FFC900; /* primary accent — "Gold" */ --gold-deep: #DEA800; /* deeper gold */ --gold-bronze: #A16B00; /* bronze / dark gold */ /* ---------- SECONDARY PALETTE --------------------------------------- */ --sage: #627C7B; /* muted teal-grey */ --sage-light: #95B1B0; /* soft mint-grey */ --pine: #010C03; /* near-black green (deepest) */ --cream: #FFFAD2; /* warm highlight cream */ --gold-bright: #FCCB00; /* high-chroma gold variant */ --gold-antique: #C9961A; /* aged brass gold */ /* ---------- BRAND GRADIENT ------------------------------------------ */ /* Mirrors the wordmark gradient from the Gold logo */ --grad-gold: linear-gradient(90deg, #A16B00 0%, #FFC900 25%, #E1AA00 29%, #BE8700 35%, #A56D00 41%, #965E00 46%, #915900 50%, #FFE375 75%, #B88A29 91%, #915900 100% ); /* ---------- SEMANTIC — SURFACES ------------------------------------- */ --bg: var(--alabaster); --bg-elevated: #FFFFFF; --bg-inverse: var(--spruce); --bg-deep: var(--pine); --bg-subtle: #E8E8E8; --surface-spruce: var(--spruce); --surface-onyx: var(--onyx); /* ---------- SEMANTIC — FOREGROUNDS ---------------------------------- */ --fg1: var(--onyx); /* primary body text */ --fg2: rgba(29, 29, 29, 0.72); /* secondary */ --fg3: rgba(29, 29, 29, 0.48); /* tertiary / captions */ --fg-muted: var(--sage); --fg-on-dark: var(--alabaster); --fg2-on-dark: rgba(242, 242, 242, 0.72); --fg3-on-dark: rgba(242, 242, 242, 0.48); --fg-accent: var(--gold-bronze); /* readable on light — AA-passing gold for text */ --fg-accent-on-dark: var(--gold); /* readable on dark */ /* ---------- SEMANTIC — LINES & BORDERS ------------------------------ */ --line: rgba(29, 29, 29, 0.12); --line-strong: rgba(29, 29, 29, 0.24); --line-on-dark: rgba(242, 242, 242, 0.16); --line-gold: var(--gold-deep); --hairline: rgba(29, 29, 29, 0.08); /* ---------- SEMANTIC — STATES --------------------------------------- */ --focus-ring: rgba(222, 168, 0, 0.45); --hover-tint: rgba(255, 201, 0, 0.08); --press-tint: rgba(255, 201, 0, 0.16); /* ---------- TYPE STACKS --------------------------------------------- */ --font-display: 'Marcellus', 'Cormorant Garamond', 'Times New Roman', serif; --font-serif: 'Cormorant Infant', 'Iowan Old Style', 'Georgia', serif; --font-serif-italic: 'Cormorant Infant', 'Iowan Old Style', 'Georgia', serif; /* italic-only accent */ --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- TYPE SCALE (semantic) ----------------------------------- */ --fs-display-xl: clamp(56px, 7.5vw, 112px); --fs-display-l: clamp(44px, 5.5vw, 80px); --fs-display-m: clamp(36px, 4vw, 56px); --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 22px; --fs-h4: 18px; --fs-body-l: 18px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 12px; --fs-eyebrow: 11px; /* ---------- SPACING TOKENS (4 px base) ------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; --s-12: 128px; /* ---------- RADII (restrained — subtle rounding only) --------------- */ --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --r-pill: 999px; /* ---------- SHADOWS (low-key, editorial) ---------------------------- */ --shadow-1: 0 1px 2px rgba(0, 45, 45, 0.06), 0 1px 1px rgba(0, 45, 45, 0.04); --shadow-2: 0 4px 10px rgba(0, 45, 45, 0.08), 0 1px 2px rgba(0, 45, 45, 0.04); --shadow-3: 0 12px 28px rgba(0, 45, 45, 0.12), 0 2px 4px rgba(0, 45, 45, 0.05); --shadow-4: 0 24px 48px rgba(0, 45, 45, 0.18), 0 4px 8px rgba(0, 45, 45, 0.06); --shadow-gold: 0 6px 20px rgba(222, 168, 0, 0.28); /* ---------- MOTION -------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-entrance: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; /* ---------- LAYOUT -------------------------------------------------- */ --container: 1200px; --gutter: 24px; } /* ========================================================================== BASE TEXT STYLES — apply on bare HTML tags ========================================================================== */ html, body { color: var(--fg1); background: var(--bg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; color: var(--fg1); line-height: 1.12; margin: 0; } h1 { font-size: var(--fs-h1); line-height: 1.08; } h2 { font-size: var(--fs-h2); line-height: 1.15; } h3 { font-size: var(--fs-h3); line-height: 1.25; font-family: var(--font-serif); font-weight: 500; } h4 { font-size: var(--fs-h4); line-height: 1.35; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 1em 0; text-wrap: pretty; max-width: 68ch; } small { font-size: var(--fs-body-s); color: var(--fg2); } strong { font-weight: 600; } em { font-style: italic; } a { color: var(--fg1); text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--gold-bronze); } code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; } code { background: rgba(29, 29, 29, 0.06); padding: 2px 6px; border-radius: var(--r-2); } hr { border: 0; height: 1px; background: var(--line); margin: var(--s-7) 0; } ::selection { background: var(--gold); color: var(--onyx); } /* ========================================================================== UTILITY TYPE CLASSES — reach for these in components ========================================================================== */ .t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: -0.015em; font-weight: 400; } .t-display-l { font-family: var(--font-display); font-size: var(--fs-display-l); line-height: 1.05; letter-spacing: -0.012em; font-weight: 400; } .t-display-m { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: 1.08; letter-spacing: -0.008em; font-weight: 400; } .t-serif-lead { font-family: var(--font-serif); font-size: var(--fs-body-l); line-height: 1.45; font-weight: 400; } .t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; } .t-body-s { font-family: var(--font-sans); font-size: var(--fs-body-s); line-height: 1.5; font-weight: 400; } .t-ui { font-family: var(--font-sans); font-size: var(--fs-body-s); line-height: 1.4; font-weight: 500; letter-spacing: 0; } .t-ui-s { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: 1.35; font-weight: 500; } .t-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); } .t-eyebrow-gold { composes: t-eyebrow; color: var(--gold-bronze); } .t-mono { font-family: var(--font-mono); font-size: var(--fs-body-s); letter-spacing: -0.01em; } /* Gold gradient text — reserved for marquee display moments only */ .t-gold-grad { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================== THEMED SURFACE HELPERS ========================================================================== */ .on-spruce { background: var(--spruce); color: var(--fg-on-dark); } .on-onyx { background: var(--onyx); color: var(--fg-on-dark); } .on-pine { background: var(--pine); color: var(--fg-on-dark); } .on-alabaster { background: var(--alabaster); color: var(--fg1); } .on-cream { background: var(--cream); color: var(--fg1); } .on-spruce h1, .on-spruce h2, .on-spruce h3, .on-onyx h1, .on-onyx h2, .on-onyx h3, .on-pine h1, .on-pine h2, .on-pine h3 { color: var(--fg-on-dark); }