/* * alert-mock.css * Page-specific styles for the MoVal Alert mock landing page. * Loaded AFTER mv-main.css and btns.css. * * Existing classes used from mv-main.css / btns.css / mv-style.css: * Layout: .container, .row, .columns/.column, .four/.five/.seven/.eight/.twelve.columns * Backgrounds: .bk-blue, .bk-lt-gray, .bk-red, .bk-white * Buttons: .btn, .btn--s, .btn--m, .btn--white, .btn--blue, .btn--red, * .btn--gray-border * Components: .contact-box, .card-title, .block-heading, .box-padding, * .round-corners-sm, .box-shadow, .sidebar-box, .sidebar-box-head, * .sidebar-box-title * Typography: .largish, .semi-bold, .text-uppercase, .color-blue, .color-white * Utilities: .txt-center, .margin-add-top, .margin-add-bottom, .margin-no-top, * .margin-no-bottom, .pad-top-bottom, .clearfix * Layout from volunteer-mock pattern: .hero, .hero-bg, .hero-overlay, .hero-content, * .stat-bar, .stat-bar-grid, .section-eyebrow, .section-title, * .anim, .anim-d1..3 */ /* ========================================================================== ALERT TOKENS — semantic aliases over City brand variables ========================================================================== */ :root { /* Brand palette (declared in mv-main.css; aliased for clarity here) */ --alert-blue: var(--brand-blue); --alert-orange: #ff6700; --alert-red: #df2c2f; --alert-red-deep: #8a1620; --alert-amber: #fac517; --alert-amber-soft: #fff6ea; --alert-green: var(--brand-green); /* #3E6314 */ --alert-green-light: #e7f1d8; --alert-charcoal: #1a1d24; --alert-surface: var(--neutral-gray-light); /* #F1F1F2 */ --alert-text-muted: var(--neutral-gray-dark); /* #4D515F */ /* Layout */ --alert-section-pad: 5rem 0; --alert-card-radius: 10px; /* Shadows */ --alert-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --alert-shadow-md: 0 6px 20px rgba(0,0,0,0.13); --alert-shadow-lg: 0 12px 36px rgba(0,0,0,0.17); /* Transitions */ --alert-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Display font (loaded in ) */ --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* WCAG-safe darker amber for text on light backgrounds (passes AA on white) */ --alert-amber-dark: #8a5a00; /* Brighter on-dark text helpers (WCAG AA against dark navy/charcoal) */ --on-dark-strong: rgba(255,255,255,0.96); --on-dark-soft: rgba(255,255,255,0.88); } /* Honor reduced motion globally up front so it cascades over later rules */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } /* ========================================================================== HERO ========================================================================== */ /* Subtle red diagonal accent line .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--alert-red) 0%, var(--alert-amber) 60%, transparent 100%); } */ .hero { position: relative; overflow: hidden; min-height: 540px; display: flex; align-items: center; justify-content: flex-start; padding: 15px; } .hero-bg { position: absolute; inset: 0; background-image: url('../img/hero-1-fire.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center 35%; filter: saturate(0.85); } /* Diagonal dark overlay — left side dark, right side fades */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 115deg, rgba(15, 18, 26, 0.92) 0%, rgba(15, 18, 26, 0.85) 35%, rgba(15, 18, 26, 0.55) 65%, rgba(15, 18, 26, 0.35) 100% ); pointer-events: none; } .hero-content { position: relative; z-index: 2; padding: 4rem 4rem 3.5rem; max-width: 800px; display: flex; flex-direction: column; align-self: flex-start; margin-left: 2.5%; } .hero-eyebrow { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--alert-amber); background: rgba(250,250,250,0.12); border: 1px solid rgba(250,250,250,0.4); padding: 0.45rem 1rem; border-radius: 999px; width: fit-content; } .hero-title { font-family: var(--font-display); font-size: clamp(4rem, 7vw, 6.5rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1; text-transform: uppercase; color: #fff; margin: 0; text-shadow: 0 4px 24px rgba(0,0,0,0.5); } .hero-subtitle { font-family: var(--font-display); font-size: clamp(2rem, 2.5vw, 2.6rem); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alert-amber); margin: 0.4rem 0 1.2rem; } .hero-lede { font-size: 1.7rem; color: rgba(255,255,255,0.9); line-height: 1.55; max-width: 620px; margin: 0 0 1.8rem; } .hero-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; } .hero-img { width: 60%; margin-left: -35px; margin-top: -15px; } @media (max-width: 980px) { .hero-content { padding: 3rem 2rem 2.5rem; margin-left: 0; max-width: 100%; } } @media (max-width: 768px) { .hero { min-height: 360px; padding: 0; } .hero-content { padding: 2rem 1.25rem 2.25rem; margin-left: 0; } .hero-img { width: 78%; margin-left: 0; margin-top: 0; } .hero-eyebrow { font-size: 1.2rem; padding: 0.4rem 0.85rem; } .hero-subtitle { font-size: 1.7rem; letter-spacing: 0.08em; margin: 0.3rem 0 0.9rem; } .hero-lede { font-size: 1.45rem; line-height: 1.5; } .hero-cta-group { gap: 0.6rem; } .hero-cta-group .btn { width: 100%; text-align: center; min-height: 44px; } .hero-bg { background-position: center center; } } @media (max-width: 420px) { .hero { min-height: 320px; } .hero-img { width: 88%; } .hero-content { padding: 1.5rem 1rem 1.75rem; } } .alert-btn { background-color: var(--alert-amber); border: 1px #fff solid; color: #000 !important; } .alert-btn:hover { color: #111; border: 1px #111 solid; background-color: var(--brand-blue); } /* ========================================================================== STATUS STRIP — sits between hero and stat bar ========================================================================== */ .status-strip { background: var(--alert-charcoal); color: #fff; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0px 15px; display: flex; align-items: center; justify-content: center; } .status-strip-inner { width: 90%; display: flex; align-items: center; align-self: center; gap: 1rem; padding: 0.85rem 0; font-size: 1.5rem; } .status-dot { width: 14px; height: 14px; border-radius: 50%; background: #4ec97a; box-shadow: 0 0 0 4px rgba(78,201,122,0.18); flex-shrink: 0; animation: statusPulse 2.4s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(78,201,122,0.18); } 50% { box-shadow: 0 0 0 8px rgba(78,201,122,0.05); } } .status-strip--clear .status-dot { background: #4ec97a; } .status-strip--watch .status-dot { background: var(--alert-amber); box-shadow: 0 0 0 4px rgba(255,110,0,0.18); } .status-strip--alert .status-dot { background: var(--alert-red); box-shadow: 0 0 0 4px rgba(196,38,46,0.22); } .status-text { display: flex; align-items: baseline; gap: 0.7rem; flex: 1; min-width: 0; } .status-text strong { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; } .status-text span { padding-left: 10px; color: var(--on-dark-strong); font-size: 1.4rem; } .status-link { color: var(--alert-amber); text-decoration: none; font-size: 1.35rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: color var(--alert-transition); } .status-link:hover { color: #fff; } .status-link:visited { color: #fff; } @media (max-width: 640px) { .status-strip { padding: 0.5rem 12px; } .status-strip-inner { flex-wrap: wrap; width: 100%; gap: 0.6rem; padding: 0.6rem 0; font-size: 1.3rem; } .status-text { flex-direction: column; gap: 0.15rem; align-items: flex-start; } .status-text span { padding-left: 0; font-size: 1.3rem; } .status-text strong { font-size: 1.5rem; } .status-link { width: 100%; padding: 0.4rem 0; min-height: 32px; display: inline-flex; align-items: center; } } /* ========================================================================== STAT BAR ========================================================================== */ .stat-bar { padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 4px solid var(--alert-amber); background: var(--alert-charcoal); } .stat-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { text-align: center; padding: 0.4rem 1rem; border-right: 1px solid rgba(255,255,255,0.14); } .stat:last-child { border-right: none; } .stat-num { font-family: var(--font-display); font-size: 4.4rem; font-weight: 800; color: var(--alert-amber); line-height: 1; display: block; letter-spacing: -0.01em; } .stat-label { font-size: 1.4rem; color: var(--on-dark-strong); text-transform: uppercase; letter-spacing: 0.1em; } @media (max-width: 768px) { .stat-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 0; } .stat { border-right: none; padding: 0.6rem 0.5rem; } .stat-num { font-size: 3.4rem; } } /* ========================================================================== STICKY SUB-NAV ========================================================================== */ .subnav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .subnav .container { display: flex; align-items: center; } .subnav-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; flex-wrap: wrap; width: 100%; } .subnav-list li { margin: 10px; } .subnav-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1.05rem 1.1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--alert-text-muted); text-decoration: none; border-bottom: 3px solid transparent; transition: color var(--alert-transition), border-color var(--alert-transition), background var(--alert-transition); white-space: nowrap; } .subnav-link i { color: var(--alert-blue); transition: color var(--alert-transition); } .subnav-link:hover { color: var(--alert-blue); background: rgba(46,90,147,0.05); text-decoration: none; } .subnav-link.is-active { color: var(--alert-red); border-bottom-color: var(--alert-red); background: rgba(196,38,46,0.04); } .subnav-link.is-active i { color: var(--alert-red); } .subnav-toggle { display: none; width: 100%; background: transparent; border: none; padding: 1rem 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alert-blue); text-align: left; cursor: pointer; } @media (max-width: 980px) { .subnav-list { display: none; flex-direction: column; width: 100%; padding: 0.5rem 0 1rem; border-top: 1px solid rgba(0,0,0,0.06); } .subnav-list li { margin: 0; } .subnav-list.is-open { display: flex; } .subnav-link { width: 100%; padding: 1rem 0.75rem; /* >=44px touch target */ min-height: 44px; border-bottom: none; border-left: 3px solid transparent; white-space: normal; /* allow long labels to wrap on small screens */ } .subnav-link.is-active { border-bottom: none; border-left-color: var(--alert-red); } .subnav-toggle { display: block; padding: 1rem 0.75rem; min-height: 48px; } .subnav .container { flex-direction: column; align-items: stretch; padding: 0 12px; } } /* ========================================================================== SECTIONS — base ========================================================================== */ .section { padding: var(--alert-section-pad); } .section .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 10px; } .section .row > .columns, .section .row > [class*="columns"] { margin-left: 0; } .section-eyebrow { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--alert-charcoal); margin-bottom: 0.5rem; } .section-title { font-family: var(--font-display); font-size: clamp(2.8rem, 3.5vw, 3.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--alert-blue); margin: 0 0 1.2rem; line-height: 1.1; } .section-lede { font-size: 1.65rem; line-height: 1.6; color: var(--alert-text-muted); max-width: 760px; margin: 0 auto 1rem; } /* On dark backgrounds, flip headings white */ .bk-blue .section-title, .bk-dark .section-title { color: #fff;} .bk-blue .section-eyebrow { color: var(--alert-amber); } .bk-blue .section-lede, .bk-dark .section-lede { color: var(--on-dark-strong); } .block-heading { font-family: var(--font-display); font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alert-blue); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(46,90,147,0.2); } /* ========================================================================== SECTION 1 — SIGNIFICANT EVENTS ========================================================================== */ .event-card { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.8rem; border-radius: var(--alert-card-radius); background: var(--alert-green-light); border-left: 6px solid var(--alert-green); margin: 1.5rem 0; } .event-card-icon { font-size: 3rem; color: var(--alert-green); flex-shrink: 0; line-height: 1; } .event-card-title { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--alert-green); margin: 0 0 0.4rem; } .event-card--alert { background: rgba(196,38,46,0.08); border-left-color: var(--alert-red); } .event-card--alert .event-card-icon, .event-card--alert .event-card-title { color: var(--alert-red); } /* ========================================================================== SIDEBAR BOX (extends pattern from volunteer-mock) ========================================================================== */ .sidebar-box { border-radius: var(--alert-card-radius); overflow: hidden; background: #fff; box-shadow: var(--alert-shadow-sm); display: flex; flex-direction: column; align-self: flex-end; } .sidebar-box-head { padding: 1.4rem 1.3rem 0.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; } .sidebar-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin-bottom: 0.6rem; } .sidebar-icon--red { background: rgba(196,38,46,0.12); color: var(--alert-red); } .sidebar-box-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; color: var(--alert-blue); } .sidebar-box .btn { display: block; } /* ========================================================================== SECTION 2 — PREP CARDS (Have a Kit / Plan / Stay Informed) ========================================================================== */ .prep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .prep-card { position: relative; background: #fff; border-radius: var(--alert-card-radius); padding: 2.4rem 1.8rem 1.8rem; box-shadow: var(--alert-shadow-sm); border-top: 4px solid var(--alert-blue); transition: transform var(--alert-transition), box-shadow var(--alert-transition); } .prep-card:hover { transform: translateY(-3px); box-shadow: var(--alert-shadow-md); } .prep-card-num { position: absolute; top: -22px; left: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--alert-blue); color: #fff; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(46,90,147,0.35); } .prep-card-icon { font-size: 2.6rem; color: var(--alert-blue); margin: 0.5rem 0 1rem; } .prep-card-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--alert-blue); margin: 0 0 0.7rem; line-height: 1.1; } .prep-card p { font-size: 1.5rem; line-height: 1.6; color: var(--alert-text-muted); } @media (max-width: 880px) { .prep-grid { grid-template-columns: 1fr; } } /* Kit list */ div.emergency-kit { width: 100%; position: relative; background-image:url('../img/emergency-kit.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 8rem 1.5rem; display: flex; justify-content: center; align-items: center; } @media (max-width: 768px) { div.emergency-kit { padding: 3rem 0.75rem; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; } div.emergency-kit > .eight.columns.content, div.emergency-kit .content { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding: 1.25rem; border-width: 6px; box-sizing: border-box; } } div.overlay { position: absolute; width: 100%; height:100%; background-color: rgba(0,0,0,0.6); } div.content { max-width: 800px; background-color: #fff; border-radius: 10px; padding: 1.5rem; border-width: 10px; border-color: var(--brand-blue); border-style: solid; z-index: 1; } .kit-list { list-style: none; padding: 0; margin: 0 0 1.5rem; column-count: 2; column-gap: 2rem; } .kit-list li { font-size: 1.5rem; line-height: 1.5; padding: 0.4rem 0 0.4rem 0; break-inside: avoid; color: var(--alert-text-muted); } .kit-list li i { color: var(--alert-blue); width: 22px; text-align: center; margin-right: 0.3rem; } .kit-list li.kit-sub { padding-left: 2.2rem; font-size: 1.35rem; color: #707582; position: relative; } .kit-list li.kit-sub::before { content: '–'; position: absolute; left: 1.2rem; color: var(--alert-amber); font-weight: 700; } @media (max-width: 700px) { .kit-list { column-count: 1; } } /* Resource list */ .resource-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .resource-list li { margin: 0; } .resource-list a { display: flex; flex-direction: column; gap: 0.1rem; padding: 1rem 1.2rem; background: #fff; border-radius: 6px; border-left: 4px solid var(--alert-blue); text-decoration: none; transition: transform var(--alert-transition), box-shadow var(--alert-transition); } .resource-list a:hover { transform: translateX(3px); box-shadow: var(--alert-shadow-sm); text-decoration: none; } .resource-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--alert-blue); letter-spacing: 0.02em; } .resource-meta { font-size: 1.3rem; color: var(--alert-text-muted); } /* ========================================================================== CALLOUTS (used in multiple sections) ========================================================================== */ .callout { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.6rem; border-radius: 8px; margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.55; } .callout > i { font-size: 2rem; flex-shrink: 0; margin-top: 0.15rem; } .callout--ahead { background: rgba(250,250,250,1); border-left: 4px solid var(--alert-amber); color: var(--alert-charcoal); z-index: 1; } .callout--ahead > i { color: var(--brand-blue); font-size: 3rem; } .callout--info { background: rgba(46,90,147,0.08); border-left: 4px solid var(--alert-blue); color: var(--alert-text-muted); } .callout--info > i { color: var(--alert-blue); } .callout--tip { background: var(--alert-amber-soft); border-left: 4px solid var(--alert-amber); color: var(--alert-text-muted); } .callout--tip > i { color: var(--alert-amber); } .callout--warning { background: rgba(196,38,46,0.07); border-left: 4px solid var(--alert-red); color: var(--alert-charcoal); } .callout--warning > i { color: var(--alert-red); } .callout ul { padding-left: 1.4rem; margin: 0.4rem 0 0; } .callout ul li { margin-bottom: 0.3rem; } /* ========================================================================== SECTION 3 — EVACUATION (Get Ready / Get Set / Go Now) ========================================================================== */ .evac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .evac-card { position: relative; border-radius: var(--alert-card-radius); padding: 2.4rem 1.8rem 1.8rem; background: #fff; box-shadow: var(--alert-shadow-sm); overflow: hidden; transition: transform var(--alert-transition), box-shadow var(--alert-transition); } .evac-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; } .evac-card:hover { transform: translateY(-4px); box-shadow: var(--alert-shadow-lg); } .evac-card-flag { position: absolute; top: 14px; right: 16px; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,0,0,0.45); font-weight: 600; } .evac-card-icon { font-size: 3.6rem; line-height: 1; margin-bottom: 1rem; } .evac-card-title { font-family: var(--font-display); font-size: 3rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 0.3rem; line-height: 1; } .evac-card-sub { font-size: 1.4rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--alert-text-muted); margin: 0 0 1rem; } .evac-list { list-style: none; counter-reset: evac; padding: 0; margin: 0; } .evac-list li { counter-increment: evac; padding-left: 2.4rem; position: relative; margin-bottom: 0.7rem; font-size: 1.5rem; line-height: 1.55; color: var(--alert-text-muted); } .evac-list li::before { content: counter(evac); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; justify-content: center; color: #fff; } /* Stage 1: GET READY (green) */ .evac-card--ready::before { background: var(--brand-green); } .evac-card--ready .evac-card-icon { color: var(--brand-green); } .evac-card--ready .evac-card-title { color: var(--brand-green); } .evac-card--ready .evac-list li::before { background: var(--brand-green); } /* Stage 2: GET SET (amber) — text uses darker amber for WCAG AA contrast on white */ .evac-card--set::before { background: var(--alert-amber); } .evac-card--set .evac-card-icon { color: var(--alert-amber-dark); } .evac-card--set .evac-card-title { color: var(--alert-amber-dark); } .evac-card--set .evac-card-flag { color: var(--alert-amber-dark); } .evac-card--set .evac-list li::before { background: var(--alert-amber-dark); } /* Stage 3: GO NOW (red — visually loudest) */ .evac-card--go { background: linear-gradient(180deg, #fff 0%, rgba(196,38,46,0.04) 100%); } .evac-card--go::before { background: var(--alert-red); height: 8px; } .evac-card--go .evac-card-icon { color: var(--alert-red); } .evac-card--go .evac-card-title { color: var(--alert-red); animation: goPulse 2.4s ease-in-out infinite; } .evac-card--go .evac-list li::before { background: var(--alert-red); } /* Stage 4: SHELTER IN PLACE (blue) */ .evac-card--shelter::before { background: var(--alert-blue); } .evac-card--shelter .evac-card-icon { color: var(--alert-blue); } .evac-card--shelter .evac-card-title { color: var(--alert-blue); } .evac-card--shelter .evac-list li::before { background: var(--alert-blue); } @keyframes goPulse { 0%, 100% { text-shadow: 0 0 0 rgba(196,38,46,0); } 50% { text-shadow: 0 0 12px rgba(196,38,46,0.35); } } @media (max-width: 880px) { .evac-grid { grid-template-columns: 1fr; } } /* ========================================================================== SECTION 4 — KNOW BEFORE YOU GO ========================================================================== */ .shelter-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; } .shelter-list > li { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: #fff; border-radius: 8px; box-shadow: var(--alert-shadow-sm); transition: transform var(--alert-transition); font-size: 1.5rem; line-height: 1.55; } .shelter-list > li:hover { transform: translateX(2px); } .shelter-list-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: rgba(46,90,147,0.1); color: var(--alert-blue); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; } .checklist-card { background: #fff; padding: 1.8rem; border-radius: var(--alert-card-radius); box-shadow: var(--alert-shadow-sm); border-top: 4px solid var(--alert-amber); } .checklist-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--alert-blue); margin: 0 0 1rem; } .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px dashed rgba(0,0,0,0.08); font-size: 1.45rem; color: var(--alert-text-muted); } .checklist li:last-child { border-bottom: none; } .checklist li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--alert-amber); margin-top: 0.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff6e00'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; } /* ========================================================================== SECTION 5 — EMERGENCY ALERTS ========================================================================== */ .alert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .alert-card { background: #fff; border-radius: var(--alert-card-radius); padding: 1.8rem; box-shadow: var(--alert-shadow-sm); border-top: 4px solid var(--alert-blue); display: flex; flex-direction: column; transition: transform var(--alert-transition), box-shadow var(--alert-transition); } .alert-card:hover { transform: translateY(-3px); box-shadow: var(--alert-shadow-md); } .alert-card--primary { border-top-color: var(--alert-red); } .alert-card--zone { border-top-color: var(--alert-amber); } .alert-card--watch { border-top-color: #707582; } .alert-card-flag { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alert-text-muted); margin-bottom: 0.4rem; } .alert-card--primary .alert-card-flag { color: var(--alert-red); } .alert-card--zone .alert-card-flag { color: var(--alert-amber); } .alert-card-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--alert-blue); margin: 0 0 0.7rem; line-height: 1.1; } .alert-card--primary .alert-card-title { color: var(--alert-red); } .alert-card--zone .alert-card-title { color: var(--alert-amber); } .alert-card--watch .alert-card-title { color: var(--alert-charcoal); } .alert-card p { font-size: 1.5rem; line-height: 1.6; color: var(--alert-text-muted); margin: 0 0 0.8rem; } .alert-card-meta { font-size: 1.35rem !important; color: #707582 !important; margin-bottom: 1.2rem !important; } .alert-card .btn { align-self: flex-start; margin-top: auto; } .city-wide-card { padding: 2rem; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .city-wide-card h3 { font-size: 2rem; } @media (max-width: 768px) { .alert-grid { grid-template-columns: 1fr; } } /* "KNOW YOUR ZONE" banner */ .zone { background-image: url("../img/Genasys-MOE-zones.png"); background-size: cover; background-position: center; min-height: 500px; padding: 1.5rem; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; } @media (max-width: 768px) { .zone { min-height: 0; padding: 2rem 1rem; height: auto; } } div.zone-overlay { position: absolute; width: 100%; height:100%; background-color: rgba(0,0,0,0.8); } .zone-banner { width: 90%; max-width: 950px; display: flex; gap: 1.5rem; align-items: center; background: linear-gradient(135deg, var(--alert-blue) 0%, #1f4070 100%); border-radius: var(--alert-card-radius); padding: 2rem 0 0 2.2rem; margin: 2.5rem 0; color: #fff; box-shadow: var(--alert-shadow-md); z-index: 1; } .zone-banner-icon { font-size: 3.5rem; color: var(--alert-amber); flex-shrink: 0; background: rgba(255,110,0,0.15); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .zone-banner-title { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--alert-amber); margin: 0 0 0.4rem; line-height: 1; } .zone-banner p { margin: 0; color: var(--on-dark-strong); font-size: 1.5rem; line-height: 1.55; } .zone-img { z-index: 1; width: 40%; max-width: 100%; height: auto; align-self: flex-end; border-bottom-right-radius: 10px; } @media (max-width: 880px) { .zone { padding: 1.5rem 0.75rem; box-sizing: border-box; } .zone-banner { flex-direction: column; text-align: center; padding: 1.6rem; gap: 1rem; width: 100%; max-width: 100%; margin: 1.5rem 0; box-sizing: border-box; } .zone-banner-icon { margin: 0 auto; } .zone-img { width: 65%; max-width: 100%; align-self: center; border-radius: 8px; } } @media (max-width: 480px) { .zone { padding: 1.25rem 0.5rem; } .zone-banner { padding: 1.25rem; } .zone-img { width: 85%; } .zone-banner-title { font-size: 2rem; } } /* WEA section — mobile fixes so the well/box-padding-side60 doesn't squeeze text */ @media (max-width: 768px) { #alerts .row > .seven.columns, #alerts .row > .five.columns { width: 100% !important; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } #alerts .well, #alerts .box-padding-side60 { padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box; } #alerts .box-padding { padding-left: 0 !important; padding-right: 0 !important; } #alerts img { width: 100%; height: auto; display: block; } } /* WEA warning card */ .warning-card { color: var(--alert-red); margin: auto; display: flex; align-items: center; justify-content: center; gap: 10px; } .warning-card-head { gap: 0.6rem; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; border-radius: var(--alert-card-radius); padding: 0.6rem; background: var(--alert-red); display: flex; justify-content: center; align-items: center; } .warning-card-head i { font-size: 1.8rem; } .warning-card p { font-size: 1.45rem; line-height: 1.6; text-transform: none; font-weight: 400; margin: 0; color: #fff; } .warning-card-callout { background: rgba(196,38,46,0.08); font-weight: 700 !important; padding: 0.8rem 1rem; border-radius: 6px; border-left: 4px solid var(--alert-red); } /* ========================================================================== SECTION 6 — PARTNERS ========================================================================== */ .partner-intro { color: var(--on-dark-strong); font-size: 1.55rem; line-height: 1.6; max-width: 880px; margin: 0 auto 2rem; } .partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .partner-card { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--alert-card-radius); padding: 1.4rem 1.4rem 1.2rem; color: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 0.5rem; transition: background var(--alert-transition), transform var(--alert-transition), border-color var(--alert-transition); } .partner-card:hover { background: rgba(255,255,255,0.12); border-color: var(--alert-amber); transform: translateY(-3px); text-decoration: none; } .partner-icon { width: 48px; height: 48px; border-radius: 8px; background: rgba(255,110,0,0.18); color: var(--alert-amber); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 0.4rem; } .partner-card h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0; line-height: 1.15; } .partner-link { font-size: 1.3rem; color: var(--on-dark-strong); letter-spacing: 0.04em; margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; } .partner-link i { font-size: 1rem; } .partner-cta { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.15); text-align: center; } .partner-cta p { color: var(--on-dark-strong); font-size: 1.55rem; margin: 0 0 1rem; } @media (max-width: 980px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .partners-grid { grid-template-columns: 1fr; } } /* ========================================================================== SECTION 7 — GET INVOLVED ========================================================================== */ .involved-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; } .involved-list > li { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.5rem; background: #fff; border-radius: var(--alert-card-radius); box-shadow: var(--alert-shadow-sm); border-left: 4px solid var(--alert-blue); transition: transform var(--alert-transition), box-shadow var(--alert-transition); } .involved-list > li:hover { transform: translateX(3px); box-shadow: var(--alert-shadow-md); } .involved-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px; background: rgba(46,90,147,0.1); color: var(--alert-blue); font-size: 2rem; display: flex; align-items: center; justify-content: center; } .involved-list h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--alert-blue); margin: 0 0 0.3rem; } .involved-list p { font-size: 1.45rem; line-height: 1.5; color: var(--alert-text-muted); margin: 0 0 0.4rem; } .involved-list a { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.04em; color: var(--alert-blue); text-decoration: none; } .involved-list a:hover { color: var(--alert-amber); text-decoration: underline; } .login-link { display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: center; } /* ========================================================================== FINAL CTA BANNER ========================================================================== */ /* .bk-dark { background-color: var(--alert-charcoal); color: #fff; } */ .cal-fire-banner { background-image: url('../img/city-local.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 4rem 1rem; position: relative; overflow: hidden; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; text-align: left; } img.cal-fire-banner-logo { width: 300px; max-width: 100%; height: auto; margin: 1.5rem; z-index: 1; } .cal-fire-info { margin: 1.5rem; z-index: 1; max-width: 600px; } @media (max-width: 768px) { .cal-fire-banner { flex-direction: column; padding: 2.5rem 1rem; text-align: center; } img.cal-fire-banner-logo { width: 220px; margin: 0.5rem auto 1rem; } .cal-fire-info { margin: 0.5rem auto; } .cal-fire-info .cta-title { font-size: 2.2rem; } .cal-fire-info .cta-title br { display: none; } } .cta-banner { padding: 4rem 0 4rem; text-align: center; position: relative; overflow: hidden; background-color: var(--alert-charcoal); } .cta-banner::before { content: 'ALERT MOVAL'; position: absolute; font-family: var(--font-display); font-size: 28rem; font-weight: 900; text-transform: uppercase; color: rgba(250,197,23,0.06); top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; line-height: 1; letter-spacing: 0.04em; } .cta-title { font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 4.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; margin: 0 0 0.6rem; line-height: 1.1; position: relative; z-index: 1; } .cta-sub { font-size: 1.7rem; color: var(--on-dark-strong); margin: 0 0 2rem; position: relative; z-index: 1; } .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } .cta-banner-ahead { position: relative; overflow: hidden; min-height: 400px; background-image: url("../img/plan-ahead.jpg"); display: flex; flex-direction: row; align-items: center; justify-content: center; background-size: cover; background-repeat: no-repeat; background-position: right center; padding: 8rem 1.5rem; } @media (max-width: 768px) { .cta-banner-ahead { min-height: 0; padding: 3rem 1rem; height: auto; } .cta-banner-ahead .callout--ahead { font-size: 1.4rem; padding: 1rem 1.2rem; } } .cta-banner-ahead::before { content: 'PLAN AHEAD'; position: absolute; font-family: var(--font-display); font-size: 28rem; font-weight: 900; text-transform: uppercase; color: rgba(250,197,23,0.06); top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; line-height: 1; letter-spacing: 0.04em; } @media (max-width: 768px) { .cta-banner { padding: 2.5rem 1rem; } .cta-banner::before, .cta-banner-ahead::before { font-size: 8rem; } .cta-banner .container { padding-left: 0; padding-right: 0; box-sizing: border-box; } .cta-btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; padding: 0; margin: 0 auto; box-sizing: border-box; } .cta-btns .btn, .cta-btns .btn--m, .cta-btns .alert-btn, .cta-btns .btn--white-border { width: 100%; max-width: 100%; text-align: center; min-height: 44px; box-sizing: border-box; margin-left: 0; margin-right: 0; white-space: normal; } } @media (max-width: 480px) { .cta-banner::before, .cta-banner-ahead::before { font-size: 6rem; } .cta-banner .cta-title { font-size: 2.4rem; } .cta-banner .cta-sub { font-size: 1.5rem; } } /* ========================================================================== BUTTON ADD-ONS — variants not in btns.css ========================================================================== */ .btn--white-border, .btn--white-border:link, .btn--white-border:visited { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); } .btn--white-border:hover, .btn--white-border:focus { background: #fff; color: var(--alert-charcoal); border-color: #fff; text-decoration: none; } /* ========================================================================== ANIMATIONS ========================================================================== */ @keyframes alertSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .anim { animation: alertSlideUp 0.6s ease both; } .anim-d1 { animation-delay: 0.1s; } .anim-d2 { animation-delay: 0.22s; } .anim-d3 { animation-delay: 0.34s; } .anim-d4 { animation-delay: 0.46s; } /* ========================================================================== ACCESSIBILITY — focus rings + keyboard support ========================================================================== */ /* Strong, consistent focus indicator for all interactive elements within the alert-moval page. We scope to common selectors so we don't bleed into sitewide chrome (header, footer, nav). */ .hero a:focus-visible, .hero button:focus-visible, .status-link:focus-visible, .subnav-toggle:focus-visible, .subnav-link:focus-visible, .partner-card:focus-visible, .resource-list a:focus-visible, .alert-card a:focus-visible, .alert-card .btn:focus-visible, .evac-card:focus-visible, .event-card a:focus-visible, .sidebar-box a:focus-visible, .contact-box a:focus-visible, .cta-banner a:focus-visible, .cta-btns a:focus-visible, .callout a:focus-visible, .checklist-card a:focus-visible, .involved-list a:focus-visible, .partner-cta a:focus-visible, .city-wide-card a:focus-visible, .cal-fire-info a:focus-visible { outline: 3px solid var(--alert-amber); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 2px rgba(0,0,0,0.45); } /* Ensure focused element gets a contrast halo even on dark backgrounds */ .bk-dark a:focus-visible, .bk-blue a:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px var(--alert-amber); } /* Skip focus to
when the existing #main-cont skip link is used. */ main:focus { outline: none; } /* Visually hidden helper (for any future sr-only text additions) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== RESPONSIVE — global tightening ========================================================================== */ @media (max-width: 980px) { .section .row { gap: 1.5rem; } .section .row > [class*="columns"] { width: 100%; flex: 1 1 100%; } } @media (max-width: 768px) { :root { --alert-section-pad: 3rem 0; } .section { padding: var(--alert-section-pad); } .section .container { padding-left: 16px; padding-right: 16px; } .subnav-link { font-size: 1.45rem; } .hero-cta-group { width: 100%; } .hero-cta-group .btn { flex: 1 1 100%; text-align: center; } /* Tighten card paddings on small screens */ .event-card { padding: 1.2rem; gap: 1rem; } .event-card-icon { font-size: 2.4rem; } .event-card-title { font-size: 1.8rem; } .prep-card { padding: 2rem 1.25rem 1.5rem; } .evac-card { padding: 2rem 1.25rem 1.5rem; } .alert-card { padding: 1.5rem 1.25rem; } .checklist-card { padding: 1.4rem; } .involved-list > li { padding: 1.2rem; gap: 1rem; } /* Ensure ALL buttons meet 44x44 touch target minimum on touch devices */ .btn, .btn--s, .btn--m { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Larger inline links inside body copy = easier tap target */ main a { padding: 0.05em 0; } /* Final CTA buttons fill width on mobile */ .cta-btns .btn { width: 100%; } } @media (max-width: 480px) { :root { --alert-section-pad: 2.25rem 0; } .section-title { font-size: 2.4rem; } .section-lede { font-size: 1.45rem; } .block-heading { font-size: 1.7rem; } /* Resource cards: tighter */ .resource-list a { padding: 0.85rem 1rem; } /* Shelter list */ .shelter-list > li { padding: 0.9rem 1rem; gap: 0.85rem; font-size: 1.4rem; } .shelter-list-icon { width: 36px; height: 36px; font-size: 1.5rem; } /* Stage card titles a touch smaller */ .evac-card-title { font-size: 2.4rem; } .prep-card-title { font-size: 2rem; } .alert-card-title { font-size: 2rem; } /* Stat bar: keep 2 cols but lighter */ .stat-num { font-size: 2.8rem; } .stat-label { font-size: 1.2rem; } /* Warning card stacks */ .warning-card { flex-direction: column; gap: 0.6rem; } /* Login link wraps */ .login-link { flex-direction: column; gap: 0.25rem; } } /* Prevent horizontal overflow on small viewports */ @media (max-width: 768px) { html, body { overflow-x: hidden; } img { max-width: 100%; height: auto; } } /* Honor reduced motion preference */ @media (prefers-reduced-motion: reduce) { .anim, .status-dot, .evac-card--go .evac-card-title { animation: none !important; } * { transition: none !important; } }