/* ============================================
brand.css — BPS Fiber (BPS Telephone Company)
Brand config layer. Sits between mainstyle.css and custom.css.
Colors, fonts, and brand-level tokens ONLY.
Do NOT put component or page-specific styles here — use custom.css.
Load order (every page ):
template libraries -> mainstyle.css -> brand.css -> custom.css
Requires this in each page ABOVE this file:
Palette source: .dwight/project-brief.md, verified against the
.dc.html design comps (BPS Fiber Homepage.dc.html).
============================================ */
/* --- Brand Colors --- */
:root {
/* Core palette (brief + comp-verified) */
--brand-primary: #003268; /* Brand Navy — header, hero, primary buttons, H1/H2, links */
--brand-secondary: #0275d8; /* Secondary Blue — secondary buttons, icon fills, hover */
--brand-accent: #FFCC16; /* Brand Gold — CTAs, eyebrows, badges. DISPLAY/ACCENT ONLY (see contrast note) */
--brand-success: #5CB85C; /* Success Green — available-at-address states, checkmarks */
--brand-dark: #222222; /* Body text */
--brand-muted: #636C72; /* Captions, fine print */
--brand-tint: #FFF7DB; /* Gold-wash background tint — section bg, cards */
--brand-light: #FFFFFF; /* Base background */
/* Supporting values lifted from the design comps */
--brand-primary-dark: #0A4A8F; /* Navy hover / darker navy */
--brand-navy-border: #CDD9E8; /* Navy-wash borders, card rules */
--brand-navy-soft: #9FB4D0; /* Muted navy — inactive icons, dividers */
--brand-navy-wash: #EEF2F6; /* Palest navy section wash */
--brand-success-dark: #2F7D32; /* Green text on light backgrounds */
--brand-gold-text: #946C00; /* ACCESSIBLE gold — use for gold-toned TEXT on white */
/* --- Type --- */
--font-heading: 'Poppins', system-ui, 'Calibri', sans-serif;
--font-body: 'Poppins', system-ui, 'Calibri', sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
/* Scale per brief: H1 44/52 · H2 30/40 · H3 22/30 · body 17/28 · small 14/22 */
--fs-h1: 44px; --lh-h1: 52px;
--fs-h2: 30px; --lh-h2: 40px;
--fs-h3: 22px; --lh-h3: 30px;
--fs-body: 17px; --lh-body: 28px;
--fs-small: 14px; --lh-small: 22px;
/* --- Rhythm (brief target: ~50% white space) --- */
--section-pad-y: 96px;
--section-pad-y-sm: 56px;
--radius-base: 8px;
}
/* --- Brand Fonts --- */
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
color: var(--brand-dark);
background-color: var(--brand-light);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--brand-primary);
font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
small, .small, .fine-print {
font-size: var(--fs-small);
line-height: var(--lh-small);
color: var(--brand-muted);
}
a { color: var(--brand-primary); }
a:hover, a:focus { color: var(--brand-primary-dark); }
/* Mobile type step-down — keeps the 44px H1 from overflowing small screens */
@media (max-width: 767.98px) {
:root {
--fs-h1: 32px; --lh-h1: 40px;
--fs-h2: 26px; --lh-h2: 34px;
--fs-h3: 20px; --lh-h3: 28px;
--section-pad-y: var(--section-pad-y-sm);
}
}
/* --- ACCESSIBILITY: Gold contrast guard (WCAG 2.1 AA, >=4.5:1) --- */
/* --brand-accent (#FFCC16) is ~1.5:1 on white — it FAILS as body text.
Use it for fills, badges, borders, and large display accents only.
For gold-toned TEXT on a light background use --brand-gold-text (#946C00).
Gold as a BUTTON/BADGE fill takes navy text, never white. */
.bg-accent,
.badge-accent,
.btn-accent {
background-color: var(--brand-accent);
color: var(--brand-primary);
}
/* --- Orphan / Widow Prevention (base standard v2.21.0+) --- */
/* Required on every site. Never remove. Never hand-patch with
. */
h1, h2, h3, h4, h5, .display, .eyebrow { text-wrap: balance; }
p, li, blockquote, figcaption, .blurb, .lead { text-wrap: pretty; }
/* Link-styled titles: text-wrap is a no-op on inline boxes, so anchors used as
headings must be block-level AND named here. No-Orphans hard rule #4. */
a.card-title, a.title, h1 > a, h2 > a, h3 > a, h4 > a, h5 > a,
.card-title a, [class*="-title"] a { display: block; text-wrap: balance; }