/* ============================================================
custom.css — Insurance Brokerage USWDS Theme
Deep Navy + Warm Gold palette
LOAD ORDER: This file must be loaded AFTER uswds.min.css
============================================================ */
/* ============================================================
1. COLOR TOKEN OVERRIDES
Redefines USWDS CSS custom properties with your palette.
These flow into any USWDS component that references them.
============================================================ */
:root {
/* --- Primary: Deep Navy --- */
--theme-color-primary-darker: #162e51; /* hero bg, footer bg */
--theme-color-primary-dark: #1a4480; /* nav bg, section headers */
--theme-color-primary: #2f6eb5; /* links, icon accents */
--theme-color-primary-light: #d9e8f6; /* tinted section backgrounds */
--theme-color-primary-lighter: #eff6fb; /* near-white with blue tint */
/* --- Accent Warm: Gold --- */
/* Use for CTA buttons, badges, key highlights — ~10% of site */
--theme-color-accent-warm-darker: #7a5c1e; /* deep hover state */
--theme-color-accent-warm-dark: #936f38; /* button hover */
--theme-color-accent-warm: #e5a000; /* primary CTA buttons */
--theme-color-accent-warm-light: #ffbe2e; /* highlight accents */
--theme-color-accent-warm-lighter: #fce7ba; /* alert/callout backgrounds */
/* --- Base: Neutrals --- */
--theme-color-base-darkest: #1b1b1b; /* body text */
--theme-color-base-darker: #2e2e2e; /* strong secondary text */
--theme-color-base-dark: #565c65; /* captions, meta text */
--theme-color-base: #71767a; /* placeholder text */
--theme-color-base-light: #c9c9c9; /* borders, dividers */
--theme-color-base-lighter: #e6e6e6; /* subtle dividers */
--theme-color-base-lightest: #ffffff; /* white page bg */
/* --- Secondary (optional, set to navy tint for now) --- */
--theme-color-secondary-darker: #162e51;
--theme-color-secondary-dark: #1a4480;
--theme-color-secondary: #2f6eb5;
--theme-color-secondary-light: #d9e8f6;
--theme-color-secondary-lighter: #eff6fb;
}
/* ============================================================
2. TYPOGRAPHY
Swap Public Sans for a warmer, private-sector feel.
Uses a Google Fonts import — add this to your first:
============================================================ */
:root {
--theme-font-sans: 'DM Sans', 'Public Sans', sans-serif;
--theme-font-serif: 'DM Serif Display', Georgia, serif;
}
body {
font-family: var(--theme-font-sans);
background-color: var(--theme-color-base-lightest);
color: var(--theme-color-base-darkest);
}
/* Headings use the serif display font for a private-sector feel */
h1, h2, h3,
.usa-display,
.usa-hero__heading,
.usa-card__heading,
.usa-section-heading {
font-family: var(--theme-font-serif);
color: var(--theme-color-primary-darker);
}
/* H4 and below stay sans-serif */
h4, h5, h6 {
font-family: var(--theme-font-sans);
color: var(--theme-color-primary-dark);
}
/* ============================================================
3. PAGE BACKGROUND
Warm off-white instead of pure white throughout.
============================================================ */
body,
.usa-section,
main {
background-color: #ffffff;
}
/* Alternating sections use light navy tint */
.usa-section--light {
background-color: var(--theme-color-primary-lighter);
}
.usa-section--dark {
background-color: var(--theme-color-primary-darker);
color: #ffffff;
}
.usa-section--dark h2,
.usa-section--dark h3,
.usa-section--dark p {
color: #ffffff;
}
/* ============================================================
4. HEADER & NAVIGATION
============================================================ */
/* Main header background */
.usa-header,
.usa-navbar {
background-color: var(--theme-color-primary-darker);
}
/* Site name / logo text */
.usa-logo__text,
.usa-logo a {
color: #ffffff;
font-family: var(--theme-font-serif);
font-size: 1.25rem;
}
.usa-logo__text:hover,
.usa-logo a:hover {
color: var(--theme-color-accent-warm-light);
text-decoration: none;
}
/* Nav links */
.usa-nav__link,
.usa-nav__link span {
color: #ffffff;
}
.usa-nav__link:hover,
.usa-nav__link:focus {
color: var(--theme-color-accent-warm-light);
background-color: rgba(255, 255, 255, 0.08);
}
/* Active nav item */
.usa-current .usa-nav__link,
.usa-nav__link--active {
color: var(--theme-color-accent-warm-light);
border-bottom: 2px solid var(--theme-color-accent-warm);
}
/* Mobile menu button */
.usa-menu-btn {
background-color: var(--theme-color-accent-warm);
color: var(--theme-color-base-darkest);
}
.usa-menu-btn:hover {
background-color: var(--theme-color-accent-warm-dark);
}
/* Dropdown nav */
.usa-nav__submenu {
background-color: var(--theme-color-primary-dark);
}
.usa-nav__submenu-item a {
color: #ffffff;
}
.usa-nav__submenu-item a:hover {
color: var(--theme-color-accent-warm-light);
background-color: rgba(255, 255, 255, 0.08);
}
/* ============================================================
5. HERO SECTION
============================================================ */
.usa-hero {
background-color: var(--theme-color-primary-darker);
color: #ffffff;
}
.usa-hero__callout {
background-color: rgba(22, 46, 81, 0.85);
border-left: 4px solid var(--theme-color-accent-warm);
}
.usa-hero__heading {
color: #ffffff;
font-family: var(--theme-font-serif);
}
.usa-hero__heading--alt {
color: var(--theme-color-accent-warm-light);
}
/* ============================================================
6. BUTTONS
Gold for primary CTAs. Navy for secondary actions.
IMPORTANT: Never use white text on gold — fails contrast.
============================================================ */
/* Primary CTA button — Gold */
.usa-button {
background-color: var(--theme-color-accent-warm);
color: var(--theme-color-base-darkest);
font-family: var(--theme-font-sans);
font-weight: 700;
border-radius: 4px;
}
.usa-button:hover,
.usa-button:active {
background-color: var(--theme-color-accent-warm-dark);
color: var(--theme-color-base-darkest);
}
.usa-button:focus {
outline: 3px solid var(--theme-color-accent-warm-light);
outline-offset: 2px;
}
/* Secondary button — Navy outline */
.usa-button--outline {
background-color: transparent;
color: var(--theme-color-primary-dark);
border: 2px solid var(--theme-color-primary-dark);
box-shadow: none;
}
.usa-button--outline:hover {
background-color: var(--theme-color-primary-dark);
color: #ffffff;
}
/* Inverse button (on dark backgrounds) */
.usa-button--inverse {
background-color: transparent;
color: #ffffff;
border: 2px solid #ffffff;
}
.usa-button--inverse:hover {
background-color: rgba(255, 255, 255, 0.12);
color: var(--theme-color-accent-warm-light);
}
/* Unstyled / text link button */
.usa-button--unstyled {
color: var(--theme-color-primary);
font-weight: 600;
}
.usa-button--unstyled:hover {
color: var(--theme-color-primary-dark);
}
/* ============================================================
7. LINKS
============================================================ */
a {
color: var(--theme-color-primary);
}
a:hover,
a:active {
color: var(--theme-color-primary-dark);
}
a:visited {
color: var(--theme-color-primary-darker);
}
/* Links on dark backgrounds */
.usa-section--dark a,
.usa-header a,
.usa-footer--big a {
color: var(--theme-color-accent-warm-light);
}
.usa-section--dark a:hover,
.usa-footer--big a:hover {
color: #ffffff;
}
/* ============================================================
8. CARDS
============================================================ */
.usa-card__container {
background-color: #ffffff;
border: 1px solid var(--theme-color-base-lighter);
border-radius: 6px;
box-shadow: 0 2px 8px rgba(22, 46, 81, 0.08);
transition: box-shadow 0.2s ease;
}
.usa-card__container:hover {
box-shadow: 0 4px 16px rgba(22, 46, 81, 0.14);
}
/* Card header accent bar */
.usa-card__header {
border-top: 4px solid var(--theme-color-accent-warm);
}
.usa-card__heading {
color: var(--theme-color-primary-darker);
font-family: var(--theme-font-serif);
}
/* Dark card variant */
.usa-card--dark .usa-card__container {
background-color: var(--theme-color-primary-darker);
color: #ffffff;
border-color: var(--theme-color-primary-dark);
}
.usa-card--dark .usa-card__heading {
color: #ffffff;
}
/* ============================================================
9. FORMS & INPUTS
Clean, accessible form styling — critical for quote requests.
============================================================ */
.usa-label {
color: var(--theme-color-base-darkest);
font-weight: 600;
font-family: var(--theme-font-sans);
}
.usa-input,
.usa-select,
.usa-textarea {
border: 2px solid var(--theme-color-base-light);
border-radius: 4px;
background-color: #ffffff;
color: var(--theme-color-base-darkest);
transition: border-color 0.15s ease;
}
.usa-input:focus,
.usa-select:focus,
.usa-textarea:focus {
border-color: var(--theme-color-primary);
outline: 3px solid var(--theme-color-primary-light);
outline-offset: 0;
}
/* Error state */
.usa-input--error {
border-color: #b50909;
}
/* Success state */
.usa-input--success {
border-color: #00a91c;
}
.usa-hint {
color: var(--theme-color-base-dark);
}
.usa-error-message {
color: #b50909;
}
/* Fieldset legend */
.usa-legend {
color: var(--theme-color-primary-darker);
font-family: var(--theme-font-serif);
font-size: 1.25rem;
}
/* Checkbox and radio */
.usa-checkbox__label::before,
.usa-radio__label::before {
border-color: var(--theme-color-primary);
}
.usa-checkbox__input:checked + .usa-checkbox__label::before,
.usa-radio__input:checked + .usa-radio__label::before {
background-color: var(--theme-color-primary);
border-color: var(--theme-color-primary);
}
/* ============================================================
10. ALERTS & CALLOUTS
============================================================ */
/* Info alert */
.usa-alert--info {
background-color: var(--theme-color-primary-lighter);
border-left-color: var(--theme-color-primary);
}
/* Warning alert */
.usa-alert--warning {
background-color: var(--theme-color-accent-warm-lighter);
border-left-color: var(--theme-color-accent-warm);
}
.usa-alert--warning .usa-alert__body {
background-color: var(--theme-color-accent-warm-lighter);
color: var(--theme-color-base-darkest);
}
/* Success alert */
.usa-alert--success {
background-color: #ecf3ec;
border-left-color: #00a91c;
}
/* Error alert */
.usa-alert--error {
background-color: #f4e3db;
border-left-color: #b50909;
}
/* Custom callout box — useful for "Why choose us" panels */
.usa-callout {
background-color: var(--theme-color-primary-lighter);
border-left: 4px solid var(--theme-color-accent-warm);
padding: 1.5rem 2rem;
border-radius: 0 6px 6px 0;
}
.usa-callout__heading {
color: var(--theme-color-primary-darker);
font-family: var(--theme-font-serif);
}
/* ============================================================
11. ACCORDION
============================================================ */
.usa-accordion__button {
background-color: var(--theme-color-primary-lighter);
color: var(--theme-color-primary-darker);
font-weight: 600;
font-family: var(--theme-font-sans);
}
.usa-accordion__button:hover {
background-color: var(--theme-color-primary-light);
}
.usa-accordion__button[aria-expanded="true"] {
background-color: var(--theme-color-primary-dark);
color: #ffffff;
}
.usa-accordion__content {
background-color: #ffffff;
border: 1px solid var(--theme-color-base-lighter);
border-top: none;
}
/* ============================================================
12. TABLES
============================================================ */
.usa-table th {
background-color: var(--theme-color-primary-darker);
color: #ffffff;
font-family: var(--theme-font-sans);
font-weight: 600;
}
.usa-table td {
border-bottom: 1px solid var(--theme-color-base-lighter);
}
.usa-table tbody tr:nth-child(even) {
background-color: var(--theme-color-primary-lighter);
}
.usa-table tbody tr:hover {
background-color: var(--theme-color-accent-warm-lighter);
}
/* ============================================================
13. BREADCRUMB
============================================================ */
.usa-breadcrumb {
background-color: transparent;
}
.usa-breadcrumb__link {
color: var(--theme-color-primary);
}
.usa-breadcrumb__link:hover {
color: var(--theme-color-primary-dark);
}
.usa-breadcrumb__list-item.usa-current {
color: var(--theme-color-base-dark);
}
/* ============================================================
14. PAGINATION
============================================================ */
.usa-pagination__button {
color: var(--theme-color-primary);
border-color: var(--theme-color-primary-light);
}
.usa-pagination__button:hover {
background-color: var(--theme-color-primary-lighter);
}
.usa-pagination__button[aria-current="page"] {
background-color: var(--theme-color-primary-dark);
color: #ffffff;
border-color: var(--theme-color-primary-dark);
}
/* ============================================================
15. FOOTER
============================================================ */
.usa-footer {
background-color: var(--theme-color-primary-darker);
color: #ffffff;
}
.usa-footer__primary-section {
background-color: var(--theme-color-primary-darker);
border-top: 4px solid var(--theme-color-accent-warm);
}
.usa-footer__secondary-section {
background-color: #0d1f38; /* slightly darker than primary-darker */
color: #a9aeb1;
}
.usa-footer__logo-heading {
color: #ffffff;
font-family: var(--theme-font-serif);
}
.usa-footer__primary-link,
.usa-footer__secondary-link {
color: var(--theme-color-accent-warm-light);
}
.usa-footer__primary-link:hover,
.usa-footer__secondary-link:hover {
color: #ffffff;
}
.usa-footer__contact-info {
color: #dce4ef;
}
/* Footer heading labels */
.usa-footer__primary-content--collapsible .usa-footer__primary-link {
color: #ffffff;
font-weight: 700;
font-family: var(--theme-font-sans);
}
/* ============================================================
16. STEP INDICATOR (useful for multi-step quote forms)
============================================================ */
.usa-step-indicator__segment--complete .usa-step-indicator__segment-indicator {
background-color: var(--theme-color-primary-dark);
border-color: var(--theme-color-primary-dark);
}
.usa-step-indicator__segment--current .usa-step-indicator__segment-indicator {
background-color: var(--theme-color-accent-warm);
border-color: var(--theme-color-accent-warm);
color: var(--theme-color-base-darkest);
}
.usa-step-indicator__heading {
color: var(--theme-color-primary-darker);
font-family: var(--theme-font-serif);
}
/* ============================================================
17. PROCESS LIST (great for "How it works" sections)
============================================================ */
.usa-process-list__item::before {
background-color: var(--theme-color-primary-dark);
color: #ffffff;
font-family: var(--theme-font-sans);
font-weight: 700;
}
.usa-process-list__heading {
color: var(--theme-color-primary-darker);
font-family: var(--theme-font-serif);
}
/* ============================================================
18. TAG / BADGE
============================================================ */
.usa-tag {
background-color: var(--theme-color-primary-dark);
color: #ffffff;
font-family: var(--theme-font-sans);
font-weight: 600;
border-radius: 3px;
}
.usa-tag--big {
background-color: var(--theme-color-accent-warm);
color: var(--theme-color-base-darkest);
}
/* ============================================================
19. IDENTIFIER (site-wide "official site" identifier bar)
Note: Do NOT use the .usa-banner "official government
website" component — that is for .gov sites only.
============================================================ */
.usa-identifier {
background-color: #0d1f38;
}
.usa-identifier__identity-domain,
.usa-identifier__identity-disclaimer {
color: #a9aeb1;
}