/* rsvp.html styles — Sept 2026. Built on the same token set and structural
conventions as ask-mike.css (theme locked July 9, 2026, "Super, Natural
North Van"). Kept as its own stylesheet rather than folded into a shared
file to match how every other page on this site is already organized.
Follows the same CSP constraint as ask-mike.css: no inline styles anywhere,
including ones set from JavaScript, so all show/hide runs through the
.is-hidden / .is-visible utility classes.
Phase 1 redesign pass, Sept 2026: brought into parity with the rest of the
site — Inter replaces Public Sans as the UI face, the header becomes the
sticky/pill design, a page-hero band replaces the plain eyebrow/, and
the footer matches the new site-wide site-footer template. Form/content
styles below are unchanged from the live page. */
:root {
--evergreen: #17362b;
--pine: #2f5d4a;
--glacier: #2c7f94;
--glacier-dark: #1f6376;
--lake: #24586e;
--pale-pine: #9fc7bd;
--ice: #eceee6;
--snow: #f8f6f1;
--white: #ffffff;
--ink: #2b3a36;
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Newsreader', Georgia, serif;
--font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--snow);
line-height: 1.6;
text-wrap: pretty;
}
header {
position: sticky; top: 0; z-index: 100;
background: rgba(248, 246, 241, 0.92);
backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid rgba(23, 54, 43, 0.08);
}
.header-inner {
/* Sept 2026: nav left-aligned next to the logo (was justify-content:
space-between, which left too little room on the right once "Next
North Van" was added to #site-nav, wrapping Volunteer/Donate to a
second line). .header-cta gets margin-left:auto below to pin it right. */
max-width: 1200px; margin: 0 auto; padding: 0 2rem;
display: flex; justify-content: flex-start; align-items: center;
height: 84px; flex-wrap: wrap; gap: 1.75rem;
}
.wordmark {
display: flex; align-items: center; gap: .45rem;
font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
letter-spacing: -.01em; color: var(--evergreen); text-decoration: none;
}
.wordmark .mark { color: var(--glacier); font-size: 1.1rem; }
.wordmark span { font-weight: 400; font-style: italic; color: var(--pine); }
#site-nav { display: flex; align-items: center; gap: 2px; }
nav a {
color: var(--ink); text-decoration: none;
font-family: var(--font-ui); font-size: .9rem; font-weight: 500;
padding: .55rem .75rem; border-radius: 999px;
transition: background .15s ease, color .15s ease;
}
nav a:hover { background: var(--ice); }
nav a.active { color: var(--evergreen); font-weight: 600; }
.header-cta { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.hdr-btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
padding: .65rem 1.15rem; border-radius: 999px; text-decoration: none;
border: 1.5px solid transparent;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hdr-btn:hover { transform: translateY(-1px); }
.hdr-btn.ghost { background: transparent; border-color: rgba(23,54,43,.14); color: var(--evergreen); }
.hdr-btn.ghost:hover { background: var(--ice); }
.hdr-btn.solid { background: var(--glacier); color: var(--white); }
.hdr-btn.solid:hover { background: var(--glacier-dark); }
.nav-toggle {
display: none;
background: none; border: 1px solid rgba(23,54,43,.14); border-radius: 10px;
cursor: pointer; width: 42px; height: 42px; padding: 0;
flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--evergreen); border-radius: 2px; }
@media (max-width: 760px) {
.header-inner { height: auto; padding: .85rem 1.25rem; }
.nav-toggle { display: flex; }
/* Sept 2026: drop the persistent mobile Donate pill — Mike's read is that
a solid CTA glued next to the hamburger on every page feels pushy on a
phone. Donate and Ask Mike are already regular items inside #site-nav,
so mobile now shows just the wordmark + hamburger, matching the live
site's header. */
.header-cta { order: 2; }
.header-cta .hdr-btn { display: none; }
#site-nav { order: 3; display: none; width: 100%; flex-direction: column; gap: .15rem; margin-top: .5rem; }
#site-nav.open { display: flex; }
nav a { padding: .65rem 1rem; }
}
/* Page hero band — Phase 1 redesign pass, Sept 2026. */
.page-hero {
background: var(--ice);
border-bottom: 1px solid rgba(23, 54, 43, .08);
}
.page-hero-inner {
max-width: 620px; margin: 0 auto; padding: 4rem 1.5rem 3.5rem;
}
.kicker {
font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase; color: var(--glacier);
margin-bottom: .6rem; display: flex; align-items: center; gap: .55rem;
}
.kicker::before {
content: ""; display: inline-block; width: 18px; height: 2px;
background: currentColor; opacity: .65; flex-shrink: 0;
}
h1 {
font-family: var(--font-display); color: var(--evergreen);
font-size: clamp(2.6rem, 4.6vw, 4.2rem); font-weight: 500;
line-height: 1.12; letter-spacing: -.01em; margin-bottom: .75rem;
}
.intro { font-size: 1.1rem; margin-bottom: 0; }
main { max-width: 620px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.when-where {
border-left: 4px solid var(--glacier);
background: var(--ice);
border-radius: 0 6px 6px 0;
padding: .9rem 1.2rem;
font-size: 1.02rem;
margin-bottom: 1.5rem;
}
.when-where .age-note {
font-family: var(--font-ui); font-size: .87rem; color: var(--pine); margin-top: .35rem;
}
.form-wrap {
background: var(--white);
border: 1px solid var(--ice);
border-radius: 6px;
padding: 1.75rem;
}
/* Yes/No as two large tap targets. This is the entire low-friction bet: on a
phone, one thumb tap plus one tap on Send is a complete RSVP. Minimum 64px
tall, comfortably above the ~44px accessibility floor. */
fieldset.choice { border: none; margin-bottom: 1.25rem; }
fieldset.choice legend {
font-family: var(--font-ui); font-size: .9rem; color: var(--pine);
margin-bottom: .6rem; padding: 0;
}
.choice-card {
display: flex; align-items: center; gap: .8rem;
min-height: 64px; padding: .9rem 1.1rem; margin-bottom: .6rem;
border: 2px solid #c9cfcd; border-radius: 6px;
background: var(--snow); cursor: pointer;
font-family: var(--font-ui); font-size: 1.08rem;
transition: border-color .12s, background .12s;
}
.choice-card:hover { border-color: var(--glacier); }
.choice-card input[type=radio] { width: 22px; height: 22px; accent-color: var(--glacier); flex: none; margin: 0; }
.choice-card:has(input:checked) { border-color: var(--glacier); background: var(--ice); }
.choice-card input:focus-visible { outline: 3px solid var(--lake); outline-offset: 2px; }
.extras { margin-bottom: .5rem; }
#guests-field input[type=number] { max-width: 6.5rem; }
label {
display: block; font-size: .9rem; margin-bottom: .25rem; color: var(--pine);
font-family: var(--font-ui);
}
input[type=text], input[type=email], input[type=number] {
width: 100%; padding: .7rem; margin-bottom: 1rem;
border: 1px solid #c9cfcd; border-radius: 4px; font-size: 1rem;
font-family: inherit; background: var(--snow);
}
input[type=number] { max-width: 8rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; } .row > div { flex: 1 1 200px; }
.field-note { font-size: .8rem; color: var(--ink); opacity: .8; margin: -0.6rem 0 1rem; }
/* Express opt-in for anything beyond this one event. Unchecked by default and
worded as separate from the RSVP, so the RSVP itself carries a single narrow
purpose and any broader campaign use rests on its own affirmative consent. */
.opt-in {
display: flex; align-items: flex-start; gap: .6rem;
font-family: var(--font-ui); font-size: .9rem; color: var(--ink);
margin: .2rem 0 1.1rem; cursor: pointer; line-height: 1.45;
}
.opt-in input[type=checkbox] {
width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--glacier);
}
/* PIPA collection notice. Visible on load, above the submit button. */
.privacy-notice {
background: var(--snow);
border: 1px solid var(--ice);
border-radius: 6px;
padding: .9rem 1.1rem;
margin-bottom: 1.1rem;
font-family: var(--font-ui);
font-size: .84rem;
line-height: 1.5;
}
.privacy-notice p { margin: 0; }
.privacy-notice strong { color: var(--pine); }
.privacy-notice details { margin-top: .55rem; }
.privacy-notice details p { margin-top: .5rem; }
.privacy-notice summary {
cursor: pointer; color: var(--glacier-dark);
font-size: .84rem; padding: .15rem 0;
}
.privacy-notice summary:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
.send-btn {
width: 100%; padding: .95rem;
background: var(--glacier); color: var(--white);
font-family: var(--font-ui); font-size: 1.15rem;
border: none; border-radius: 4px; cursor: pointer;
}
.send-btn:hover { background: var(--glacier-dark); }
.no-rsvp-note { margin: .7rem 0 0; text-align: center; }
.confirmation {
display: none;
background: var(--evergreen); color: var(--ice);
border-radius: 6px; padding: 1.5rem 1.75rem; margin-top: 1.5rem;
font-size: 1.05rem;
}
.confirmation.is-visible { display: block; }
.error-note {
display: none;
background: #fbeaea; color: #a03434; border-radius: 6px;
padding: 1rem 1.25rem; margin-top: 1.5rem; font-size: .95rem;
}
.error-note.is-visible { display: block; }
.error-detail { opacity: .7; font-size: .85em; }
.is-hidden { display: none; }
.visually-hidden { position: absolute; left: -9999px; }
/* Footer — Phase 1 redesign pass, Sept 2026: matches the approved design
package's site-wide footer (brand blurb, Site nav, Connect column, and a
bottom bar with the authorization statement + election-day line). Connect
uses text links rather than icons: clearer for voters who might not
recognize a Facebook/Instagram glyph at a glance, and consistent with the
Site column's plain-text treatment. */
.site-footer {
background: var(--evergreen); color: var(--pale-pine);
padding: 3.5rem 1.5rem 1.75rem;
}
.foot-grid {
max-width: 1160px; margin: 0 auto 2.75rem;
display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
}
.site-footer .wordmark { color: var(--white); }
.site-footer .wordmark .mark, .site-footer .wordmark span { color: var(--pale-pine); }
.foot-brand p { margin-top: 1rem; max-width: 32ch; color: var(--pale-pine); font-size: .95rem; }
.foot-col h4 {
color: var(--white); font-family: var(--font-ui); font-size: .78rem;
letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 1rem;
}
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: .6rem; }
.foot-col a { color: var(--pale-pine); text-decoration: none; font-family: var(--font-ui); font-size: .92rem; }
.foot-col a:hover { color: var(--white); }
.foot-col .yt-slot { display: none; }
.foot-bottom {
max-width: 1160px; margin: 0 auto;
border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
font-family: var(--font-ui); font-size: .82rem; color: rgba(255,255,255,.55);
}
.foot-bottom a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.foot-bottom a:hover { color: var(--white); }
/* Authorization statement (LECFA) — restored to its exact required wording
Sept 2026: "Authorized by Mike McGraw, financial agent,
campaign@mcgraw4mayor.ca" must appear verbatim (name of financial agent +
a B.C. contact method), so it can never be edited down for a redesign.
Copyright and Privacy each get their own flex segment so nothing crowds
the authorization statement; .foot-bottom's justify-content:space-between
spaces all four segments evenly. */
.foot-copyright { margin: 0 1rem; }
.foot-privacy { margin: 0 1rem; }
@media (max-width: 760px) {
.foot-grid { grid-template-columns: 1fr; gap: 2rem; }
/* Mobile footer bottom bar — Sept 2026: stack instead of space-between,
which left a lopsided gap between the copyright and Privacy items on
narrow screens. Flush-left column keeps all four segments legible. */
.foot-bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
.foot-copyright, .foot-privacy { margin: 0; }
}