/* ============================================================ Zaner Ag Hedge — Style Guide Single source of truth for the brand color scheme (BLUE). Linked globally via header.php. Pages should reference these CSS variables instead of hardcoding colors. Migrated green → blue 2026-07-17 (logo is blue-based). ============================================================ */ :root { /* ── Core brand ────────────────────────────────────────── Legacy --zag-green* names kept for drop-in compatibility with existing markup; the VALUES are now blue. Prefer the --brand-* aliases below for anything new. */ --zag-green: #2754b4; /* primary brand blue */ --zag-green-dk: #1c3e82; /* dark brand blue */ --zag-green-lt: #eef2fb; /* light brand tint */ --zag-electric: #3d84e6; /* bright / accent blue */ --zag-navy: #1a2535; /* near-black navy (unchanged) */ --zag-gray: #f4f6f3; /* page gray (unchanged) */ --zag-text: #2c2c2c; /* body text (unchanged) */ --zag-muted: #6b7280; /* muted slate */ --zag-border: #d6e0f2; /* light blue border */ /* ── Semantic aliases (preferred going forward) ────────── */ --brand-primary: #2754b4; --brand-primary-dark: #1c3e82; --brand-primary-light: #eef2fb; --brand-accent: #3d84e6; --brand-accent-2: #33a6e6; --brand-navy: #1a2535; --brand-muted: #6b7280; --brand-border: #d6e0f2; /* ── Supporting scale (blues used across pages) ────────── */ --brand-blue-900: #172a44; --brand-blue-800: #1c3e82; --brand-blue-700: #2754b4; --brand-blue-600: #2b5aa4; --brand-blue-500: #356fc4; --brand-blue-400: #3d84e6; --brand-blue-300: #44b4ea; --brand-blue-100: #cde4f8; --brand-blue-050: #eef2fb; } /* ── Brand-blue CTAs ───────────────────────────────────────── Opt-in via on public/marketing pages so Bootstrap's green .btn-success CTAs use the brand blue instead. Scoped so semantic success buttons elsewhere (admin, forms) stay green. */ .zag-cta-blue .btn-success { background-color: var(--brand-primary); border-color: var(--brand-primary); } .zag-cta-blue .btn-success:hover, .zag-cta-blue .btn-success:focus, .zag-cta-blue .btn-success:active { background-color: var(--brand-primary-dark) !important; border-color: var(--brand-primary-dark) !important; } .zag-cta-blue .btn-outline-success { color: var(--brand-primary); border-color: var(--brand-primary); } .zag-cta-blue .btn-outline-success:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }