/* Additive public-site election navigation. Keep the existing teal/cream design. The root/body marker is written with the static bar, so fallbacks work without JS. This stylesheet must be the last stylesheet in . */ html.has-civic-bar { --civic-bar-height: 57px; --civic-nav-height: 72px; --civic-stack-height: calc(var(--civic-bar-height) + var(--civic-nav-height)); --civic-anchor-gap: 12px; --civic-deep: #0b3b45; --civic-paper: #fffdf7; --civic-cream: #f7f3e8; --civic-ink: #132d35; --civic-muted: #465f65; --civic-line: #bdcbc9; --civic-small: 0.875rem; --civic-body: 1rem; scroll-padding-top: var(--civic-stack-height); } /* Apply the stack offset ONCE: scroll-padding is the bar+header; scroll-margin supplies the breathing room, replacing the old independent 84px margins. */ html.has-civic-bar body.has-civic-bar :is([id], h1, h2, h3, h4, .controversy, .basin-card) { scroll-margin-top: var(--civic-anchor-gap); } body.has-civic-bar > :is(.journey-header, .header, .site-header) { top: var(--civic-bar-height); } body.has-civic-bar :is(.mobile-ballot-cta, .mobile-decision-nav, .journey-mobile-bar, .journey-mobilebar, .sticky-vote) { display: none !important; } .civic-bar, .civic-bar *, .civic-guide, .civic-guide *, .civic-home-guide, .civic-home-guide * { box-sizing: border-box; } body.has-civic-bar > .civic-bar { position: sticky; top: 0; /* Existing header: 80; skip link: 999; existing focus modals: 10000. */ z-index: 90; width: 100%; margin: 0; color: #fff; background: var(--civic-deep); border-bottom: 1px solid #64838a; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--civic-small); line-height: 1.25; } .civic-bar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; max-width: 1260px; margin-inline: auto; padding: 6px 20px; } .civic-bar a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid transparent; border-radius: 4px; color: #fff; font: inherit; font-weight: 750; line-height: 1.25; text-align: center; text-decoration: none; overflow-wrap: anywhere; } .civic-bar a.civic-bar__countdown { justify-self: start; justify-content: flex-start; padding-inline: 0 12px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: left; } .civic-bar a.civic-bar__how { border-color: #d3e6e7; } .civic-bar a.civic-bar__act { background: var(--civic-paper); color: var(--civic-deep); border-color: var(--civic-paper); font-weight: 800; } .civic-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .civic-bar a.civic-bar__act:hover { background: #dceff0; color: var(--civic-deep); border-color: #dceff0; } .civic-bar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--civic-deep); } .civic-home-guide { width: min(100%, 34rem); margin: 18px 0; } .civic-home-guide a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 44px; padding: 12px 16px; border: 1px solid #c3d9d8; border-radius: 4px; background: var(--civic-cream); color: var(--civic-deep); font-size: var(--civic-small); line-height: 1.45; text-decoration: none; } .civic-home-guide strong { font-size: var(--civic-body); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .civic-home-guide a:hover { background: #dceff0; color: var(--civic-deep); } .civic-home-guide a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--civic-deep); } .civic-guide { margin: 0; padding: clamp(28px, 4vw, 56px) 20px; background: var(--civic-cream); color: var(--civic-ink); border-block: 1px solid var(--civic-line); font-size: var(--civic-body); line-height: 1.6; } .civic-guide__inner { max-width: 1160px; margin-inline: auto; } .civic-guide__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; } .civic-guide .civic-guide__eyebrow { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--civic-muted); } .civic-guide h2 { margin: 0; color: var(--civic-deep); font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.5rem); line-height: 1.15; } .civic-guide h3 { margin: 0 0 10px; color: var(--civic-deep); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.125rem; font-weight: 800; line-height: 1.4; letter-spacing: normal; } .civic-guide p { margin: 0 0 12px; } .civic-guide .civic-guide__countdown { margin: 0; padding: 8px 12px; border: 1px solid var(--civic-line); border-radius: 4px; color: var(--civic-deep); font-size: var(--civic-small); font-weight: 750; font-variant-numeric: tabular-nums; } .civic-guide .civic-guide__intro { margin: 16px 0 24px; max-width: 76ch; } .civic-guide__election { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr); align-items: center; gap: 20px; padding: 24px; background: var(--civic-deep); color: #fff; border-radius: 4px; } .civic-guide__election h3 { color: #fff; } .civic-guide__election p:last-child { margin-bottom: 0; } .civic-guide a { color: var(--civic-deep); text-underline-offset: 3px; } .civic-guide :is(.civic-guide__primary, .civic-guide__button) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 48px; max-width: 100%; padding: 11px 16px; border: 1px solid var(--civic-deep); border-radius: 4px; background: var(--civic-deep); color: #fff; font-size: var(--civic-small); font-weight: 750; line-height: 1.4; text-align: center; text-decoration: none; overflow-wrap: anywhere; } .civic-guide a.civic-guide__primary { border-color: var(--civic-paper); background: var(--civic-paper); color: var(--civic-deep); font-size: var(--civic-body); } .civic-guide :is(.civic-guide__primary, .civic-guide__button):hover { background: #dceff0; color: var(--civic-deep); text-decoration: underline; } .civic-guide a:focus-visible { outline: 3px solid var(--civic-deep); outline-offset: 3px; } .civic-guide__election a:focus-visible { outline-color: #fff; } .civic-guide .civic-guide__citation { margin: 10px 0 0; color: var(--civic-muted); font-size: 0.8125rem; line-height: 1.55; } .civic-guide__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; } .civic-guide__option { min-width: 0; padding: 22px 0; border-top: 2px solid var(--civic-line); } .civic-guide__option ul { margin: 0 0 12px; padding-left: 22px; } .civic-guide .civic-guide__hours { font-size: var(--civic-small); color: var(--civic-muted); } .civic-guide__registration { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 4px; padding: 20px 0; border-block: 1px solid var(--civic-line); } .civic-guide__registration p { flex: 1 1 340px; margin: 0; } .civic-guide .civic-guide__calendar { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: var(--civic-small); font-weight: 750; } .civic-guide .civic-guide__verified { max-width: 100ch; margin: 20px 0 0; color: var(--civic-muted); font-size: 0.8125rem; line-height: 1.6; } @media (max-width: 1080px) { /* Keep the existing menu toggle/focus behavior. Only limit the open menu's height so its links remain reachable below the two sticky components. */ body.has-civic-bar > .journey-header .journey-nav { max-height: calc(100vh - var(--civic-stack-height)); max-height: calc(100dvh - var(--civic-stack-height)); overflow-y: auto; overscroll-behavior: contain; } } @media (max-width: 640px) { html.has-civic-bar { /* The election bar stays in normal document flow on phones. Only the white navigation header contributes to the sticky/anchor offset. */ --civic-bar-height: 0px; --civic-nav-height: 72px; --civic-stack-height: var(--civic-nav-height); } body.has-civic-bar > .civic-bar { position: static; } body.has-civic-bar > :is(.journey-header, .header, .site-header) { top: 0; } .civic-bar__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, 0.95fr); gap: 6px; padding: 4px 10px; } .civic-bar a { min-height: 44px; padding: 4px 6px; font-size: 0.75rem; } .civic-bar a.civic-bar__countdown { justify-self: stretch; justify-content: center; padding: 4px 0; text-align: center; font-size: 0.75rem; } .civic-guide { padding-inline: 16px; } .civic-guide__election, .civic-guide__options { grid-template-columns: minmax(0, 1fr); } .civic-guide__election { gap: 16px; padding: 20px; } .civic-guide__options { gap: 0; } .civic-guide :is(.civic-guide__primary, .civic-guide__button) { width: 100%; } } @media (prefers-reduced-motion: reduce) { html.has-civic-bar { scroll-behavior: auto; } } @media print { body.has-civic-bar > .civic-bar { display: none; } body.has-civic-bar > :is(.journey-header, .header, .site-header) { position: static; } }