/*
* ═══════════════════════════════════════════════════════════════
* ODOM FOR 27A — pages.css
* Shared styles for all inner pages. Drop in /pages.css.
* Load on every inner page after home.css:
*
*
* ═══════════════════════════════════════════════════════════════
*/
/* ─────────────────────────────────────────────────────────────
DESIGN TOKENS
These mirror home.css — define here as fallback in case
pages.css is loaded without home.css in some contexts.
───────────────────────────────────────────────────────────────── */
:root {
--red: #C8102E;
--red-dark: #9e0b22;
--red-glow: rgba(200,16,46,0.25);
--gold: #F5C200;
--gold-dark: #c9a000;
--navy: #1B2A4A;
--navy-mid: #243660;
--navy-light: #e8ecf4;
--black: #0d0d0d;
--off-white: #f7f4ef;
--cream: #f4f1ea;
--white: #ffffff;
--text: #1a1a1a;
--muted: #555555;
--border: #ddd8d0;
--border-dark: #c8c3bb;
--font-head: 'Barlow Condensed', sans-serif;
--font-body: 'Lora', Georgia, serif;
--font-ui: 'Barlow', sans-serif;
}
/* ─────────────────────────────────────────────────────────────
SCROLL REVEAL
Add class="reveal" to animate elements in on scroll.
Add reveal-d1 through reveal-d4 for stagger delays.
───────────────────────────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
/* ─────────────────────────────────────────────────────────────
HOVER LIFT
Add class="hover-lift" to any card for elevation on hover.
───────────────────────────────────────────────────────────────── */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
/* ─────────────────────────────────────────────────────────────
ACCESSIBILITY — SKIP LINK
Skip to content
Place as first child of .
───────────────────────────────────────────────────────────────── */
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--red);
color: #fff;
padding: 12px 20px;
font-family: var(--font-head);
font-weight: 700;
font-size: 0.88rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
z-index: 9999;
transition: top 0.1s;
}
.skip-link:focus {
top: 0;
}
/* ─────────────────────────────────────────────────────────────
FOCUS STYLES — WCAG 2.1 AA
───────────────────────────────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* ─────────────────────────────────────────────────────────────
PAGE HERO — shared inner page hero pattern
───────────────────────────────────────────────────────────────── */
.page-hero {
background: var(--navy);
padding: 52px 48px 48px;
border-bottom: 3px solid var(--gold);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: -80px; right: -60px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,194,0,0.06) 0%, transparent 70%);
pointer-events: none;
}
.page-hero__inner {
max-width: 1020px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.page-hero__tag {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.38);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.page-hero__tag::before {
content: '';
display: block;
width: 24px; height: 1px;
background: rgba(255,255,255,0.22);
}
.page-hero__title {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(2.4rem, 5.5vw, 4rem);
color: #fff;
text-transform: uppercase;
line-height: 0.95;
letter-spacing: 0.01em;
margin-bottom: 14px;
}
.page-hero__title em {
color: var(--gold);
font-style: normal;
}
.page-hero__lead {
font-family: var(--font-body);
font-size: 1.02rem;
color: rgba(255,255,255,0.62);
line-height: 1.78;
max-width: 580px;
}
/* ─────────────────────────────────────────────────────────────
PAGE WRAP — content width constraint
───────────────────────────────────────────────────────────────── */
.page-wrap {
max-width: 1020px;
margin: 0 auto;
padding: 0 48px;
}
.page-section {
padding: 60px 0;
}
.page-section + .page-section {
border-top: 1px solid var(--border);
}
/* ─────────────────────────────────────────────────────────────
SECTION LABELS — eyebrow + title pattern used on every page
───────────────────────────────────────────────────────────────── */
.section-tag {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 8px;
display: block;
}
.section-title {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
text-transform: uppercase;
color: var(--navy);
line-height: 1.0;
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.section-title--light { color: #fff; }
.section-intro {
font-family: var(--font-body);
font-size: 1rem;
color: var(--muted);
line-height: 1.78;
max-width: 640px;
}
.section-intro--light { color: rgba(255,255,255,0.6); }
/* ─────────────────────────────────────────────────────────────
CARDS — standard card, dark card, stat card
───────────────────────────────────────────────────────────────── */
/* Standard white card */
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 3px;
box-shadow: 0 1px 6px rgba(0,0,0,0.05);
overflow: hidden;
}
.card--navy { background: var(--navy); border-color: rgba(255,255,255,0.08); }
.card--dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
/* Card with top accent color */
.card--red-top { border-top: 3px solid var(--red); }
.card--gold-top { border-top: 3px solid var(--gold); }
.card--navy-top { border-top: 3px solid var(--navy); }
/* Stat card — big number + label */
.stat-card {
text-align: center;
padding: 32px 24px;
}
.stat-card__number {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(3rem, 6vw, 5rem);
color: var(--gold);
line-height: 1;
display: block;
margin-bottom: 8px;
}
.stat-card__label {
font-size: 0.88rem;
color: rgba(255,255,255,0.6);
line-height: 1.5;
display: block;
}
.stat-card__sub {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
display: block;
margin-top: 4px;
}
/* ─────────────────────────────────────────────────────────────
BUTTONS — shared button system
───────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-head);
font-weight: 900;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 15px 28px;
text-decoration: none;
border: none;
cursor: pointer;
border-radius: 2px;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--red {
background: var(--red);
color: #fff;
box-shadow: 0 2px 14px var(--red-glow);
}
.btn--red:hover {
background: var(--red-dark);
box-shadow: 0 6px 20px var(--red-glow);
}
.btn--gold {
background: var(--gold);
color: var(--navy);
}
.btn--gold:hover { background: var(--gold-dark); }
.btn--navy {
background: var(--navy);
color: #fff;
}
.btn--navy:hover { background: var(--navy-mid); }
.btn--ghost {
background: transparent;
color: rgba(255,255,255,0.8);
border: 1.5px solid rgba(255,255,255,0.25);
}
.btn--ghost:hover {
border-color: rgba(255,255,255,0.6);
color: #fff;
transform: none;
}
.btn--ghost-dark {
background: transparent;
color: var(--navy);
border: 1.5px solid var(--border);
}
.btn--ghost-dark:hover {
border-color: var(--navy);
}
.btn--sm { font-size: 0.78rem; padding: 11px 20px; }
.btn--lg { font-size: 1rem; padding: 18px 36px; }
/* ─────────────────────────────────────────────────────────────
FORMS — shared form field styles
───────────────────────────────────────────────────────────────── */
.field {
margin-bottom: 20px;
}
.field__label {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 7px;
}
.field__label .req { color: var(--red); }
.field__input,
.field__select,
.field__textarea {
width: 100%;
border: 1.5px solid var(--border);
background: var(--off-white);
font-family: var(--font-ui);
font-size: 0.95rem;
color: var(--text);
padding: 12px 14px;
border-radius: 2px;
outline: none;
transition: border-color 0.15s, background 0.15s;
appearance: none;
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
border-color: var(--navy);
background: var(--white);
}
.field__textarea {
resize: vertical;
min-height: 100px;
}
.field__select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
cursor: pointer;
}
.field__error {
color: var(--red);
font-family: var(--font-head);
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 0.1em;
text-transform: uppercase;
display: block;
margin-top: 5px;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-section-label {
font-family: var(--font-head);
font-weight: 900;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--navy);
display: block;
padding-bottom: 10px;
margin: 28px 0 20px;
border-bottom: 1px solid var(--border);
}
/* ─────────────────────────────────────────────────────────────
INLINE CALLOUT BOXES
───────────────────────────────────────────────────────────────── */
.callout {
padding: 14px 18px;
margin: 16px 0;
line-height: 1.65;
}
.callout--gold {
background: var(--navy-light);
border: 1px solid #ccd2e0;
border-left: 3px solid var(--gold);
}
.callout--red {
background: rgba(200,16,46,0.05);
border: 1px solid rgba(200,16,46,0.15);
border-left: 3px solid var(--red);
}
.callout--navy {
background: var(--navy);
border: 1px solid rgba(255,255,255,0.08);
}
.callout__label {
font-family: var(--font-head);
font-weight: 800;
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 4px;
}
.callout--navy .callout__label { color: var(--gold); }
.callout__address {
font-family: var(--font-head);
font-weight: 900;
font-size: 1rem;
color: var(--navy);
line-height: 1.5;
}
.callout--navy .callout__address { color: #fff; }
.callout__note {
font-size: 0.82rem;
color: var(--muted);
margin-top: 6px;
line-height: 1.55;
}
.callout--navy .callout__note { color: rgba(255,255,255,0.55); }
/* ─────────────────────────────────────────────────────────────
STATUS / TYPE CHIPS
───────────────────────────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
font-family: var(--font-head);
font-weight: 800;
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 2px;
}
.chip--enacted { background: rgba(26,127,55,0.12); color: #1a7f37; border: 1px solid rgba(26,127,55,0.25); }
.chip--passed { background: var(--navy-light); color: var(--navy); border: 1px solid #ccd2e0; }
.chip--pending { background: rgba(200,16,46,0.08); color: var(--red); border: 1px solid rgba(200,16,46,0.2); }
.chip--gold { background: rgba(245,194,0,0.12); color: var(--gold-dark); border: 1px solid rgba(245,194,0,0.25); }
.chip--public { background: rgba(26,127,55,0.1); color: #1a7f37; border: 1px solid rgba(26,127,55,0.2); }
/* ─────────────────────────────────────────────────────────────
ELECTION DATES STRIP
Used on any page that needs the key dates bar.
───────────────────────────────────────────────────────────────── */
.dates-strip {
background: var(--gold);
padding: 14px 48px;
}
.dates-strip__inner {
max-width: 1020px;
margin: 0 auto;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 32px;
}
.dates-strip__item {
display: flex;
align-items: center;
gap: 8px;
}
.dates-strip__label {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(27,42,74,0.6);
}
.dates-strip__value {
font-family: var(--font-head);
font-weight: 900;
font-size: 0.95rem;
text-transform: uppercase;
color: var(--navy);
}
.dates-strip__sep {
width: 1px;
height: 28px;
background: rgba(27,42,74,0.2);
}
/* ─────────────────────────────────────────────────────────────
URGENCY / CTA BAND
───────────────────────────────────────────────────────────────── */
.cta-band {
background: var(--navy);
padding: 52px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: '';
position: absolute;
top: -80px; left: 50%;
transform: translateX(-50%);
width: 600px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,194,0,0.05) 0%, transparent 70%);
pointer-events: none;
}
.cta-band__tag {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.cta-band__tag::before,
.cta-band__tag::after {
content: '';
display: block;
width: 20px; height: 1px;
background: rgba(255,255,255,0.2);
}
.cta-band__title {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(2rem, 4.5vw, 3.4rem);
text-transform: uppercase;
color: #fff;
line-height: 1.0;
margin-bottom: 10px;
}
.cta-band__title em {
color: var(--red);
font-style: normal;
display: block;
}
.cta-band__sub {
font-family: var(--font-body);
font-style: italic;
font-size: 1rem;
color: rgba(255,255,255,0.55);
max-width: 520px;
margin: 0 auto 28px;
line-height: 1.72;
}
.cta-band__btns {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* ─────────────────────────────────────────────────────────────
FLOATING DONATE — mobile only
Injected by enhancements.js — styles here for easy overrides
───────────────────────────────────────────────────────────────── */
#float-donate {
position: fixed;
bottom: 20px; right: 20px;
z-index: 250;
display: none;
}
@media (max-width: 768px) {
#float-donate { display: flex; }
}
/* ─────────────────────────────────────────────────────────────
PAGE PROGRESS BAR — injected by enhancements.js
───────────────────────────────────────────────────────────────── */
#page-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
background: linear-gradient(90deg, var(--red), var(--gold));
z-index: 9999;
pointer-events: none;
transition: width 0.1s linear;
}
/* ─────────────────────────────────────────────────────────────
BACK TO TOP — injected by enhancements.js
───────────────────────────────────────────────────────────────── */
#back-to-top {
position: fixed;
bottom: 80px; right: 20px;
z-index: 249;
width: 40px; height: 40px;
background: rgba(27,42,74,0.88);
color: #fff;
border: none;
border-radius: 2px;
font-size: 1.1rem;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
backdrop-filter: blur(8px);
}
/* ─────────────────────────────────────────────────────────────
URGENCY BANNER — injected by enhancements.js
───────────────────────────────────────────────────────────────── */
#urgency-banner {
font-family: var(--font-head);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ─────────────────────────────────────────────────────────────
SIDEBAR LAYOUT — two-column pages
───────────────────────────────────────────────────────────────── */
.sidebar-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
align-items: start;
}
.sidebar-layout--wide { grid-template-columns: 1fr 340px; }
.sidebar-layout--narrow { grid-template-columns: 1fr 260px; }
.sidebar-box {
background: var(--white);
border: 1px solid var(--border);
border-top: 3px solid var(--navy);
border-radius: 3px;
overflow: hidden;
margin-bottom: 20px;
}
.sidebar-box__header {
padding: 16px 18px;
border-bottom: 1px solid var(--border);
font-family: var(--font-head);
font-weight: 900;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--navy);
}
.sidebar-box__body { padding: 16px 18px; }
.sidebar-box--navy { background: var(--navy); border-color: rgba(255,255,255,0.08); border-top-color: var(--gold); }
.sidebar-box--navy .sidebar-box__header { color: var(--gold); border-bottom-color: rgba(255,255,255,0.08); }
/* ─────────────────────────────────────────────────────────────
FAQ ACCORDION — shared across FAQ and donate pages
───────────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
width: 100%;
background: none;
border: none;
text-align: left;
cursor: pointer;
padding: 18px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-head);
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--navy);
transition: color 0.15s;
}
.faq-q:hover,
.faq-item.open .faq-q { color: var(--red); }
.faq-chevron {
width: 18px; height: 18px;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 0 20px; }
.faq-item.open .faq-a { display: block; }
.faq-a p {
font-family: var(--font-body);
font-size: 0.96rem;
color: var(--muted);
line-height: 1.8;
margin-bottom: 1em;
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--red); font-weight: 600; text-decoration: none; }
.faq-a a:hover { text-decoration: underline; }
.faq-a strong { color: var(--text); }
/* ─────────────────────────────────────────────────────────────
NEWSLETTER BAND
───────────────────────────────────────────────────────────────── */
.newsletter-band {
background: var(--navy-mid);
padding: 28px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.newsletter-band__text h3 {
font-family: var(--font-head);
font-weight: 900;
font-size: 1.1rem;
text-transform: uppercase;
color: #fff;
margin-bottom: 3px;
}
.newsletter-band__text p {
font-size: 0.84rem;
color: rgba(255,255,255,0.5);
}
/* ─────────────────────────────────────────────────────────────
RESPONSIVE ADJUSTMENTS FOR pages.css
───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.page-hero { padding: 44px 20px 44px; }
.page-wrap { padding: 0 20px; }
.page-section { padding: 44px 0; }
.sidebar-layout,
.sidebar-layout--wide,
.sidebar-layout--narrow { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.dates-strip { padding: 14px 20px; }
.dates-strip__sep { display: none; }
.cta-band { padding: 44px 20px; }
.cta-band__btns { flex-direction: column; }
.newsletter-band { padding: 20px; flex-direction: column; align-items: flex-start; }
}