/* =========================================================================
theme.css — ITDC brand token contract (Bootstrap 5.3)
-------------------------------------------------------------------------
PURPOSE : One file to re-skin the whole app. Change the brand color in
ONE place (section 1 below), redeploy — every button, link,
focus ring, active nav item, pagination control, checkbox and
brand utility follows automatically.
LOAD ORDER (in _Layout.cshtml — AFTER Bootstrap, BEFORE page styles):
WHY THIS FILE EXISTS (the gotcha it solves):
Overriding --bs-primary alone does NOT recolor .btn-primary. Bootstrap
compiles button/focus/checkbox colors as literal hex from Sass, so
.btn-primary reads `--bs-btn-bg: #0d6efd`, not var(--bs-primary).
Section 3 re-points those component variables at the brand token, so
the single edit in Section 1 actually cascades everywhere.
========================================================================= */
/* =========================================================================
1. BRAND TOKENS ◀━━ THE ONLY BLOCK YOU EDIT TO RE-SKIN
========================================================================= */
:root {
/* --- Primary / accent (your brand color) ---------------------------- */
--brand-primary: #0085a7; /* Infinity teal (old site #0085a7) */
--brand-primary-rgb: 0, 133, 167; /* SAME color as r,g,b */
--brand-primary-hover: #00728f; /* ~8% darker (button hover) */
--brand-primary-active: #00586d; /* ~16% darker (button press) */
--brand-on-primary: #ffffff; /* text/icon ON the primary */
--brand-primary-text: #00728f; /* ink: teal base measures 4.3:1 on white — hover shade measures 5.2:1 (UI §17.1) */
--brand-primary-fill: #006a85; /* FILL under white text: base teal measures 4.27:1, this shade 6.18:1 (UI §17.1) */
--brand-primary-fill-rgb: 0, 106, 133;
/* --- Neutral surfaces & text (optional brand tuning) ---------------- */
--brand-body-bg: #f5f7f8; /* app background */
--brand-surface: #ffffff; /* cards, panels */
--brand-body-color: #333333; /* default text (old site) */
--brand-text-muted: #5f6b73; /* muted/secondary text (≥4.5:1 on surface) */
--brand-text-disabled: #9aa2b1; /* disabled text/control (a11y-exempt) */
--brand-border: #e3e8ea; /* borders, dividers */
/* --- Shape ---------------------------------------------------------- */
--brand-radius: 0.25rem; /* 4px — modernized square 2014 theme */
--brand-radius-lg: 0.5rem; /* 8px cards */
--brand-radius-full: 999px; /* pills / avatars */
/* --- Font (defaults to the §3.1 system stack — swap to add a brand font) */
--brand-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* self-hosted: wwwroot/lib/lato/ */
/* --- Typography scale (semantic roles — retune hierarchy here) ------ */
--fs-display: 1.875rem; /* 30px · page hero / big dashboards (rare) */
--fs-title: 1.5rem; /* 24px · h4 admin page title */
--fs-subtitle: 1.125rem; /* 18px · h5 primary card-section title */
--fs-heading: 1rem; /* 16px · h6 sub-section heading */
--fs-body: 1rem; /* 16px · body text (guideline §3.2 fs-6) */
--fs-data: 0.875rem; /* 14px · table cells (guideline §3.2) */
--fs-label: 0.875rem; /* 14px · form labels (guideline §3.2) */
--fs-caption: 0.8125rem; /* 13px · helper text, captions */
--fs-eyebrow: 0.75rem; /* 12px · uppercase section labels */
--fw-heading: 600; /* heading weight (matches §3.2 fw-semibold)*/
--fw-label: 600; /* form-label weight (matches §6.2) */
--lh-tight: 1.25; /* heading line-height */
--lh-base: 1.5; /* body line-height */
--ls-tight: -0.01em; /* large-heading letter-spacing */
--ls-eyebrow: 0.05em; /* uppercase eyebrow tracking */
/* --- Elevation · motion · focus (interaction polish) --------------- */
--shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
--shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
--transition-fast: 150ms ease;
--focus-ring: 2px solid var(--brand-primary);
--focus-offset: 2px;
/* --- Z-index layers (use the token, never a raw z-index in a view) -- *
* Aligned to Bootstrap's own scale so custom overlays stack correctly. */
--z-dropdown: 1000; /* dropdown menus */
--z-sticky: 1020; /* sticky bars (.sticky-top) */
--z-backdrop: 1040; /* modal/offcanvas backdrop, nav-search bg */
--z-offcanvas: 1045; /* drawer / offcanvas */
--z-modal: 1055; /* modal + nav-search results (UI §10.3) */
--z-toast: 1090; /* toasts (above modals) */
/* --- Resort accent (block-1 extension, Docs/UI_INFINITY_ADDENDUM.md) --- */
--brand-accent: #8ab530; /* Infinity green — rules/highlights (fills only) */
--brand-accent-fill: #4f7514; /* green CTA fill: white text measures 5.4:1 (the lighter #5f8a1a measured 4.09) */
--brand-accent-hover: #40600f;
/* --- Semantic / state colors --------------------------------------- *
* Leave these at Bootstrap defaults unless your brand truly requires
* different state colors. They keep success=green / danger=red meaning.
* If you DO change one, also copy the matching .btn-* wiring from
* Section 3 so the solid button recolors too. */
}
/* =========================================================================
2. MAP brand tokens → Bootstrap's own tokens
These ARE consumed by utilities: .bg-primary, .text-primary,
.border-primary, badges (bg-*), links, body, radius, cards.
========================================================================= */
:root {
--bs-primary: var(--brand-primary);
--bs-primary-rgb: var(--brand-primary-rgb);
--bs-body-bg: var(--brand-body-bg);
--bs-body-color: var(--brand-body-color);
--bs-body-font-family: var(--brand-font);
--bs-secondary-color: var(--brand-text-muted); /* .text-muted / .text-body-secondary */
--bs-tertiary-color: var(--brand-text-disabled); /* disabled / placeholder text */
--bs-border-color: var(--brand-border);
--bs-border-radius: var(--brand-radius);
--bs-border-radius-lg: var(--brand-radius-lg);
--bs-link-color: var(--brand-primary-text);
--bs-link-color-rgb: var(--brand-primary-rgb);
--bs-link-hover-color: var(--brand-primary-hover);
/* primary subtle pair (used by .bg-primary-subtle, active nav bg, etc.) */
--bs-primary-bg-subtle: color-mix(in srgb, var(--brand-primary) 12%, #fff);
--bs-primary-border-subtle:color-mix(in srgb, var(--brand-primary) 30%, #fff);
--bs-primary-text-emphasis:var(--brand-primary-active);
}
/* Cards / panels follow the surface + border + radius tokens */
.card {
--bs-card-bg: var(--brand-surface);
--bs-card-border-color: var(--brand-border);
--bs-card-border-radius:var(--brand-radius);
}
/* =========================================================================
3. WIRE component variables to the brand token (THE gotcha fix)
Everything below reads var(--brand-primary*), so Section 1 drives it all.
========================================================================= */
/* ---- Solid primary button ------------------------------------------- */
.btn-primary {
--bs-btn-bg: var(--brand-primary-fill);
--bs-btn-border-color: var(--brand-primary-fill);
--bs-btn-color: var(--brand-on-primary);
--bs-btn-hover-bg: var(--brand-primary-active);
--bs-btn-hover-border-color: var(--brand-primary-active);
--bs-btn-hover-color: var(--brand-on-primary);
--bs-btn-active-bg: var(--brand-primary-active);
--bs-btn-active-border-color:var(--brand-primary-active);
--bs-btn-active-color: var(--brand-on-primary);
--bs-btn-disabled-bg: var(--brand-primary-fill);
--bs-btn-disabled-border-color: var(--brand-primary-fill);
--bs-btn-disabled-color: var(--brand-on-primary);
--bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
/* ---- Outline primary button ----------------------------------------- */
.btn-outline-primary {
--bs-btn-color: var(--brand-primary-text);
--bs-btn-border-color: var(--brand-primary);
--bs-btn-hover-bg: var(--brand-primary);
--bs-btn-hover-border-color: var(--brand-primary);
--bs-btn-hover-color: var(--brand-on-primary);
--bs-btn-active-bg: var(--brand-primary);
--bs-btn-active-border-color:var(--brand-primary);
--bs-btn-active-color: var(--brand-on-primary);
--bs-btn-disabled-color: var(--brand-primary-text);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
/* ---- Links ----------------------------------------------------------- *
* Paint anchors from the vars directly: stock Bootstrap renders links via
* rgba(var(--bs-link-color-rgb), …) — an -rgb triplet the dark-mode
* color-mix overrides can't produce (and the unmapped hover-rgb rendered
* stock-blue hovers). Tradeoff: .link-opacity-* utilities become inert on
* plain anchors (unused in ITDC apps). */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
.btn-link { --bs-btn-color: var(--brand-primary-text); --bs-btn-hover-color: var(--brand-primary-hover); }
/* ---- Secondary / light buttons (neutral chrome, token-driven) -------- *
* Both adopters re-derived this; ships in the contract now (UI §4.5). */
.btn-outline-secondary {
--bs-btn-color: var(--brand-body-color);
--bs-btn-border-color: var(--brand-border);
--bs-btn-hover-bg: var(--brand-body-bg);
--bs-btn-hover-border-color: var(--brand-border);
--bs-btn-hover-color: var(--brand-body-color);
}
.btn-light { --bs-btn-bg: var(--brand-surface); --bs-btn-border-color: var(--brand-border); }
/* ---- Navbar active item ---------------------------------------------- */
.navbar { --bs-navbar-active-color: var(--brand-primary); }
/* ---- Form controls: focus ring (compiled literal in stock BS) -------- */
.form-control:focus,
.form-select:focus {
border-color: var(--brand-primary);
box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}
/* ---- Checkboxes / radios / switches --------------------------------- */
.form-check-input:checked {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
}
.form-check-input:focus {
border-color: var(--brand-primary);
box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}
.form-switch .form-check-input:focus { border-color: var(--brand-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--brand-primary); }
.form-range::-moz-range-thumb { background-color: var(--brand-primary); }
/* ---- Pagination ------------------------------------------------------ */
.pagination {
--bs-pagination-color: var(--brand-primary-text);
--bs-pagination-hover-color: var(--brand-primary-hover);
--bs-pagination-focus-color: var(--brand-primary-hover);
--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
--bs-pagination-active-bg: var(--brand-primary);
--bs-pagination-active-border-color: var(--brand-primary);
}
/* ---- Nav pills / tabs active state ---------------------------------- */
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-primary); }
.nav-underline { --bs-nav-underline-link-active-color: var(--brand-primary-text); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--brand-primary-text); }
/* ---- List group active ---------------------------------------------- */
.list-group {
--bs-list-group-active-bg: var(--brand-primary);
--bs-list-group-active-border-color: var(--brand-primary);
}
/* ---- Dropdown active item ------------------------------------------- */
.dropdown-menu { --bs-dropdown-link-active-bg: var(--brand-primary); }
/* ---- Generic focus-ring utility ------------------------------------- */
:root { --bs-focus-ring-color: rgba(var(--brand-primary-rgb), 0.25); }
/* ---- Progress / spinners (inherit primary via utilities already) ---- */
.progress-bar { background-color: var(--brand-primary); }
/* =========================================================================
4. TYPOGRAPHY — wire the type scale to elements
Every title / label / cell pulls from the §1 tokens, not per-view choice.
========================================================================= */
:root {
--bs-body-font-size: var(--fs-body);
--bs-body-line-height: var(--lh-base);
}
/* Headings: one weight + tight line-height everywhere */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
font-weight: var(--fw-heading);
line-height: var(--lh-tight);
}
h4,.h4 { font-size: var(--fs-title); letter-spacing: var(--ls-tight); }
h5,.h5 { font-size: var(--fs-subtitle); } /* primary card-section title (UI §3.2 two-tier) */
h6,.h6 { font-size: var(--fs-heading); } /* sub-section heading */
/* Form labels */
.form-label { font-size: var(--fs-label); font-weight: var(--fw-label); }
/* Tables: data size + tabular numerals so number columns line up */
.table { font-size: var(--fs-data); }
.table td, .table th { font-variant-numeric: tabular-nums; }
/* Helper / caption text */
.form-text, .small, small { font-size: var(--fs-caption); }
/* Display — page hero / dashboard KPI value (UI §3.4 Display role):
₱4,250,000.00
*/
.text-display {
font-size: var(--fs-display);
font-weight: var(--fw-heading);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
/* Eyebrow — uppercase section label: Section
*/
.text-eyebrow {
font-size: var(--fs-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
color: var(--bs-secondary-color);
}
/* Tabular figures for any standalone number (KPIs, totals) */
.text-figure { font-variant-numeric: tabular-nums; }
/* Disabled controls/text use the disabled token */
:disabled, .disabled, [aria-disabled="true"] { color: var(--brand-text-disabled); }
/* ---- DataTables 2.x chrome → brand (sort active + current page) ------ */
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc { color: var(--brand-primary-text); }
.dt-container .dt-paging .dt-paging-button.current {
color: var(--brand-on-primary);
background: var(--brand-primary);
border-color: var(--brand-primary);
}
/* =========================================================================
5. INTERACTION — focus ring, motion, elevation
========================================================================= */
/* ---- Keyboard focus ring (on-brand, keyboard-only via :focus-visible) - */
.btn:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
box-shadow: none;
}
/* ---- Motion — smooth, consistent, reduced-motion safe ---------------- */
.btn, .nav-link, .page-link, .form-control, .form-select,
.list-group-item-action, .dropdown-item, .card {
transition: color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* ---- Elevation scale -------------------------------------------------- */
:root {
--bs-box-shadow-sm: var(--shadow-sm);
--bs-box-shadow: var(--shadow-md);
--bs-box-shadow-lg: var(--shadow-md); /* no third level — .shadow-lg collapses to md (UI §20 rule 5) */
}
.card { box-shadow: var(--shadow-sm); }
.dropdown-menu, .modal-content, .popover, .toast { box-shadow: var(--shadow-md); }
/* =========================================================================
6. OPTIONAL — rebrand a SEMANTIC color (copy/uncomment as needed)
Setting --bs-*-rgb recolors the .bg-* and .text-* utilities (and your status
badges). To recolor the SOLID .btn-success too, also uncomment its wiring.
========================================================================= */
/*
:root {
--bs-success: #16a34a;
--bs-success-rgb: 22, 163, 74;
}
.btn-success {
--bs-btn-bg: #16a34a; --bs-btn-border-color: #16a34a;
--bs-btn-hover-bg: #15803d; --bs-btn-hover-border-color: #15803d;
--bs-btn-active-bg: #166534; --bs-btn-active-border-color: #166534;
}
*/
/* =========================================================================
7. DARK MODE (Bootstrap 5.3 native — toggle )
Only the neutral tokens flip; brand accent + semantic colors are unchanged.
Because §2 maps --bs-* to these --brand-* tokens, overriding them here
cascades the whole UI. Retune dark neutrals here, never per view.
========================================================================= */
[data-bs-theme="dark"] {
--brand-body-bg: #0f1115;
--brand-surface: #171a21;
--brand-body-color: #e6e8ec;
--brand-text-muted: #9aa3b2; /* AA on dark surface */
--brand-text-disabled: #5b6573;
--brand-border: #2a2f3a;
/* dark surfaces need slightly lighter accent hovers */
--brand-primary-hover: color-mix(in srgb, var(--brand-primary) 82%, #fff);
--brand-primary-active: color-mix(in srgb, var(--brand-primary) 68%, #fff);
--brand-primary-text: color-mix(in srgb, var(--brand-primary) 62%, #fff); /* lighter link/outline ink for dark (≥4.5:1 on surface) */
/* deeper shadows read better on dark */
--shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.55);
--shadow-md: 0 4px 8px -2px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.45);
/* dark-aware primary-subtle (the :root mapping mixes with #fff = light) */
--bs-primary-bg-subtle: color-mix(in srgb, var(--brand-primary) 20%, #0b0d12);
--bs-primary-border-subtle: color-mix(in srgb, var(--brand-primary) 35%, #0b0d12);
}