/* ============================================================================= Safe Signal Florida — shared site chrome (header, footer, mobile nav) Loaded from every page so styles exist before include.js injects markup. Brand: #A50044 / hover #8B0038 ========================================================================== */ :root { --ss-red: #A50044; --ss-red-hover: #8B0038; --ss-red-soft: #fdf2f6; --ss-ink: #0f172a; --ss-muted: #64748b; --ss-border: #e2e8f0; --ss-surface: #ffffff; --ss-bg: #f4f6f9; --ss-band-low: #1f8a4c; --ss-band-mod: #d9a005; --ss-band-high: #e05a1c; --ss-band-crit: #A50044; --ss-band-low-ink: #166534; --ss-band-mod-ink: #92680a; --ss-band-high-ink: #b8430f; --ss-band-crit-ink: #8B0038; } .ss-header-wrap { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--ss-border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .ss-header { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 60px; } .ss-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; line-height: 0; min-width: 0; } .ss-brand img, .ss-brand svg { height: 40px; width: auto; max-width: 160px; display: block; object-fit: contain; } .ss-brand:focus-visible { outline: 3px solid rgba(165, 0, 68, 0.35); outline-offset: 3px; border-radius: 6px; } .ss-nav-desktop { margin-left: auto; display: none; align-items: center; gap: 2px; } .ss-nav-desktop a { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ss-ink); padding: 8px 11px; border-radius: 8px; white-space: nowrap; transition: color 0.12s, background 0.12s; } .ss-nav-desktop a:hover { color: var(--ss-red); background: #fdf2f6; } .ss-nav-desktop a[aria-current="page"] { color: var(--ss-red); background: #fdf2f6; } .ss-cta { display: none; margin-left: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: #fff !important; background: var(--ss-red); padding: 9px 14px; border-radius: 10px; white-space: nowrap; transition: background 0.12s; } .ss-cta:hover { background: var(--ss-red-hover); color: #fff !important; } .ss-cta-mobile-bar { display: inline-flex; align-items: center; margin-left: auto; font-size: 12.5px; font-weight: 600; text-decoration: none; color: #fff !important; background: var(--ss-red); padding: 8px 12px; border-radius: 9px; white-space: nowrap; transition: background 0.12s; } .ss-cta-mobile-bar:hover { background: var(--ss-red-hover); color: #fff !important; } .ss-burger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--ss-border); background: #fff; border-radius: 10px; cursor: pointer; color: var(--ss-ink); -webkit-tap-highlight-color: transparent; appearance: none; -webkit-appearance: none; } .ss-burger:hover { background: #f8fafc; border-color: #cbd5e1; } .ss-burger:focus-visible { outline: 3px solid rgba(165, 0, 68, 0.35); outline-offset: 2px; } .ss-burger-icon { width: 20px; height: 14px; position: relative; display: block; pointer-events: none; } .ss-burger-icon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease; } .ss-burger-icon span:nth-child(1) { top: 0; } .ss-burger-icon span:nth-child(2) { top: 6px; } .ss-burger-icon span:nth-child(3) { top: 12px; } .ss-header-wrap.is-open .ss-burger-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); } .ss-header-wrap.is-open .ss-burger-icon span:nth-child(2) { opacity: 0; } .ss-header-wrap.is-open .ss-burger-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); } .ss-nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 16px 16px; border-top: 1px solid var(--ss-border); background: #fff; } .ss-header-wrap.is-open .ss-nav-mobile { display: flex; } .ss-nav-mobile a { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ss-ink); padding: 12px 14px; border-radius: 10px; } .ss-nav-mobile a:hover { background: #fdf2f6; color: var(--ss-red); } .ss-nav-mobile a[aria-current="page"] { background: #fdf2f6; color: var(--ss-red); } .ss-cta-mobile { margin-top: 6px; text-align: center; color: #fff !important; background: var(--ss-red); border-radius: 10px; padding: 12px 14px; font-weight: 600; text-decoration: none; } .ss-cta-mobile:hover { background: var(--ss-red-hover); color: #fff !important; } @media (min-width: 900px) { .ss-nav-desktop { display: flex; } .ss-cta { display: inline-flex; align-items: center; } .ss-cta-mobile-bar { display: none; } .ss-burger { display: none; } .ss-nav-mobile { display: none !important; } } /* Below ~1120px the header is edge-to-edge, and logo + 7 links + CTA at full size push the CTA past the viewport (horizontal scrollbar). Tighten spacing across that band; above 1120px the 1120px container has room to spare. */ @media (min-width: 900px) and (max-width: 1119px) { .ss-brand img, .ss-brand svg { max-width: 132px; } .ss-nav-desktop a { padding: 8px 7px; font-size: 13px; } .ss-cta { padding: 9px 11px; font-size: 13px; } } body.ss-menu-open { overflow: hidden; } /* Footer (if styles not inlined in footer.html) */ .ss-footer { background: #052844; color: #cfe0ec; margin-top: 48px; padding: 26px 28px 30px; font-size: 12.5px; line-height: 1.6; } /* ============================================================================= Accessibility — WCAG 2.2 AA helpers Skip link, focus visibility, minimum target size (2.5.8) ========================================================================== */ .ss-skip-link { position: absolute; left: 12px; top: 0; z-index: 10000; padding: 10px 16px; background: var(--ss-red, #A50044); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 8px; transform: translateY(-120%); transition: transform 0.15s ease; } .ss-skip-link:focus, .ss-skip-link:focus-visible { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [role="radio"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(165, 0, 68, 0.45); outline-offset: 2px; } .ss-nav-desktop a:focus-visible, .ss-nav-mobile a:focus-visible, .ss-cta:focus-visible, .ss-cta-mobile:focus-visible, .ss-cta-mobile-bar:focus-visible { outline: 3px solid rgba(165, 0, 68, 0.45); outline-offset: 2px; } .ss-nav-desktop a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; box-sizing: border-box; } .ss-nav-mobile a { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; } /* Sizing only — do NOT set `display` here. `.ss-cta` is hidden below 900px and `.ss-cta-mobile-bar` above it; an unconditional display would override both and show two "Schedule" buttons in the mobile header. */ .ss-cta, .ss-cta-mobile-bar, .ss-cta-mobile { min-height: 44px; align-items: center; justify-content: center; box-sizing: border-box; } .ss-cta-mobile { display: flex; } @media (prefers-reduced-motion: reduce) { .ss-skip-link, .ss-burger-icon span, .ss-nav-desktop a, .ss-cta { transition: none !important; } }