/* * ╔═══════════════════════════════════════════════════════════════════╗ * ║ IDA GLOBAL — BRAND TOKEN SYSTEM ║ * ║ Centralized color/semantic token file for all Ida Global brands ║ * ╠═══════════════════════════════════════════════════════════════════╣ * ║ BRAND SYSTEM REQUIREMENT: ║ * ║ Do NOT hard-code Primal Privilege or Ida Ranch Reserve colors ║ * ║ inside page-specific stylesheets. Use the semantic --brand-* ║ * ║ variables defined here, and assign the page brand on : ║ * ║ ║ * ║ ← raw dog nutrition ║ * ║ ← premium beef ║ * ║ ← neutral admin ║ * ║ ║ * ║ New pages MUST declare a brand. New components MUST use ║ * ║ --brand-* tokens, not raw hex values. ║ * ╚═══════════════════════════════════════════════════════════════════╝ * * HOW TO USE * ---------- * 1. Link this file in every branded page , AFTER main.css: * * * 2. Add the brand attribute to : * * * 3. Write components using --brand-* variables only: * .my-card { background: var(--brand-surface); color: var(--brand-text); } * * DO NOT: * - Scatter hex values in page stylesheets for brand colors * - Use Primal Privilege copper on an Ida Ranch Reserve page * - Use Ida Ranch Reserve navy on a Primal Privilege page * - Hard-code brand colors inside JS files */ /* ═══════════════════════════════════════════════════════════════════ §1 PRIMAL PRIVILEGE — PRIMITIVE PALETTE Western ranch · Dark brown · Copper · Warm cream ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Brown scale ───────────────────────────────────────── */ --pp-brown-950: #1a1410; --pp-brown-900: #241810; --pp-brown-800: #342116; --pp-brown-700: #472c18; --pp-brown-600: #5a3921; /* ── Copper scale ──────────────────────────────────────── */ --pp-copper-700: #8f4d22; --pp-copper-600: #a85d2b; --pp-copper-500: #c06b32; --pp-copper-400: #d18a55; --pp-copper-300: #dfab7c; /* ── Cream / neutral scale ─────────────────────────────── */ --pp-cream-100: #fcf4e5; --pp-cream-200: #f5ead8; --pp-cream-300: #e9dac5; /* ── Stone scale (muted text/borders) ─────────────────── */ --pp-stone-500: #9b8d7d; --pp-stone-700: #62564b; /* ── Absolute base ─────────────────────────────────────── */ --pp-white: #fffdf8; --pp-text-dark: #241810; --pp-text-light: #fcf4e5; /* ── Typography family tokens ─────────────────────────── */ --font-serif: 'CS Mantis', Georgia, 'Times New Roman', serif; --font-sans: 'Neue Helvena', 'Helvetica Neue', Arial, sans-serif; --font-accent: 'Wanoja', 'Palatino Linotype', serif; /* ── Gradients ─────────────────────────────────────────── */ --pp-gradient-dark: linear-gradient(135deg, #1a1410 0%, #342116 55%, #472c18 100%); --pp-gradient-copper: linear-gradient(135deg, #8f4d22 0%, #c06b32 52%, #dfab7c 100%); --pp-gradient-hero: linear-gradient(160deg, rgba(26,20,16,.92) 0%, rgba(52,33,22,.75) 55%, rgba(71,44,24,.55) 100%); } /* ═══════════════════════════════════════════════════════════════════ §2 IDA RANCH RESERVE — PRIMITIVE PALETTE Ranch reserve · Navy blue · Refined gold · Warm ivory ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Navy scale ────────────────────────────────────────── */ --irr-navy-950: #081522; --irr-navy-900: #0d2033; --irr-navy-800: #132d46; --irr-navy-700: #1b3c59; --irr-navy-600: #294e6c; /* ── Gold scale ────────────────────────────────────────── */ --irr-gold-700: #8f6a28; --irr-gold-600: #a98032; --irr-gold-500: #c49a45; --irr-gold-400: #d7b66f; --irr-gold-300: #e7d09d; /* ── Cream / ivory ─────────────────────────────────────── */ --irr-cream-100: #faf7ef; --irr-cream-200: #f1eadc; /* ── Absolute base ─────────────────────────────────────── */ --irr-white: #fffdfa; --irr-text-dark: #0d2033; --irr-text-light: #faf7ef; /* ── Gradients ─────────────────────────────────────────── */ --irr-gradient-dark: linear-gradient(135deg, #081522 0%, #132d46 55%, #1b3c59 100%); --irr-gradient-gold: linear-gradient(135deg, #8f6a28 0%, #c49a45 52%, #e7d09d 100%); --irr-gradient-hero: linear-gradient(160deg, rgba(8,21,34,.92) 0%, rgba(19,45,70,.75) 55%, rgba(27,60,89,.55) 100%); } /* ═══════════════════════════════════════════════════════════════════ §3 PRIMAL PRIVILEGE — SEMANTIC BRAND TOKENS Applied when: ═══════════════════════════════════════════════════════════════════ */ [data-brand="primal-privilege"] { /* ── Primary surfaces ──────────────────────────────────── */ --brand-primary: var(--pp-brown-800); --brand-primary-dark: var(--pp-brown-950); --brand-secondary: var(--pp-copper-600); --brand-accent: var(--pp-copper-400); --brand-accent-muted: var(--pp-copper-300); /* ── Backgrounds ───────────────────────────────────────── */ --brand-bg: var(--pp-cream-100); --brand-bg-alt: var(--pp-cream-200); --brand-bg-warm: var(--pp-cream-300); --brand-surface: var(--pp-white); --brand-surface-dark: var(--pp-brown-900); --brand-surface-darker: var(--pp-brown-950); --brand-surface-mid: var(--pp-brown-800); /* ── Text ──────────────────────────────────────────────── */ --brand-text: var(--pp-text-dark); --brand-text-muted: var(--pp-stone-700); --brand-text-subtle: var(--pp-stone-500); --brand-text-on-dark: var(--pp-text-light); --brand-text-on-dark-dim: rgba(252,244,229,.65); --brand-eyebrow: var(--pp-copper-500); /* ── Borders ───────────────────────────────────────────── */ --brand-border: rgba(71,44,24,.18); --brand-border-strong: rgba(192,107,50,.55); --brand-border-on-dark: rgba(252,244,229,.1); --brand-border-accent: rgba(192,107,50,.35); /* ── Buttons ───────────────────────────────────────────── */ --brand-btn-primary-bg: var(--pp-copper-500); --brand-btn-primary-text: var(--pp-brown-950); --brand-btn-primary-hover:var(--pp-copper-600); --brand-btn-secondary-bg: transparent; --brand-btn-secondary-text:var(--pp-brown-900); --brand-btn-secondary-border: rgba(71,44,24,.35); --brand-btn-secondary-hover-bg: rgba(71,44,24,.07); --brand-btn-ghost-bg: transparent; --brand-btn-ghost-text: var(--pp-cream-100); --brand-btn-ghost-border: rgba(252,244,229,.35); --brand-btn-ghost-hover: rgba(252,244,229,.1); /* ── Shadows ───────────────────────────────────────────── */ --brand-shadow-sm: 0 4px 16px rgba(36,24,16,.1); --brand-shadow: 0 18px 50px rgba(36,24,16,.14); --brand-shadow-lg: 0 32px 80px rgba(26,20,16,.22); --brand-shadow-card: 0 2px 12px rgba(36,24,16,.08), 0 8px 32px rgba(36,24,16,.06); /* ── Gradients ─────────────────────────────────────────── */ --brand-gradient-dark: var(--pp-gradient-dark); --brand-gradient-accent: var(--pp-gradient-copper); --brand-gradient-hero: var(--pp-gradient-hero); /* ── Divider / accent bar ──────────────────────────────── */ --brand-accent-bar: linear-gradient(90deg, transparent 0%, var(--pp-copper-600) 30%, var(--pp-copper-400) 55%, var(--pp-copper-600) 80%, transparent 100%); } /* ═══════════════════════════════════════════════════════════════════ §4 IDA RANCH RESERVE — SEMANTIC BRAND TOKENS Applied when: ═══════════════════════════════════════════════════════════════════ */ [data-brand="ida-ranch-reserve"] { /* ── Primary surfaces ──────────────────────────────────── */ --brand-primary: var(--irr-navy-800); --brand-primary-dark: var(--irr-navy-950); --brand-secondary: var(--irr-gold-600); --brand-accent: var(--irr-gold-400); --brand-accent-muted: var(--irr-gold-300); /* ── Backgrounds ───────────────────────────────────────── */ --brand-bg: var(--irr-cream-100); --brand-bg-alt: var(--irr-cream-200); --brand-bg-warm: var(--irr-cream-200); --brand-surface: var(--irr-white); --brand-surface-dark: var(--irr-navy-900); --brand-surface-darker: var(--irr-navy-950); --brand-surface-mid: var(--irr-navy-800); /* ── Text ──────────────────────────────────────────────── */ --brand-text: var(--irr-text-dark); --brand-text-muted: #5f6872; --brand-text-subtle: #8a9199; --brand-text-on-dark: var(--irr-text-light); --brand-text-on-dark-dim: rgba(250,247,239,.65); --brand-eyebrow: var(--irr-gold-500); /* ── Borders ───────────────────────────────────────────── */ --brand-border: rgba(19,45,70,.18); --brand-border-strong: rgba(196,154,69,.6); --brand-border-on-dark: rgba(250,247,239,.1); --brand-border-accent: rgba(196,154,69,.35); /* ── Buttons ───────────────────────────────────────────── */ --brand-btn-primary-bg: var(--irr-gold-500); --brand-btn-primary-text: var(--irr-navy-950); --brand-btn-primary-hover:var(--irr-gold-600); --brand-btn-secondary-bg: transparent; --brand-btn-secondary-text:var(--irr-navy-900); --brand-btn-secondary-border: rgba(19,45,70,.35); --brand-btn-secondary-hover-bg: rgba(19,45,70,.07); --brand-btn-ghost-bg: transparent; --brand-btn-ghost-text: var(--irr-cream-100); --brand-btn-ghost-border: rgba(250,247,239,.35); --brand-btn-ghost-hover: rgba(250,247,239,.1); /* ── Shadows ───────────────────────────────────────────── */ --brand-shadow-sm: 0 4px 16px rgba(8,21,34,.12); --brand-shadow: 0 18px 50px rgba(8,21,34,.16); --brand-shadow-lg: 0 32px 80px rgba(8,21,34,.24); --brand-shadow-card: 0 2px 12px rgba(8,21,34,.1), 0 8px 32px rgba(8,21,34,.07); /* ── Gradients ─────────────────────────────────────────── */ --brand-gradient-dark: var(--irr-gradient-dark); --brand-gradient-accent: var(--irr-gradient-gold); --brand-gradient-hero: var(--irr-gradient-hero); /* ── Divider / accent bar ──────────────────────────────── */ --brand-accent-bar: linear-gradient(90deg, transparent 0%, var(--irr-gold-600) 30%, var(--irr-gold-400) 55%, var(--irr-gold-600) 80%, transparent 100%); } /* ═══════════════════════════════════════════════════════════════════ §5 IDA GLOBAL (NEUTRAL ADMIN / SHARED AREAS) Applied when: or no data-brand ═══════════════════════════════════════════════════════════════════ */ [data-brand="ida-global"], :root { /* Fall-through defaults — neutral and non-branded */ --brand-primary: #2a2018; --brand-primary-dark: #1a1410; --brand-secondary: #834e18; --brand-accent: #a1602c; --brand-bg: #f0ece4; --brand-surface: #ffffff; --brand-surface-dark: #1a1410; --brand-text: #1a1410; --brand-text-muted: #6b6055; --brand-text-on-dark: #f0ece4; --brand-border: rgba(26,20,16,.15); --brand-shadow: 0 18px 50px rgba(26,20,16,.12); } /* ═══════════════════════════════════════════════════════════════════ §6 SHARED SEMANTIC COMPONENTS These work under ANY brand — they use --brand-* tokens only. Add components here when they must theme-switch correctly. ═══════════════════════════════════════════════════════════════════ */ /* ── Brand-aware button overrides ──────────────────────────────── */ [data-brand] .btn-brand-primary { background: var(--brand-btn-primary-bg); color: var(--brand-btn-primary-text); border-color: var(--brand-btn-primary-bg); } [data-brand] .btn-brand-primary:hover { background: var(--brand-btn-primary-hover); border-color: var(--brand-btn-primary-hover); transform: translateY(-1px); box-shadow: var(--brand-shadow-sm); } [data-brand] .btn-brand-secondary { background: var(--brand-btn-secondary-bg); color: var(--brand-btn-secondary-text); border-color: var(--brand-btn-secondary-border); } [data-brand] .btn-brand-secondary:hover { background: var(--brand-btn-secondary-hover-bg); transform: translateY(-1px); } [data-brand] .btn-brand-ghost { background: var(--brand-btn-ghost-bg); color: var(--brand-btn-ghost-text); border-color: var(--brand-btn-ghost-border); } [data-brand] .btn-brand-ghost:hover { background: var(--brand-btn-ghost-hover); border-color: var(--brand-btn-ghost-text); } /* ── Brand eyebrow label ────────────────────────────────────────── */ [data-brand] .brand-eyebrow { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-eyebrow); margin-bottom: 12px; } /* ── Brand accent line (horizontal divider) ─────────────────────── */ [data-brand] .brand-accent-line { display: block; width: 48px; height: 2px; background: var(--brand-gradient-accent); border: none; margin: 12px auto; } [data-brand] .brand-accent-line--left { margin-left: 0; } /* ── Brand surface card ─────────────────────────────────────────── */ [data-brand] .brand-card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 8px; box-shadow: var(--brand-shadow-card); } [data-brand] .brand-card-dark { background: var(--brand-surface-dark); border: 1px solid var(--brand-border-on-dark); } /* ═══════════════════════════════════════════════════════════════════ §7 DUAL-BRAND COMPONENT (Cooler Club & cross-brand pages) Used on pages presenting BOTH PP and IRR side by side. The IRR accent colors are inlined as per-component exceptions since the overall page brand is still PP (or IRR) dominant. ═══════════════════════════════════════════════════════════════════ */ /* Within a PP-branded page, IRR cards use their own identity */ [data-brand="primal-privilege"] .irr-card { --card-primary: var(--irr-navy-800); --card-accent: var(--irr-gold-500); --card-bg: var(--irr-navy-900); --card-text: var(--irr-text-light); --card-text-dim: rgba(250,247,239,.65); --card-border: rgba(196,154,69,.2); } /* Within a PP-branded page, PP cards use the dominant brand identity */ [data-brand="primal-privilege"] .pp-card { --card-primary: var(--pp-brown-800); --card-accent: var(--pp-copper-500); --card-bg: var(--pp-brown-900); --card-text: var(--pp-text-light); --card-text-dim: rgba(252,244,229,.65); --card-border: rgba(192,107,50,.2); } /* ═══════════════════════════════════════════════════════════════════ §8 GLOBAL ACCESSIBILITY (applies to all branded pages) ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count:1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }