/* ========================================================================= * SILVER SCINTILLA — DESIGN TOKENS * ------------------------------------------------------------------------- * Every color, font, radius, shadow and animation timing on the site * comes from this file. Nothing else in the theme hard-codes a color. * * TO RE-THEME THE WHOLE SITE: * • Easiest: WordPress admin → Appearance → Customize → Brand Colors * • Or here: change --brand (and optionally --ink / --paper) below. * * All shades — hovers, glows, tints, the 3D hero ribbons — are mixed from * these few base colors automatically, so one change updates everything. * ========================================================================= */ :root { /* ---- 1. BASE COLORS (change these) --------------------------------- */ --brand: #d42a3c; /* logo red — buttons, highlights, 3D ribbons */ --ink: #07080d; /* darkest surface — hero, footer, dark sections */ --silver: #c5c9d3; /* the "Silver" in Silver Scintilla — soft light accents */ --rating: #f5b942; /* review stars */ --paper: #ffffff; /* lightest surface — page background */ --text-strong: #0f1015; /* headings on light surfaces */ /* ---- 2. DERIVED BRAND SHADES (auto — no need to edit) ---------------- */ --brand-hover: color-mix(in srgb, var(--brand) 86%, white); --brand-press: color-mix(in srgb, var(--brand) 82%, black); --brand-deep: color-mix(in srgb, var(--brand) 55%, black); --brand-bright: color-mix(in srgb, var(--brand) 70%, white); --brand-pale: color-mix(in srgb, var(--brand) 18%, white); --brand-tint: color-mix(in srgb, var(--brand) 7%, white); --brand-glow: color-mix(in srgb, var(--brand) 55%, transparent); --brand-soft: color-mix(in srgb, var(--brand) 16%, transparent); --on-brand: #ffffff; /* Logo facets — four cut-gem shades of the brand red (saturation kept) */ --mark-1: var(--brand); --mark-2: color-mix(in srgb, var(--brand) 88%, white); --mark-2: hsl(from var(--brand) h s calc(l + 7)); --mark-3: color-mix(in srgb, var(--brand) 80%, black); --mark-3: hsl(from var(--brand) h s calc(l - 9)); --mark-4: color-mix(in srgb, var(--brand) 85%, white); --mark-4: hsl(from var(--brand) calc(h + 3) calc(s + 5) calc(l + 13)); /* ---- 3. SURFACES ------------------------------------------------------ */ --ink-2: color-mix(in srgb, var(--ink) 92%, white); --ink-3: color-mix(in srgb, var(--ink) 84%, white); --paper-2: color-mix(in srgb, var(--paper) 96%, var(--ink)); --paper-3: color-mix(in srgb, var(--paper) 91%, var(--ink)); /* ---- 4. TEXT ---------------------------------------------------------- */ --text: color-mix(in srgb, var(--text-strong) 82%, var(--paper)); --text-muted: color-mix(in srgb, var(--text-strong) 58%, var(--paper)); --text-on-dark: var(--paper); --text-on-dark-muted: color-mix(in srgb, var(--paper) 68%, transparent); --text-on-dark-faint: color-mix(in srgb, var(--paper) 42%, transparent); /* ---- 5. LINES & GLASS ------------------------------------------------- */ --line: color-mix(in srgb, var(--text-strong) 10%, transparent); --line-strong: color-mix(in srgb, var(--text-strong) 18%, transparent); --line-dark: color-mix(in srgb, var(--paper) 11%, transparent); --line-dark-strong: color-mix(in srgb, var(--paper) 22%, transparent); --glass-dark: color-mix(in srgb, var(--ink-2) 55%, transparent); --glass-light: color-mix(in srgb, var(--paper) 72%, transparent); /* ---- 6. 3D HERO RIBBON PALETTE (auto from brand + silver) ------------- */ /* Mostly silver/white light with red accents — elegant, not all-red. */ --ribbon-1: var(--brand); --ribbon-2: var(--silver); --ribbon-3: var(--brand-bright); --ribbon-4: color-mix(in srgb, var(--paper) 70%, var(--silver)); --ribbon-5: var(--brand-deep); /* ---- 7. TYPOGRAPHY ---------------------------------------------------- */ --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-lg: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); --fs-display: clamp(2.35rem, 1rem + 5.4vw, 6rem); --fs-hero: clamp(2.1rem, 0.9rem + 4vw, 4.5rem); --lh-tight: 0.98; --lh-snug: 1.2; --lh-body: 1.65; --tracking-tight: -0.035em; --tracking-caps: 0.16em; /* ---- 8. LAYOUT -------------------------------------------------------- */ --container: 1280px; --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem); --section-y: clamp(3.5rem, 2.25rem + 4vw, 6.25rem); /* space above/below each section */ --header-h: 84px; --header-h-scrolled: 68px; /* ---- 9. SHAPE — taken from the logo stripes -------------------------- */ /* The logo stripes are parallelograms whose ends lean ≈19° off vertical. Every button and badge uses this same angle so they echo the mark. */ --skew: -19deg; --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; /* ---- 10. DEPTH -------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .05); --shadow: 0 10px 30px -12px rgb(0 0 0 / .25); --shadow-lg: 0 30px 80px -30px rgb(0 0 0 / .45); --shadow-brand: 0 14px 40px -12px var(--brand-glow); /* ---- 11. MOTION ------------------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: .2s; --dur: .45s; --dur-slow: .9s; --stagger: 70ms; /* ---- 12. LAYERS ------------------------------------------------------- */ --z-bg: 0; --z-content: 2; --z-header: 100; --z-overlay: 200; }