/* oilers-theme.css — Houston Oilers color scheme for the GoldFix public site.
Columbia Blue (#0091E6) + Scarlet Red (#C5222F) on dark navy.
GoldFix shimmer (.gold-shimmer) and brand logo are PRESERVED across all pages.
Usage: add to after goldfix-brand.css:
Global overrides (applied site-wide via body class):
body.oilers-theme — activates Oilers palette
Per-section: use .oilers section wrapper */
:root {
/* === OILERS PALETTE === */
--oil-blue: #0091E6; /* Columbia Blue — primary */
--oil-blue-dim: rgba(0, 145, 230, 0.12);
--oil-blue-glow: rgba(0, 145, 230, 0.2);
--oil-blue-dark: #0076BF; /* hover state */
--oil-red: #C5222F; /* Scarlet Red — accent/CTAs */
--oil-red-dim: rgba(197, 34, 47, 0.12);
--oil-red-glow: rgba(197, 34, 47, 0.25);
--oil-red-dark: #A81C27; /* hover state */
--oil-navy: #061E30; /* deep background — lighter than #041C2C */
--oil-slate: #0B2338; /* card/section background */
--oil-slate2: #0F2A42; /* elevated surfaces */
--oil-border: rgba(0, 145, 230, 0.15);
--oil-border-strong: rgba(0, 145, 230, 0.3);
--oil-text: #FFFFFF;
--oil-text-dim: rgba(255, 255, 255, 0.55);
--oil-text-muted: rgba(255, 255, 255, 0.38);
/* === GOLDFIX BRAND (unchanged — shimmer + wordmark === */
--gold: #C8973E;
--gold-light: #E8C97A;
--gold-dark: #9A7230;
/* === BACKOFFICE (unchanged) === */
--bo-gold: #C8973E;
--bo-gold-light: #E8C97A;
--bo-charcoal: #1A1A1A;
--bo-slate: #2D2D2D;
--bo-warm-white: #FAF8F5;
--bo-text-muted: #8A8580;
--bo-text-body: #4A4540;
/* === OILERS-COMPATIBLE SHARED VARS (override gold vars for public use) === */
--primary: var(--oil-blue);
--primary-dim: var(--oil-blue-dim);
--primary-glow: var(--oil-blue-glow);
--accent: var(--oil-red);
--accent-dim: var(--oil-red-dim);
--accent-glow: var(--oil-red-glow);
}
/* =============================
SHARED OILERS UTILITIES
============================= */
/* Section divider — blue top-border rule */
.oilers-divider {
border-top: 1px solid rgba(0, 145, 230, 0.2);
}
/* Lightweight Oilers card */
.oilers-card {
background: rgba(0, 145, 230, 0.05);
border: 1px solid rgba(0, 145, 230, 0.18);
border-radius: 16px;
padding: 2rem;
transition: border-color 0.3s ease;
}
.oilers-card:hover {
border-color: rgba(0, 145, 230, 0.4);
}
/* Blue accent badge */
.oilers-badge {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.875rem;
border-radius: 100px;
background: rgba(0, 145, 230, 0.15);
color: var(--oil-blue);
border: 1px solid rgba(0, 145, 230, 0.3);
}
/* Before/After photo labels — Oilers red for "Before", Oilers blue for "After" */
.photo-label {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.875rem;
border-radius: 6px;
}
.photo-label-before {
background: rgba(197, 34, 47, 0.18);
color: #FF6B70;
border: 1px solid rgba(197, 34, 47, 0.35);
}
.photo-label-after {
background: rgba(0, 145, 230, 0.18);
color: #5DBEF5;
border: 1px solid rgba(0, 145, 230, 0.35);
}
/* Red CTA button (Scarlet Red) */
.btn-red {
background: var(--oil-red);
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 1rem;
padding: 1rem 2.25rem;
border-radius: 10px;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 0.25s, transform 0.2s;
}
.btn-red:hover {
background: var(--oil-red-dark);
transform: translateY(-2px);
}
/* Blue outline button */
.btn-blue-outline {
background: none;
border: 1px solid rgba(0, 145, 230, 0.35);
color: var(--oil-blue);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 1rem;
padding: 1rem 2.25rem;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.25s;
}
.btn-blue-outline:hover {
background: rgba(0, 145, 230, 0.1);
border-color: var(--oil-blue);
color: var(--oil-blue);
}
/* Oilers-themed input/select */
.oilers-input, .oilers-select, .oilers-textarea {
width: 100%;
padding: 0.85rem 1.1rem;
background: rgba(0, 145, 230, 0.06);
border: 1px solid rgba(0, 145, 230, 0.25);
border-radius: 10px;
color: var(--oil-text);
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s;
}
.oilers-input:focus, .oilers-select:focus, .oilers-textarea:focus {
border-color: var(--oil-blue);
}
.oilers-select option { background: var(--oil-navy); }
/* Service pill in Oilers colors */
.oilers-pill {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.65rem 1.5rem;
border: 1px solid rgba(0, 145, 230, 0.25);
border-radius: 100px;
color: var(--oil-blue);
background: rgba(0, 145, 230, 0.06);
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
}
.oilers-pill:hover {
background: rgba(0, 145, 230, 0.12);
border-color: rgba(0, 145, 230, 0.4);
color: var(--oil-blue);
}
/* Nav tab in Oilers blue */
.oilers-nav-tab {
font-size: 0.82rem;
font-weight: 600;
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.04em;
padding: 0.4rem 0.85rem;
border-radius: 6px;
text-decoration: none;
transition: all 0.2s;
}
.oilers-nav-tab-home {
color: var(--oil-text);
background: rgba(0, 145, 230, 0.15);
border: 1px solid rgba(0, 145, 230, 0.35);
}
.oilers-nav-tab-home:hover {
background: rgba(0, 145, 230, 0.25);
color: var(--oil-text);
}
.oilers-nav-tab-muted {
color: var(--oil-text-muted);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.oilers-nav-tab-muted:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--oil-text);
}
.oilers-nav-tab-book {
background: var(--oil-red) !important;
color: #fff !important;
font-weight: 700;
padding: 0.4rem 1rem;
border-radius: 6px;
}
.oilers-nav-tab-book:hover {
background: var(--oil-red-dark) !important;
transform: translateY(-1px);
}
.oilers-nav-tab-contact {
color: var(--oil-blue);
font-weight: 600;
}
.oilers-nav-tab-contact:hover { color: #5DBEF5; }
/* Oilers blue checkmark */
.oilers-check { color: var(--oil-blue); }
/* Section label in Oilers blue */
.oilers-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--oil-blue);
margin-bottom: 3rem;
}
/* =============================
ELECTRIC COLUMBIA BLUE (brighter)
============================= */
.oilers-electric {
color: #00A3EF !important; /* electric Columbia Blue */
}
.oilers-electric-bg {
background: #00A3EF !important;
border-color: #00A3EF !important;
}
/* Electric blue variant buttons */
.variant-btn.oilers-electric {
border-color: rgba(0, 163, 239, 0.4) !important;
color: #00A3EF !important;
}
.variant-btn.oilers-electric.selected {
background: #00A3EF !important;
border-color: #00A3EF !important;
color: #041C2C !important;
}
/* =============================
SCARLET RED TABS
(apply .tab-red to nav tabs / category tabs)
============================= */
.tab-red {
color: var(--oil-red) !important;
border-bottom-color: var(--oil-red) !important;
}
.tab-red-bg {
background: var(--oil-red) !important;
color: #fff !important;
border-color: var(--oil-red) !important;
}
.tab-red-hover:hover {
background: rgba(197, 34, 47, 0.12) !important;
border-color: rgba(197, 34, 47, 0.4) !important;
}
/* Scarlet Red active tab */
.category-card.tab-red-active,
.service-item.tab-red-active {
border-color: var(--oil-red) !important;
background: rgba(197, 34, 47, 0.08) !important;
}
/* =============================
GOLDFIX LOGO — PUBLIC SITE
"GOLDFIX" = gold shimmer, "FIX" = white
============================= */
.goldfix-logo .gold-part {
/* GOLDFIX part: gold shimmer (gold-shimmer class applied inline) */
}
.goldfix-logo .fix-part {
color: #FFFFFF;
font-weight: 700;
}
/* Inline usage: GOLDFIX */
/* On public pages: GOLDFIX */