/* ========================================================================== Site styles — Citizens' Climate Lobby 2026 website Layered on top of styles/tokens.css. All values come from the design system unless explicitly noted as a deviation (see DEVIATIONS.md). ========================================================================== */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg-page); } /* Full-width page. Content is framed to --frame-max (1440) by the fluid --page-gutter / --container-pad insets, while section backgrounds (nav, footer, colour bands) bleed to the viewport edge on wider screens. */ .page { margin: 0 auto; } .container { max-width: 1128px; margin: 0 auto; padding: 0 var(--gutter); } .container-wide { max-width: 1246px; margin: 0 auto; padding: 0 var(--gutter); } .container-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); } img { display: block; max-width: 100%; } /* Figure margin reset now lives in canonical tokens.css as `:where(.ccl) figure { margin: 0 }`. Local rule removed. */ /* -------------------------------------------------------------------------- Site header -------------------------------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; height: 96px; padding: 0 calc(var(--edge-inset) + var(--container-pad)); background: var(--ccl-grey-10); /* Blue→green gradient divider beneath the primary header (design system). */ border-bottom: 3px solid transparent; border-image: var(--gradient-underline) 1; } /* flex-shrink:0 is load-bearing. The header is a flex row, so without it the logo is the only item that yields and it gets crushed by the CTAs — measurably: 271px natural, 122px beside one CTA, and 0px (invisible) once a second one landed. The buttons have min-width and the toggle is fixed, so the brand absorbed all of it silently. */ .site-header .brand { flex-shrink: 0; } .site-header .brand img { height: 38px; width: auto; } .site-header nav { display: flex; align-items: center; gap: var(--spacing-2xl); } .site-header nav a { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--grey-600); text-decoration: none; padding-bottom: 4px; border-bottom: 3px solid transparent; /* reserve space so the active underline doesn't shift layout */ } .site-header nav a.active { color: var(--ccl-blue); font-weight: 700; border-image: var(--gradient-underline) 1; /* gradient underline on the active item */ } /* Join (primary) + Donate (secondary) share one wrapper, and the wrapper is what makes them read as a pair. The header is `justify-content: space-between`, which splits free space equally between EVERY adjacent pair of children — so two loose CTAs got the same ~63px trench as brand↔nav (75px apart on a 1280 viewport despite a 12px margin). Grouped, the header is back to three children and the gap here is the real gap. */ .site-header .header-ctas { display: flex; align-items: center; gap: var(--spacing-sm); margin-left: var(--spacing-md); } /* Below ~700px the bar can't hold the logo, two 133px CTAs and the hamburger (they need ~660px of the ~327px available at 375px). Drop the CTAs rather than the logo — site.js clones both into the mobile menu, where they render full-width at the bottom of the panel, so nothing is lost. */ @media (max-width: 700px) { .site-header .header-ctas { display: none; } } /* -------------------------------------------------------------------------- Utility (eyebrow) bar — slim strip above the main header for secondary, returning-visitor actions: a language switcher and the Volunteer Portal. Reads quieter than the header (grey-200 vs the header's grey-100) so it stays subordinate to the primary nav. position+z-index let the language dropdown paint above the (static) header that follows it in the DOM. -------------------------------------------------------------------------- */ .utility-bar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-md); padding: 7px calc(var(--edge-inset) + var(--container-pad)); background: var(--grey-200); font-family: var(--font-display); font-size: 13px; line-height: 1; } .utility-bar a { text-decoration: none; } .utility-bar__sep { width: 1px; height: 14px; background: var(--grey-300); } /* Dark blue, not --ccl-blue: at 13px bold on the utility bar's #ECF0F3 the lighter blue is 3.69:1, under AA's 4.5 (bold only counts as large text at 18.66px+). Dark blue is 7.26:1. Hover underlines rather than shifting colour — the old hover target was this same dark blue, and lightening on hover would just move the failure into the hover state. */ .utility-bar__portal { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ccl-blue-dark); } .utility-bar__portal:hover { text-decoration: underline; } .utility-bar__portal svg { width: 15px; height: 15px; } /* Language switcher — native
so it works on every page without relying on assets/site.js (6 pages don't load it). Placeholder for now: the options don't translate yet. */ .lang-switch { position: relative; } .lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--grey-600); } .lang-switch > summary::-webkit-details-marker { display: none; } .lang-switch > summary::marker { content: ""; } .lang-switch svg { width: 15px; height: 15px; } .lang-switch .chev { transition: transform .15s ease; } .lang-switch[open] .chev { transform: rotate(180deg); } .lang-switch__menu { position: absolute; right: 0; top: calc(100% + 7px); margin: 0; padding: 6px 0; list-style: none; min-width: 132px; background: #fff; border: 1px solid var(--grey-200); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .10); } .lang-switch__menu a { display: block; padding: 7px 16px; color: var(--grey-600); } .lang-switch__menu a:hover { background: var(--grey-100); } /* -------------------------------------------------------------------------- Mobile primary navigation — hamburger + full-screen menu. Built by assets/site.js (cloned from the header