/* Flattened for performance: fonts + tokens inlined (sources in fonts/ and tokens/) */ /* Self-hosted webfonts (see /fonts). Design system v4: Satoshi = body/UI (ITF Free License); Playfair Display = display headings & quotes (SIL Open Font License). The "ava" wordmark keeps Quicksand Bold. */ @font-face{font-family:"Satoshi";font-weight:400;font-style:normal;font-display:swap;src:url("./fonts/satoshi-400.woff2") format("woff2");} @font-face{font-family:"Satoshi";font-weight:500;font-style:normal;font-display:swap;src:url("./fonts/satoshi-500.woff2") format("woff2");} @font-face{font-family:"Satoshi";font-weight:700;font-style:normal;font-display:swap;src:url("./fonts/satoshi-700.woff2") format("woff2");} @font-face{font-family:"Playfair Display";font-weight:400 700;font-style:normal;font-display:swap;src:url("./fonts/playfair-latin.woff2") format("woff2");} /* Ava Payments — color tokens Palette v3, per user-supplied swatch reference (name: hex): Light Blue #C3E7F1 · Moonstone #519CAB · Saffron #FFC64F · Gunmetal #20373B */ :root { /* Base palette (reference names in comments) */ --color-ink: #20373B; /* "Gunmetal" — dominant brand dark */ --color-violet: #519CAB; /* "Moonstone" — primary accent (replaces green) */ --color-blush: #FFC64F; /* "Saffron" — reserved for buttons/small accents only, not backgrounds */ --color-sky: #C3E7F1; /* "Light Blue" — soft accent */ --color-ghost: #F5F2EC; /* warm off-white surface — blends with Gunmetal ink + Moonstone/Saffron accents */ /* Secondary fills */ --color-violet-soft: #519CAB; /* "Moonstone" — softer accent alias */ --color-violet-tint: #FFC64F; /* alias of Saffron for tints */ --color-ink-soft: #20373B; /* "Gunmetal" — secondary neutral alias */ /* Semantic aliases */ --surface-page: var(--color-ghost); --surface-tint: var(--color-blush); --surface-inverse: var(--color-ink); --text-primary: var(--color-ink); --text-secondary: color-mix(in srgb, var(--color-ink) 68%, transparent); --text-muted: color-mix(in srgb, var(--color-ink) 50%, transparent); --text-on-dark: var(--color-blush); --text-on-dark-muted: var(--color-ghost); --text-on-dark-faint: color-mix(in srgb, var(--color-ghost) 62%, transparent); --accent: var(--color-violet); /* Page background: flat warm off-white — no yellow or light-blue tint */ --gradient-page: var(--color-ghost); /* Color balance rule (carried over from prior guide): 50% ghost/tint surfaces · 25% ink · 25% accent */ } /* Ava Payments — typography tokens Primary face: Poppins (substitute for the guide's Satoshi, per user decision). Regular 400 / Medium 500 / Bold 700, + Italic. Inter appears only for small meta text in the source. */ :root { --font-sans: "Poppins", "poppins-fb", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-meta: "Inter", var(--font-sans); --font-logo: "Quicksand", var(--font-sans); /* wordmark only */ /* Scale (verbatim sizes from the guide) */ --text-display: 180px; /* hero titles; line-height 94.8% */ --text-h1: 96px; --text-h2: 64px; /* line-height 1.28 */ --text-h3: 48px; --text-h4: 36px; /* section labels; line-height 1.28 */ --text-h5: 32px; /* line-height 1 */ --text-body-lg: 28px; /* line-height 1.455 */ --text-body: 24px; /* line-height 1.455 */ --text-small: 20px; /* nav / meta; line-height 1 */ --text-caption: 16px; --leading-display: 0.948; --leading-heading: 1.28; --leading-body: 1.455; --leading-loose: 1.535; --leading-tight: 1; --weight-regular: 400; --weight-medium: 500; /* the headline weight throughout */ --weight-bold: 700; } body { font-family: var(--font-sans); color: var(--text-primary); } a { color: var(--accent); } a:hover { color: var(--color-ink); } /* Ava Payments — effects & structure tokens */ :root { /* Soft layered card shadow (composited from the file's shadow stack) */ --shadow-card: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.09), 0 12px 32px rgba(0,0,0,0.10); --shadow-soft: 0 2px 8px rgba(77,77,77,0.20); /* Hairline rule used under every slide header (0.5px ink) */ --rule-hairline: 0.5px solid var(--color-ink); /* The source uses square-cornered blocks throughout; radii are minimal */ --radius-none: 0; --radius-sm: 4px; /* Spacing rhythm from slide layout (margins 129–132px on 1920 canvas) */ --space-page-margin: 132px; --space-section: 64px; --space-block: 32px; --space-element: 16px; --space-tight: 8px; --space-hairline: 2px; } /* ===== Design System v4 (Aug 2026) — opt-in via . Near-monochrome: charcoal ink + a single saffron accent (Moonstone blue retired), Playfair Display headings over self-hosted Satoshi body. Rolled out homepage-first; other pages keep the previous system until swept over, so this stays scoped. ===== */ body.ds-v4 { --color-ink: #282C32; /* charcoal — text + dark surfaces */ --color-violet: #E4B72E; /* accent (deep saffron) — legible accent text & hovers */ --color-blush: #F2CA4B; /* saffron — button fills & highlight bars */ --color-sky: #F2CA4B; /* retired light-blue → saffron */ --color-ghost: #FFFCF2; /* cream — page canvas */ --color-violet-soft: #E4B72E; --color-violet-tint: #F2CA4B; --color-ink-soft: #282C32; --accent: #E4B72E; --font-sans: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --btn-radius: 8px; --img-radius: 12px; } /* Playfair for display headings; H4–H6 stay in Satoshi. */ body.ds-v4 h1, body.ds-v4 h2, body.ds-v4 h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; } body.ds-v4 h4, body.ds-v4 h5, body.ds-v4 h6 { font-family: var(--font-sans); } /* Saffron is a fill, not a text colour on cream: plain (unclassed) links read ink and warm to saffron on hover. Classed links (buttons, nav, footer) keep their own colours — otherwise this rule out-specifies them and buttons end up with ink text on an ink fill (camouflaged). */ body.ds-v4 a:not([class]) { color: var(--color-ink); } body.ds-v4 a:not([class]):hover { color: var(--accent); } body.ds-v4 .btn:hover { background: var(--color-violet); opacity: 1; color: var(--color-ink); }