/* Grasso Pollinator Alliance
Mobile-first stylesheet. Base styles target ~390px phones.
Breakpoints: 640px (large phone / small tablet), 900px (desktop). */
:root {
--green-deep: #1c3527;
--green: #2c5a3f;
--green-soft: #4a7a5c;
--gold: #e8a921;
--gold-soft: #f5c95c;
--monarch: #d96c2f;
/* Same hue, darkened to clear 4.5:1 on cream. For small bold text only
(kickers); --monarch stays as-is for large type, icons and rules. */
--monarch-text: #b8511a;
--cream: #faf7ef;
--cream-dark: #f1ecdd;
--ink: #22301f;
--ink-soft: #55604f;
--white: #ffffff;
--radius: 16px;
--shadow: 0 10px 30px rgba(28, 53, 39, 0.12);
--font-display: "Fraunces", Georgia, serif;
--font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
--header-h: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--cream);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
/* height:auto is required, not cosmetic. Every , which beats any
colour inherited from the card. That is why the $700 / $1,200 seed packet
copy rendered cream-on-cream and was invisible until you selected it.
============================================================ */
.section-green :is(.tier, .card) :is(p, li, h3, h4) { color: var(--ink); }
.section-green :is(.tier, .card) { color: var(--ink); }
/* ============================================================
Lightbox on small screens
At 94vw the opened image was barely larger than the 72vw thumbnail it
came from, so on a phone it read as "the picture shifted" rather than
"it opened". Go genuinely edge to edge and make the close target obvious.
============================================================ */
@media (max-width: 700px) {
.lightbox { padding: 0; }
.lightbox img {
max-width: 100vw;
max-height: 88vh;
border-radius: 0;
}
.lightbox .lb-close {
top: 10px;
right: 10px;
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.lightbox .lb-nav { width: 44px; height: 44px; }
}
/* Opening the lightbox sets overflow:hidden on
, which on iOS can jump
the page. Pin the scroll position instead so it reopens where you left off. */
body.lb-locked { position: fixed; width: 100%; }
/* ============================================================
Contrast corrections found by a full-site sweep, 2026-08-10
============================================================ */
/* A7 regression. --monarch-text was darkened to clear 4.5:1 on cream, which
made it worse on the dark green sections (2.66:1). Gold is the site's own
answer there at 6.38:1, and it is what the hand-written inline styles on
monarchs.html were already doing. Excluded on plain pages, which have no
dark ground left. */
body:not(.page-monarchs):not(.page-hummingbirds):not(.page-native-bees)
.section-green :is(.kicker, .band-kicker) { color: var(--gold); }
/* Light cards sitting inside dark sections. `.section-green h3/p` paints cream
straight onto the element, which beats anything inherited from the card, so
every light card has to be named. This is the seed-packet bug; the sweep
also found it on the featured event cards. */
.section-green :is(.tier, .card, .event-card, .holiday-card, .sponsor-card, .profile-card)
:is(p, li, h2, h3, h4, figcaption, .event-meta) { color: var(--ink); }
.section-green :is(.tier, .card, .event-card, .holiday-card, .sponsor-card, .profile-card) { color: var(--ink); }
/* The flyer is a real . A bare