/* ============================================================
Sing Out for democracy — microsite design system
Lifted wholesale from the approved landing page (index-v1.75b.html)
so the home page renders byte-identical to what the client signed
off on. Everything below the "MICROSITE ADDITIONS" rule is new:
the nav, the interior page shell, and the list components that
/supporters and /sponsors are built from.
MOBILE FIRST — base styles are the phone. Larger screens are
progressive enhancement at the bottom of the file.
============================================================ */
:root{
/* brand kit — SingOutFordemocracy-brand.pdf */
--off:#f4f0eb;
--navy:#091f40;
--gold:#c1862b;
--red:#be2026;
--warm:#e8e1d6;
--ink:#091f40;
--pad:18px;
/* ---- TYPE ----------------------------------------------------------
TWO families. Baskerville sets display, Google Sans sets everything
else. FIVE sizes, nothing outside them. Two weights (400/700).
Sizes are fluid, so there are no per-breakpoint font overrides
anywhere below — every size on the page comes from this block.
Google Sans IS served by the Google Fonts API (verified 8/13: 400/500/700
plus italics) and is now loaded properly rather than probed for locally,
so every visitor gets the same face. DM Sans is gone — it only existed as
a fallback for a font we now actually load. Product Sans is also gone: the
API serves it under the googlerestricted licence, which is not ours to
use on a client site. */
--sans:"Google Sans","Google Sans Text",system-ui,sans-serif;
--serif:"Libre Baskerville",Baskerville,Georgia,serif;
--fs-1:clamp(46px,8.4vw,96px); /* display — the big serif statement */
--fs-2:clamp(28px,3.1vw,42px); /* the lead: what this actually is */
--fs-3:clamp(22px,2.1vw,30px); /* everything else that leads */
--fs-4:19px; /* body copy, notes, subcopy */
--fs-5:16px; /* legal, icon labels — the floor */
--lh-tight:1.06;
--lh-mid:1.28;
--lh-body:1.5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--off); color:var(--ink);
font-family:var(--sans);
font-size:var(--fs-4); line-height:var(--lh-body);
overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* height:auto is REQUIRED now that ![]()
carries width/height attributes —
without it the attribute height wins and every scaled image distorts */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
section{position:relative}
/* the event name is always set in italic */
.brand{font-style:italic}
/* ---------- HERO ---------- */
.hero{padding:34px 0 0; overflow:hidden}
.hero h1{margin:0 auto; padding:0 var(--pad)}
.hero h1 img{width:100%; max-width:660px; margin:0 auto}
.tenets{list-style:none; margin:0 auto; padding:0 var(--pad) 34px;
max-width:420px; display:grid; grid-template-columns:1fr; gap:6px}
.tenets li{font-family:var(--serif);
font-size:var(--fs-3); line-height:var(--lh-mid); color:var(--navy);
text-align:center}
.tenets li span{display:inline}
.hero-copy{margin-top:34px; padding:0 var(--pad) 38px; max-width:660px;
margin-left:auto; margin-right:auto}
.hero-copy p{margin:0 0 16px; font-size:var(--fs-3); line-height:var(--lh-mid);
color:var(--navy); text-wrap:balance; text-align:center}
.hero-copy strong{font-weight:700; color:var(--gold)}
.hero-copy .whatis{font-size:var(--fs-2); margin-bottom:16px; text-wrap:pretty}
.hero-copy p:last-child{margin-bottom:0}
.hero-cards{position:relative; z-index:3; margin-top:16px; padding:0 var(--pad) 42px;
max-width:660px; margin-left:auto; margin-right:auto;
display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch}
.hero-cards .cta{max-width:none; font-size:var(--fs-3); line-height:var(--lh-mid)}
/* the free-attendance note sits with the button it qualifies */
.hero-note{margin:0; text-align:center; font-size:var(--fs-4);
line-height:var(--lh-body); color:var(--navy)}
.ci{position:relative; display:block; width:100%; border:0; cursor:pointer; font-family:inherit;
text-align:center; text-decoration:none; padding:18px 40px 30px;
transition:transform .18s ease, box-shadow .18s ease}
.ci p{margin:0; font-size:var(--fs-3); line-height:var(--lh-mid); font-weight:700}
.ci .time{display:block; margin-top:3px; font-weight:400}
.ci.when{background:var(--gold); color:var(--navy)}
.ci.venue{background:var(--navy); color:var(--off)}
.ci:hover, .ci:focus-visible{transform:translateY(-3px); box-shadow:0 8px 0 rgba(9,31,64,.18)}
.ci-icon{position:absolute; right:14px; bottom:12px; width:18px; height:18px; opacity:.6}
.lockup{padding:10px var(--pad) 20px}
.lockup img{width:100%; max-width:430px; margin:0 auto}
.rule{height:1px; width:calc(100% - var(--pad)*2); max-width:430px; margin:0 auto;
background:rgba(9,31,64,.2)}
/* ---------- SPONSOR / PARTNER LOGO ROW ---------- */
.sponsors{padding:28px 6px 20px}
.sup-label{margin:0 0 16px; text-align:center; font-size:var(--fs-4); font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--navy)}
.lead-row{display:flex; justify-content:center; margin-bottom:18px}
/* ONE SIZE, WRAPPING: heights are tuned per mark, not shared — aspect ratios run
from 1.2:1 (CCPL's square badge) to 10:1 (the CWRU wordmark). */
.logos{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:18px 26px; max-width:1040px; margin:0 auto;
}
.logos span{display:block}
.logos img{width:auto; max-width:100%; object-fit:contain}
.logos .bw-logo img{height:36px}
.logos .cwru-logo img{height:26px}
.logos .cpl-logo img{height:44px}
.logos .csu-logo img{height:38px}
.logos .ccpl-logo img{height:50px}
.logos .jcu-logo img{height:28px}
.lead-row img{width:auto; height:88px; object-fit:contain}
/* ---------- THE ONE BUTTON SHAPE ---------- */
.close{padding:52px var(--pad) 58px; text-align:center; overflow:hidden}
/* Home is a centred page throughout, so a centred closer belongs there. The
interior pages are left-aligned, and inheriting the centred block made them
switch alignment for their last 200px — the stray centred "Be sure to get a
seat!" being the tell. Interior pages align it with their own text. */
.page ~ .close{text-align:left}
.page ~ .close .cta{margin-left:0; margin-right:0}
.page ~ .close .note{margin-left:0; text-align:left}
.close .note{margin:24px auto 0; max-width:26em; font-size:var(--fs-3);
line-height:var(--lh-mid); font-weight:700; color:var(--navy);
text-wrap:balance}
/* .close-top — the same button shape used mid-page instead of as the closer, so
the ask can sit where the reader is rather than two scrolls below (Susan
8/19, Register). It lives INSIDE .page, so the `.page ~ .close` sibling rules
above don't reach it and it re-states the left alignment itself; .page already
supplies the horizontal padding, so this drops the section's own. */
.page .close-top{padding:30px 0 44px; text-align:left}
.page .close-top .cta{margin-left:0; margin-right:0}
.page .close-top .note{margin-left:0; text-align:left}
/* The quiet counterpart to .close-top: closing text link on a page whose button
has moved up. Set apart from the body copy above it so it reads as a coda, and
left at prose size — it is a courtesy exit, not a competing CTA. */
.prose p.coda-link{margin-top:30px; margin-bottom:0}
.prose p.coda-link a{font-weight:700}
/* Facts, then the button. The keyfacts closing hairline would land a rule
directly on top of the button's own outline — two edges doing one job. */
.keyfacts:has(+ .close-top){border-bottom:0; padding-bottom:2px; margin-bottom:0}
.cta{
display:block; width:100%; max-width:480px; margin:0 auto;
/* white, outlined in navy, so it reads as the page's one button shape without
competing with the red reserved elsewhere in the brand kit */
background:#fff; color:var(--navy); text-decoration:none; text-align:center;
padding:22px 30px; font-weight:700; text-wrap:balance;
box-shadow:inset 0 0 0 2px var(--red), 0 7px 0 rgba(9,31,64,.22);
transition:transform .18s ease, box-shadow .18s ease, background .15s ease, color .15s ease;
}
.cta .cta-main{display:block; font-family:var(--serif); font-weight:400;
/* deliberately NOT --fs-1: at 96px the word "Join Us" read as a headline
competing with the page rather than as a button. Tops out well below it. */
font-size:clamp(34px,4.4vw,56px); line-height:var(--lh-tight);
letter-spacing:-.02em; margin-bottom:10px}
.cta .cta-sub{display:block; font-family:var(--sans); font-size:var(--fs-3);
font-weight:400; line-height:var(--lh-mid)}
.cta:hover{background:var(--navy); color:var(--off);
transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--red), 0 11px 0 rgba(9,31,64,.22)}
/* ---------- WAYS TO JOIN US ---------- */
.actions{padding:44px var(--pad) 52px; display:grid; gap:12px; align-items:start}
.act{display:flex; align-items:stretch; gap:12px; width:100%; text-align:left;
text-decoration:none; border:0; cursor:pointer;
background:var(--navy); color:var(--off); padding:16px 18px; font-family:inherit;
transition:background .15s ease}
.act-i{flex:0 0 auto; align-self:flex-start; width:24px; height:24px; margin-top:1px}
.act-x{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.act-t{display:block; font-weight:700; font-size:var(--fs-3); line-height:var(--lh-mid)}
.act-s{display:block; font-size:var(--fs-4); line-height:var(--lh-mid); opacity:.8;
margin-top:auto; padding-top:4px}
.act:hover{background:var(--gold); color:var(--navy)}
.act-wrap{position:relative; display:flex}
.act-wrap .act{height:100%}
.tray{position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:20;
background:var(--warm); padding:14px 10px; box-shadow:0 6px 18px rgba(9,31,64,.22);
display:flex; flex-wrap:wrap; gap:10px 6px; justify-content:space-between; align-items:flex-start}
.tray::after{content:""; position:absolute; left:24px; bottom:-7px; width:14px; height:14px;
background:var(--warm); transform:rotate(45deg)}
.tray[hidden]{display:none}
.ic{flex:1 1 60px; display:flex; flex-direction:column; align-items:center; gap:4px;
background:none; border:0; cursor:pointer; text-decoration:none; color:var(--navy);
padding:0; font-family:inherit}
.ic svg{width:24px; height:24px}
.ic span{font-size:var(--fs-5); line-height:var(--lh-mid); text-align:center}
.ic:hover{color:var(--gold)}
/* ---------- FOOTER ---------- */
footer{background:var(--navy); color:var(--off); padding:26px var(--pad) 22px}
footer .in{display:grid; gap:20px}
footer h4, footer h2{margin:0 0 10px; font-family:var(--serif);
font-weight:400; font-size:var(--fs-4); color:var(--gold); line-height:var(--lh-mid);
letter-spacing:0}
footer p{margin:0 0 9px; font-size:var(--fs-5); line-height:var(--lh-body)}
footer ul{margin:0; padding:0; list-style:none}
footer li{margin:0 0 8px; font-size:var(--fs-5); line-height:var(--lh-body)}
footer a{color:var(--off); text-decoration:underline; text-underline-offset:3px}
footer a:hover{color:var(--gold)}
footer .legal{opacity:.75; font-size:var(--fs-5); line-height:var(--lh-body); margin-top:14px;
border-top:1px solid rgba(244,240,235,.25); padding-top:12px}
/* ============================================================
MICROSITE ADDITIONS
Everything above this line is the approved landing page. Below
is what the landing page never needed: real navigation and
interior pages.
============================================================ */
/* ---------- NAV ----------
Deliberately quiet. The logo lockup is the page's voice; the nav is
wayfinding, so it runs at the type floor in the sans and gets its
emphasis from a gold rule on the current page rather than from
size or colour. Horizontally scrollable on a phone rather than
collapsed behind a hamburger — six items fit, and a burger would
hide the two pages people are actually arriving to see. */
.nav{background:var(--off); border-bottom:1px solid rgba(9,31,64,.15);
position:sticky; top:0; z-index:60}
.nav-in{max-width:1240px; margin:0 auto; padding:0 var(--pad);
display:flex; align-items:center; gap:18px; min-height:64px;
/* Collapses behind a toggle below 820px. The scroll version hid half the
nav with no affordance; the wrapped version showed everything but cost a
second row of height on every page. The toggle costs one tap and keeps
the header one line tall. */
flex-wrap:wrap; row-gap:0; justify-content:space-between}
/* The mark doubles as the home link, and its height sets the header height.
This is a stacked display lockup — script "Sing Out" over a rule, over
"democracy" in serif, with a quill and staff crossing both — so it does
not reduce like a horizontal wordmark. Rendered at 36 and 48px it is
mush; 60px is the floor where both words hold, which is why the desktop
header is 78px tall rather than a conventional 56–64.
The client has an open ask for a short-form variant "to use here and
there (not substituting)". That variant is what this slot actually wants;
until it exists the header is sized around the lockup we have. */
.nav-brand{flex:0 0 auto; display:block; line-height:0; padding:8px 0}
.nav-brand img{height:48px; width:auto}
.nav-brand:hover{opacity:.75}
/* The mark shows on every page including home (Jeremy, 8/14) — so yes, home
carries it twice, once here and once as the hero lockup below. The slot was
already reserved sitewide to stop the menu jumping between pages, so showing
it here changes nothing structurally. */
.nav ul{list-style:none; margin:0; padding:0; display:none;
width:100%; flex-direction:column; align-items:stretch;
border-top:1px solid rgba(9,31,64,.15)}
.nav[data-open="true"] ul{display:flex}
.nav li{flex:0 0 auto}
/* the toggle itself — a labelled control, not a bare glyph */
.nav-toggle{display:flex; align-items:center; gap:9px; margin-left:auto;
background:none; border:0; cursor:pointer; font-family:inherit;
font-size:var(--fs-5); font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--navy); padding:12px 2px}
.nav-bars{position:relative; display:block; width:22px; height:2px;
background:currentColor; transition:background .12s ease}
.nav-bars::before,.nav-bars::after{content:""; position:absolute; left:0;
width:22px; height:2px; background:currentColor; transition:transform .16s ease}
.nav-bars::before{top:-7px}
.nav-bars::after{top:7px}
/* becomes a close mark while open */
.nav[data-open="true"] .nav-bars{background:transparent}
.nav[data-open="true"] .nav-bars::before{transform:translateY(7px) rotate(45deg)}
.nav[data-open="true"] .nav-bars::after{transform:translateY(-7px) rotate(-45deg)}
@media (min-width:820px){
.nav-toggle{display:none}
.nav ul{display:flex; width:auto; flex-direction:row; align-items:center;
gap:0 2px; border-top:0}
}
.nav li{flex:0 0 auto}
.nav a.nav-l{display:block; padding:15px 10px; font-size:var(--fs-5); font-weight:700;
letter-spacing:.04em; text-transform:uppercase; color:var(--navy);
text-decoration:none; white-space:nowrap;
border-bottom:3px solid transparent; transition:color .14s ease, border-color .14s ease}
.nav a.nav-l:hover{color:var(--gold)}
/* current page is marked by a body attribute rather than a templated
aria-current, so the nav partial stays a static file with no logic in it */
[data-page="home"] .nav a.nav-l[href="/"],
[data-page="about"] .nav a.nav-l[href="/about"],
[data-page="give"] .nav a.nav-l[href="/give"],
[data-page="donors"] .nav a.nav-l[href="/donors"],
[data-page="supporters"] .nav a.nav-l[href="/supporters"],
[data-page="register"] .nav a.nav-l[href="/register"],
[data-page="contact"] .nav a.nav-l[href="/contact"]{border-bottom-color:var(--gold)}
/* stacked, a bottom rule reads as a divider — mark the current row on its left */
@media (max-width:819px){
.nav a.nav-l{border-bottom:0; border-left:3px solid transparent; padding-left:14px}
[data-page="home"] .nav a.nav-l[href="/"],
[data-page="about"] .nav a.nav-l[href="/about"],
[data-page="give"] .nav a.nav-l[href="/give"],
[data-page="donors"] .nav a.nav-l[href="/donors"],
[data-page="supporters"] .nav a.nav-l[href="/supporters"],
[data-page="register"] .nav a.nav-l[href="/register"],
[data-page="contact"] .nav a.nav-l[href="/contact"]{border-left-color:var(--gold)}
}
/* skip link — six nav items sit between the top of the page and the
content on every interior page, so keyboard users get a way past them */
.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:var(--off);
padding:10px 16px; z-index:100; text-decoration:none}
.skip:focus{left:0}
/* ---------- INTERIOR PAGE SHELL ---------- */
.page{padding:40px var(--pad) 20px; max-width:1240px; margin:0 auto}
.page-head{max-width:820px; margin:0 0 52px}
.page h1{margin:0 0 26px; font-family:var(--serif); font-weight:400;
font-size:var(--fs-2); line-height:var(--lh-tight); letter-spacing:-.02em;
color:var(--navy); text-wrap:balance}
.page .standfirst{margin:0 0 14px; font-size:var(--fs-3); line-height:var(--lh-mid);
color:var(--navy); text-wrap:pretty}
.page .standfirst:last-child{margin-bottom:0}
/* one step down, for the disclaimer that precedes the ask on /sponsors */
.page .standfirst.sf-small{font-size:var(--fs-4)}
/* same gold emphasis the landing page hero uses */
.page .standfirst strong{font-weight:700; color:var(--gold)}
/* body prose — measure capped so long text stays readable at desktop */
.prose{max-width:68ch}
.prose h2{margin:56px 0 20px; font-family:var(--serif); font-weight:400;
font-size:var(--fs-3); line-height:var(--lh-mid); color:var(--navy)}
.prose h2:first-child{margin-top:0}
/* Section heads carry a hairline rule here for the same reason .list-head does
on Donors/Supporters — Susan 8/17 asked that underlining mark section starts
consistently instead of only on the list pages. Direct-child selector so the
small bold labels inside .panel cards are left alone; those are card labels,
not section heads. */
.prose > h2{padding-bottom:12px; border-bottom:1px solid rgba(9,31,64,.2)}
.prose p{margin:0 0 22px; font-size:var(--fs-4); line-height:1.62}
.prose ul{margin:0 0 16px; padding:0; list-style:none}
.prose ul li{position:relative; margin:0 0 12px; padding-left:20px;
font-size:var(--fs-4); line-height:var(--lh-body)}
.prose ul li::before{content:""; position:absolute; left:0; top:.72em;
width:8px; height:1px; background:var(--gold)}
/* a plain bulleted list, where the gold-dash marker would read as decoration
rather than as a list — used for the expense breakdown on /sponsors */
.prose ul.bullets{padding-left:24px; list-style:disc}
.prose ul.bullets li{padding-left:2px; margin-bottom:8px}
.prose ul.bullets li::before{display:none}
.prose ul.bullets li::marker{color:var(--gold)}
.prose a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--gold)}
.prose a:hover{color:var(--gold)}
.prose strong{font-weight:700}
/* Subheads inside prose (Voter Registration / Pocket Constitutions on About).
Deliberately the same treatment as .panel h3 below — Susan's 8/17 note asked
that heading sizes stop varying page to page, so every h3 on the site is one
size, one weight, one family regardless of what it sits inside. */
.prose h3{margin:26px 0 8px; font-size:var(--fs-4); font-weight:700;
color:var(--navy); font-family:var(--sans); line-height:var(--lh-mid)}
/* a fact/aside panel — the gold-keyed sibling of the navy tiles */
.panel{background:#fff; padding:28px 30px; margin:0 0 30px;
box-shadow:inset 0 0 0 1px rgba(9,31,64,.16)}
/* panel headings are h2 at top level, h3 when nested — same look either way */
.panel h3, .panel h2{margin:0 0 10px; font-size:var(--fs-4); font-weight:700;
color:var(--navy); font-family:var(--sans); line-height:var(--lh-mid)}
.panel p{margin:0 0 10px; font-size:var(--fs-4); line-height:var(--lh-body)}
.panel p:last-child{margin-bottom:0}
/* About has no page title above its sections, so its opening h1 ("What") runs
at page-title size and stands in for one.
Its h2s used to run at --fs-2 as well, which made About's section heads a
full step larger than the same-rank heads on every other page — the font-size
inconsistency Susan flagged 8/17. They now sit at the shared --fs-3 like
Register's and Donors', so section heads are one size site-wide and About
keeps a clean h1 > h2 > h3 ladder (fs-2 / fs-3 / fs-4). */
/* About's h1 now lives in .page-head like every other page, so the old
.prose h1 override here is gone. Only the section rhythm is About-specific. */
[data-page="about"] .prose h2{margin:64px 0 22px}
/* ---------- KEY FACTS ----------
Date, time and place, called out. Gold rule and display serif rather than
red: the 8/4 review reserves red for primary CTAs, and using it here would
set it against the Register button a screen below. */
.keyfacts{margin:0 0 38px; padding:26px 0 24px;
border-top:3px solid var(--gold); border-bottom:1px solid rgba(9,31,64,.2)}
.keyfacts dl{margin:0; display:grid; gap:22px}
.keyfacts dt{font-size:var(--fs-5); font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--gold); margin-bottom:6px}
.keyfacts dd strong{font-weight:400}
.keyfacts dd{margin:0; font-family:var(--serif); font-size:var(--fs-3);
line-height:var(--lh-mid); color:var(--navy)}
.keyfacts .kf-sub{display:block; margin-top:7px; font-family:var(--sans);
font-size:var(--fs-4); line-height:var(--lh-body); opacity:.8}
@media (min-width:700px){ .keyfacts dl{grid-template-columns:repeat(3,1fr); gap:36px} }
/* ---------- NAME LIST ----------
The /supporters and /sponsors pages are the same component with two
datasets. Names set in the display serif and run in columns — the
reference is the Declaration itself, not a donor wall. `columns`
rather than grid so the list reflows to a natural column count and
stays alphabetical DOWN each column, which is how a reader scans
for their own name. */
.names{margin:0; padding:0; list-style:none;
columns:2; column-gap:26px}
.names li{break-inside:avoid; margin:0 0 17px;
font-family:var(--serif); font-size:var(--fs-4); line-height:var(--lh-mid);
color:var(--navy)}
.names a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--gold)}
.names a:hover{color:var(--gold)}
.list-head{margin:0 0 28px; padding-bottom:14px;
border-bottom:1px solid rgba(9,31,64,.2)}
.list-head h2{margin:0; font-family:var(--serif); font-weight:400;
font-size:var(--fs-3); line-height:var(--lh-mid); color:var(--navy)}
/* Amy's markup (PDF p.7) pencils "DIFFERENT COLOR?" against the Supporters
lead-in. Brand gold (#c1862b) is only 2.77:1 on --off and fails WCAG AA for
text this size; --red is reserved for primary CTAs by the 8/4 review. This is
gold held at its own hue (36deg) and saturation but darkened to clear AA at
5.17:1 — reads as the brand accent, not a new colour in the palette. */
.list-head.lh-accent h2{color:#855d1e}
/* Amy's second add-your-name line sits under a 133-name list; it needs real
separation or it reads as the last entry. Needs `.page` on the selector to
outrank `.page .standfirst`, which zeroes the margin on a last child. */
.page .standfirst.names-note{margin:44px 0 0}
/* Status label above both the Donors and Supporters lists, so neither reads as
final while names are still coming in. Reads "In Formation" — Amy's wording in
both her 8/14 markup and her 8/17 email, and deliberate: the list is still
being assembled. It was briefly changed to "Information" on 8/17 and changed
back the same day, so do not "correct" it again. One class, used on both
pages, so the two say it identically. */
.list-status{display:inline-block; margin:0 0 14px; font-family:var(--sans);
font-size:var(--fs-5); font-weight:700; letter-spacing:.04em;
text-transform:uppercase; color:var(--gold)}
/* ---------- PHOTOGRAPHY ----------
The client's imagery rule (8/4 review): chorus in performance, faces not
fully identifiable, profile-style shots of a group clearly singing. No
unorganized crowds, no audiences with hands raised, no flag framing.
These are stock stand-ins — alt text describes what is pictured and never
implies it is the Sing Out chorus. */
.photo{margin:0 0 36px}
.photo img{width:100%; height:auto; display:block}
/* the wide strip runs edge to edge of the content column and crops tighter */
.photo.strip img{max-height:300px; object-fit:cover}
/* an image set into the running text rather than across it. Floats only once
there is a column wide enough to bother — below that it goes full-width
like every other photo. */
.photo.inline{margin-bottom:24px}
@media (min-width:820px){
.photo.inline{max-width:42%}
.photo.inline.right{float:right; margin:6px 0 26px 38px}
.photo.inline.left{float:left; margin:6px 38px 26px 0}
}
/* the prose block has to contain its own floats */
.prose::after{content:""; display:table; clear:both}
/* a screenshot of somebody else's interface, set inside a panel. Bordered so
it reads as a picture of a screen rather than as part of this page. */
.shot{margin:22px 0 0}
.shot img{width:100%; height:auto; display:block; box-shadow:0 0 0 1px rgba(9,31,64,.18)}
.shot figcaption{margin-top:10px; font-size:var(--fs-5); line-height:var(--lh-body);
color:var(--navy); opacity:.8}
/* ---------- ARRIVAL DIAGRAM ----------
Inline SVG rather than an ![]()
so it inherits the site's typefaces and
scales with the page. Geometry is simplified from Tri-C's published
Eastern Campus map; the caption links to the real one. */
.diagram{margin:0 0 34px; max-width:820px}
.diagram svg{width:100%; height:auto; display:block; background:#fbf9f6}
.diagram figcaption{margin-top:10px; font-size:var(--fs-5); line-height:var(--lh-body);
color:var(--navy); opacity:.75}
.diagram figcaption a{color:var(--navy); text-decoration:underline;
text-underline-offset:3px; text-decoration-color:var(--gold)}
/* labels sit on a photograph, so each one gets an opaque chip behind it —
white-on-imagery is unreadable the moment the tile underneath is pale */
.m-chip rect{fill:#f4f0eb; opacity:.94}
.m-chip text{font-family:var(--sans); font-size:34px; font-weight:700; fill:#091f40}
.m-chip.m-small text{font-size:28px}
.m-chip.m-muted text{font-weight:400; fill:#4a4436}
.d-road{font-family:var(--sans); font-size:13px; font-weight:700;
letter-spacing:.08em; fill:#8a8272}
.d-lot rect{fill:#d8cfc0}
.d-lot text{font-family:var(--sans); font-size:14px; font-weight:700;
fill:#5c5648; text-anchor:middle}
.d-bldg{font-family:var(--serif); font-size:21px; fill:#f4f0eb; text-anchor:middle}
.d-bldg-sub{font-family:var(--sans); font-size:15px; fill:#c1862b; text-anchor:middle}
.d-note{font-family:var(--sans); font-size:15px; fill:#091f40}
.d-no line{stroke:#9a9182; stroke-width:12}
.d-no path{stroke:#9a9182; stroke-width:2.6; stroke-linecap:round; fill:none}
/* ---------- ORG LIST ----------
The education partners carry their own marks rather than generic icons.
Aspect ratios run from about 1.2:1 to 10:1, so each mark sits in a fixed
slot — that keeps the names in a straight column instead of running ragged
behind logos of wildly different widths. The ![]()
is alt="" because the
link beside it already names the organisation. */
.orgs{list-style:none; margin:0; padding:0; display:grid; gap:30px}
.orgs li{display:flex; align-items:center; gap:16px}
.org-mark{flex:0 0 auto; width:150px; height:62px;
display:flex; align-items:center; justify-content:center}
.org-mark img{max-width:100%; max-height:62px; width:auto; height:auto; object-fit:contain}
/* Tri-C is the lead partner and its mark is always the largest — the 8/4 rule
applies here the same as it does to the logo row on Home. */
.orgs li:first-child .org-mark{height:88px}
.orgs li:first-child .org-mark img{max-height:88px}
.orgs a{font-family:var(--serif); font-size:var(--fs-4); color:var(--navy);
text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold)}
.orgs a:hover{color:var(--gold)}
/* Donors recognised by logo rather than by name — the Gund Foundation asked
for exactly that. Sits above the names in its level. */
.donor-logos{display:flex; flex-wrap:wrap; align-items:center; gap:28px 40px;
margin:0 0 30px}
/* Do not let a mark shrink to fit a line — wrap it to the next one instead. The
default flex-shrink:1 collapsed the third logo to 0x0 at 375px, because the
remainder of its line was narrower than the mark and max-width:100% then
resolved against a zero-width box. Caught on mobile when Medical Mutual was
added; the same trap was waiting for the other two at narrow widths. */
.donor-logos > a{flex:0 0 auto}
/* Definite height, width from the aspect ratio. NOT max-height: combining
max-height with width:auto and a percentage max-width is circular — the
width depends on the height cap, and max-width:100% depends on a parent
whose width depends on the content — and Chrome resolved that circle by
collapsing the mark to 0x0 on a wrapped flex line at 375px. A definite
height makes the used width definite too, so nothing is circular. */
.donor-logos img{height:auto; width:auto; max-width:100%}
.donor-logos a:hover{opacity:.75}
/* Heights are tuned per mark here, same as the .logos row on home: Gund is a
dense stacked block and KeyBank is a wide horizontal lockup, so matching them
on height alone makes KeyBank read about twice the weight.
23px is measured, not guessed: Gund's cap height is 41px in a 206px-tall
source, so it renders at ~14.7px. KeyBank's wordmark occupies 43.5 of its
68.6 viewBox, so 14.7 / (43.5/68.6) = ~23px total gives matching lettering. */
.donor-logos img.gund-mark{height:74px}
.donor-logos img.kb-mark{height:23px}
/* Medical Mutual, same method: its all-caps letterforms are 10.6 of a 22.51-tall
viewBox (measured via getBBox, not eyeballed), so 14.7 / (10.6/22.51) = ~31px
total puts its lettering level with Gund's and KeyBank's. */
.donor-logos img.mm-mark{height:31px}
/* Bottoms aligned, not centres: the two marks are wildly different heights, and
sitting them on a shared baseline is what makes the row read as headers above
the columns rather than as free-floating art. */
.donor-logos{align-items:end}
/* ---------- TIERS ----------
Hanging rows, not cards. The amounts hang in their own column so the four
levels read as one ascending scale, and the recognition name gets display
size — it is the thing being offered, so it leads. Hairlines only; a boxed
card would make four equal options out of a progression. */
.tiers{border-top:1px solid rgba(9,31,64,.35); margin:0 0 34px}
.tier{display:grid; grid-template-columns:1fr; gap:2px;
padding:18px 0; border-bottom:1px solid rgba(9,31,64,.18)}
.t-amt{font-family:var(--serif); font-size:34px; line-height:1.1; color:var(--gold)}
.t-nm{font-size:var(--fs-3); line-height:var(--lh-mid); color:var(--navy)}
.t-who{margin-top:5px; font-size:var(--fs-5); line-height:var(--lh-body);
color:var(--navy); opacity:.75}
/* the $2,500 label is unresolved. The "name pending" note is real text in the
markup, not CSS `content` — generated content is not selectable, not
translatable, and is skipped by some screen readers. */
.tier.pending .t-nm{opacity:.55}
.tier .pending-note{font-style:italic}
/* ============================================================
ENHANCEMENT — tablet
Layout only. Every size on the page comes from the five tokens.
============================================================ */
@media (min-width:700px){
:root{--pad:36px}
.tenets{max-width:820px; padding-bottom:44px;
grid-template-columns:repeat(3,1fr); gap:0 24px}
.tenets li span{display:block}
.hero-copy{margin-top:44px; padding-bottom:22px}
.hero-copy p{margin-bottom:18px}
.hero-cards{grid-template-columns:1fr 1fr; gap:22px; padding-bottom:56px; max-width:820px}
.hero-cards .cta{grid-column:1/-1; width:76%; min-width:340px; max-width:620px; margin:0 auto}
.hero-note{grid-column:1/-1}
.ci{padding:24px}
.lockup img{max-width:600px}
.lockup{padding:16px var(--pad) 28px}
.rule{max-width:600px}
.sponsors{padding:38px 10px 26px}
.lead-row{margin-bottom:24px}
.lead-row img{height:104px}
.close{padding:64px var(--pad) 72px}
.actions{grid-template-columns:repeat(3,1fr); gap:16px; padding:52px var(--pad) 60px;
align-items:stretch}
.act{padding:22px 20px; height:100%}
.act-wrap{height:100%}
.cta{padding:30px 36px}
footer{padding:34px var(--pad) 28px}
footer .in{grid-template-columns:repeat(2,1fr); gap:26px}
footer .legal{grid-column:1/-1}
/* microsite */
.nav-in{min-height:78px}
.nav-brand img{height:60px}
.page{padding:54px var(--pad) 28px}
.names{columns:2}
.orgs{grid-template-columns:repeat(2,1fr); gap:18px 44px}
.tier{grid-template-columns:150px 1fr; gap:28px}
}
/* ============================================================
ENHANCEMENT — desktop
============================================================ */
@media (min-width:1100px){
:root{--pad:64px}
.hero h1 img{max-width:620px}
.tenets{max-width:1100px; padding-bottom:52px; gap:0 40px}
.hero-copy{margin-top:34px; padding-bottom:18px; max-width:900px}
.hero-copy p{margin-bottom:16px}
.hero-cards{max-width:1000px; gap:28px; padding-bottom:64px}
.ci{padding:28px 30px}
.lockup img{max-width:760px}
.lockup{padding:20px var(--pad) 34px}
.rule{max-width:760px}
.close{padding:76px var(--pad) 84px}
.sponsors{max-width:1240px; margin:0 auto; padding:46px 16px 32px}
.lead-row{margin-bottom:28px}
.lead-row img{height:120px}
footer .in{max-width:1240px; margin:0 auto; grid-template-columns:repeat(4,1fr); gap:28px}
/* microsite */
.page{padding:64px var(--pad) 36px}
.names{columns:4}
/* Jeremy 8/19: at four columns the logo row reads better centred over the
list than parked at the left edge. Same 4x geometry and column-gap as
.names, with the first mark starting in column 2 — so Gund sits over Ann &
Lance Hill and KeyBank auto-flows into column 3, over Amy & Marc
Morgenstern. Start-position rather than nth-child, so a third logo lands in
column 4 and the row stays centred on the middle of the list. */
.donor-logos{display:grid; grid-template-columns:repeat(4,1fr);
column-gap:26px; row-gap:24px; margin-bottom:24px}
.donor-logos > :first-child{grid-column-start:2}
.donor-logos a{display:block}
/* PINNED COLUMN BREAKS — read before editing the Stellar Sponsors list.
Amy has twice named the specific person each logo should sit above: Gund
over Ann & Lance Hill (8/18), KeyBank over Amy & Marc Morgenstern (8/18),
Medical Mutual over Sarah's Fund (8/19). Those three pairings only line up
if the nine names break 3/2/2/2 down the columns. Left to itself the
browser balances nine items as 3/3/2/1, which slides Morgenstern up into
column 2 and leaves Wuliger alone in column 4 — so KeyBank would sit over
Rawson and Medical Mutual over Wuliger, and she would flag it again.
Forcing a break after items 3, 5 and 7 gives the 3/2/2/2 she is describing.
THIS IS POSITIONAL AND WILL GO STALE: if a Stellar Sponsor is added or
removed, these nth-child numbers must be rechecked, or the logos will drift
off the names they belong to. Only this one list is affected — Supporters
and the other two donor tiers still balance naturally. */
.names-pinned li:nth-child(3),
.names-pinned li:nth-child(5),
.names-pinned li:nth-child(7){break-after:column}
.tier{grid-template-columns:170px 1fr; gap:34px; padding:22px 0}
}