Upstage Solar Pro 4 – News Weather Information
via Upstage · Generated
- AIMAC Debt 3.85
- Cost $0.0026
- Total Violations 7
- HTML Size 70 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
7 Serious
-
color-contrast serious 7 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<a href="#" class="read-more" aria-label="Read full story: Infrastructure Bill Clears Senate">Read →</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CivicPulse — News, Weather & Information You Can Trust</title>
<meta name="description" content="CivicPulse delivers verified local and global news, accurate weather forecasts, and in-depth information resources. Stay informed with fact-checked reporting.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
<style>
/* ===== RESET & FOUNDATIONS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: #1a1a2e;
background: #f7f8fc;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid #c0392b; outline-offset: 3px; border-radius: 2px; }
/* ===== VARIABLES ===== */
:root {
--crimson: #c0392b;
--crimson-dark: #962d22;
--navy: #1a1a2e;
--slate: #2c3e50;
--amber: #e67e22;
--sky: #2980b9;
--bg: #f7f8fc;
--bg-card: #ffffff;
--text: #1a1a2e;
--text-muted: #5a5d72;
--divider: #e2e4ea;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 4px 24px rgba(26,26,46,0.06);
--shadow-lg: 0 12px 40px rgba(26,26,46,0.10);
--maxw: 1280px;
--header-h: 72px;
}
/* ===== SKIP LINK ===== */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 10000;
background: var(--crimson); color: #fff; padding: 8px 16px;
font-weight: 600; border-radius: 0 0 6px 6px;
}
.skip-link:focus { left: 0; }
/* ===== UTILITY ===== */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.visible { opacity: 1; transform: none; }
/* ===== HEADER ===== */
.site-header {
position: sticky; top: 0; z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--divider);
transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 2px 16px rgba(26,26,46,0.08); }
.header-inner {
display: flex; align-items: center; justify-content: space-between;
height: var(--header-h); gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
width: 44px; height: 44px; border-radius: 50%;
background: var(--crimson);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 18px;
letter-spacing: -0.5px;
box-shadow: 0 2px 8px rgba(192,57,43,0.25);
flex-shrink: 0;
background-image: url('https://placehold.co/120x120/1a1a2e/c0392b?text=CP&font=montserrat');
background-size: cover;
background-position: center;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.3px; }
.brand-tagline { font-size: 11px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; }
.nav-primary { display: flex; align-items: center; gap: 4px; }
.nav-primary a {
padding: 8px 14px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 500; color: var(--text-muted);
transition: color .2s, background .2s;
position: relative;
}
.nav-primary a:hover, .nav-primary a:focus { color: var(--crimson); background: rgba(192,57,43,0.06); }
.nav-primary a.active { color: var(--crimson); }
.nav-primary a.active::after {
content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
width: 18px; height: 2px; background: var(--crimson); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 18px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 600; cursor: pointer;
transition: all .2s; border: 1px solid transparent;
line-height: 1;
}
.btn-primary {
background: var(--crimson); color: #fff;
box-shadow: 0 2px 8px rgba(192,57,43,0.25);
}
.btn-primary:hover, .btn-primary:focus { background: var(--crimson-dark); transform: translateY(-1px); }
.btn-outline {
background: transparent; color: var(--slate);
border-color: var(--divider);
}
.btn-outline:hover, .btn-outline:focus { border-color: var(--slate); background: rgba(44,62,80,0.04); }
.btn-ghost { background: transparent; color: var(--text-muted); padding: 8px 10px; }
.btn-ghost:hover { color: var(--crimson); }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--navy); }
/* ===== BREAKING BANNER ===== */
.breaking-banner {
background: var(--crimson); color: #fff;
padding: 10px 0; font-size: 13px; font-weight: 500;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
}
.breaking-banner .pulse {
width: 10px; height: 10px; border-radius: 50%; background: #fff;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.4); }
}
.breaking-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: 0.9; }
.breaking-banner .break-text { display: flex; align-items: center; gap: 8px; }
/* ===== HERO ===== */
.hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--navy) 0%, #16213e 50%, #0f3460 100%);
color: #fff;
padding: 80px 0 60px;
}
.hero::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(192,57,43,0.15) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(41,128,185,0.12) 0%, transparent 50%);
pointer-events: none;
}
.hero-grid {
display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
position: relative; z-index: 1;
}
.hero-content { max-width: 560px; }
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
padding: 5px 12px; border-radius: 20px;
font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase; margin-bottom: 18px;
backdrop-filter: blur(4px);
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; animation: pulse 2s infinite; }
.hero h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 700; line-height: 1.08; letter-spacing: -0.5px;
margin-bottom: 18px;
}
.hero h1 em { font-style: italic; color: #e8a87c; }
.hero-desc {
font-size: 17px; color: rgba(255,255,255,0.82);
line-height: 1.65; margin-bottom: 28px; max-width: 480px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.btn-light {
background: #fff; color: var(--navy); font-weight: 600;
box-shadow: 0 4px 16px rgba(0,0,0,0.20);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.28); }
.btn-ghost-light {
background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);
padding: 9px 18px;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.hero-stats {
display: flex; gap: 28px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-stat { text-align: left; }
.hero-stat-num { font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.hero-visual {
position: relative; border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-lg);
aspect-ratio: 4/3;
background: #1a1a2e;
}
.hero-visual img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s ease;
}
.hero-visual:hover img { transform: scale(1.03); }
.hero-visual .overlay-tag {
position: absolute; bottom: 16px; left: 16px;
background: rgba(192,57,43,0.92); color: #fff;
padding: 6px 14px; border-radius: 20px;
font-size: 12px; font-weight: 600;
backdrop-filter: blur(4px);
display: flex; align-items: center; gap: 6px;
}
/* ===== SECTION SHELL ===== */
.section { padding: 64px 0; }
.section-head { margin-bottom: 36px; max-width: 640px; }
.section-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: var(--crimson);
margin-bottom: 8px; display: block;
}
.section-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(24px, 3vw, 32px);
font-weight: 700; color: var(--navy);
line-height: 1.15; letter-spacing: -0.3px;
}
.section-intro { color: var(--text-muted); margin-top: 10px; font-size: 15px; line-height: 1.65; }
/* ===== NEWS GRID (3-COL) ===== */
.news-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.news-card {
background: var(--bg-card); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow);
transition: transform .3s, box-shadow .3s;
display: flex; flex-direction: column;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.news-card-img {
aspect-ratio: 16/10; overflow: hidden; position: relative;
background: #e2e4ea;
}
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-category {
position: absolute; top: 12px; left: 12px;
background: var(--crimson); color: #fff;
padding: 4px 10px; border-radius: 4px;
font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase;
}
.news-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.news-card-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.news-card-meta .author-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--sky); }
.news-card-title { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.35; margin-bottom: 8px; }
.news-card-excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; flex: 1; }
.news-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--divider); }
.news-card-tag { font-size: 11px; color: var(--crimson); font-weight: 600; }
.read-more {
font-size: 13px; font-weight: 600; color: var(--sky);
display: inline-flex; align-items: center; gap: 4px;
transition: gap .2s, color .2s;
}
.read-more:hover { gap: 8px; color: var(--crimson); }
/* ===== WEATHER BANNER ===== */
.weather-banner {
background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f2 100%);
border-radius: var(--radius);
padding: 28px 32px;
display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px;
align-items: center;
box-shadow: var(--shadow);
border: 1px solid rgba(41,128,185,0.10);
}
.weather-left { display: flex; align-items: center; gap: 16px; }
.weather-icon-big {
font-size: 52px; line-height: 1; width: 56px; height: 56px;
background: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.weather-main-temp { font-size: 38px; font-weight: 800; color: var(--navy); line-height: 1; }
.weather-condition { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.weather-right { display: flex; flex-direction: column; gap: 14px; }
.weather-forecast-row {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
align-items: center;
}
.wf-day { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.wf-icon { font-size: 20px; text-align: center; }
.wf-temp { font-size: 15px; font-weight: 700; color: var(--navy); text-align: center; }
.wf-label { font-size: 11px; color: var(--text-muted); text-align: center; }
.weather-cta { margin-top: 6px; }
.btn-sky {
background: var(--sky); color: #fff;
box-shadow: 0 2px 8px rgba(41,128,185,0.25);
}
.btn-sky:hover { background: #2471a3; transform: translateY(-1px); }
/* ===== FEATURE GRID ===== */
.feature-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.feature-card {
background: var(--bg-card); border-radius: var(--radius);
padding: 24px; box-shadow: var(--shadow);
border: 1px solid var(--divider);
transition: border-color .2s, transform .2s;
}
.feature-card:hover { border-color: var(--crimson); transform: translateY(-2px); }
.feature-icon {
width: 44px; height: 44px; border-radius: var(--radius-sm);
background: rgba(192,57,43,0.08); color: var(--crimson);
display: flex; align-items: center; justify-content: center;
font-size: 20px; margin-bottom: 14px;
}
.feature-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.feature-card p { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
/* ===== POLL WIDGET ===== */
.poll-section {
background: var(--bg-card); border-radius: var(--radius);
padding: 32px; box-shadow: var(--shadow);
border: 1px solid var(--divider);
}
.poll-question { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.poll-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.poll-options { display: flex; flex-direction: column; gap: 8px; }
.poll-option {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--divider); cursor: pointer;
transition: all .2s; background: #fff;
font-size: 14px; color: var(--text);
}
.poll-option:hover { border-color: var(--crimson); background: rgba(192,57,43,0.04); }
.poll-option.selected { border-color: var(--crimson); background: rgba(192,57,43,0.08); }
.poll-radio {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--divider); flex-shrink: 0;
transition: border-color .2s, background .2s;
position: relative;
}
.poll-option.selected .poll-radio { border-color: var(--crimson); background: var(--crimson); }
.poll-option.selected .poll-radio::after {
content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.poll-percent {
margin-left: auto; font-weight: 700; color: var(--crimson);
min-width: 44px; text-align: right; font-size: 14px;
}
.poll-bar-bg {
height: 6px; background: var(--divider); border-radius: 3px;
margin-top: 8px; overflow: hidden; display: none;
}
.poll-bar-fill {
height: 100%; background: var(--crimson); border-radius: 3px;
transition: width .6s ease;
}
.poll-results { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--divider); display: none; }
.poll-results.show { display: block; }
.poll-results-title { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; }
.poll-result-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.poll-result-label { flex: 1; color: var(--text); }
.poll-result-bar-bg { flex: 0 0 120px; height: 6px; background: var(--divider); border-radius: 3px; overflow: hidden; }
.poll-result-bar-fill { height: 100%; background: var(--crimson); border-radius: 3px; transition: width .6s; }
.poll-result-pct { font-weight: 600; color: var(--crimson); min-width: 36px; text-align: right; }
.poll-vote-btn {
margin-top: 14px; padding: 10px 20px;
background: var(--crimson); color: #fff; border: none;
border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
font-size: 14px; transition: background .2s;
}
.poll-vote-btn:hover { background: var(--crimson-dark); }
.poll-voted { color: var(--text-muted); font-size: 13px; margin-top: 10px; font-style: italic; }
/* ===== SIDEBAR LAYOUT ===== */
.content-with-sidebar {
display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start;
}
.main-article { }
.article-headline {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 700; color: var(--navy);
line-height: 1.2; margin-bottom: 12px;
}
.article-byline {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--text-muted); margin-bottom: 18px;
padding-bottom: 16px; border-bottom: 1px solid var(--divider);
}
.article-byline .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sky); }
.article-byline .name { font-weight: 600; color: var(--navy); }
.article-byline .role { color: var(--text-muted); }
.article-byline .date { margin-left: auto; }
.article-body { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.article-body p { margin-bottom: 16px; }
.article-body p:first-of-type::first-letter {
font-family: 'Playfair Display', Georgia, serif;
font-size: 48px; font-weight: 700; float: left;
padding: 6px 10px 0 0; line-height: 1; color: var(--crimson);
}
.article-pullquote {
border-left: 4px solid var(--crimson);
padding: 16px 20px; margin: 24px 0;
background: rgba(192,57,43,0.04);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px; font-style: italic; color: var(--navy);
}
.article-cta {
margin-top: 24px; padding: 18px 20px;
background: var(--navy); color: #fff;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-size: 14px;
}
.article-cta .btn { background: var(--crimson); }
.article-cta .btn:hover { background: var(--crimson-dark); }
/* ===== SIDEBAR ===== */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-widget {
background: var(--bg-card); border-radius: var(--radius);
padding: 20px; box-shadow: var(--shadow);
border: 1px solid var(--divider);
}
.sidebar-widget h4 {
font-size: 12px; font-weight: 700; letter-spacing: 0.8px;
text-transform: uppercase; color: var(--text-muted);
margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1px solid var(--divider);
}
.sidebar-ticker { overflow: hidden; }
.ticker-wrap {
overflow: hidden; position: relative; padding-top: 8px;
}
.ticker-track {
display: flex; gap: 24px; animation: ticker 22s linear infinite;
white-space: nowrap; will-change: transform;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-item {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--navy); font-weight: 500;
white-space: nowrap;
}
.ticker-item .tick-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson); flex-shrink: 0; }
.ticker-item .tick-tag { font-size: 10px; color: var(--crimson); font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: rgba(192,57,43,0.08); }
.headline-list li {
display: flex; gap: 10px; padding: 8px 0;
border-bottom: 1px solid var(--divider); align-items: flex-start;
}
.headline-list li:last-child { border-bottom: none; }
.headline-list .hl-num {
font-size: 11px; font-weight: 700; color: var(--crimson);
background: rgba(192,57,43,0.08);
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.headline-list a { font-size: 14px; font-weight: 500; color: var(--navy); line-height: 1.35; }
.headline-list a:hover { color: var(--crimson); }
.headline-list .hl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.weather-mini {
display: flex; align-items: center; gap: 12px;
padding: 4px 0;
}
.weather-mini-icon { font-size: 28px; }
.weather-mini-temp { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1; }
.weather-mini-detail { font-size: 12px; color: var(--text-muted); }
.weather-updates { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
/* ===== FAQ ACCORDION ===== */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
background: var(--bg-card); border-radius: var(--radius-sm);
border: 1px solid var(--divider); overflow: hidden;
}
.faq-q {
width: 100%; text-align: left; background: none; border: none;
padding: 16px 18px; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-size: 15px; font-weight: 600; color: var(--navy);
transition: background .2s;
}
.faq-q:hover { background: rgba(192,57,43,0.03); }
.faq-q .faq-icon {
width: 24px; height: 24px; border-radius: 50%;
border: 1.5px solid var(--divider);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: all .2s;
font-size: 16px; color: var(--text-muted); line-height: 1;
}
.faq-item.open .faq-q .faq-icon {
background: var(--crimson); color: #fff; border-color: var(--crimson);
transform: rotate(45deg);
}
.faq-a {
max-height: 0; overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-a {
max-height: 300px; padding: 0 18px 16px;
}
.faq-a p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
/* ===== TESTIMONIALS ===== */
.testimonial-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.testimonial-card {
background: var(--bg-card); border-radius: var(--radius);
padding: 24px; box-shadow: var(--shadow);
border: 1px solid var(--divider);
display: flex; flex-direction: column;
}
.testimonial-stars { color: var(--amber); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.testimonial-text {
font-size: 14.5px; color: var(--text); line-height: 1.6;
margin-bottom: 16px; flex: 1;
}
.testimonial-text::before { content: '\201C'; color: var(--crimson); font-size: 24px; line-height: 0; vertical-align: -4px; margin-right: 2px; }
.testimonial-text::after { content: '\201D'; color: var(--crimson); font-size: 24px; line-height: 0; vertical-align: -4px; margin-left: 2px; }
.testimonial-author { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--sky); flex-shrink: 0;
}
.testimonial-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.testimonial-role { font-size: 11px; color: var(--text-muted); }
/* ===== CTA BANNER ===== */
.cta-banner {
background: var(--navy); color: #fff;
border-radius: var(--radius);
padding: 36px 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
box-shadow: var(--shadow-lg);
}
.cta-banner h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.cta-banner p { font-size: 14px; color: rgba(255,255,255,0.72); max-width: 380px; }
.cta-banner .btn-light { padding: 10px 22px; font-size: 15px; }
/* ===== FOOTER ===== */
.site-footer {
background: var(--navy); color: rgba(255,255,255,0.75);
padding: 56px 0 28px; margin-top: 40px;
}
.footer-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
margin-bottom: 40px;
}
.footer-brand .footer-logo {
width: 44px; height: 44px; border-radius: 50%;
background: var(--crimson); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 18px; margin-bottom: 12px;
}
.footer-brand h4 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.footer-brand p { font-size: 13px; line-height: 1.6; max-width: 260px; }
.footer-col h5 {
font-size: 12px; font-weight: 700; letter-spacing: 0.8px;
text-transform: uppercase; color: rgba(255,255,255,0.5);
margin-bottom: 14px;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul a {
font-size: 13.5px; color: rgba(255,255,255,0.72);
transition: color .2s;
}
.footer-col ul a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: 20px; margin-top: 20px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.footer-social { display: flex; gap: 8px; }
.footer-social a {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,0.08); display: flex;
align-items: center; justify-content: center;
font-size: 14px; color: rgba(255,255,255,0.7); transition: all .2s;
}
.footer-social a:hover { background: var(--crimson); color: #fff; }
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.hero-visual { aspect-ratio: 16/9; max-width: 480px; }
.content-with-sidebar { grid-template-columns: 1fr; }
.sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
:root { --header-h: 64px; }
.nav-primary { display: none; }
.menu-toggle { display: block; }
.nav-primary.open {
display: flex; flex-direction: column;
position: absolute; top: var(--header-h); left: 0; right: 0;
background: #fff; border-bottom: 1px solid var(--divider);
padding: 12px 24px; box-shadow: var(--shadow-lg);
gap: 2px; z-index: 100;
}
.nav-primary.open a { padding: 12px 14px; width: 100%; }
.news-grid { grid-template-columns: 1fr; }
.weather-banner { grid-template-columns: 1fr; }
.weather-forecast-row { grid-template-columns: repeat(5, 1fr); font-size: 11px; }
.feature-grid { grid-template-columns: 1fr; }
.testimonial-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-stats { flex-wrap: wrap; gap: 16px; }
.cta-banner { flex-direction: column; text-align: center; }
.cta-banner p { max-width: 100%; }
.sidebar { grid-template-columns: 1fr; }
.article-byline .date { margin-left: 0; width: 100%; margin-top: 6px; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
.header-actions .btn-outline { display: none; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ===== SCROLL ANIMATIONS (vanilla) ===== */
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
</style>
</head>
<body>
<!-- SKIP LINK -->
<a href="#main-navigation" class="skip-link">Skip to main navigation</a>
<!-- ==================== HEADER ==================== -->
<header class="site-header" id="site-header" role="banner">
<div class="container header-inner">
<a href="#" class="brand" aria-label="CivicPulse home">
<div class="brand-logo" aria-hidden="true"></div>
<div class="brand-text">
<span class="brand-name">CivicPulse</span>
<span class="brand-tagline">News · Weather · Information</span>
</div>
</a>
<nav class="nav-primary" id="main-navigation" aria-label="Primary navigation">
<a href="#" class="active">Home</a>
<a href="#local">Local</a>
<a href="#national">National</a>
<a href="#world">World</a>
<a href="#weather">Weather</a>
<a href="#about">About</a>
<a href="#breaking">Breaking News</a>
</nav>
<div class="header-actions">
<a href="#subscribe" class="btn btn-primary">Sign Up</a>
<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu" aria-expanded="false">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></svg>
</button>
</div>
</div>
</header>
<!-- ==================== BREAKING BANNER ==================== -->
<div class="container">
<div class="breaking-banner" role="alert">
<span class="break-text"><span class="pulse"></span> Breaking: Senate passes landmark climate infrastructure bill after overnight session</span>
<a href="#breaking">Full coverage →</a>
</div>
</div>
<!-- ==================== HERO ==================== -->
<section class="hero" aria-labelledby="hero-title">
<div class="container">
<div class="hero-grid">
<div class="hero-content fade-in">
<div class="hero-badge"><span class="dot"></span> Live coverage — 12 reporters on the ground</div>
<h1 id="hero-title">Your daily pulse on <em>news, weather, and</em> the information that matters.</h1>
<p class="hero-desc">CivicPulse brings together verified local reporting, hyper-accurate weather forecasting, and deep investigative journalism. Every headline is fact-checked. Every forecast is backed by the latest meteorological models. Every story is told with context you can trust.</p>
<div class="hero-actions">
<a href="#subscribe" class="btn btn-light">Sign Up Free</a>
<a href="#weather" class="btn btn-ghost-light">View Forecast</a>
<a href="#report" class="btn btn-ghost-light">Submit a Tip</a>
</div>
<div class="hero-stats">
<div class="hero-stat">
<div class="hero-stat-num">142K+</div>
<div class="hero-stat-label">Daily readers</div>
</div>
<div class="hero-stat">
<div class="hero-stat-num">2,300+</div>
<div class="hero-stat-label">Stories this week</div>
</div>
<div class="hero-stat">
<div class="hero-stat-num">98.4%</div>
<div class="hero-stat-label">Forecast accuracy</div>
</div>
<div class="hero-stat">
<div class="hero-stat-num">47</div>
<div class="hero-stat-label">Local bureaus</div>
</div>
</div>
</div>
<div class="hero-visual fade-in reveal-delay-2">
<img src="https://picsum.photos/800/600?grayscale&blur=2" alt="Journalist reporting at a city council session with CivicPulse news van in background" loading="lazy">
<div class="overlay-tag">● Featured — City Council Special Session</div>
</div>
</div>
</div>
</section>
<!-- ==================== TOP STORIES / NEWS GRID ==================== -->
<section class="section" id="top-stories" aria-labelledby="top-title">
<div class="container">
<div class="section-head fade-in">
<span class="section-eyebrow">Top Stories Today</span>
<h2 class="section-title" id="top-title">The stories shaping your world right now.</h2>
<p class="section-intro">From city hall to the global stage, our reporters are on the ground verifying facts, interviewing sources, and delivering the full picture — not just the headline.</p>
</div>
<div class="news-grid">
<!-- Card 1 -->
<article class="news-card fade-in reveal-delay-1">
<div class="news-card-img">
<img src="https://picsum.photos/600/375?random=1" alt="Capitol building at dusk with press pool in foreground" loading="lazy">
<span class="news-card-category">National</span>
</div>
<div class="news-card-body">
<div class="news-card-meta">
<span class="author-avatar"></span>
<span>By Maria Delgado</span>
<span>· 2h ago</span>
</div>
<h3 class="news-card-title">Infrastructure Bill Clears Senate in Bipartisan Vote</h3>
<p class="news-card-excerpt">The landmark $1.2 trillion package passed after a marathon overnight session, funding bridge repairs, broadband expansion, and grid modernization across 48 states. The House is expected to take it up next week.</p>
<div class="news-card-footer">
<span class="news-card-tag">Fact-checked</span>
<a href="#" class="read-more" aria-label="Read full story: Infrastructure Bill Clears Senate">Read →</a>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="news-card fade-in reveal-delay-2">
<div class="news-card-img">
<img src="https://picsum.photos/600/375?random=2" alt="Snow-covered mountains with a weather station in the foreground" loading="lazy">
<span class="news-card-category">Weather</span>
</div>
<div class="news-card-body">
<div class="news-card-meta">
<span class="author-avatar"></span>
<span>By Dr. Kenji Watanabe</span>
<span>· 4h ago</span>
</div>
<h3 class="news-card-title">Winter Storm Watch: 18 Inches Possible Across Northern Tier</h3>
<p class="news-card-excerpt">Meteorologists are tracking a powerful low-pressure system moving out of Canada. Snowfall totals could reach 18 inches in elevated areas, with wind gusts up to 55 mph. Travel advisories are in effect for six states.</p>
<div class="news-card-footer">
<span class="news-card-tag">Updated hourly</span>
<a href="#weather" class="read-more" aria-label="Read full weather story">View Forecast →</a>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="news-card fade-in reveal-delay-3">
<div class="news-card-img">
<img src="https://picsum.photos/600/375?random=3" alt="Protestors gathered in a public square holding signs" loading="lazy">
<span class="news-card-category">World</span>
</div>
<div class="news-card-body">
<div class="news-card-meta">
<span class="author-avatar"></span>
<span>By Amara Osei</span>
<span>· 6h ago</span>
</div>
<h3 class="news-card-title">Climate Summit Reaches Historic Agreement on Emissions Targets</h3>
<p class="news-card-excerpt">Delegates from 143 nations signed a framework committing to a 45% reduction in carbon output by 2035. The accord includes funding mechanisms for developing economies and a binding review process starting in 2027.</p>
<div class="news-card-footer">
<span class="news-card-tag">Analysis</span>
<a href="#" class="read-more" aria-label="Read full story: Climate Summit Agreement">Deep Dive →</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ==================== WEATHER BANNER ==================== -->
<section class="section" id="weather" aria-labelledby="weather-title" style="padding-top: 0;">
<div class="container">
<div class="weather-banner fade-in">
<div class="weather-left">
<div class="weather-icon-big" aria-hidden="true">🌤</div>
<div>
<div class="weather-main-temp">42°F</div>
<div class="weather-condition">Partly cloudy — Seattle, WA — Updated 12 min ago</div>
</div>
</div>
<div class="weather-right">
<div class="weather-forecast-row" role="list">
<div role="listitem"><span class="wf-day">Mon</span><span class="wf-icon">🌟</span><span class="wf-temp">44°</span><span class="wf-label">Rain</span></div>
<div role="listitem"><span class="wf-day">Tue</span><span class="wf-icon">🌤</span><span class="wf-temp">42°</span><span class="wf-label">Cloudy</span></div>
<div role="listitem"><span class="wf-day">Wed</span><span class="wf-icon">🌧</span><span class="wf-temp">38°</span><span class="wf-label">Light snow</span></div>
<div role="listitem"><span class="wf-day">Thu</span><span class="wf-icon">🌟</span><span class="wf-temp">41°</span><span class="wf-label">Showers</span></div>
<div role="listitem"><span class="wf-day">Fri</span><span class="wf-icon">🌞</span><span class="wf-temp">47°</span><span class="wf-label">Partly sunny</span></div>
</div>
<p class="weather-updates">Humidity 78% · Wind NW 12 mph · Sunrise 6:48 AM · Sunset 5:12 PM</p>
<div class="weather-cta">
<a href="#" class="btn btn-sky">View Full 10-Day Forecast</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== FEATURES + POLL (2-COL) ==================== -->
<section class="section" aria-labelledby="features-title">
<div class="container">
<div class="grid-2col" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start;">
<!-- Left: Features -->
<div class="fade-in">
<div class="section-head" style="margin-bottom:24px;">
<span class="section-eyebrow">Why CivicPulse</span>
<h2 class="section-title" id="features-title">Reporting you can act on.</h2>
<p class="section-intro">We built CivicPulse for readers who demand accuracy, depth, and transparency — not just the fastest headline.</p>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">✓</div>
<h3>Fact-Checked First</h3>
<p>Every article passes a three-step verification process. Corrections are published within 15 minutes when errors are found.</p>
</div>
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">☁</div>
<h3>Hyper-Local Weather</h3>
<p>Storm warnings, pollen counts, and air quality updated every 15 minutes for your exact zip code — not just your city.</p>
</div>
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">📝</div>
<h3>Byline Transparency</h3>
<p>Every story lists the reporter, editor, and photo credit. Know who gathered the information behind the headline.</p>
</div>
<div class="feature-card">
<div class="feature-icon" aria-hidden="true">📈</div>
<h3>Archives Since 2011</h3>
<p>Search over a decade of local and national reporting. Historical context built into every major story we cover.</p>
</div>
</div>
<!-- CTA BANNER inside features -->
<div style="margin-top: 32px;">
<a href="#subscribe" class="cta-banner" style="display:flex;">
<div>
<h3>Stay ahead of the day.</h3>
<p>Get the morning briefing: 3 top stories, your local forecast, and one thing you should know — delivered by 6:30 AM.</p>
</div>
<a href="#subscribe" class="btn btn-light">Sign Up Free</a>
</a>
</div>
</div>
<!-- Right: Poll Widget -->
<div class="poll-section fade-in reveal-delay-2" aria-labelledby="poll-title">
<h3 class="section-eyebrow" style="color: var(--crimson); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; display:block; margin-bottom: 6px;">Reader Poll</h3>
<h2 class="poll-question" id="poll-title" style="font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 4px;">Should municipal broadband be a public utility?</h2>
<p class="poll-sub">Cast your vote and see how the CivicPulse community is leaning.</p>
<div class="poll-options" role="radiogroup" aria-label="Poll options">
<div class="poll-option" role="radio" aria-checked="false" tabindex="0">
<span class="poll-radio"></span>
<span>Yes — internet access is a public right</span>
<span class="poll-percent" data-pct="47">47%</span>
</div>
<div class="poll-option" role="radio" aria-checked="false" tabindex="0">
<span class="poll-radio"></span>
<span>No — private providers should lead</span>
<span class="poll-percent" data-pct="31">31%</span>
</div>
<div class="poll-option" role="radio" aria-checked="false" tabindex="0">
<span class="poll-radio"></span>
<span>Not sure — need more information</span>
<span class="poll-percent" data-pct="22">22%</span>
</div>
</div>
<button class="poll-vote-btn" id="pollVoteBtn">Vote & See Results</button>
<p class="poll-voted" id="pollVotedMsg"></p>
<div class="poll-results" id="pollResults">
<p class="poll-results-title">Results (1,847 responses)</p>
<div class="poll-result-row">
<span class="poll-result-label">Yes — internet access is a public right</span>
<div class="poll-result-bar-bg"><div class="poll-result-bar-fill" style="width:47%"></div></div>
<span class="poll-result-pct">47%</span>
</div>
<div class="poll-result-row">
<span class="poll-result-label">No — private providers should lead</span>
<div class="poll-result-bar-bg"><div class="poll-result-bar-fill" style="width:31%"></div></div>
<span class="poll-result-pct">31%</span>
</div>
<div class="poll-result-row">
<span class="poll-result-label">Not sure — need more information</span>
<div class="poll-result-bar-bg"><div class="poll-result-bar-fill" style="width:22%"></div></div>
<span class="poll-result-pct">22%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== FEATURED STORY + SIDEBAR ==================== -->
<section class="section" id="report" aria-labelledby="featured-title">
<div class="container">
<div class="section-head fade-in">
<span class="section-eyebrow">Featured Reporting</span>
<h2 class="section-title" id="featured-title">Deep community coverage, backed by on-the-ground reporting.</h2>
<p class="section-intro">Our reporters spend time in the neighborhoods they cover. Here is the kind of story you will only find at CivicPulse.</p>
</div>
<div class="content-with-sidebar">
<!-- MAIN ARTICLE -->
<article class="main-article fade-in">
<div>
<span class="news-card-category" style="background: var(--sky); color:#fff; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; margin-bottom: 12px;">Investigative</span>
<h2 class="article-headline">Three Months Inside the Riverbend Water Crisis: What We Found</h2>
</div>
<div class="article-byline">
<div class="avatar" aria-hidden="true"></div>
<div>
<div class="name">Priya Ramanathan</div>
<div class="role">Investigative Reporter</div>
</div>
<span class="date">November 14, 2025 · 11 min read</span>
</div>
<div class="article-body">
<p>For seventy-two days, CivicPulse reporters lived in Riverbend, attended three city council meetings, reviewed more than 400 pages of internal utility documents, and interviewed twenty-two residents whose taps had run brown or dry. What emerged was not a simple equipment failure but a pattern of deferred maintenance spanning a decade, compounded by a regulatory gap that left the utility under neither state nor federal oversight for nearly four years.</p>
<p>The byline on this story represents a team of four journalists, a data analyst, and a photojournalist who documented the infrastructure firsthand. We are publishing the full documents, the data set, and a plain-language explainer alongside this piece so you can see the evidence for yourself. Transparency is not a slogan at CivicPulse — it is a workflow.</p>
<div class="article-pullquote">
“The water came out looking like tea. My kids wouldn’t drink it. We bought fourteen jugs in one week.” — Resident testimonial, Riverbend neighborhood
</div>
<p>The headline is stark: Riverbend’s aging filtration plant failed a key pressure test in August, and the warning sign was visible in internal logs as early as March. Yet the public was not notified until late October. We asked the utility director why the timeline stretched so long. Her answer, documented below, raises questions about the notification protocols that communities across three counties currently rely on.</p>
<p>This story is part of CivicPulse’s ongoing series on essential infrastructure. We will be following up with a live Q&A session next Thursday at 7 PM, where our reporters will answer reader questions about the findings and the broader systemic issues they raise.</p>
<div class="article-cta">
<span>Have a tip about water quality in your area? Our tip line is open and confidential.</span>
<a href="#" class="btn">Submit a Tip</a>
</div>
</div>
</article>
<!-- SIDEBAR -->
<aside class="sidebar" aria-label="Sidebar content">
<!-- Headlines Widget -->
<div class="sidebar-widget fade-in reveal-delay-1">
<h4>Top Headlines</h4>
<ul class="headline-list">
<li>
<span class="hl-num">1</span>
<div>
<a href="#">Governor signs ed reform package into law</a>
<div class="hl-meta">Politics · 3h ago</div>
</div>
</li>
<li>
<span class="hl-num">2</span>
<div>
<a href="#">Major merger threatens local grocery competition</a>
<div class="hl-meta">Business · 5h ago</div>
</div>
</li>
<li>
<span class="hl-num">3</span>
<div>
<a href="#">Transit authority approves new bus rapid route</a>
<div class="hl-meta">Local · 7h ago</div>
</div>
</li>
<li>
<span class="hl-num">4</span>
<div>
<a href="#">Vaccination rates climb among school-age children</a>
<div class="hl-meta">Health · 9h ago</div>
</div>
</li>
<li>
<span class="hl-num">5</span>
<div>
<a href="#">Scientists confirm new exoplanet in habitable zone</a>
<div class="hl-meta">Science · 11h ago</div>
</div>
</li>
</ul>
</div>
<!-- Photo Gallery Widget -->
<div class="sidebar-widget fade-in reveal-delay-2">
<h4>Photo Gallery</h4>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div style="aspect-ratio:1; border-radius:6px; overflow:hidden; background:#e2e4ea;">
<img src="https://picsum.photos/200/200?random=10" alt="Flooded street after heavy rainfall" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
</div>
<div style="aspect-ratio:1; border-radius:6px; overflow:hidden; background:#e2e4ea;">
<img src="https://picsum.photos/200/200?random=11" alt="City council chamber during debate" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
</div>
<div style="aspect-ratio:1; border-radius:6px; overflow:hidden; background:#e2e4ea;">
<img src="https://picsum.photos/200/200?random=12" alt="Snowplow on mountain highway" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
</div>
<div style="aspect-ratio:1; border-radius:6px; overflow:hidden; background:#e2e4ea;">
<img src="https://picsum.photos/200/200?random=13" alt="Protest march on downtown avenue" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
</div>
</div>
<a href="#" style="display:block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--crimson);">View full gallery →</a>
</div>
<!-- Weather Mini Widget -->
<div class="sidebar-widget fade-in reveal-delay-3">
<h4>Weather Outlook</h4>
<div class="weather-mini">
<span class="weather-mini-icon" aria-hidden="true">🌤</span>
<div>
<div class="weather-mini-temp">42°F</div>
<div class="weather-mini-detail">Seattle — partly cloudy</div>
</div>
</div>
<div class="weather-updates" style="margin-top: 6px;">
High 46° · Low 35° · Precipitation 30% · UV Index 2 (Low)
</div>
<a href="#weather" style="display:block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--sky);">Full 10-day forecast →</a>
</div>
<!-- Ticker Widget -->
<div class="sidebar-widget fade-in reveal-delay-3">
<h4>News Ticker</h4>
<div class="ticker-wrap">
<div class="ticker-track" id="tickerTrack">
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Breaking</span> Senate passes climate infrastructure bill</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Local</span> Riverbend water crisis timeline published</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Weather</span> Winter storm watch issued for northern tier</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">World</span> Climate summit reaches emissions agreement</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Business</span> Merger review underway at federal level</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Local</span> Transit authority approves new bus rapid route</span>
<!-- duplicate for seamless loop -->
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Breaking</span> Senate passes climate infrastructure bill</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Local</span> Riverbend water crisis timeline published</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Weather</span> Winter storm watch issued for northern tier</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">World</span> Climate summit reaches emissions agreement</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Business</span> Merger review underway at federal level</span>
<span class="ticker-item"><span class="tick-dot"></span><span class="tick-tag">Local</span> Transit authority approves new bus rapid route</span>
</div>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- ==================== FAQ ACCORDION ==================== -->
<section class="section" aria-labelledby="faq-title">
<div class="container">
<div class="section-head fade-in" style="text-align:center; margin-left:auto; margin-right:auto;">
<span class="section-eyebrow" style="display:block; margin-bottom: 8px;">Good to Know</span>
<h2 class="section-title" id="faq-title">Frequently asked questions.</h2>
<p class="section-intro">Everything you need to know about subscribing, our editorial standards, and how to get in touch with our newsroom.</p>
</div>
<div class="container" style="max-width: 720px;">
<div class="faq-list fade-in" id="faqList">
<div class="faq-item">
<button class="faq-q" aria-expanded="false" aria-controls="faq1-answer">
<span>Is CivicPulse free to read?</span>
<span class="faq-icon" aria-hidden="true">+</span>
</button>
<div class="faq-a" id="faq1-answer" role="region">
<p>Yes. All breaking news, weather forecasts, and local reporting on CivicPulse is free. We offer an optional Premium tier that includes ad-free reading, early access to in-depth investigations, and custom weather alerts for up to five locations. Premium is $6/month or $54/year.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false" aria-controls="faq2-answer">
<span>How does your fact-checking process work?</span>
<span class="faq-icon" aria-hidden="true">+</span>
</button>
<div class="faq-a" id="faq2-answer" role="region">
<p>Every story passes a three-step verification: the reporter verifies primary sources and documents, a second editor reviews the reporting for accuracy and context, and our fact-checking team confirms any numerical claims, quotes, and attributions. If an error is identified, we publish a correction within 15 minutes and append a note to the article.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false" aria-controls="faq3-answer">
<span>How do I submit a news tip or weather observation?</span>
<span class="faq-icon" aria-hidden="true">+</span>
</button>
<div class="faq-a" id="faq3-answer" role="region">
<p>Use the Submit a Tip button at the bottom of any article, or email tips@civicpulse.example. You can remain anonymous if you choose. For weather observations — hail size, snowfall totals, local flooding — include your location, the time of the event, and a photo if possible. Our meteorology team reviews all submissions within two hours during active weather.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false" aria-controls="faq4-answer">
<span>Do you publish corrections and retractions?</span>
<span class="faq-icon" aria-hidden="true">+</span>
</button>
<div class="faq-a" id="faq4-answer" role="region">
<p>Yes. Corrections are appended to the original article and logged in our public corrections page. Retractions are rare and reserved for stories where the core claim or evidence is fundamentally unsound. We maintain a public corrections log updated weekly, in line with best practices from the Trust Indicators project.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false" aria-controls="faq5-answer">
<span>Can I contact a specific reporter or the newsroom?</span>
<span class="faq-icon" aria-hidden="true">+</span>
</button>
<div class="faq-a" id="faq5-answer" role="region">
<p>Each article lists the reporter’s name and a direct email link. You can also reach our general newsroom at newsroom@civicpulse.example or call our public tip line at (206) 555-0142 during business hours. Our meteorology desk is available 24/7 at weather@civicpulse.example for urgent weather questions.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== TESTIMONIALS ==================== -->
<section class="section" aria-labelledby="testimonials-title">
<div class="container">
<div class="section-head fade-in" style="text-align:center; margin-left:auto; margin-right:auto;">
<span class="section-eyebrow" style="display:block; margin-bottom: 8px;">Reader Trust</span>
<h2 class="section-title" id="testimonials-title">What our readers say.</h2>
<p class="section-intro">Across the country, readers rely on CivicPulse for accurate news, reliable weather, and stories that hold power to account.</p>
</div>
<div class="testimonial-grid fade-in">
<div class="testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">★ ★ ★ ★ ★</div>
<p class="testimonial-text">I moved to a new city and CivicPulse was the first place I went for local news. The reporting on city council decisions helped me understand my neighborhood in a way no national outlet ever could.</p>
<div class="testimonial-author">
<div class="testimonial-avatar" aria-hidden="true"></div>
<div>
<div class="testimonial-name">Diane Kowalski</div>
<div class="testimonial-role">Subscriber since 2019 · Portland, OR</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">★ ★ ★ ★ ★</div>
<p class="testimonial-text">As a small business owner, weather accuracy matters. CivicPulse’s hyperlocal forecasts saved me from two major shipping mistakes last winter. The hourly updates during the storm were genuinely useful, not just flashy.</p>
<div class="testimonial-author">
<div class="testimonial-avatar" aria-hidden="true" style="background: var(--amber);"></div>
<div>
<div class="testimonial-name">Marcus Chen</div>
<div class="testimonial-role">Premium subscriber · Seattle, WA</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">★ ★ ★ ★ ★</div>
<p class="testimonial-text">I teach media literacy, and I point my students to CivicPulse as a model of transparent journalism. The bylines, the corrections log, the document attachments — this is how news should be done.</p>
<div class="testimonial-author">
<div class="testimonial-avatar" aria-hidden="true" style="background: var(--sky);"></div>
<div>
<div class="testimonial-name">Dr. Lucia Ferraro</div>
<div class="testimonial-role">Journalism educator · Austin, TX</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ==================== FINAL CTA BANNER ==================== -->
<section class="section" style="padding-top: 0; padding-bottom: 0;">
<div class="container">
<div style="background: linear-gradient(135deg, var(--navy) 0%, #16213e 100%); border-radius: var(--radius); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--shadow-lg);">
<div>
<h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 24px; color: #fff; margin-bottom: 8px;">Get the CivicPulse Morning Briefing.</h3>
<p style="color: rgba(255,255,255,0.72); font-size: 14px; max-width: 380px;">Three top stories, your local forecast, and one thing you should know — delivered free every morning by 6:30 AM.</p>
</div>
<div style="display: flex; gap: 10px; flex-shrink: 0;">
<input type="email" placeholder="your@email.com" style="padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; min-width: 200px; outline: none;">
<button class="btn btn-light" style="white-space: nowrap;">Sign Up Free</button>
</div>
</div>
</div>
</section>
<!-- ==================== FOOTER ==================== -->
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="footer-logo" aria-hidden="true">CP</div>
<h4>CivicPulse</h4>
<p>Independent news, weather, and information for communities that value accuracy. Fact-checked. Bylined. Transparent.</p>
</div>
<div class="footer-col">
<h5>Coverage</h5>
<ul>
<li><a href="#local">Local News</a></li>
<li><a href="#national">National</a></li>
<li><a href="#world">World Affairs</a></li>
<li><a href="#weather">Weather</a></li>
<li><a href="#">Investigations</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Company</h5>
<ul>
<li><a href="#about">About CivicPulse</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Newsroom Contacts</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#subscribe">Subscribe</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Contact</h5>
<ul class="footer-contact">
<li><a href="mailto:newsroom@civicpulse.example">newsroom@civicpulse.example</a></li>
<li><a href="mailto:weather@civicpulse.example">weather@civicpulse.example</a></li>
<li><a href="tel:+12065550142">(206) 555-0142</a></li>
<li><a href="#">1200 Pacific Ave, Suite 400<br>Seattle, WA 98101</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© 2025 CivicPulse Media, Inc. All rights reserved.</div>
<div class="footer-legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Settings</a>
<a href="#">Accessibility</a>
<a href="#">Corrections Log</a>
</div>
<div class="footer-social" aria-label="Social media links">
<a href="#" aria-label="Follow on X (Twitter)">☍</a>
<a href="#" aria-label="Follow on Facebook">𝕏</a>
<a href="#" aria-label="Follow on Instagram">𝕐</a>
<a href="#" aria-label="Subscribe on YouTube">▶</a>
<a href="#" aria-label="Follow on LinkedIn">𝔻</a>
</div>
</div>
</div>
</footer>
<!-- ==================== SCRIPTS ==================== -->
<script>
(function() {
'use strict';
// --- HEADER SCROLL SHADOW ---
var header = document.getElementById('site-header');
var onScroll = function() {
if (window.scrollY > 8) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
// --- MOBILE MENU TOGGLE ---
var menuToggle = document.getElementById('menuToggle');
var navPrimary = document.getElementById('main-navigation');
if (menuToggle && navPrimary) {
menuToggle.addEventListener('click', function() {
var open = navPrimary.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', open);
});
// close on outside click
document.addEventListener('click', function(e) {
if (!navPrimary.contains(e.target) && !menuToggle.contains(e.target)) {
navPrimary.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
}
});
// close on link click
navPrimary.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', function() {
navPrimary.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
});
});
}
// --- SCROLL REVEAL (Intersection Observer) ---
var fadeEls = document.querySelectorAll('.fade-in');
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
io.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
fadeEls.forEach(function(el) { io.observe(el); });
} else {
fadeEls.forEach(function(el) { el.classList.add('visible'); });
}
// --- POLL WIDGET ---
var pollOptions = document.querySelectorAll('.poll-option');
var pollVoteBtn = document.getElementById('pollVoteBtn');
var pollResults = document.getElementById('pollResults');
var pollVotedMsg = document.getElementById('pollVotedMsg');
var pollVoted = false;
pollOptions.forEach(function(opt) {
opt.addEventListener('click', function() {
if (pollVoted) return;
pollOptions.forEach(function(o) {
o.classList.remove('selected');
o.setAttribute('aria-checked', 'false');
});
opt.classList.add('selected');
opt.setAttribute('aria-checked', 'true');
});
opt.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
opt.click();
}
});
});
pollVoteBtn.addEventListener('click', function() {
var selected = document.querySelector('.poll-option.selected');
if (!selected) {
pollVotedMsg.textContent = 'Please select an option before voting.';
pollVotedMsg.style.color = '#c0392b';
return;
}
pollVoted = true;
pollVoteBtn.style.display = 'none';
pollResults.classList.add('show');
pollVotedMsg.textContent = 'Thank you for voting. You can see the results below.';
pollVotedMsg.style.color = '';
});
// --- FAQ ACCORDION ---
var faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(function(item) {
var btn = item.querySelector('.faq-q');
btn.addEventListener('click', function() {
var isOpen = item.classList.contains('open');
// close all
faqItems.forEach(function(other) {
other.classList.remove('open');
other.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
btn.setAttribute('aria-expanded', 'true');
}
});
});
// --- TICKER PAUSE ON HOVER ---
var tickerTrack = document.getElementById('tickerTrack');
if (tickerTrack) {
var tickerWrap = tickerTrack.closest('.ticker-wrap');
tickerWrap.addEventListener('mouseenter', function() {
tickerTrack.style.animationPlayState = 'paused';
});
tickerWrap.addEventListener('mouseleave', function() {
tickerTrack.style.animationPlayState = 'running';
});
}
// --- SMOOTH SCROLL FOR ANCHOR LINKS ---
document.querySelectorAll('a[href^="#"]').forEach(function(link) {
link.addEventListener('click', function(e) {
var href = link.getAttribute('href');
if (href === '#') return;
var target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:50:19.045Z",
"url": "https://benchmark.aimac.invalid/55167bb76835d019275709e057ff54a49bb522d0723001bbe50510ad3b16046a.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "select-name",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-allowed-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attributes are used correctly for the defined role"
}
],
"none": [
{
"id": "aria-unsupported-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute is supported"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"CivicPulse home\">\n <div class=\"brand-logo\" aria-hidden=\"true\"></div>\n <div class=\"brand-text\">\n <span class=\"brand-name\">CivicPulse</span>\n <span class=\"brand-tagline\">News \u00b7 Weather \u00b7 Information</span>\n </div>\n </a>",
"target": [
".brand"
]
}
]
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-conditional-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"CivicPulse home\">\n <div class=\"brand-logo\" aria-hidden=\"true\"></div>\n <div class=\"brand-text\">\n <span class=\"brand-name\">CivicPulse</span>\n <span class=\"brand-tagline\">News \u00b7 Weather \u00b7 Information</span>\n </div>\n </a>",
"target": [
".brand"
]
}
]
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "deprecatedrole",
"data": null,
"relatedNodes": [],
"impact": "minor",
"message": "ARIA role is not deprecated"
}
],
"impact": null,
"html": "<header class=\"site-header\" id=\"site-header\" role=\"banner\">",
"target": [
"#site-header"
]
}
]
},
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body>",
"target": [
"body"
]
}
]
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "focusable-modal-open",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements while a modal is open"
},
{
"id": "focusable-disabled",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
},
{
"id": "focusable-not-tabbable",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "No focusable elements contained within element"
}
],
"none": [],
"impact": null,
"html": "<div class=\"brand-logo\" aria-hidden=\"true\"></div>",
"target": [
".brand-logo"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "ARIA attribute is allowed"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"CivicPulse home\">\n <div class=\"brand-logo\" aria-hidden=\"true\"></div>\n <div class=\"brand-text\">\n <span class=\"brand-name\">CivicPulse</span>\n <span class=\"brand-tagline\">News \u00b7 Weather \u00b7 Information</span>\n </div>\n </a>",
"target": [
".brand"
]
}
]
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "All required ARIA attributes are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<header class=\"site-header\" id=\"site-header\" role=\"banner\">",
"target": [
"#site-header"
]
}
]
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-children",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA children are present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"weather-forecast-row\" role=\"list\">",
"target": [
".weather-forecast-row"
]
}
]
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-required-parent",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Required ARIA parent role present"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div role=\"listitem\"><span class=\"wf-day\">Mon</span><span class=\"wf-icon\">\ud83c\udf1f</span><span class=\"wf-temp\">44\u00b0</span><span class=\"wf-label\">Rain</span></div>",
"target": [
"div[role=\"listitem\"]:nth-child(1)"
]
}
]
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "invalidrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is valid"
},
{
"id": "abstractrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Abstract roles are not used"
},
{
"id": "unsupportedrole",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA role is supported"
}
],
"impact": null,
"html": "<header class=\"site-header\" id=\"site-header\" role=\"banner\">",
"target": [
"#site-header"
]
}
]
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "no-implicit-explicit-label",
"data": "radio",
"relatedNodes": [],
"impact": "serious",
"message": "There is no mismatch between a <label> and accessible name"
}
],
"impact": null,
"html": "<div class=\"poll-option\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\">\n <span class=\"poll-radio\"></span>\n <span>Yes \u2014 internet access is a public right</span>\n <span class=\"poll-percent\" data-pct=\"47\">47%</span>\n </div>",
"target": [
".poll-option[role=\"radio\"]:nth-child(1)"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": "critical",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute values are valid"
},
{
"id": "aria-errormessage",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
},
{
"id": "aria-level",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-level values are valid"
}
],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"CivicPulse home\">\n <div class=\"brand-logo\" aria-hidden=\"true\"></div>\n <div class=\"brand-text\">\n <span class=\"brand-name\">CivicPulse</span>\n <span class=\"brand-tagline\">News \u00b7 Weather \u00b7 Information</span>\n </div>\n </a>",
"target": [
".brand"
]
}
]
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-valid-attr",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute name is valid"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"brand\" aria-label=\"CivicPulse home\">\n <div class=\"brand-logo\" aria-hidden=\"true\"></div>\n <div class=\"brand-text\">\n <span class=\"brand-name\">CivicPulse</span>\n <span class=\"brand-tagline\">News \u00b7 Weather \u00b7 Information</span>\n </div>\n </a>",
"target": [
".brand"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<section class=\"section\" id=\"weather\" aria-labelledby=\"weather-title\" style=\"padding-top: 0;\">",
"target": [
"#weather"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button class=\"poll-vote-btn\" id=\"pollVoteBtn\">Vote & See Results</button>",
"target": [
"#pollVoteBtn"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 id=\"hero-title\">Your daily pulse on <em>news, weather, and</em> the information that matters.</h1>",
"target": [
"#hero-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"top-title\">The stories shaping your world right now.</h2>",
"target": [
"#top-title"
]
},
{
"html": "<h3 class=\"news-card-title\">Infrastructure Bill Clears Senate in Bipartisan Vote</h3>",
"target": [
".reveal-delay-1.news-card > .news-card-body > .news-card-title"
]
},
{
"html": "<h3 class=\"news-card-title\">Winter Storm Watch: 18 Inches Possible Across Northern Tier</h3>",
"target": [
".news-card:nth-child(2) > .news-card-body > .news-card-title"
]
},
{
"html": "<h3 class=\"news-card-title\">Climate Summit Reaches Historic Agreement on Emissions Targets</h3>",
"target": [
".news-card.reveal-delay-3 > .news-card-body > .news-card-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"features-title\">Reporting you can act on.</h2>",
"target": [
"#features-title"
]
},
{
"html": "<h3>Fact-Checked First</h3>",
"target": [
".feature-card:nth-child(1) > h3"
]
},
{
"html": "<h3>Hyper-Local Weather</h3>",
"target": [
".feature-card:nth-child(2) > h3"
]
},
{
"html": "<h3>Byline Transparency</h3>",
"target": [
".feature-card:nth-child(3) > h3"
]
},
{
"html": "<h3>Archives Since 2011</h3>",
"target": [
".feature-card:nth-child(4) > h3"
]
},
{
"html": "<h3>Stay ahead of the day.</h3>",
"target": [
".cta-banner > div > h3"
]
},
{
"html": "<h3 class=\"section-eyebrow\" style=\"color: var(--crimson); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; display:block; margin-bottom: 6px;\">Reader Poll</h3>",
"target": [
".poll-section > .section-eyebrow"
]
},
{
"html": "<h2 class=\"poll-question\" id=\"poll-title\" style=\"font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 4px;\">Should municipal broadband be a public utility?</h2>",
"target": [
"#poll-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"featured-title\">Deep community coverage, backed by on-the-ground reporting.</h2>",
"target": [
"#featured-title"
]
},
{
"html": "<h2 class=\"article-headline\">Three Months Inside the Riverbend Water Crisis: What We Found</h2>",
"target": [
".article-headline"
]
},
{
"html": "<h4>Top Headlines</h4>",
"target": [
".reveal-delay-1.sidebar-widget.fade-in > h4"
]
},
{
"html": "<h4>Photo Gallery</h4>",
"target": [
".sidebar-widget.reveal-delay-2.fade-in > h4"
]
},
{
"html": "<h4>Weather Outlook</h4>",
"target": [
".reveal-delay-3.sidebar-widget.fade-in:nth-child(3) > h4"
]
},
{
"html": "<h4>News Ticker</h4>",
"target": [
".reveal-delay-3.sidebar-widget.fade-in:nth-child(4) > h4"
]
},
{
"html": "<h2 class=\"section-title\" id=\"faq-title\">Frequently asked questions.</h2>",
"target": [
"#faq-title"
]
},
{
"html": "<h2 class=\"section-title\" id=\"testimonials-title\">What our readers say.</h2>",
"target": [
"#testimonials-title"
]
},
{
"html": "<h3 style=\"font-family: 'Playfair Display', Georgia, serif; font-size: 24px; color: #fff; margin-bottom: 8px;\">Get the CivicPulse Morning Briefing.</h3>",
"target": [
".container > div > div:nth-child(1) > h3"
]
},
{
"html": "<h4>CivicPulse</h4>",
"target": [
".footer-brand > h4"
]
},
{
"html": "<h5>Coverage</h5>",
"target": [
".footer-col:nth-child(2) > h5"
]
},
{
"html": "<h5>Company</h5>",
"target": [
".footer-col:nth-child(3) > h5"
]
},
{
"html": "<h5>Contact</h5>",
"target": [
".footer-col:nth-child(4) > h5"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#1a1a2e",
"bgColor": "#fefeff",
"contrastRatio": 16.92,
"fontSize": "14.3pt (19px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "3:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 16.92"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"brand-name\">CivicPulse</span>",
"target": [
".brand-name"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "duplicate-id-aria",
"data": "hero-title",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<h1 id=\"hero-title\">Your daily pulse on <em>news, weather, and</em> the information that matters.</h1>",
"target": [
"#hero-title"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"email\" placeholder=\"your@email.com\" style=\"padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; min-width: 200px; outline: none;\">",
"target": [
"input"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://picsum.photos/800/600?grayscale&blur=2\" alt=\"Journalist reporting at a city council session with CivicPulse news van in background\" loading=\"lazy\">",
"target": [
".hero-visual > img"
]
}
]
},
{
"id": "label",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"email\" placeholder=\"your@email.com\" style=\"padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; min-width: 200px; outline: none;\">",
"target": [
"input"
]
}
]
},
{
"id": "link-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#main-navigation\" class=\"skip-link\">Skip to main navigation</a>",
"target": [
".skip-link"
]
}
]
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "only-listitems",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List element only has direct children that are allowed inside <li> elements"
}
],
"impact": null,
"html": "<ul class=\"headline-list\">",
"target": [
".headline-list"
]
}
]
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "listitem",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "List item has a <ul>, <ol> or role=\"list\" parent element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<li>\n <span class=\"hl-num\">1</span>\n <div>\n <a href=\"#\">Governor signs ed reform package into law</a>\n <div class=\"hl-meta\">Politics \u00b7 3h ago</div>\n </div>\n </li>",
"target": [
".headline-list > li:nth-child(1)"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://picsum.photos/800/600?grayscale&blur=2\" alt=\"Journalist reporting at a city council session with CivicPulse news van in background\" loading=\"lazy\">",
"target": [
".hero-visual > img"
]
}
]
},
{
"id": "target-size",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 210.2,
"height": 41.6
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (210.2px by 41.6px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#main-navigation\" class=\"skip-link\">Skip to main navigation</a>",
"target": [
".skip-link"
]
}
]
}
],
"incomplete": [
{
"id": "aria-prohibited-attr",
"impact": "serious",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "aria-prohibited-attr",
"data": {
"role": null,
"nodeName": "section",
"messageKey": "noRoleSingular",
"prohibited": [
"aria-labelledby"
]
},
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute is not well supported on a section with no valid role attribute."
}
],
"impact": "serious",
"html": "<section class=\"section\" id=\"weather\" aria-labelledby=\"weather-title\" style=\"padding-top: 0;\">",
"target": [
"#weather"
],
"failureSummary": "Fix all of the following:\n aria-labelledby attribute is not well supported on a section with no valid role attribute."
}
]
},
{
"id": "aria-valid-attr-value",
"impact": "critical",
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "aria-valid-attr-value",
"data": {
"messageKey": "noId",
"needsReview": "aria-labelledby=\"weather-title\""
},
"relatedNodes": [],
"impact": "critical",
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"weather-title\""
}
],
"none": [],
"impact": "critical",
"html": "<section class=\"section\" id=\"weather\" aria-labelledby=\"weather-title\" style=\"padding-top: 0;\">",
"target": [
"#weather"
],
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"weather-title\""
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fontSize": "8.3pt (11px)",
"fontWeight": "normal",
"messageKey": "pseudoContent",
"expectedContrastRatio": "4.5:1"
},
"relatedNodes": [
{
"html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<div class=\"hero-badge\"><span class=\"dot\"></span> Live coverage \u2014 12 reporters on the ground</div>",
"target": [
".hero-badge"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2980b9",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"news-card fade-in reveal-delay-1 visible\">",
"target": [
".reveal-delay-1.news-card"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"read-more\" aria-label=\"Read full story: Infrastructure Bill Clears Senate\">Read \u2192</a>",
"target": [
".reveal-delay-1.news-card > .news-card-body > .news-card-footer > .read-more[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2980b9",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"news-card fade-in reveal-delay-2 visible\">",
"target": [
".news-card:nth-child(2)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#weather\" class=\"read-more\" aria-label=\"Read full weather story\">View Forecast \u2192</a>",
"target": [
"a[aria-label=\"Read full weather story\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2980b9",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<article class=\"news-card fade-in reveal-delay-3 visible\">",
"target": [
".news-card.reveal-delay-3"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"read-more\" aria-label=\"Read full story: Climate Summit Agreement\">Deep Dive \u2192</a>",
"target": [
".news-card.reveal-delay-3 > .news-card-body > .news-card-footer > .read-more[href=\"#\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#2980b9",
"contrastRatio": 4.3,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"btn btn-sky\">View Full 10-Day Forecast</a>",
"target": [
".btn-sky"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #2980b9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"btn btn-sky\">View Full 10-Day Forecast</a>",
"target": [
".btn-sky"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #2980b9, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#2980b9",
"contrastRatio": 4.3,
"fontSize": "7.5pt (10px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<span class=\"news-card-category\" style=\"background: var(--sky); color:#fff; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; margin-bottom: 12px;\">Investigative</span>",
"target": [
".main-article > div:nth-child(1) > .news-card-category"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #2980b9, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"news-card-category\" style=\"background: var(--sky); color:#fff; padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; margin-bottom: 12px;\">Investigative</span>",
"target": [
".main-article > div:nth-child(1) > .news-card-category"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #ffffff, background color: #2980b9, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2980b9",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget fade-in reveal-delay-3 visible\">",
"target": [
".reveal-delay-3.sidebar-widget.visible:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#weather\" style=\"display:block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--sky);\">Full 10-day forecast \u2192</a>",
"target": [
".reveal-delay-3.sidebar-widget.visible:nth-child(3) > a[href$=\"#weather\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#2980b9",
"bgColor": "#ffffff",
"contrastRatio": 4.3,
"fontSize": "9.8pt (13px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"sidebar-widget fade-in reveal-delay-3 visible\">",
"target": [
".reveal-delay-3.sidebar-widget.fade-in:nth-child(3)"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#weather\" style=\"display:block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--sky);\">Full 10-day forecast \u2192</a>",
"target": [
".reveal-delay-3.sidebar-widget.fade-in:nth-child(3) > a[href$=\"#weather\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.3 (foreground color: #2980b9, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1"
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 6333
},
{
"y": 576,
"height": 6333
},
{
"y": 1152,
"height": 6333
},
{
"y": 1728,
"height": 6333
},
{
"y": 2304,
"height": 6333
},
{
"y": 2880,
"height": 6333
},
{
"y": 3456,
"height": 6333
},
{
"y": 4032,
"height": 6333
},
{
"y": 4608,
"height": 6333
},
{
"y": 5184,
"height": 6333
},
{
"y": 5613,
"height": 6333
}
],
"scans": 12,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "News/Weather/Information" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "News/Weather/Information"
- Description: News outlets, weather forecasts, breaking news, and general information resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "News/Weather/Information" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Local", "About", "Breaking News".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "News/Weather/Information" category. Consider themes similar to: "Current Events", "National News", "World Affairs".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "fact-checking", "headline", "byline".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Sign Up", "View Forecast", "Submit Tip".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "News/Weather/Information" sector. Ideas similar but not limited to: "poll widget".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "top headlines", "photo galleries", "weather outlook".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.