/* * ============================================================ * WP Health Inspector — Color Scheme * colors.css | Scheme 1 of 11: "Trust & Precision" (DEFAULT) * ============================================================ * * HOW TO SWITCH SCHEMES * --------------------- * In functions.php, change the wp_enqueue_style() call for * 'wphi-colors' to point at one of: * * colors.css — Scheme 01: Trust & Precision (this file) * colors-2.css — Scheme 02: Terminal Green * colors-3.css — Scheme 03: Midnight Ops (orange urgency) * colors-4.css — Scheme 04: Arctic Pro (ice-white SaaS) * colors-5.css — Scheme 05: Cobalt Authority * colors-6.css — Scheme 06: Obsidian & Crimson * colors-7.css — Scheme 07: Cyber Violet * colors-8.css — Scheme 08: Slate & Copper * colors-9.css — Scheme 09: Deep Forest * colors-10.css — Scheme 10: Solar Dark * colors-11.css — Scheme 11: Monochrome Steel * * ============================================================ * PALETTE STORY * Deep navy signals authority and stability — the kind of tool * agencies trust. Electric teal is "system healthy" in every * developer's mental vocabulary. Amber drives purchase urgency * at the single moment it matters: the CTA. * ============================================================ */ /* ============================================================ FONT IMPORTS ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Contrail+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Goldman:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Goldman:wght@400;700&family=Oxanium:wght@200..800&display=swap'); :root { /* ── Brand palette ─────────────────────────────── */ --color-navy-lighter: #345479; /* surface / card */ --color-navy-light: #243b55; /* surface / card */ --color-navy: #182d42; /* base background */ --color-navy-mid: #1a2f46; /* raised sections */ --color-dark: #0a1322; /* footer / deepest */ --color-teal-light: #1ef0e5; --color-teal: #00c2b8; /* primary accent */ --color-teal-dark: #007771; --color-teal-darker: #03413d; --color-teal-glow: rgba(0, 194, 184, 0.18); --color-amber-light: #fdc365; --color-amber: #f5a623; /* CTA / urgency */ --color-amber-dark: #b36200; --color-amber-glow: rgba(245, 166, 35, 0.40); --color-red-light: #f15c75; --color-red: #f43f5e; /* danger / alerts */ --color-red-dark: #f50b32; --color-red-darkest: #7c061a; --color-violet-light: #b794f6; --color-violet: #8b5cf6; /* Lite button */ --color-violet-dark: #5b21b6; --color-violet-glow: rgba(139, 92, 246, 0.20); --color-slate-lighter: #6180a5; --color-slate-light: #526d8c; --color-slate: #3a4f66; /* Regular / base accent */ --color-slate-dark: #243345; --color-slate-glow: rgba(58, 79, 102, 0.20); --color-olive-lightest: #bee0bb; --color-olive-lighter: #afd1ac; --color-olive-light: #8ba888; /* Crisp highlight / readable text */ --color-olive: #607d5b; /* Regular / base accent */ --color-olive-dark: #3a4d37; /* Deep component base */ --color-olive-glow: rgba(96, 125, 91, 0.22); --color-green: #2dc653; /* success */ --color-green-dark: #1fa83e; --color-white: #ffffff; --color-off-white: #f0f4f8; --color-grey-light: #d1d9e6; --color-grey: #b8b8b8; /* --color-grey: #8899aa; */ --color-grey-dark: #484848; /* ── Semantic surface tokens ───────────────────── */ --color-body-bg: #f0f4f8; /* light section bg */ --color-body-bg-alt: #ffffff; /* alternate light bg */ --color-body-text: #0d1b2a; --color-body-text-muted: #3b5268; --color-body-border: rgba(0, 194, 184, 0.22); --color-card-bg: #ebeff3; --color-card-border: rgba(13, 27, 42, 0.60); /* ── Module hero / dark section palette ────────── */ --color-module-bg: #0b1830; --color-module-bg-alt: #0f2040; --color-module-bg-deep: #091525; --color-module-text-primary: #7ec8e3; --color-module-text-body: #b3dff0; --color-module-text-muted: #6b8cb0; --color-module-text-dark: #0f1f35; --color-module-card-bg: #ffffff; --color-module-card-bg-alt: #f5f7fa; --color-module-card-text: #1e3050; --color-module-accent: #7ec8e3; --color-module-arrow: #7ec8e3; --color-module-arrow-hover: #0e7ea4; --color-module-arrow-hover-dk: #0b6585; --color-module-badge-bg: linear-gradient(135deg, #c97a06, #f0a020); --color-module-badge-text: #ffffff; /* ── Nav chrome ─────────────────────────────────── */ --color-nav-bg: var(--color-navy-light); --color-nav-bg-solid: var(--color-navy-light); --color-nav-border: rgba(0, 194, 184, 0.34); --color-nav-border-sticky: rgba(0, 194, 184, 0.36); --color-nav-border-module: rgba(0, 194, 184, 0.20); --color-nav-link: #d1d9e6; /* same as grey-light */ --color-nav-link-hover: #00c2b8; /* same as teal */ --color-nav-green-special: #4ade80; /* "healthy" link accent */ /* ── Misc UI ─────────────────────────────────────── */ --color-demo-bg: #222222; --color-demo-border: #111111; --color-trust-card-border: #353a41; --color-quick-win-border: rgba(249, 115, 22, 0.35); --color-quick-win-accent: #f97316; --color-comparison-bg: #bae5f73d; --color-comparison-wrap-bg: #ffffff; --color-features-bg: #f9f9f9; --color-contact-success-text: #86efac; --color-contact-error-text: #fca5a5; --color-select-arrow-color: #00c2b8; /* used in SVG data-URI */ --color-select-option-bg: #0d1b2a; /* ── Shadows / glows ─────────────────────────────── */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.28); --shadow-glow-teal: 0 0 28px rgba(0, 194, 184, 0.35); --shadow-glow-amber: 0 0 28px rgba(245, 166, 35, 0.35); /* ── Border radii ───────────────────────────────── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 6px; /* Font Variables */ --font-contrail-one: "Contrail One", sans-serif; --font-syne: "Syne", sans-serif; --font-goldman: "Goldman", sans-serif; --font-electrolize: "Electrolize", sans-serif; --font-oxamium: "Oxanium", sans-serif; --font-dm-sans: 'DM Sans', sans-serif; /* ── Typography (shared across all schemes) ─────── */ --font-display: var(--font-oxamium); --font-display-two: var(--font-electrolize); --font-body: var(--font-dm-sans); }