/* =============================================================================
BCC-THEME.CSS — Boot Camp Challenge / FAMS Global Theme
Single source of truth for all colors, component styles, and dark/light
theme variables across bootcamp-challenge.com and victelib.com FAMS 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: #E0E0E0;
--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: #E0E0E0;
--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;
}
option { padding: .15em; }
/* =============================================================================
4. BANNER (#fams-banner)
============================================================================= */
body.fams-dark #fams-banner,
body.fams-light #fams-banner {
background-color: var(--banner-bg) !important;
background-image: none !important;
border-color: var(--left-border) !important;
}
body.fams-dark #fams-banner .fb-left,
body.fams-light #fams-banner .fb-left {
background: var(--left-bg) !important;
border-color: var(--left-border) !important;
}
body.fams-dark #fams-banner .fb-logo-box,
body.fams-light #fams-banner .fb-logo-box {
background: none !important;
border: none !important;
}
body.fams-dark #fams-banner .fb-badge,
body.fams-light #fams-banner .fb-badge {
background: var(--badge-bg) !important;
color: var(--badge-fg) !important;
}
body.fams-dark #fams-banner .fb-title,
body.fams-light #fams-banner .fb-title { color: var(--title-col) !important; }
body.fams-dark #fams-banner .fb-sub,
body.fams-light #fams-banner .fb-sub { color: #ffffff !important; }
body.fams-dark #fams-banner .fb-divider,
body.fams-light #fams-banner .fb-divider { background: var(--divider-col) !important; }
body.fams-dark #fams-banner .fb-monitor-name,
body.fams-light #fams-banner .fb-monitor-name { color: var(--title-col) !important; }
body.fams-dark #fams-banner .fb-monitor-tag,
body.fams-light #fams-banner .fb-monitor-tag { color: var(--tag-col) !important; }
/* =============================================================================
5. DARK/LIGHT THEME TOGGLE BUTTON
============================================================================= */
#fams-tog-btn {
position: absolute;
bottom: 10px;
right: 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 241, 0, 0.5);
border-radius: 20px;
padding: 3px 12px;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
font-weight: 700;
color: var(--bcc-yellow);
cursor: pointer;
letter-spacing: 0.04em;
transition: background 0.2s;
z-index: 10;
}
#fams-tog-btn:hover {
background: rgba(255, 241, 0, 0.15);
}
/* =============================================================================
6. SECTION PANELS (.fams-section)
Card-based layout used across all admin/data pages.
============================================================================= */
.fams-section {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 14px !important;
border-radius: var(--bcc-card-radius) !important;
border: 1px solid var(--bcc-card-border) !important;
overflow: hidden !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .15) !important;
}
.fams-section td {
width: 100%;
box-sizing: border-box;
}
/* Section title row */
.fams-section .row-title-cell {
background: var(--card-head-bg) !important;
padding: 9px 14px !important;
}
/* Title text */
.fams-section .row-title-cell .legendTitle {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
color: var(--card-head-col) !important;
font-weight: bold !important;
font-size: 10pt !important;
font-family: Verdana, Arial, sans-serif !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Description row */
.fams-section .row-desc {
background-color: var(--card-body-bg, #fff) !important;
text-align: left;
padding: 10px 14px;
border-top: 1px solid var(--card-head-bdr, var(--bcc-card-border)) !important;
box-sizing: border-box;
color: var(--card-body-col, #222) !important;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
/* Radio/checkbox list row */
.fams-section .row-list {
background-color: var(--card-body-bg, #fff) !important;
padding: 10px 14px;
text-align: left;
box-sizing: border-box;
color: var(--card-body-col, #222) !important;
border-radius: 0 0 var(--bcc-card-radius) var(--bcc-card-radius) !important;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
/* Theme overrides for section panels */
body.fams-dark .fams-section .row-title-cell,
body.fams-light .fams-section .row-title-cell { background: var(--card-head-bg) !important; }
body.fams-dark .fams-section .legendTitle,
body.fams-light .fams-section .legendTitle { color: var(--card-head-col) !important; }
body.fams-dark .fams-section .row-desc,
body.fams-light .fams-section .row-desc { background: var(--row-desc-bg) !important; color: var(--row-desc-col) !important; border-color: var(--card-head-bdr) !important; }
body.fams-dark .fams-section .row-list,
body.fams-light .fams-section .row-list { background: var(--card-body-bg) !important; color: var(--card-body-col) !important; }
/* =============================================================================
7. DARK INFO BOX (.fams-box)
Sidebar info panels and message boxes.
============================================================================= */
.fams-box {
width: 100%;
box-sizing: border-box;
background: var(--fams-box-bg, #3d3d1a) !important;
border: 1px solid var(--fams-box-bdr, #666630) !important;
border-radius: var(--bcc-card-radius) !important;
padding: 12px 14px;
color: var(--fams-box-col, #fff) !important;
margin-bottom: 10px;
}
.fams-box table { width: 100%; box-sizing: border-box; }
.col-sidebar .fams-box table { width: auto; }
body.fams-dark .fams-box,
body.fams-light .fams-box {
background: var(--fams-box-bg) !important;
border-color: var(--fams-box-bdr) !important;
color: var(--fams-box-col) !important;
}
/* =============================================================================
8. LEGEND / FIELDSET TITLES
============================================================================= */
.legendTitle {
text-align: center;
background-color: var(--bcc-black);
color: var(--bcc-yellow);
font: 17px/21px Calibri, Arial, Helvetica, sans-serif;
padding: 5px;
font-weight: bold;
border: 1px solid #fff;
border-color: #e5e5c3 #505014 #505014 #e5e5c3;
}
legend {
width: 55%;
background: #323C19;
color: #f2f2e6;
font: 17px/21px Calibri, Arial, Helvetica, sans-serif;
padding: 0 10px;
font-weight: bold;
border: 1px solid #fff;
border-color: #e5e5c3 #505014 #505014 #e5e5c3;
text-align: left;
margin-left: -20px;
margin-top: -26px;
}
fieldset {
background: #f2f2e6;
padding: 10px;
border: 1px solid #fff;
border-color: #fff #666661 #666661 #fff;
margin-bottom: 36px;
width: 500px;
}
li.helpList {
color: var(--bcc-yellow);
}
/* =============================================================================
9. ACTION BUTTONS (input.buttons)
Color-coded by purpose. JS in header.php assigns .btn-* classes by label text.
============================================================================= */
input.buttons,
input.buttons-hover {
background-color: #111 !important;
color: #fff !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: bold !important;
height: auto !important;
padding: 6px 16px !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
cursor: pointer !important;
margin: 2px !important;
transition: filter 0.15s ease, box-shadow 0.15s ease;
vertical-align: middle !important;
}
input.buttons:hover,
input.buttons-hover {
filter: brightness(1.25);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
input.buttons:active {
filter: brightness(0.9);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
transform: translateY(1px);
}
/* Continue / Submit / Yes / Select / Save / Update / Modify → green */
input.buttons.btn-green {
color: var(--bcc-btn-green) !important;
border-color: #2a9a00 !important;
text-shadow: 0 0 6px rgba(57, 255, 20, 0.5);
}
/* Close / Cancel / No / Delete / Remove → red */
input.buttons.btn-red {
color: var(--bcc-btn-red) !important;
border-color: #aa0000 !important;
text-shadow: 0 0 6px rgba(255, 68, 68, 0.5);
}
/* Back / Return / Reset / Refresh / Clear / Archive / Restore → yellow */
input.buttons.btn-yellow {
color: var(--bcc-btn-yellow) !important;
border-color: #888800 !important;
text-shadow: 0 0 6px rgba(255, 241, 0, 0.5);
}
/* Clear / neutral action — gray text, turns red on hover */
input.buttons.btn-clear {
color: var(--bcc-gray-light) !important;
border-color: var(--bcc-gray-dark) !important;
}
input.buttons.btn-clear:hover {
color: var(--bcc-btn-red) !important;
border-color: #aa0000 !important;
}
/* Select Again → light blue */
input.buttons.btn-lightblue {
color: var(--bcc-btn-blue) !important;
border-color: #0099cc !important;
text-shadow: 0 0 6px rgba(0, 207, 255, 0.5);
}
/* =============================================================================
10. RADIO BUTTONS & CHECKBOXES (.theList, .checkAll)
============================================================================= */
label {
display: block;
margin-bottom: 2px;
margin-right: 3px;
padding-left: 0.5em;
font-size: 11px;
font-weight: bold;
color: #666;
}
label.opt { font-weight: normal; }
/* Hide native inputs — styling via label */
.theList input[type=radio],
.theList input[type=checkbox],
.checkAll input[type=radio],
.checkAll input[type=checkbox] {
display: none;
}
/* Base label row */
.theList label,
.checkAll label {
padding: 0.5em 0.5em 0.5em 32px;
background-position: 8px center;
background-repeat: no-repeat;
border: 1px solid #ccc;
clear: both;
cursor: pointer;
font-size: 10pt;
}
/* Radio — unselected */
.theList label.unselected {
color: #fff;
background-color: #1c1c1c;
background-image: url(../../images/rdo_off.png);
}
/* Radio — selected */
.theList label.selected,
label.selected {
font-size: 10pt;
color: var(--bcc-btn-green);
background-color: #222;
background-image: url(../../images/rdo_on.png);
}
/* Checkbox — unchecked */
.theList label.unchecked,
.checkAll label.unchecked,
label.unchecked {
font-size: 10pt;
color: #FF5659;
background-color: #1c1c1c;
background-image: url(../../images/chk_off.png);
}
/* Checkbox — checked */
.theList label.checked,
.checkAll label.checked,
label.checked {
font-size: 10pt;
color: var(--bcc-btn-green);
background-color: #222;
background-image: url(../../images/chk_on.png);
}
/* Row hover — both modes */
body.fams-dark .fams-section .theList label.unselected,
body.fams-light .fams-section .theList label.unselected,
body.fams-dark .fams-section .theList label.selected,
body.fams-light .fams-section .theList label.selected {
background-color: var(--card-row-bg) !important;
color: var(--card-row-col) !important;
border-color: var(--card-row-bdr) !important;
}
body.fams-dark .fams-section .theList label.unselected:hover,
body.fams-dark .fams-section .theList label.selected:hover,
body.fams-light .fams-section .theList label.unselected:hover,
body.fams-light .fams-section .theList label.selected:hover {
background-color: #eef0e0 !important;
color: #000000 !important;
border-color: #999966 !important;
cursor: pointer;
}
/* Overflow containment inside .fams-section */
.fams-section .row-list,
.fams-section div.section.theList {
overflow: hidden !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.fams-section .row-list label,
.fams-section div.section label,
.fams-section .theList label,
.fams-section .theList label.unselected,
.fams-section .theList label.selected {
display: block !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
white-space: normal !important;
overflow: hidden !important;
background: var(--card-row-bg, #fafaf5) !important;
background-color: var(--card-row-bg, #fafaf5) !important;
color: var(--card-row-col, #222) !important;
border: 1px solid var(--card-row-bdr, #c8c8a0) !important;
border-radius: 6px !important;
padding: 7px 10px !important;
margin-bottom: 6px !important;
cursor: pointer !important;
transition: background .15s, border-color .15s;
}
.fams-section .theList label:last-child { margin-bottom: 0 !important; }
/* =============================================================================
11. FORM INPUTS
============================================================================= */
input:not([type=radio]):not([type=checkbox]):not(.buttons):not(.buttons-hover),
textarea,
select {
border: 1px solid var(--input-bdr, silver);
background-color: var(--input-bg, #fff);
color: var(--input-col, #404040);
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 5px 0;
padding: 5px;
box-sizing: border-box;
}
input:hover[type=text],
input:focus[type=text],
textarea:hover,
textarea:focus {
background-color: var(--input-hover-bg, #E0E0E0);
border: 1px solid var(--input-hover-bdr, #000);
}
/* Dark mode text inputs & textareas */
body.fams-dark #third input[type="text"],
body.fams-dark #third textarea {
background-color: var(--input-bg) !important;
color: var(--input-col) !important;
border: 1px solid var(--input-bdr) !important;
}
body.fams-dark #third input[type="text"][readonly] {
background-color: var(--input-ro-bg) !important;
color: var(--input-ro-col) !important;
}
/* =============================================================================
12. LINKS
Global defaults — these apply to plain page links outside card containers.
Container-specific overrides follow in Addendum A.
============================================================================= */
a:link { color: var(--bcc-yellow); }
a:visited { color: var(--bcc-gold); }
a:hover { color: var(--bcc-gray-light); }
a:active { color: var(--bcc-yellow); }
/* =============================================================================
13. LAYOUT HELPERS
============================================================================= */
.leftcol { float: left; clear: left; width: 50%; }
.rightcol { float: left; clear: right; width: 50%; }
dl { clear: both; }
dt { float: left; text-align: right; width: 90px; line-height: 25px; margin: 0 10px 10px 0; }
dd { float: left; width: 475px; line-height: 25px; margin: 0 0 10px 0; }
/* =============================================================================
14. PROCESSING OVERLAY (#header-processing-overlay)
============================================================================= */
#header-processing-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.3s ease;
}
#header-processing-overlay.hidden {
opacity: 0;
pointer-events: none;
}
#processing-box {
background: #fff;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 12px;
padding: 32px 40px;
text-align: center;
min-width: 220px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#processing-box .proc-title {
font-size: 14px;
color: #555;
font-weight: 500;
margin: 0;
}
#processing-box .proc-sub {
font-size: 12px;
color: #999;
margin: 0;
}
.proc-dots {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.proc-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #185FA5;
animation: proc-bounce 1.2s ease-in-out infinite;
}
.proc-dots span:nth-child(2) { animation-delay: .2s; }
.proc-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes proc-bounce {
0%, 80%, 100% { transform: scale(.6); opacity: .4; }
40% { transform: scale(1); opacity: 1; }
}
/* =============================================================================
15. PRINT
============================================================================= */
@media print {
.pagestart { page-break-before: always; }
}
/* =============================================================================
16. RESPONSIVE — mobile stack
============================================================================= */
@media screen and (max-width: 620px) {
#fams-wrap {
width: 100% !important;
padding: 0 4px;
overflow-x: hidden !important;
}
#fams-outer,
#fams-outer tbody,
#fams-outer tr {
display: block !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#fams-outer td.col-main,
#fams-outer td.col-sidebar,
.col-main,
.col-sidebar {
display: block !important;
width: 100% !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
#fams-outer td.col-sidebar,
.col-sidebar {
text-align: center !important;
margin-bottom: 12px !important;
}
.col-sidebar .fams-box { display: inline-block !important; width: auto !important; text-align: left !important; }
.col-sidebar .fams-box table { display: table !important; width: auto !important; }
#close-row { padding-left: 0; }
#fams-banner { grid-template-columns: 1fr; }
#fams-banner .fb-left {
border-right: none;
border-bottom: 1px solid rgba(255, 241, 0, 0.22);
flex-direction: row;
justify-content: center;
padding: 12px 16px;
}
#fams-banner .fb-right {
padding: 14px 16px 38px;
text-align: center;
align-items: center;
}
#fams-banner .fb-monitor-row { justify-content: center; gap: 8px; }
#fams-banner .fb-monitor-img { max-width: 70px; }
}
/* =============================================================================
ADDENDUM A. CARD BODY LINK COLOR RESET
Prevents global link color bleeding into plain text inside card bodies.
.fams-box always uses yellow (dark background in both modes).
.fc-body / .row-desc use theme-aware card body text color.
============================================================================= */
/* fams-box sits on dark background in both modes — always yellow */
.fams-box a:link,
.fams-box a:visited { color: var(--bcc-yellow) !important; }
.fams-box a:hover { color: var(--bcc-gray-light) !important; }
/* Card bodies — match body text color per mode */
.fc-body a:link, .fc-body a:visited,
.row-desc a:link, .row-desc a:visited,
.sc-search-body a:link, .sc-search-body a:visited {
color: var(--card-body-col, #222) !important;
}
.fc-body a:hover,
.row-desc a:hover,
.sc-search-body a:hover { color: var(--bcc-gold) !important; }
/* =============================================================================
ADDENDUM B. NOTE / CALLOUT BOXES (.fams-note)
Use class="fams-note" on any yellow note/callout box going forward.
Explicit light + dark rules prevent background bleed between modes.
Existing per-file .mfa-note also covered here so future files can
standardise on .fams-note instead.
============================================================================= */
.fams-note {
background: #fffbea;
border: 1px solid #c8a800;
border-radius: 6px;
padding: 10px 12px;
font-size: 12px;
color: #000;
line-height: 1.5;
}
body.fams-light .fams-note,
body.fams-light .mfa-note {
background: #fffbea !important;
border-color: #c8a800 !important;
color: #000 !important;
}
body.fams-dark .fams-note,
body.fams-dark .mfa-note {
background: var(--card-body-bg) !important;
border-color: var(--bcc-gold) !important;
color: #e0e0e0 !important;
}
/* =============================================================================
ADDENDUM C. CUSTOM TILE LABEL SUPPRESSION
header.php JS adds .checked/.unchecked to ANY label wrapping a checkbox
or radio, including custom tile-style labels. This resets those injected
styles so they don't override tile hover/checked states.
Any file using custom label tiles (e.g. .mfa-cat-tile, .wl-tile, etc.)
gets this protection automatically. The :not() guards ensure the reset
only fires in the resting state, not during hover or active selection.
============================================================================= */
label.mfa-cat-tile.checked:not(:hover):not(.mfa-checked),
label.mfa-cat-tile.unchecked:not(:hover):not(.mfa-checked),
label.bcc-tile.checked:not(:hover):not(.bcc-tile-checked),
label.bcc-tile.unchecked:not(:hover):not(.bcc-tile-checked) {
background: inherit !important;
color: inherit !important;
background-image: none !important;
padding-left: inherit !important;
}
label.mfa-cat-tile::before, label.mfa-cat-tile::after,
label.bcc-tile::before, label.bcc-tile::after {
display: none !important;
content: none !important;
}
/* Addendum C extension — cfa-cat-tile (create_fitness_acct.php) */
label.cfa-cat-tile.checked:not(:hover):not(.cfa-checked),
label.cfa-cat-tile.unchecked:not(:hover):not(.cfa-checked) {
background: inherit !important;
color: inherit !important;
background-image: none !important;
padding-left: inherit !important;
}
label.cfa-cat-tile::before, label.cfa-cat-tile::after {
display: none !important;
content: none !important;
}