/* =============================================================================
BCC-THEME.CSS — Boot Camp Challenge CRM
Single source of truth for all colors, component styles, and dark/light
theme variables across bootcamp-challenge.com CRM pages.
HOW TO USE:
In header.php, add ONE line inside (after existing tags):
VARIABLES:
Use --bcc-* for brand colors anywhere you'd otherwise hardcode a hex.
Use --pg-*, --card-*, --banner-* etc. for theme-aware component colors
that automatically swap between dark and light mode.
============================================================================= */
/* =============================================================================
1. BRAND COLOR PALETTE (logo-extracted, mode-independent)
============================================================================= */
:root {
/* Core brand */
--bcc-yellow: #FDEE00; /* CHALLENGE lettering, primary highlights */
--bcc-black: #000000; /* Backgrounds, card headers, button base */
--bcc-gold: #857B11; /* Yellow stroke/outline, dark-surface borders */
/* Dog-tag grays */
--bcc-gray-light: #C2C4C6; /* Dog tag face, disabled states, light borders */
--bcc-gray-mid: #909193; /* Subtle borders, secondary UI elements */
--bcc-gray-dark: #4F4D4D; /* Dark borders, muted text on light bg */
--bcc-off-white: #F6F6F6; /* Card body bg, light-mode page bg */
/* Semantic aliases — use these in component CSS */
--bcc-primary: #FDEE00; /* Primary action color */
--bcc-primary-fg: #000000; /* Text ON yellow backgrounds */
--bcc-surface: #000000; /* Dark card / header background */
--bcc-surface-fg: #FDEE00; /* Text ON dark backgrounds */
--bcc-border: #857B11; /* Borders on dark surfaces */
--bcc-border-lt: #C2C4C6; /* Borders on light surfaces */
/* Button semantic text colors */
--bcc-btn-green: #BDFA66;
--bcc-btn-red: #FF4444;
--bcc-btn-yellow: #FDEE00;
--bcc-btn-blue: #00CFFF;
/* Legacy card design system (used by .fams-section across all files) */
--bcc-card-header-bg: #3d3d1a;
--bcc-card-header-col: #FFF100;
--bcc-card-border: #c8c8a0;
--bcc-card-radius: 12px;
/* Brand-derived UI state colors
Stepped shades between core brand colors for tile/card interactive states.
All values derived by interpolating between existing palette anchors —
nothing invented. Use these instead of freehand hex values.
Warm darks (black → bcc-card-header-bg → gold direction) */
/* Warm lights (off-white → gray-light → gold direction) */
--bcc-tile-rest-bg: #fafaf5; /* Tile resting background */
--bcc-tile-rest-bdr: #dddddd; /* Tile resting border */
--bcc-tile-active-bg: #eef0e0; /* Tile hover + checked background */
--bcc-tile-active-bdr:#999966; /* Tile hover + checked border */
/* Safe :root defaults for theme-aware variables
Prevents fallback to --bcc-card-header-bg (#3d3d1a) if body class
hasn't been applied yet. Defaults to dark mode values since
header.php sets body.fams-dark as the initial class. */
--card-head-bg: #111111;
--card-head-col: #FFF100;
--card-head-bdr: #444444;
--card-body-bg: #1e1e1e;
--card-body-col: #e0e0e0;
--card-row-bg: #252520;
--card-row-col: #e0e0e0;
--card-row-bdr: #3a3a30;
--fams-box-bg: #000000;
--fams-box-bdr: #555555;
--fams-box-col: #ffffff;
--input-bg: #2a2a25;
--input-col: #e0e0e0;
--input-bdr: #555540;
--input-hover-bg: #3a3a30; /* Dark-mode default; light mode overrides below */
--input-hover-bdr: #000000;
--pg-bg: #0a0a0a;
--pg-text: #e0e0e0;
--banner-bg: #1a1a1a;
--left-bg: #111111;
--left-border: #5a5a00;
--badge-bg: #FFF100;
--badge-fg: #111111;
--title-col: #FFF100;
--sub-col: #888888;
--divider-col: #444444;
--tag-col: #aaaaaa;
--sidebar-bg: #1a1a1a;
--sidebar-bdr: #444444;
--sidebar-col: #FFF100;
--tog-bg: #222222;
--tog-bdr: #555555;
--tog-col: #FFF100;
--row-desc-bg: #1e1e1e;
--row-desc-col: #e0e0e0;
--input-ro-bg: #1e1e1a;
--input-ro-col: #888878;
}
/* =============================================================================
2. DARK / LIGHT THEME VARIABLES
Applied via body.fams-dark and body.fams-light (toggled by header.php JS)
============================================================================= */
body.fams-dark {
--pg-bg: #0a0a0a;
--pg-text: #e0e0e0;
--banner-bg: #1a1a1a;
--left-bg: #111111;
--left-border: #5a5a00;
--logo-bg: #222222;
--logo-border: #FFF100;
--badge-bg: #FFF100;
--badge-fg: #111111;
--title-col: #FFF100;
--sub-col: #888888;
--divider-col: #444444;
--tag-col: #aaaaaa;
--card-head-bg: #111111;
--card-head-col: #FFF100;
--card-head-bdr: #444444;
--card-body-bg: #1e1e1e;
--card-body-col: #e0e0e0;
--card-row-bg: #252520;
--card-row-col: #e0e0e0;
--card-row-bdr: #3a3a30;
--sidebar-bg: #1a1a1a;
--sidebar-bdr: #444444;
--sidebar-col: #FFF100;
--fams-box-bg: #000000;
--fams-box-bdr: #555555;
--fams-box-col: #ffffff;
--tog-bg: #222222;
--tog-bdr: #555555;
--tog-col: #FFF100;
--row-desc-bg: #1e1e1e;
--row-desc-col: #e0e0e0;
--input-bg: #2a2a25;
--input-col: #e0e0e0;
--input-bdr: #555540;
--input-ro-bg: #1e1e1a;
--input-ro-col: #888878;
--input-hover-bg: #3a3a30;
--input-hover-bdr:#000000;
}
body.fams-light {
--pg-bg: #cccccc;
--pg-text: #222222;
--banner-bg: #222222;
--left-bg: #161616;
--left-border: #5a5a00;
--logo-bg: #333333;
--logo-border: #FFF100;
--badge-bg: #FFF100;
--badge-fg: #111111;
--title-col: #FFF100;
--sub-col: #aaaaaa;
--divider-col: #555555;
--tag-col: #bbbbbb;
--card-head-bg: #222222;
--card-head-col: #FFF100;
--card-head-bdr: #c8c8a0;
--card-body-bg: #ffffff;
--card-body-col: #222222;
--card-row-bg: #fafaf5;
--card-row-col: #000000;
--card-row-bdr: #dddddd;
--sidebar-bg: #ffffff;
--sidebar-bdr: #cccccc;
--sidebar-col: #333333;
--fams-box-bg: #000000;
--fams-box-bdr: #555500;
--fams-box-col: #ffffff;
--tog-bg: #e0e0e0;
--tog-bdr: #bbbbbb;
--tog-col: #333333;
--row-desc-bg: #fafaf5;
--row-desc-col: #222222;
--input-bg: #ffffff;
--input-col: #404040;
--input-bdr: silver;
--input-ro-bg: #efefef;
--input-ro-col: #888888;
--input-hover-bg: #E0E0E0;
--input-hover-bdr:#000000;
}
/* =============================================================================
3. PAGE & LAYOUT BASE
============================================================================= */
body.fams-dark,
body.fams-light {
background-color: var(--pg-bg) !important;
color: var(--pg-text);
transition: background-color 0.25s, color 0.25s;
}
body.fams-dark #centerPage,
body.fams-light #centerPage {
background-color: var(--pg-bg);
transition: background-color 0.25s;
}
/* Prevent horizontal bleed on mobile */
#centerPage, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* =============================================================================
3a. GLOBAL BACKGROUND GRID -- REMOVED.
Previously a subtle brand-yellow/black grid texture behind every
fams-dark/fams-light page (body.fams-dark::before / body.fams-light::before,
a fixed low-opacity linear-gradient overlay). Removed as part of the
decision to unify the CRM's visual language with the new bootcamp-challenge.com
site rebuild rather than keep patching around the mismatch page by page --
the new site's plain flat background is now the standard look going
forward across the whole system, not just the new public pages.
============================================================================= */
option { padding: .15em; color: #000 !important; background-color: #fff !important; }
/* Mobile font inheritance fix — iOS/Android do not inherit font-family
into form elements from body; must be set explicitly. */
input, button, select, textarea {
font-family: Verdana, Arial, sans-serif;
}
/* Prevent OS dark-mode from muting native