/* ============================================ RC STEM Consulting — Master Style Config Design System: "Gilded Science" ============================================ HOW TO USE ────────── This is the SINGLE SOURCE OF TRUTH for the site's visual identity. To rebrand the site: 1. Change the 6 values in QUICK CUSTOMIZE 2. Everything else auto-derives from those 3. Open index.html in a browser to preview CHANGING FONTS ────────────── If you change the font names below, you MUST also update the Google Fonts tag in every HTML file's . Search for: fonts.googleapis.com and replace the font family names in the URL. Current fonts: Heading → Instrument Serif Body → Plus Jakarta Sans Browse fonts at: https://fonts.google.com ============================================ */ /* ═══════════════════════════════════════════ 🎨 QUICK CUSTOMIZE — Change these to rebrand the entire website at once ═══════════════════════════════════════════ */ :root { /* Brand Colors — the 3 core colors */ --brand-primary: #C2A75E; /* Gold accent (buttons, links, highlights) */ --brand-dark: #0E1A2B; /* Deep navy backgrounds (hero, header, footer) */ --brand-light: #F2F3F5; /* Warm gray backgrounds (sections, body) */ /* Fonts — heading + body pair */ --font-heading: 'Instrument Serif', serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* Accent — Muted Teal (scientific accent) */ --brand-accent: #1F5F66; /* Core Teal (primary scientific accent) */ /* ═══════════════════════════════════════════ From here down, everything auto-derives from the values above. You generally do NOT need to edit below this line. ═══════════════════════════════════════════ */ /* ── DARK PALETTE ─────────────────────────── */ --obsidian: var(--brand-dark); --ink: #142236; --charcoal: #1E2D47; /* ── GOLD PALETTE ─────────────────────────── */ --gold: var(--brand-primary); --gold-hover: #A89050; --gold-gradient-end: #D4C07A; --gold-glow: color-mix(in srgb, var(--gold) 15%, transparent); /* Gold at various opacities (auto-derived) */ --gold-4: color-mix(in srgb, var(--gold) 4%, transparent); --gold-5: color-mix(in srgb, var(--gold) 5%, transparent); --gold-6: color-mix(in srgb, var(--gold) 6%, transparent); --gold-8: color-mix(in srgb, var(--gold) 8%, transparent); --gold-10: color-mix(in srgb, var(--gold) 10%, transparent); --gold-12: color-mix(in srgb, var(--gold) 12%, transparent); --gold-15: color-mix(in srgb, var(--gold) 15%, transparent); --gold-18: color-mix(in srgb, var(--gold) 18%, transparent); --gold-20: color-mix(in srgb, var(--gold) 20%, transparent); --gold-45: color-mix(in srgb, var(--gold) 45%, transparent); /* ── LIGHT PALETTE ────────────────────────── */ --ivory: var(--brand-light); --cream: #E8EAED; --pearl: #D6D9DE; --white: #ffffff; /* White at various opacities (auto-derived) */ --white-2: color-mix(in srgb, white 2.5%, transparent); --white-4: color-mix(in srgb, white 4%, transparent); --white-5: color-mix(in srgb, white 5%, transparent); --white-6: color-mix(in srgb, white 6%, transparent); --white-7: color-mix(in srgb, white 7%, transparent); --white-10: color-mix(in srgb, white 10%, transparent); --white-15: color-mix(in srgb, white 1.5%, transparent); --white-20: color-mix(in srgb, white 20%, transparent); --white-30: color-mix(in srgb, white 30%, transparent); --white-55: color-mix(in srgb, white 55%, transparent); /* ── TEAL PALETTE (Muted Teal System) ──────── */ --teal: var(--brand-accent); --teal-dark: #17484E; --teal-mid: #2C7C83; --teal-light: #E8F1F2; --teal-disabled: #9CB8BB; --teal-5: color-mix(in srgb, var(--teal) 5%, transparent); --teal-6: color-mix(in srgb, var(--teal) 6%, transparent); --teal-8: color-mix(in srgb, var(--teal) 8%, transparent); --teal-10: color-mix(in srgb, var(--teal) 10%, transparent); --teal-12: color-mix(in srgb, var(--teal) 12%, transparent); --teal-15: color-mix(in srgb, var(--teal) 15%, transparent); --teal-20: color-mix(in srgb, var(--teal) 20%, transparent); /* ── FEEDBACK / STATUS ────────────────────── */ --success: #3F6B60; --success-bg: color-mix(in srgb, var(--success) 12%, transparent); --success-border: color-mix(in srgb, var(--success) 20%, transparent); --error: #8B3A3A; --error-bg: color-mix(in srgb, var(--error) 10%, transparent); --error-border: color-mix(in srgb, var(--error) 20%, transparent); /* ── TEXT ON DARK ──────────────────────────── */ --text-bright: #F2F3F5; --text-light: rgba(242, 243, 245, 0.82); --text-dim: rgba(242, 243, 245, 0.55); /* ── TEXT ON LIGHT ─────────────────────────── */ --text-heading: #0E1A2B; --text-body: #3A4455; --text-muted: #5F6B7A; /* ── SPACING & LAYOUT ─────────────────────── */ --section-py: clamp(80px, 10vw, 140px); --container-px: clamp(20px, 4vw, 40px); --container-max: 1200px; /* ── BORDER RADIUS ────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── MOTION ───────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.35s; /* ── SHADOWS ──────────────────────────────── */ --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-light: 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-photo: 0 24px 48px rgba(0, 0, 0, 0.08); --shadow-name: 0 8px 24px rgba(0, 0, 0, 0.15); --shadow-header: 0 1px 30px rgba(0, 0, 0, 0.25); --shadow-gold-btn: 0 8px 32px var(--gold-glow); --shadow-gold-sm: 0 6px 24px var(--gold-glow); /* ── HEADER ───────────────────────────────── */ --header-height: 80px; --header-scrolled-bg: color-mix(in srgb, var(--obsidian) 92%, transparent); --header-scrolled-border: var(--gold-10); --footer-border: var(--gold-8); }