/* privacy.html styles — Sept 2026. Same token set and structure as the other
page stylesheets on this site (theme locked July 9, 2026). No inline styles,
per the CSP hardening pass documented in ask-mike.css and _headers.
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 , and the
footer matches the new site-wide site-footer template. Body-content
styles (h2/h3/p/strong/.updated) 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;
}
/* Sticky/blurred header — Phase 1 redesign pass, Sept 2026. Matches the
approved design package's header treatment: a light, translucent paper
background, pill-shaped nav links, and a persistent Ask Mike / Donate
pill CTA pair. */
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 {
max-width: 1160px; margin: 0 auto; padding: 0 2rem;
display: flex; justify-content: space-between; align-items: center;
height: 84px; flex-wrap: wrap; gap: .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: .92rem; font-weight: 500;
padding: .6rem 1rem; 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: .6rem; }
.hdr-btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-ui); font-size: .92rem; font-weight: 600;
padding: .7rem 1.35rem; 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: 720px; 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.12rem; margin-bottom: 0; }
main { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
h2 {
font-family: var(--font-display); color: var(--pine);
font-size: 1.35rem; font-weight: 500; margin: 2.2rem 0 .6rem;
}
h3 {
font-family: var(--font-ui); color: var(--glacier-dark);
font-size: 1rem; font-weight: 600; margin: 1.3rem 0 .35rem;
}
p { margin-bottom: .9rem; }
.updated {
margin-top: 2.5rem; font-family: var(--font-ui);
font-size: .85rem; color: var(--ink); opacity: .7;
}
strong { color: var(--pine); }
/* 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; }
}