/* Donation page v2 ("generated identity"). Scoped under body.sgv2 so it cannot reach the original donation page, the donation form's own stylesheet, or any admin surface. The accent-derived custom properties (--accent, --on-accent, --accent-ink, --deep, --tintA, --tintB) are set inline on by donation_page_v2.php. */ body.sgv2 { /* 4px spacing scale — every gap, padding and margin below comes from it */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; /* Page measure. Set per page by the width class below rather than fixed at 1120px, so a campaign with little to say does not get a half-empty column beside the form — see the $bandName block in donation_page_v2.php. */ --band: 1120px; --ink: #14181F; --ink2: #303947; --muted: #667085; --faint: #98A2B3; --line: #E4E7EC; --hair: #F0F1F4; --soft: #F6F7F9; --card: #FFFFFF; margin: 0; background: var(--soft); color: var(--ink); font-family: avenirnext, "Avenir Next", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; } /* Something to read, but not much: the story column narrows to sit level with the form instead of trailing off into whitespace. It stops at 1040px and not lower because the band is spent on the form before the story sees any of it — 400px of form and 40px of gap come off the top, so 940px left the prose at 49 characters a line, well under the 60-75 that reads comfortably. 1040 restores 60 and is still visibly tighter than the full band's 69. */ body.sgv2.sgv2-w-light { --band: 1040px; } /* Nothing to read at all — no banner, no meter, no story. The ask is the whole page, so every band narrows to it and the composition is centred on purpose: a full-bleed hero over a lone 400px card is what looked accidental. */ body.sgv2.sgv2-w-solo { --band: 720px; } body.sgv2.sgv2-w-solo .sgv2-hero-in { text-align: center; } body.sgv2.sgv2-w-solo .sgv2-hero h1 { max-width: 20ch; margin: 0 auto; } body.sgv2.sgv2-w-solo .sgv2-sub { max-width: 46ch; margin-left: auto; margin-right: auto; } body.sgv2.sgv2-w-solo .sgv2-foot-in { justify-content: center; text-align: center; } /* A short campaign does not fill a tall screen, and the leftover used to show as a band of page ground *below* the footer with the footer floating in the middle of the display — worse the taller the monitor (142px at 1200px tall). The page is a flex column instead, so the slack lands above the footer where the ground already is. border-box matters here: .sgv2-has-cta adds padding-bottom for the pinned bar, which would otherwise be added to the 100dvh and put a scrollbar on every phone. */ /* Every declaration below the first two is answering checkout.css, which is global, unscoped, and loaded on this page by the embedded donation form. It sets `justify-content: center; align-content: center; height: 100vh; width: 100vw` on a bare `body` — with its own `display: flex` COMMENTED OUT, so all four sat dormant for years. Turning this body into a flex container re-armed them: a page taller than the 100vh body got centred, and its first 373px went above the top edge where no scroll can reach (the top bar and the top third of the poster simply vanished on /dmv-bros-camping-2026-...). Do not trim these back to what "looks needed" — each one is load-bearing, and the bug is invisible until the page is taller than the viewport. */ body.sgv2 { min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; align-content: normal; align-items: normal; height: auto; width: auto; box-sizing: border-box; } body.sgv2 > main { flex: 1 0 auto; } body.sgv2 *, body.sgv2 *::before, body.sgv2 *::after { box-sizing: border-box; } body.sgv2 img { display: block; max-width: 100%; } body.sgv2 a { color: var(--accent-ink); } /* ---- top bar ---- */ .sgv2-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s6); background: var(--card); border-bottom: 1px solid var(--line); } .sgv2-brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; } /* Only ever wraps a logo image now; the accent ground and type properties here were for the initials that used to stand in when there was no logo. */ .sgv2-mono { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--s2); overflow: hidden; } .sgv2-mono img { width: 100%; height: 100%; object-fit: contain; background: #fff; } .sgv2-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sgv2-who b { font-size: 14.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sgv2-who em { font-style: normal; font-size: 11.5px; line-height: 1.25; color: var(--faint); } /* ---- poster banner: whole, uncropped, nothing over it ---- A postered page skips the generated hero, and with it every accent surface above the fold: the art used to sit on a plain white slab closed by a hairline, so the brand colour first appeared halfway down the page in the progress bar. The band is now a wash of the account's own accent, fading into the page ground — enough colour to frame the poster and carry the identity, too pale to fight the palette inside the art (which is why it is a tint of the accent and not the accent itself; posters routinely carry colours that clash with the account's brand hex). */ .sgv2-poster { background: linear-gradient(180deg, var(--tintB) 0%, var(--tintA) 52%, var(--soft) 100%); } .sgv2-poster-in { max-width: var(--band); margin: 0 auto; padding: var(--s6) var(--s6) var(--s5); } .sgv2-poster img { width: 100%; height: auto; border-radius: var(--s3); box-shadow: 0 10px 30px rgba(20, 24, 31, .14); } /* ---- generated header, used when there is no banner ---- The colour is held inside a card that lines up exactly with the content below it, rather than flooding the full width of the window. The full-bleed version it replaces had two problems this fixes: it needed the content to be dragged back up over it (.sgv2-lift, now gone), and on a wide monitor it made a band of the account's darkest colour the biggest thing on a page whose subject is a charity, not a brand. Contained, the same colour reads as deliberate — and the page ground shows above and beside it, so a pale or awkward brand hex has somewhere to sit. */ /* width:100% is load-bearing. body.sgv2 is a flex column (the 100dvh footer fix), and an auto cross-axis margin on a flex item switches it from stretch to fit-content — so a band whose content is narrow, as this one's is, shrinks to wrap the headline instead of filling to --band. */ .sgv2-hero { width: 100%; max-width: var(--band); margin: 0 auto; padding: var(--s6); } .sgv2-hero-card { position: relative; overflow: hidden; border-radius: 20px; color: #fff; padding: var(--s12) var(--s10); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--deep) 58%, color-mix(in srgb, var(--deep) 74%, #000) 100%); } /* A single soft highlight, not the old dot grid and 300px monogram watermark. The watermark was the largest element on the page and carried no information; this is atmosphere that never competes with the headline. */ .sgv2-hero-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 130% at 86% 6%, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 62%); } .sgv2-hero-in { position: relative; z-index: 1; } /* The org logo is frequently a wordmark, not a square mark — one live account's is 124x100 — so it gets its natural aspect ratio on a white plaque instead of being squeezed into a 22px circle, where it was an unreadable smudge. */ .sgv2-plaque { display: inline-flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); padding: var(--s2) var(--s4) var(--s2) var(--s3); background: rgba(255,255,255,.94); border-radius: 10px; } .sgv2-plaque img { height: 30px; width: auto; max-width: 170px; object-fit: contain; } /* Left padding is tighter than right so the pill hugs a logo; with no logo the org name sits alone and the two sides match. */ .sgv2-plaque--bare { padding-left: var(--s4); } .sgv2-plaque span { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink); } .sgv2-hero h1 { margin: 0; font-size: 50px; line-height: 1.04; font-weight: 800; letter-spacing: -.04em; max-width: 16ch; text-wrap: pretty; } .sgv2-sub { margin: var(--s4) 0 0; font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 46ch; text-wrap: pretty; } /* ---- layout ---- */ /* One wrapper now. .sgv2-lift existed only to drag the content up over the full-bleed hero; the contained hero has nothing to hang off, so both the poster and the generated header use this. */ .sgv2-plain { width: 100%; max-width: var(--band); margin: 0 auto; padding: var(--s10) var(--s6) var(--s12); } .sgv2-grid { display: grid; gap: var(--s10); align-items: start; } /* the donation form is 400px wide by its own stylesheet */ .sgv2-grid--two { grid-template-columns: minmax(0, 1fr) 400px; } .sgv2-grid--one { grid-template-columns: minmax(0, 400px); justify-content: center; } /* The rail used to carry 96px of padding to clear the lifted card. Nothing is lifted any more, so the story starts level with the ask. */ .sgv2-rail { display: flex; flex-direction: column; gap: var(--s8); min-width: 0; } .sgv2-ask { min-width: 0; } .sgv2-ask #payment-form { margin: 0; } /* The ask follows the reader down the page instead of scrolling away with the story. Only applied when the form actually fits the viewport, because a sticky element taller than the screen can never be scrolled past — the Donate button sits at its bottom and would be pinned permanently out of reach. The .is-sticky class is set from the page's own script, which remeasures on resize and whenever the form changes height. */ @media (min-width: 901px) { .sgv2-ask.is-sticky { position: sticky; top: var(--s6); align-self: start; } } .sgv2-titlerow { display: flex; flex-direction: column; gap: var(--s2); } .sgv2-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); } .sgv2-titlerow h1 { margin: 0; font-size: 36px; line-height: 1.14; font-weight: 800; letter-spacing: -.04em; text-wrap: pretty; } /* ---- progress ---- */ .sgv2-meter { display: flex; flex-direction: column; gap: 14px; padding: var(--s5) var(--s6); background: var(--card); border: 1px solid var(--line); border-radius: 14px; } /* The meter is present but hidden on a campaign whose goal lives on its designations; picking one reveals it. display:flex above would otherwise out-rank the hidden attribute's UA rule. */ .sgv2-meter[hidden] { display: none; } /* Which fund the numbers belong to, once the donor has narrowed to one. */ .sgv2-meter-desig { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); } .sgv2-meter-desig[hidden] { display: none; } .sgv2-meter-nums { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } /* Amount and its qualifier travel together, so .sgv2-meter-nums still has the two children its space-between distribution expects. A flex container takes its baseline from its first item, so the big number still sits on the same baseline as the caption opposite it. */ .sgv2-meter-amt { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; min-width: 0; } /* What the number counts, when it is not plain donations: "monthly recurring", "pledged", "projected". */ .sgv2-meter-kind { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .sgv2-meter-kind[hidden] { display: none; } .sgv2-meter-nums b { font-size: 27px; line-height: 1.1; font-weight: 800; letter-spacing: -.028em; } .sgv2-meter-nums i { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--muted); } .sgv2-bar { height: 8px; border-radius: 999px; background: #EAECF0; overflow: hidden; } .sgv2-bar > div { height: 100%; min-width: 3px; border-radius: 999px; background: var(--accent-ink); } /* ---- story ---- One body, one size: the description renders in the author's own order with no promoted opening paragraph, so there is a single paragraph rule rather than a lead/rest pair. */ .sgv2-story h2 { margin: 0 0 var(--s4); font-size: 24px; line-height: 1.22; font-weight: 800; letter-spacing: -.03em; text-wrap: pretty; } .sgv2-story p { margin: 0 0 var(--s4); font-size: 16px; line-height: 1.7; color: #48505E; text-wrap: pretty; } .sgv2-story p:last-child { margin-bottom: 0; } .sgv2-story strong { font-weight: 800; color: var(--ink); } .sgv2-story h3 { margin: 0 0 var(--s3); font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; } /* Close the scale. Without this the browser's own sizes apply below h3, and they are relative to the root: h4 lands at 16px — identical to a paragraph — while h5 (13px) and h6 (10.7px) come out SMALLER than the body text they introduce. Weight and ink still separate these from a paragraph; only the size steps stop. */ .sgv2-story h4, .sgv2-story h5, .sgv2-story h6 { margin: 0 0 var(--s3); font-size: 16.5px; line-height: 1.35; font-weight: 800; letter-spacing: -.01em; } /* Only a heading that OPENS the description is lifted out and demoted. Plenty of real descriptions bury an

inside wrapper divs the editor emitted, so one can still reach the flow — size it as a section heading rather than letting it land at the browser's 2em and outshout the page title. / .sgv2-story h1 { margin: 0 0 var(--s4); font-size: 24px; line-height: 1.22; font-weight: 800; letter-spacing: -.03em; text-wrap: pretty; } .sgv2-story img { max-width: 100%; height: auto; border-radius: 10px; margin: var(--s2) 0; } / Lists, quotes and figures reach the page now that the story is rendered whole rather than rebuilt from its
tags alone. / .sgv2-story ul, .sgv2-story ol { margin: 0 0 var(--s4); padding-left: 1.35em; } .sgv2-story li { margin: 0 0 var(--s2); font-size: 16px; line-height: 1.7; color: #48505E; } .sgv2-story li:last-child { margin-bottom: 0; } .sgv2-story blockquote { margin: 0 0 var(--s4); padding: var(--s1) 0 var(--s1) var(--s4); border-left: 3px solid var(--accent-ink); color: var(--ink2); font-size: 17px; line-height: 1.6; } .sgv2-story figure { margin: 0 0 var(--s4); } .sgv2-story figcaption { margin-top: var(--s2); font-size: 13px; line-height: 1.45; color: var(--muted); } / campaign copy is pasted rich text: keep wide tables and media in bounds / .sgv2-story table { display: block; overflow-x: auto; max-width: 100%; } .sgv2-story iframe, .sgv2-story video { max-width: 100%; } / ---- reassurance, once, at the ask ---- / .sgv2-trust { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: var(--s4) 0 0; padding: 0 var(--s2); font-size: 11.5px; line-height: 1.5; color: var(--faint); text-align: center; } .sgv2-trust svg { flex-shrink: 0; } / The EIN is a hyphenated number, so a wrap lands inside it ("EIN 80-" / "1234234323") and reads as two numbers. Keep it whole and let the line shrink a little on the narrowest phones instead of breaking. / .sgv2-nb { white-space: nowrap; } @media (max-width: 360px) { .sgv2-trust { font-size: 10.5px; } } / ---- pinned ask (narrow screens only) ---- / / On desktop the sticky column above already keeps the form in view, so this bar is a narrow-screen device: it appears once the form has scrolled out of sight and takes the donor back to it. / .sgv2-cta { display: none; } .sgv2-cta-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .sgv2-cta-tx b { font-size: 13.5px; line-height: 1.25; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sgv2-cta-tx em { font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sgv2-cta-go { / checkout.css sets a global `button { width: 100% }`, which otherwise makes this fill the bar and squeeze the campaign name to zero width. / width: auto; flex: 0 0 auto; border: 0; border-radius: 10px; cursor: pointer; padding: 12px var(--s6); background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 15px; font-weight: 800; } / ---- footer ---- / .sgv2-foot { background: var(--card); border-top: 1px solid var(--line); } / Sized under the masthead, not over it. The footer used to set the org name at 800 weight against the top bar's 700 and its sub-line a shade darker, which made the page's quietest moment louder than its first — 117px of footer against a 63px top bar, for less information. / .sgv2-foot-in { max-width: var(--band); margin: 0 auto; padding: var(--s6); display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; } .sgv2-foot-who { display: flex; align-items: center; gap: var(--s3); } .sgv2-foot-who .sgv2-mono { width: 30px; height: 30px; } .sgv2-foot-who b { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 700; color: var(--ink2); } .sgv2-foot-meta { font-size: 11.5px; line-height: 1.7; color: var(--faint); text-align: right; } .sgv2-foot-meta a { color: var(--muted); } / ---- narrow screens ---- / @media (max-width: 900px) { .sgv2-grid--two { grid-template-columns: minmax(0, 1fr); } / Stacked, the reason comes before the ask: poster, title, progress, story, then the form. The pinned bar below is what keeps the ask reachable while the donor is still reading. / .sgv2-ask #payment-form { max-width: 100%; } .sgv2-cta { display: flex; align-items: center; gap: var(--s3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(20, 24, 31, .10); transform: translateY(110%); transition: transform .22s ease; } .sgv2-cta.is-on { transform: translateY(0); } / keeps the bar from covering the footer once it is showing */ body.sgv2.sgv2-has-cta { padding-bottom: 78px; } } @media (prefers-reduced-motion: reduce) { .sgv2-cta { transition: none; } } @media (max-width: 600px) { .sgv2-topbar { padding: var(--s3) var(--s4); } .sgv2-poster-in { padding: var(--s3) var(--s4); } .sgv2-hero { padding: var(--s4) var(--s4) var(--s4); } .sgv2-hero-card { border-radius: 14px; padding: var(--s8) var(--s5); } .sgv2-hero h1 { font-size: 32px; } .sgv2-plain { padding-left: var(--s4); padding-right: var(--s4); } .sgv2-grid { gap: var(--s8); } .sgv2-titlerow h1 { font-size: 26px; } .sgv2-foot-in { flex-direction: column; align-items: flex-start; padding: var(--s6) var(--s4); } .sgv2-foot-meta { text-align: left; } }