/* SAY SOMETHING SOUTHSIDE — stylesheet v48 — 24 Jul, hero a bit bigger */
/* =========================================================
>>> QUICK TUNING <<<
Change these numbers to resize the most-adjusted text. Bigger
number = bigger text. 1rem is about 16 pixels. After saving,
refresh the browser to see the change.
========================================================= */
:root {
--size-eyebrow: 1.6rem; /* small orange line above every heading */
--size-headline: 2.75rem; /* "SMALL CONVERSATIONS MAKE A BIG IMPACT." */
--size-h2: 2.4rem; /* EVERY other section heading */
--size-body: 0.95rem; /* every paragraph */
--size-small: 0.95rem; /* legend and other small caps labels */
--hero-kicker: 2.1rem; /* hero line 1: "TAKE THE" */
--hero-script: 4.9rem; /* hero line 2: "SouthSide" in script */
--hero-main: 4.4rem; /* hero line 3: "VOTING CHALLENGE" */
--divider-navy: #1B4A8C; /* centre line under Board of Elections */
--blue-heading: #1C419F; /* "How does your neighborhood compare?" */
--legend-red: #CB0000; /* the RED legend square */
}
/* =========================================================
SAY SOMETHING SOUTHSIDE — stylesheet
Matched section by section against Brett's approved PDF mockup.
Palette:
--navy #0E1F38 (headings, dark panels)
--orange #E24E2B (accents, CTAs, highlights, section rules)
--blue #2F7FD6 (photo band, form panel, secondary accent)
--cream #F1EBDD (section backgrounds)
--white #FFFFFF
Fonts: the mockup's headings are a CONDENSED sans. Plain Arial is
too wide, which is why headings wrapped onto extra lines. Display
type now uses Arial Narrow (web-safe on Windows and Mac) and falls
back to Arial anywhere it's missing. Body copy stays Arial.
Mobile-first: the base styles ARE the phone layout. The
@media (min-width: 768px) blocks add the wider layout on top.
========================================================= */
:root {
--navy: #0E1F38;
--orange: #E24E2B;
--blue: #2F7FD6;
--blue-light: #7EB3EE;
--cream: #F7F3EA; /* matched to the precinct map's own background */
--green: #3E7A2E;
--white: #FFFFFF;
--ink: #1A1A1A;
--font-display: "Bebas Neue", "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
--font-body: Arial, Helvetica, sans-serif;
/* Brush script for the hero, echoing the logo and the printed poster.
TO TRY A DIFFERENT ONE: swap the name here AND in the Google Fonts
link at the top of index.html. Alternatives that suit this brand:
"Yellowtail", "Pacifico", "Courgette", "Norican". */
--font-script: "Satisfy", "Brush Script MT", cursive;
--rule: 3px solid var(--orange);
/* Space between the blue band and the carousel photo inside it. */
--photo-pad: 1.25rem;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
line-height: 1.45;
background: var(--white);
}
img {
max-width: 100%;
display: block;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400; /* Bebas Neue has a single weight; 700 fakes a bold */
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 1.05;
color: var(--navy);
margin: 0 0 0.5rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 2px;
}
html {
scroll-behavior: smooth; /* the challenge strip jumps down to the pledge */
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
* {
transition-duration: 0.01ms !important;
}
}
/* ---------- 1. Header ---------- */
.header-bar {
display: flex;
justify-content: center;
padding: 1.75rem 1.5rem 2.75rem;
background: var(--white);
}
/* Centred now that the logo has moved to the footer. Stacks on a
phone, sits side by side once there is room. */
.header-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
}
@media (min-width: 620px) {
.header-links {
flex-direction: row;
gap: 2rem;
}
}
/* Simple text lines with a small icon, not buttons. */
/* Underlined by default, not only on hover: Cathy did not spot these
at the old size and weight, so they now read as links on sight. */
.header-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--navy);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
}
.header-link-text {
text-decoration: underline;
text-underline-offset: 3px;
}
.header-link:hover,
.header-link:focus-visible {
color: var(--orange);
}
/* The email address is long, so it shrinks rather than overflowing on
the narrowest phones. */
@media (max-width: 400px) {
.header-link { font-size: 0.92rem; }
}
.header-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
color: var(--orange);
}
/* Phones: the two links stack, centred, at full size. */
@media (max-width: 640px) {
.header-bar {
padding: 1.5rem 1rem 2.25rem;
}
}
/* Placeholder until Brett's brush-stroke art lands. Title case,
not uppercase, and a centered bar rather than edge to edge. */
/* Brett's brush-stroke banners. Both are transparent PNGs with the
wording baked into the artwork, so the alt text carries the words
for screen readers and for anyone whose images do not load.
No background colour here: the ragged brush edge is part of the
picture, and a coloured box behind it would square it off. */
.tagline-banner {
max-width: 720px;
margin: 0.5rem auto 0;
padding: 0 1rem;
}
/* On a phone the wording inside this artwork is already small, so the
banner gives up its side padding to buy back a little size. */
@media (max-width: 600px) {
.tagline-banner { padding: 0 0.25rem; }
}
.banner-img {
display: block;
width: 100%;
height: auto;
}
/* Call-to-action strip under the tagline. It opens the challenge popup. */
/* ---------- HERO: take the challenge ---------- */
/* This is the first thing on the page and the main call to action, so
it is deliberately loud: full-width orange, four stacked lines, and
a button-looking cue at the bottom. The whole block is one button.
The three type sizes are set in the QUICK TUNING block at the top
of this file (--hero-kicker, --hero-script, --hero-main). */
.challenge-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
width: 100%;
padding: 2.25rem 1.25rem 2rem;
margin: 0 0 2.75rem;
border: none;
background: var(--orange);
color: var(--white);
text-align: center;
cursor: pointer;
transition: background 0.15s ease;
}
.challenge-hero:hover,
.challenge-hero:focus-visible {
background: #C7411F;
}
.hero-kicker {
font-family: var(--font-display);
font-size: clamp(1.35rem, 5vw, var(--hero-kicker));
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1.1;
}
/* The script word, matching the logo and the printed poster. It needs
a little breathing room because script letters have long tails. */
.hero-script {
font-family: var(--font-script);
font-size: clamp(3rem, 12vw, var(--hero-script));
line-height: 1.15;
padding: 0.1em 0;
text-transform: none;
}
.hero-main {
font-family: var(--font-display);
font-size: clamp(2.5rem, 10.5vw, var(--hero-main));
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.05;
}
/* Reads as a button so it is obvious the hero does something. */
.hero-cta {
margin-top: 1.1rem;
padding: 0.6rem 1.75rem;
border: 3px solid var(--white);
border-radius: 999px;
font-family: var(--font-display);
font-size: 1.35rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.challenge-hero:hover .hero-cta,
.challenge-hero:focus-visible .hero-cta {
background: var(--white);
color: var(--orange);
}
/* ---------- Challenge popup ---------- */
body.modal-open {
overflow: hidden; /* stops the page scrolling behind the popup */
}
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(14, 31, 56, 0.75);
overflow-y: auto;
}
.modal-backdrop[hidden] {
display: none;
}
.modal {
position: relative;
width: 100%;
max-width: 520px;
max-height: 92vh;
overflow-y: auto;
padding: 2.25rem 1.75rem 2rem;
background: var(--white);
border-radius: 4px;
text-align: center;
box-shadow: 0 18px 50px rgba(14, 31, 56, 0.35);
}
/* Large, obvious close target. */
.modal-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 2.75rem;
height: 2.75rem;
border: none;
background: transparent;
color: var(--navy);
font-size: 2rem;
line-height: 1;
cursor: pointer;
border-radius: 4px;
}
.modal-close:hover,
.modal-close:focus-visible {
background: var(--cream);
color: var(--orange);
}
.modal-title {
font-size: clamp(1.5rem, 5vw, 2rem);
margin-bottom: 0.75rem;
}
.modal-lead {
margin: 0 auto 1.5rem;
max-width: 38ch;
font-size: var(--size-body);
line-height: 1.5;
color: var(--navy);
}
.modal-image {
width: 100%;
max-height: 46vh;
object-fit: contain;
margin: 0 auto 1.5rem;
}
/* The badge is a round seal, so it gets no frame and sits smaller. */
.modal-badge {
max-width: 260px;
border: none;
}
/* The poster is a tall page, so it needs more height than the badge
to stay readable, and a hairline so its cream edge reads as an
object rather than bleeding into the white popup. */
.modal-poster {
max-width: 430px;
max-height: 70vh;
margin-bottom: 1.25rem;
border: 1px solid rgba(14, 31, 56, 0.15);
}
/* The poster popup trades side padding for picture width. On a phone
those margins were costing about a fifth of the poster's size. */
.modal--poster {
max-width: 560px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
@media (max-width: 600px) {
#challenge-modal { padding: 0.5rem; }
.modal--poster { padding: 2.25rem 0.5rem 1.5rem; }
}
.modal-button,
.download-button {
display: inline-block;
padding: 1rem 2rem;
background: var(--orange);
color: var(--white);
text-decoration: none;
border-radius: 4px;
font-family: var(--font-display);
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background 0.15s ease;
}
.modal-button:hover,
.modal-button:focus-visible,
.download-button:hover,
.download-button:focus-visible {
background: #C7411F;
}
/* ---------- Shared section rules ---------- */
.section {
padding: 2.75rem 1.5rem;
}
.section h2 {
text-align: center;
font-size: clamp(1.5rem, 3vw, var(--size-h2));
}
.eyebrow {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: var(--size-eyebrow);
font-weight: 700;
color: var(--orange);
margin: 0 0 0.35rem;
}
.text-orange { color: var(--orange); }
/* Thin orange rules across the full page width, as in the mockup. */
.map-section,
.elections-section,
.transport-section,
.signup-section {
border-top: var(--rule);
}
/* ---------- 2. Intro (photo carousel + text) ---------- */
.intro-section {
display: flex;
flex-direction: column;
padding: 0;
background: var(--cream);
}
.intro-photo {
background: var(--blue);
padding: var(--photo-pad);
position: relative;
overflow: hidden;
}
.intro-photo::before {
content: "";
display: block;
/* Taller box = bigger photos. The blue band still shows around
photos whose shape does not fill it, but there is less of it.
TO CHANGE THE PHOTO SIZE ON PHONES: adjust this number. */
padding-top: 132%;
}
.carousel-img {
position: absolute;
inset: var(--photo-pad);
width: calc(100% - (var(--photo-pad) * 2));
height: calc(100% - (var(--photo-pad) * 2));
/* contain, not cover: the whole photo is always visible and the blue
band shows through wherever the shape doesn't fill the box. */
object-fit: contain;
opacity: 0;
transition: opacity 1s ease;
}
.carousel-img.active {
opacity: 1;
}
/* Centred on phones and tablets to match every other section. The
desktop rule further down puts it back to left-aligned, where the
two-column layout makes left alignment read correctly. */
.intro-text {
padding: 2rem 1.5rem 2.5rem;
text-align: center;
}
.intro-text h1 {
/* The middle value scales with window width so the headline keeps
its two-line break even in a narrow browser window. Lowered from
3.4vw when the text column moved right of centre and got
narrower: above 3vw, "SMALL CONVERSATIONS" breaks onto a third
line on laptops. */
font-size: clamp(1.5rem, 3vw, var(--size-headline));
margin-bottom: 0.85rem;
}
.intro-text p:last-child {
margin: 0 auto;
font-size: var(--size-body);
line-height: 1.5;
color: var(--navy);
}
.intro-stripe {
display: none;
}
@media (min-width: 768px) {
.intro-section {
flex-direction: row;
align-items: stretch;
}
/* Blue band on the left. The photo inside it is deliberately
smaller than the band and hangs over the band's right edge into
the cream, as it does in the mockup. */
.intro-photo {
/* Wide band, because the priority here is the biggest possible
photo with no cropping. The blue that shows around a photo is
whatever its own shape leaves over.
TO CHANGE THE PHOTO SIZE: adjust this percentage and the
min-height together. */
flex: 0 0 47%;
/* On a very wide monitor the band would keep growing while the
photo stops (its height is capped), leaving a big empty blue
area. This stops the band once the photo can't use the space. */
max-width: 780px;
min-height: 620px;
overflow: visible;
padding: 0;
}
.intro-photo::before {
display: none; /* the flex row's height sets the shape here */
}
.carousel-img {
/* No fixed box. Each photo scales to the largest size that fits
inside these two limits while keeping its own proportions, so
nothing is ever cropped. Portrait shots come out tall and narrow,
landscape shots wide and short, and the blue band fills whatever
space is left over.
The right edge stays put, hanging 2.5rem over the band into the
cream, so that design detail is the same on every slide. */
top: 50%;
bottom: auto;
left: auto;
right: -2.5rem;
transform: translateY(-50%);
width: auto;
height: auto;
/* A shade under the full band, so a wide landscape photo still
leaves a sliver of blue on its left rather than running flush
to the edge. The right edge overhangs by 2.5rem as before. */
max-width: calc(100% + 1rem);
max-height: calc(100% - 2rem); /* keeps it inside the band vertically */
object-fit: contain;
z-index: 2;
}
.intro-text {
/* min-width: 0 lets this column shrink instead of forcing the navy
stripe past the right edge of the screen. */
text-align: left;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
/* A plain gap from the photo now. Because the blue band is 47% of
the window, the text still begins just right of the middle
without any extra arithmetic. */
padding: 2.5rem 2rem 2.5rem 6rem;
}
.intro-text p:last-child {
max-width: 46ch;
}
/* Navy block at the FAR RIGHT of the row, after the text column. */
.intro-stripe {
display: block;
flex: 0 0 9%;
background: var(--navy);
}
}
/* WHY THESE STEPS EXIST: the photo band, the navy stripe and the text
gap are all taken off the top before the words get any room. At a
full 47% band, a 1000px-wide window left the text only about 210px
to work with and the headline broke onto four lines. So the band,
the stripe and the gap all start smaller and grow with the window.
TO MAKE THE PHOTOS BIGGER ON A GIVEN SIZE OF SCREEN: raise the
flex percentage in the matching block below. */
/* Small laptops and landscape tablets. */
@media (min-width: 768px) and (max-width: 1023px) {
.intro-photo { flex: 0 0 40%; min-height: 480px; }
.intro-stripe { flex: 0 0 6%; }
.intro-text { padding: 2.25rem 1.5rem 2.25rem 2.5rem; }
}
/* Standard laptops. */
@media (min-width: 1024px) and (max-width: 1279px) {
.intro-photo { flex: 0 0 44%; min-height: 550px; }
.intro-stripe { flex: 0 0 8%; }
.intro-text { padding: 2.5rem 2rem 2.5rem 4rem; }
}
/* ---------- 3. Pledge checklist ---------- */
.pledge-section {
background: var(--white);
}
/* A raised white card behind the two rows, as in the mockup. */
.pledge-list {
list-style: none;
margin: 0 auto 2rem;
padding: 1.5rem 1.75rem 0.9rem;
max-width: 560px;
background: var(--white);
border-radius: 3px;
box-shadow: 0 4px 16px rgba(14, 31, 56, 0.13);
}
.pledge-list li {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.9rem;
}
/* The text is one flex item. Previously each word run became its own
flex item, so the row's gap opened holes inside the sentence. */
.pledge-text {
flex: 1;
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
color: var(--navy);
font-size: clamp(1.05rem, 3.8vw, 1.55rem);
letter-spacing: 0.01em;
line-height: 1.2;
border-bottom: 2px solid var(--navy);
padding-bottom: 0.35rem;
}
/* Blue box with a heavy orange check that overhangs the box edges,
the way a hand-drawn check does in the mockup. The old thin
checkmark character sat small and centered. */
.checkbox {
position: relative;
display: inline-block;
flex-shrink: 0;
width: 2.4rem;
height: 2.4rem;
border: 3px solid var(--blue);
border-radius: 4px;
}
/* Brush-stroke check drawn as SVG, deliberately larger than the box
and overhanging its top-right corner, the way the mockup's
hand-painted mark does. A font checkmark can't make this shape. */
.checkbox::after {
content: "";
position: absolute;
left: -5%;
top: -30%;
width: 116%;
height: 116%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M17 50 L41 77 L86 15' fill='none' stroke='%23E24E2B' stroke-width='12' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.goal-banner {
max-width: 620px;
margin: 0 auto;
padding: 0 0.5rem;
}
/* ---------- "I accept the challenge" sticker ---------- */
/* The real badge artwork, tilted off-axis and laid over the divider
lines so it reads like a sticker dropped on the page rather than
another tidy row of the website. It is positioned against
.elections-divider, which is already position: relative.
TO ADJUST:
--seal-size how big the sticker is
--seal-tilt how far it leans (negative leans left)
--seal-drop how far below the centre line it sits
--seal-shift how far left of centre it sits
The download button in the popup still hands over the
full-resolution challenge-badge.png; this is the light copy. */
.accept-seal {
--seal-size: 10.5rem;
--seal-tilt: -11deg;
--seal-drop: 1.6rem;
--seal-shift: 13.5rem;
position: absolute;
top: 50%;
left: 50%;
z-index: 3; /* above the divider lines */
display: block;
margin: 0;
padding: 0;
line-height: 0;
border: none;
background: none;
cursor: pointer;
transform:
translate(calc(-50% - var(--seal-shift)), calc(-50% + var(--seal-drop)))
rotate(var(--seal-tilt));
transform-origin: center center;
transition: transform 0.18s ease;
}
.accept-seal-img {
display: block;
width: var(--seal-size);
height: var(--seal-size);
border-radius: 50%;
/* Offset shadow, so it reads as lifted off the paper at an angle. */
box-shadow: 3px 7px 18px rgba(14, 31, 56, 0.32);
}
/* Straightens up very slightly and lifts on hover, like a sticker
being picked at. */
.accept-seal:hover,
.accept-seal:focus-visible {
transform:
translate(calc(-50% - var(--seal-shift)), calc(-50% + var(--seal-drop) - 0.25rem))
rotate(calc(var(--seal-tilt) + 4deg))
scale(1.04);
}
.accept-seal:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 6px;
border-radius: 8px;
}
/* WHY THE BREAKPOINT IS HERE: the Board of Elections button is now
480px wide ("Franklin County Board of Elections"). Below about
1100px there is not enough clear space beside it, so the sticker
sits centred underneath the lines instead. Above that it moves to
the left of the button and overlaps the lines. */
/* Wide screens: sticker sits on the lines, left of the button. */
@media (min-width: 1100px) {
.accept-seal {
--seal-size: 12.5rem;
--seal-shift: 23rem;
--seal-drop: 1.6rem;
}
}
/* Phones, tablets and small laptops: centred below the lines. */
@media (max-width: 1099px) {
.accept-seal {
--seal-size: 9rem;
--seal-shift: 0rem;
--seal-drop: 10.5rem;
--seal-tilt: -13deg;
}
}
@media (max-width: 380px) {
.accept-seal {
--seal-size: 7.75rem;
--seal-shift: 0rem;
--seal-drop: 11rem;
}
}
/* Room underneath so the tilted sticker never reaches the orange rule
at the top of the transportation panel. */
.elections-section {
padding-bottom: 7rem;
}
@media (max-width: 1099px) {
.elections-section { padding-bottom: 15rem; }
}
/* ---------- 3b. Flyer download ---------- */
.download-section {
background: var(--white);
text-align: center;
border-top: var(--rule);
}
.download-intro {
max-width: 46ch;
margin: 0 auto 2rem;
font-size: var(--size-body);
color: var(--navy);
}
.download-card {
display: flex;
justify-content: center;
max-width: 480px;
margin: 0 auto;
}
/* ---------- 4. Neighborhood comparison map ---------- */
.map-section {
background: var(--cream);
}
.map-section h2,
.download-section h2 {
color: var(--blue-heading);
}
.map-section h2 {
margin-bottom: 0.75rem;
}
.heading-dash {
color: var(--blue-heading);
font-weight: 400;
}
.legend {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin: 0 0 1.5rem;
font-family: var(--font-display);
font-size: var(--size-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--navy);
}
.legend-divider {
color: #B9AE96;
font-weight: 400;
}
.legend-green { color: var(--green); }
.legend-red { color: var(--legend-red); }
.swatch {
display: inline-block;
width: 0.85rem;
height: 0.85rem;
margin-right: 0.35rem;
vertical-align: -1px;
}
.swatch-green { background: var(--green); }
.swatch-red { background: var(--legend-red); }
/* A plain centered column with a hard max-width. Replaces
grid-template-columns: max-content, which let the raw image pixel
widths blow the section out. */
.map-content {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.map-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* No white frame, no drop shadow: the map has its own blue border
baked into the picture. */
.precinct-map {
height: auto;
}
/* The link wrapper must not add height of its own, or it throws the
row alignment off. line-height:0 collapses the inline gap under the
image. */
.precinct-map-link {
display: block;
width: 100%;
line-height: 0;
border-radius: 6px;
outline-offset: 4px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.precinct-map-link:hover,
.precinct-map-link:focus-visible {
transform: scale(1.01);
box-shadow: 0 6px 20px rgba(14, 31, 56, 0.25);
}
.precinct-map {
width: 100%;
}
.map-hint {
margin: 1rem auto 0;
max-width: 34rem;
text-align: center;
font-size: 0.95rem;
color: var(--navy);
}
@media (min-width: 768px) {
/* QR code is gone, so the map is centered on its own instead of
sharing the row. Held to a fixed width so this lower-resolution
image is not stretched larger than it can support. */
.precinct-map-link {
width: 640px;
max-width: 100%;
}
}
/* ---------- 5. Live precinct numbers callout ---------- */
.precinct-callout {
width: 100%;
padding: 2rem 2.5rem;
text-align: center;
background: var(--orange);
color: var(--white);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(0.95rem, 3vw, 1.15rem);
line-height: 1.35;
text-transform: uppercase;
letter-spacing: 0.02em;
border-radius: 2px;
}
.precinct-callout p {
margin: 0 auto;
max-width: 30ch; /* wraps to two lines, as in the mockup */
}
.precinct-callout a {
color: var(--white);
}
/* Live rows pulled from the Google Sheet. Each row shows the precinct
name on its own line with its update underneath. */
.precinct-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: none;
}
.precinct-line {
margin: 0;
line-height: 1.3;
}
.precinct-name {
display: block;
font-size: 1.15em;
letter-spacing: 0.04em;
}
.precinct-update {
display: block;
/* Bebas Neue is capitals only, so the sheet's sentence text uses Arial. */
font-family: var(--font-body);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-size: 0.92em;
opacity: 0.95;
}
/* ---------- 6. Board of Elections link ---------- */
.elections-section {
text-align: center;
background: var(--white);
}
.elections-section h2 {
margin-bottom: 3rem; /* more air above the divider, as in the mockup */
}
/* Triple parallel line divider running the full page width, with the
button centered on top of it. CSS placeholder until Brett's
high-res version arrives. */
.elections-divider {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
margin: 0 -1.5rem 1rem; /* cancels .section side padding so it reaches the edges */
}
.elections-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
/* Three lines of equal weight (4px each) separated by 9px of white.
Adjust --divider-navy above to change the centre line's colour. */
height: 40px;
transform: translateY(-50%);
background: linear-gradient(
to bottom,
var(--blue) 0 4px,
transparent 4px 18px,
var(--divider-navy) 18px 22px,
transparent 22px 36px,
var(--blue) 36px 40px
);
}
.pill-link {
position: relative; /* sits above the divider lines */
display: inline-block;
padding: 1.15rem 1.15rem;
background: var(--white);
border: 3px solid var(--blue);
border-radius: 4px;
text-decoration: none;
color: var(--navy);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.02em;
transition: background 0.15s ease, color 0.15s ease;
}
.pill-link:hover {
background: var(--blue);
color: var(--white);
}
/* ---------- 7. Voting transportation ---------- */
.transport-section {
display: flex;
flex-direction: column;
padding: 0;
}
.transport-heading {
background: var(--navy);
padding: 2.5rem 1.75rem;
}
.transport-heading .eyebrow {
color: var(--orange);
}
.transport-heading h2 {
color: var(--white);
text-align: left;
margin: 0;
}
.transport-info {
background: var(--cream);
padding: 2rem 1.75rem 2.5rem;
display: flex;
/* Column, so the second line sits UNDER "Coming in October" rather
than beside it. Without this the two paragraphs become side-by-side
flex items. */
flex-direction: column;
align-items: flex-start;
}
/* Sized up and set in the display face so this reads as a real
announcement rather than leftover placeholder text. */
.transport-info p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.4vw, 2.1rem);
line-height: 1.15;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--navy);
}
/* Optional second line. Add it in index.html as:
Check back for pickup times and stops.
*/
.transport-note {
margin: 0.85rem 0 0 !important;
font-family: var(--font-body) !important;
font-size: var(--size-body) !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
@media (min-width: 768px) {
.transport-section {
flex-direction: row;
}
.transport-heading,
.transport-info {
flex: 0 0 50%;
}
/* Big left inset so the heading starts on the same left margin the
rest of the page uses, which also breaks it onto three lines. */
.transport-heading {
padding: 3rem 1.75rem 3rem 7%;
}
.transport-info {
padding: 3.25rem 2rem 3rem 4%;
}
}
/* The deep left inset only once there's room for it. */
@media (min-width: 1024px) {
.transport-heading {
padding: 3.5rem 2rem 3.5rem 18%;
}
.transport-info {
padding: 4rem 3rem 3rem 4%;
}
}
/* ---------- 8 & 9. Volunteer + contact form ---------- */
/* Cream section with a navy heading. Only the form itself is the
blue panel. */
.signup-section {
text-align: center;
background: var(--white);
padding-bottom: 0;
}
/* Full-width cream band behind the form only. */
.signup-panel {
background: var(--cream);
margin: 0 -1.5rem;
padding: 2.75rem 1.5rem 3rem;
}
.signup-section .eyebrow {
color: var(--orange);
}
.signup-section h2 {
color: var(--navy);
margin-bottom: 1.5rem;
}
.signup-form {
position: relative;
background: var(--blue);
border-radius: 2px;
max-width: 720px; /* wide rectangle rather than a squarish block */
margin: 0 auto 1.75rem;
padding: 2rem 1.5rem 3rem; /* extra bottom room for the button */
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form input[type="tel"] {
width: 100%;
max-width: 280px;
margin: 0 auto;
padding: 0.5rem 1rem;
border: none;
border-radius: 999px; /* pill shaped, as in the mockup */
font-family: var(--font-body);
font-size: 0.85rem;
text-align: center;
}
.volunteer-options {
border: none;
border-radius: 2px;
background: var(--navy);
margin: 0.8rem auto 0;
padding: 0.9rem 1rem 1rem;
width: 100%;
max-width: 520px; /* wide, shallow bar rather than a square */
}
/* float:left is the reliable way to make a