Z.ai GLM 5.3 Flash – Government
via Parasail · Generated
- AIMAC Debt 0.00
- Cost $0.034
- Total Violations 0
- HTML Size 90 KB
- Em Dashes 1
Screenshot
View Live Page
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>City of Meridian Falls — Official Website | Open Government, Thriving Community</title>
<meta name="description" content="The official portal of the City of Meridian Falls: permits and planning, utility billing, city council, emergency services, public records, and community events.">
<link rel="icon" href="https://placehold.co/64x64/17334b/f3efe6?text=MF&font=lora">
<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=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&display=swap" rel="stylesheet">
<style>
:root{
--paper:#f4f2ea;
--surface:#ffffff;
--ink:#24313a;
--muted:#5f6d76;
--navy:#17334b;
--navy-2:#102740;
--navy-deep:#0b1d2c;
--navy-foot:#0a1722;
--navy-ink:#0e2130;
--gold:#8a6a1f;
--gold-bright:#dfa62e;
--gold-line:#e3cf9a;
--green:#2e6b4f;
--green-bg:#e3efe7;
--amber-bg:#f7ecd2;
--red:#a83232;
--line:#e2dccb;
--line-2:#d3ccb8;
--serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
--sans:'Public Sans', 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 16px/1.65 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--navy)}
ul,ol{list-style:none}
button{font-family:var(--sans);cursor:pointer}
[id]{scroll-margin-top:96px}
.wrap{max-width:1180px;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);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px}
/* ---------- icons ---------- */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px}
.ic-lg{width:26px;height:26px}
.ic-fill{fill:currentColor;stroke:none}
/* ---------- skip link ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--gold-bright);color:#231a03;font:700 .85rem var(--sans);padding:10px 16px;z-index:200;border-radius:0 0 6px 0}
.skip:focus{left:0}
/* ---------- official banner ---------- */
.gov-banner{background:#081624;color:#c3d2de;font-size:.8rem}
.gov-banner .wrap{padding-top:9px;padding-bottom:9px}
.gov-flag{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gov-flag .flagbox{width:28px;height:28px;border:1px solid rgba(255,255,255,.35);border-radius:5px;display:grid;place-items:center;color:var(--gold-bright)}
.gov-flag .flagbox .ic{width:15px;height:15px}
.gov-btn{background:none;border:none;color:#fff;font:600 .8rem var(--sans);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:5px;padding:2px}
.gov-btn .ic{width:13px;height:13px;transition:transform .25s}
.gov-banner.open .gov-btn .ic{transform:rotate(180deg)}
.gov-details{display:none;border-top:1px dashed rgba(255,255,255,.22);margin-top:12px;padding-top:16px;padding-bottom:4px}
.gov-banner.open .gov-details{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.gov-details div{display:flex;gap:11px;align-items:flex-start}
.gov-details .ic{width:18px;height:18px;color:var(--gold-bright);margin-top:2px}
.gov-details p{font-size:.78rem;line-height:1.55}
.gov-details b{color:#fff}
/* ---------- alert bar ---------- */
.alertbar{background:#faf0d8;border-bottom:1px solid #ecd9a4;color:#6b4c14}
.alertbar .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.alertbar .ic{width:19px;height:19px;color:#8a5b12}
.alertbar b{font-weight:800;letter-spacing:.06em;font-size:.78rem;text-transform:uppercase}
.alertbar p{font-size:.88rem;flex:1;min-width:260px}
.alertbar a{font-weight:700;font-size:.85rem;color:#7c2a1e;text-underline-offset:3px;white-space:nowrap}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:80;background:var(--navy)}
.site-head.scrolled{box-shadow:0 8px 22px rgba(8,20,32,.32)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.seal{width:54px;height:54px;border-radius:50%;border:2px solid var(--gold-bright);box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.brand-name{display:flex;flex-direction:column;line-height:1.2}
.brand-name strong{font:700 1.05rem var(--serif);color:#fff;letter-spacing:.01em;white-space:nowrap}
.brand-name em{font:600 .58rem var(--sans);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#d3a63f;margin-top:3px;white-space:nowrap}
.head-tools{display:flex;align-items:center;gap:20px}
.head-phone{display:inline-flex;align-items:center;gap:8px;color:#d6e2ec;font:600 .88rem var(--sans);text-decoration:none}
.head-phone .ic{width:16px;height:16px;color:#8fa8bd}
.head-phone:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:.78rem 1.3rem;border-radius:5px;font:700 .92rem var(--sans);border:1.5px solid transparent;text-decoration:none;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn .ic{width:16px;height:16px}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#0d2337}
.btn-gold{background:var(--gold-bright);color:#231a03}
.btn-gold:hover{background:#cf9420}
.btn-ghost-d{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost-d:hover{background:rgba(255,255,255,.09)}
.btn-ghost-l{border-color:#a9b7c2;color:var(--navy-ink);background:transparent}
.btn-ghost-l:hover{background:#eef2f5;border-color:var(--navy)}
.btn-sm{padding:.5rem .95rem;font-size:.83rem}
/* nav */
.main-nav{background:var(--navy-2);border-top:1px solid rgba(255,255,255,.08)}
.main-nav ul{display:flex;flex-wrap:wrap}
.nav-a{position:relative;display:block;padding:13px 15px;font:600 .89rem var(--sans);color:#cfddе8;color:#cfdde8;text-decoration:none;letter-spacing:.01em}
.nav-a::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px;background:var(--gold-bright);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-a:hover{color:#fff}
.nav-a:hover::after,.nav-a.active::after{transform:scaleX(1)}
.nav-a.active{color:#fff}
.menu-btn{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:6px;background:none;color:#fff;place-items:center}
.menu-btn .ic{width:21px;height:21px}
/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:rgba(11,29,44,.68)}
.hero .wrap{position:relative;z-index:2;padding-top:84px;padding-bottom:60px}
.hero h1{font:700 clamp(2.1rem,4.6vw,3.3rem)/1.12 var(--serif);letter-spacing:-.012em;max-width:15ch}
.hero-lead{margin:20px 0 30px;font-size:1.06rem;color:#d5dfe8;max-width:56ch}
.hero-search{position:relative;display:flex;max-width:620px;background:#fff;border-radius:6px;padding:6px;gap:6px}
.hero-search .ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);width:19px;height:19px}
.hero-search input{flex:1;min-width:0;border:none;outline:none;background:none;font:400 1rem var(--sans);color:var(--ink);padding:11px 12px 11px 46px}
.hero-search input::placeholder{color:#8b97a0}
.hero-search .btn{flex:none}
.hero-cta{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.lnk{display:inline-flex;align-items:center;gap:7px;font:700 .92rem var(--sans);color:var(--navy);text-decoration:none}
.lnk .ic{width:16px;height:16px;transition:transform .2s}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.lnk:hover .ic{transform:translateX(3px)}
.lnk-gold{color:var(--gold-bright)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.hero-stats b{display:block;font:700 1.4rem var(--serif);color:#fff}
.hero-stats span{display:block;font:600 .7rem var(--sans);text-transform:uppercase;letter-spacing:.12em;color:#9db1c2;margin-top:3px}
/* ---------- quick links strip ---------- */
.qlinks{background:var(--paper);border-bottom:1px solid var(--line)}
.qlinks .wrap{display:grid;grid-template-columns:repeat(6,1fr);padding:0}
.qlinks a{display:flex;align-items:center;gap:10px;padding:19px 16px;font:600 .84rem/1.25 var(--sans);color:var(--navy-ink);text-decoration:none;border-left:1px solid var(--line);transition:background .15s}
.qlinks a:first-child{border-left:none}
.qlinks .ic{width:19px;height:19px;color:var(--navy)}
.qlinks a:hover{background:#fff}
.qlinks a:hover .ic{color:var(--gold)}
/* ---------- sections ---------- */
.sec{padding:clamp(56px,7.5vw,86px) 0}
.sec-w{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{display:flex;align-items:center;gap:10px;font:800 .72rem var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:"";width:26px;height:2px;background:currentColor}
.sec-title{font:700 clamp(1.7rem,3.2vw,2.35rem)/1.14 var(--serif);color:var(--navy-ink);letter-spacing:-.01em;margin:12px 0 14px}
.sec-lead{font-size:1.01rem;color:var(--muted);max-width:66ch}
.sec-head{margin-bottom:42px}
.sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec-head-row .lnk{margin-bottom:6px}
h3.sub{font:700 1.28rem var(--serif);color:var(--navy-ink);margin:34px 0 10px}
.copy p{margin-bottom:16px;font-size:.98rem}
.copy p:last-child{margin-bottom:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:9px}
.panel-pad{padding:24px}
.panel-title{display:flex;align-items:center;gap:9px;font:800 .76rem var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--navy-ink)}
.panel-title .ic{width:17px;height:17px;color:var(--gold)}
/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:5fr 7fr;gap:52px;align-items:start}
.svc-search{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line-2);border-radius:7px;padding:12px 16px;background:#fff;max-width:560px}
.svc-search .ic{color:var(--muted);width:18px;height:18px}
.svc-search input{flex:1;min-width:0;border:none;outline:none;background:none;font:400 .98rem var(--sans)}
.svc-count{margin-left:auto;font:600 .78rem var(--sans);color:var(--muted);white-space:nowrap}
.svc-empty{display:none;margin-top:18px;padding:16px 18px;border:1px dashed var(--line-2);border-radius:8px;color:var(--muted);font-size:.92rem;background:#fbfaf5}
.svc-empty.show{display:block}
.feature-panel{overflow:hidden}
.feature-panel img{width:100%;height:238px;object-fit:cover;border-bottom:1px solid var(--line)}
.feature-body{padding:26px}
.feature-body h3{font:700 1.4rem var(--serif);color:var(--navy-ink);margin-bottom:10px}
.feature-body p{font-size:.94rem;color:var(--ink);margin-bottom:16px}
.fact{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin-bottom:9px}
.fact .ic{width:16px;height:16px;color:var(--green);margin-top:3px}
.feature-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.svc-row{display:grid;grid-template-columns:46px 1fr 22px;gap:16px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s}
.svc-row:last-of-type{border-bottom:none}
.svc-row:hover{background:#fbfaf5}
.svc-icon{width:46px;height:46px;border-radius:9px;background:#f1efe4;display:grid;place-items:center;color:var(--navy)}
.svc-row:hover .svc-icon{color:var(--gold);background:#f5edd8}
.svc-row h4{font:700 .97rem var(--sans);color:var(--navy-ink)}
.svc-row:hover h4{text-decoration:underline;text-underline-offset:3px}
.svc-row p{font-size:.86rem;color:var(--muted);margin-top:2px}
.svc-row>.ic{color:#a9b2a2;color:#a9b3b6;transition:transform .2s,color .2s}
.svc-row:hover>.ic{transform:translateX(4px);color:var(--gold)}
.svc-row.hide{display:none}
/* ---------- permits ---------- */
.grid-main-rail{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:56px;align-items:start}
figure.photo{margin:28px 0 8px}
figure.photo img{width:100%;border-radius:9px;border:1px solid var(--line-2)}
figure.photo figcaption{font-size:.8rem;color:var(--muted);margin-top:9px}
.process{counter-reset:step;margin-top:22px}
.process li{counter-increment:step;position:relative;padding:0 0 26px 64px}
.process li::before{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--line-2)}
.process li:last-child{padding-bottom:4px}
.process li:last-child::before{display:none}
.process li::after{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font:700 .92rem/44px var(--sans);text-align:center}
.process h4{font:700 1rem var(--sans);color:var(--navy-ink);margin:11px 0 5px}
.process p{font-size:.91rem;color:var(--muted)}
.rail .panel{margin-bottom:18px}
.permit-list a{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;font:600 .88rem var(--sans);color:var(--navy-ink)}
.permit-list a:first-child{border-top:none;padding-top:14px}
.permit-list .ic{width:17px;height:17px;color:var(--gold)}
.permit-list .pdf{margin-left:auto;font:700 .62rem var(--sans);letter-spacing:.08em;border:1px solid var(--line-2);border-radius:4px;padding:2px 7px;color:var(--muted)}
.permit-list a:hover span{text-decoration:underline;text-underline-offset:3px}
.rail-more{display:inline-flex;align-items:center;gap:7px;font:700 .86rem var(--sans);color:var(--navy);text-decoration:none;margin-top:14px}
.rail-more .ic{width:15px;height:15px}
.rail-more:hover{text-decoration:underline;text-underline-offset:3px}
.ztable{width:100%;border-collapse:collapse;margin-top:14px}
.ztable th{text-align:left;font:700 .66rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:2px 8px 8px;border-bottom:1px solid var(--line-2)}
.ztable td{padding:9px 8px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink)}
.ztable td:first-child{font-weight:800;color:var(--navy-ink);width:56px}
.code-panel{border-left:4px solid var(--gold-bright);background:#fbf7ea}
.code-panel p{font-size:.88rem;margin-top:10px;color:var(--ink)}
/* ---------- tracker ---------- */
.tracker{background:#fff;border:1px solid var(--line-2);border-top:4px solid var(--navy);border-radius:10px;padding:30px;margin-top:56px}
.tracker-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.tracker h3{font:700 1.5rem var(--serif);color:var(--navy-ink)}
.tracker-sub{font-size:.93rem;color:var(--muted);margin-top:6px;max-width:60ch}
.tracker-note{display:flex;align-items:center;gap:8px;font:600 .78rem var(--sans);color:var(--muted);white-space:nowrap;margin-top:6px}
.tracker-note .ic{width:15px;height:15px;color:var(--gold)}
.track-form{display:flex;gap:10px;margin-top:20px;max-width:640px}
.track-form input{flex:1;min-width:0;border:1.5px solid var(--line-2);border-radius:7px;padding:12px 14px;font:600 .95rem var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--navy-ink);background:#fff}
.track-form input::placeholder{color:#9aa4ab;font-weight:400;text-transform:none;letter-spacing:0}
.track-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.track-chips span{font:600 .78rem var(--sans);color:var(--muted)}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:99px;padding:5px 13px;font:700 .78rem var(--sans);color:var(--navy);letter-spacing:.02em;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--navy);background:#f6f4ec}
.track-res{margin-top:26px;animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pt-head{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;padding:20px 22px;background:#f8f6ee;border:1px solid var(--line);border-radius:9px}
.pt-badge{display:inline-block;font:800 .7rem var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:4px}
.b-amber{background:var(--amber-bg);color:#7a5a10;border:1px solid var(--gold-line)}
.b-green{background:var(--green-bg);color:#1f5c3d;border:1px solid #b9d8c5}
.pt-title{font:700 1.32rem var(--serif);color:var(--navy-ink);margin:12px 0 4px}
.pt-subj{font-size:.9rem;color:var(--muted)}
.pt-meta div{margin-bottom:12px}
.pt-meta dt{font:700 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pt-meta dd{font:600 .9rem var(--sans);color:var(--navy-ink);margin-top:2px}
.pt-list{margin:28px 0 6px}
.pt-step{position:relative;display:grid;grid-template-columns:34px 1fr;gap:17px;padding-bottom:22px}
.pt-step::before{content:"";position:absolute;left:16px;top:36px;bottom:2px;width:2px;background:var(--line)}
.pt-step:last-child{padding-bottom:6px}
.pt-step:last-child::before{display:none}
.pt-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;z-index:1}
.pt-step.done .pt-dot{background:var(--green);color:#fff}
.pt-step.current .pt-dot{background:#fff;border:2px solid var(--gold-bright);color:var(--gold);animation:ring 2.2s infinite}
.pt-step.todo .pt-dot{background:#f0ede1;border:2px solid #dbd4c0}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(223,166,46,.42)}70%{box-shadow:0 0 0 10px rgba(223,166,46,0)}100%{box-shadow:0 0 0 0 rgba(223,166,46,0)}}
.pt-label{display:block;font:700 .96rem var(--sans);color:var(--navy-ink)}
.pt-step.todo .pt-label{color:#8a949c;font-weight:600}
.pt-date{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.pt-step.current .pt-date{color:var(--gold);font-weight:700}
.pt-note{display:block;font-size:.84rem;color:#54606a;background:#f6f4ea;border-left:3px solid var(--line-2);border-radius:0 7px 7px 0;padding:8px 13px;margin-top:8px;max-width:600px}
.pt-next{border-left:4px solid var(--gold-bright);background:#faf5e4;padding:15px 19px;border-radius:0 9px 9px 0;margin-top:20px}
.pt-next-k{display:block;font:800 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pt-next p{font-size:.93rem;margin-top:5px}
.pt-updated{font-size:.78rem;color:var(--muted);margin-top:15px}
.pt-err{display:flex;gap:15px;border:1px solid #e6c6bd;background:#fbf1ed;border-radius:9px;padding:17px 19px;color:#7c2a1e}
.pt-err .ic{color:var(--red);margin-top:2px}
.pt-err p{font-size:.9rem;margin-top:6px}
/* ---------- council ---------- */
.council-grid{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:56px;align-items:start}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:20px;margin-top:32px}
.member{text-align:center}
.member img{width:64px;height:64px;border-radius:50%;margin:0 auto 9px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2)}
.member b{display:block;font:700 .92rem var(--sans);color:var(--navy-ink)}
.member span{display:block;font:600 .7rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.pullquote{margin:36px 0 0;border-left:3px solid var(--gold-bright);padding-left:22px}
.pullquote p{font:italic 500 1.16rem/1.55 var(--serif);color:var(--navy-ink)}
.pullquote footer{font:600 .84rem var(--sans);color:var(--muted);margin-top:9px}
.meet-date{font:700 1.5rem var(--serif);color:var(--navy-ink)}
.meet-meta{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--muted);margin-top:9px}
.meet-meta .ic{width:15px;height:15px;color:var(--gold)}
.meet-cta{display:grid;gap:9px;margin-top:18px}
.budget-bar{margin:15px 0}
.budget-bar .row{display:flex;justify-content:space-between;gap:12px;font:600 .86rem var(--sans)}
.budget-bar .row em{font-style:normal;color:var(--navy-ink);font-variant-numeric:tabular-nums}
.budget-bar .track{height:10px;background:#ede9da;border-radius:99px;margin-top:6px;overflow:hidden}
.budget-bar .track span{display:block;height:100%;background:var(--navy);border-radius:99px}
.budget-bar.hl .track span{background:var(--gold-bright)}
.budget-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:18px;padding-top:13px;font:800 .9rem var(--sans);color:var(--navy-ink)}
.doc-links{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.doc-links a{display:flex;align-items:center;gap:9px;font:600 .86rem var(--sans);color:var(--navy);text-decoration:none;padding:9px 0}
.doc-links .ic{width:16px;height:16px;color:var(--gold)}
.doc-links a:hover span{text-decoration:underline;text-underline-offset:3px}
/* ---------- emergency ---------- */
.sec-emg{position:relative;background:var(--navy-deep);color:#c9d5de;overflow:hidden}
.sec-emg::before{content:"";position:absolute;inset:0;background:url('https://picsum.photos/1600/700?grayscale&blur=3') center/cover no-repeat;opacity:.15}
.sec-emg .wrap{position:relative;z-index:2}
.emg-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.sec-emg .kicker{color:var(--gold-bright)}
.sec-emg .sec-title{color:#fff}
.sec-emg .copy p{color:#c9d5de}
.kit{margin-top:26px}
.kit-k{font:800 .7rem var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:11px}
.kit li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin-bottom:8px}
.kit .ic{width:15px;height:15px;color:var(--gold-bright);margin-top:4px}
.emg-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.emg-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.22);border-radius:11px;padding:26px}
.emg-panel-k{font:800 .7rem var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#e8eef4;margin-bottom:6px}
.er-row{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.16);align-items:baseline}
.er-row:first-of-type{border-top:none}
.er-big{font:700 1.6rem/1.1 var(--serif);color:var(--gold-bright);white-space:nowrap}
.er-row b{display:block;font:700 .95rem var(--sans);color:#fff}
.er-row p{font-size:.85rem;color:#a9bac7;margin-top:3px}
.er-link{font:700 1.05rem var(--serif);color:var(--gold-bright);text-decoration:none;border-bottom:1px solid rgba(223,166,46,.5);padding-bottom:2px}
.er-link:hover{border-bottom-color:var(--gold-bright)}
/* ---------- news & events ---------- */
.news-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.news-item{display:grid;grid-template-columns:88px 1fr;gap:17px;padding:18px 0;border-bottom:1px solid var(--line)}
.news-item:first-of-type{padding-top:0}
.news-item img{width:88px;height:88px;object-fit:cover;border-radius:7px;border:1px solid var(--line-2)}
.news-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.news-meta time{font:600 .76rem var(--sans);color:var(--muted)}
.tag{font:800 .62rem var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;border-radius:4px}
.t-budget{color:var(--gold)} .t-transport{color:var(--navy)} .t-parks{color:var(--green)} .t-housing{color:var(--red)}
.news-item h3{font:700 1.06rem/1.35 var(--serif)}
.news-item h3 a{color:var(--navy-ink);text-decoration:none}
.news-item h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.news-item p{font-size:.86rem;color:var(--muted);margin-top:5px}
.ev-item{display:flex;gap:17px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.ev-item:first-of-type{padding-top:2px}
.ev-date{width:58px;flex:none;border:1.5px solid var(--navy);border-radius:7px;text-align:center;padding:7px 0 8px;background:#fff}
.ev-date .m{display:block;font:800 .6rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ev-date .d{display:block;font:700 1.32rem/1 var(--serif);color:var(--navy-ink);margin-top:2px}
.ev-item h4{font:700 .96rem var(--sans);color:var(--navy-ink)}
.ev-item h4 a{color:inherit;text-decoration:none}
.ev-item h4 a:hover{text-decoration:underline;text-underline-offset:3px}
.ev-meta{font-size:.8rem;color:var(--muted);margin-top:3px}
.ev-live{display:inline-block;font:800 .58rem var(--sans);letter-spacing:.1em;color:#1f5c3d;border:1px solid #b9d8c5;background:var(--green-bg);border-radius:4px;padding:2px 6px;margin-left:7px;vertical-align:2px}
/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.about-facts{display:flex;flex-wrap:wrap;gap:34px;border-top:1px solid var(--line-2);margin-top:30px;padding-top:22px}
.about-facts b{display:block;font:700 1.28rem var(--serif);color:var(--navy-ink)}
.about-facts span{display:block;font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* ---------- faq ---------- */
.acc-item{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:11px}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 19px;background:none;border:none;text-align:left;font:700 .97rem var(--sans);color:var(--navy-ink)}
.acc-btn .ic{color:var(--gold);transition:transform .25s}
.acc-item.open .acc-btn .ic{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-inner{padding:0 19px 19px;font-size:.92rem;color:var(--muted)}
.help-panel .phone-big{display:flex;align-items:center;gap:11px;font:700 1.35rem var(--serif);color:var(--navy-ink);text-decoration:none;margin-top:14px}
.help-panel .phone-big .ic{color:var(--gold)}
.help-row{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);margin-top:12px}
.help-row .ic{width:16px;height:16px;color:var(--gold);margin-top:3px}
.help-stat{margin-top:18px;border-top:1px dashed var(--line-2);padding-top:14px;font-size:.82rem;color:var(--muted)}
.help-stat b{font:700 1.05rem var(--serif);color:var(--navy-ink);display:block}
/* ---------- subscribe ---------- */
.sec-sub{background:var(--navy);color:#c9d5de}
.sub-grid{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.sec-sub .kicker{color:var(--gold-bright)}
.sec-sub h2{font:700 clamp(1.5rem,2.6vw,2rem) var(--serif);color:#fff;margin:12px 0 10px;letter-spacing:-.01em}
.sec-sub .sub-copy{max-width:54ch;font-size:.96rem}
.news-form{display:flex;gap:10px;flex-wrap:wrap}
.news-form input{width:min(320px,80vw);border:none;border-radius:6px;padding:14px 16px;font:400 .95rem var(--sans);color:var(--ink)}
.news-err{color:#ffc9bc;font:600 .82rem var(--sans);margin-top:10px}
.news-ok{display:flex;align-items:center;gap:12px;color:#fff;font:600 .95rem var(--sans)}
.news-ok .ic{color:var(--gold-bright)}
.sub-fine{font-size:.76rem;color:#8ba0b1;margin-top:12px}
/* ---------- footer ---------- */
.site-foot{background:var(--navy-foot);color:#9fb0bd;font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:44px;padding:62px 0 0}
.foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-brand img{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold-bright)}
.foot-brand strong{font:700 1rem var(--serif);color:#fff}
.foot-brand em{display:block;font:600 .55rem var(--sans);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:#d3a63f;margin-top:2px}
.foot-desc{font-size:.85rem;line-height:1.6;color:#8ba0b1;margin-bottom:20px}
.foot-c{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;font-size:.86rem}
.foot-c .ic{width:16px;height:16px;color:var(--gold-bright);margin-top:3px}
.foot-c a{color:#c4d1db;text-decoration:none}
.foot-c a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-h{font:800 .7rem var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#6f8296;margin-bottom:16px}
.foot-list li{margin:9px 0}
.foot-list a{color:#b7c4cf;text-decoration:none;font-size:.88rem}
.foot-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.social{display:flex;gap:10px;margin:6px 0 20px}
.social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;color:#c4d1db;transition:border-color .2s,color .2s}
.social a:hover{border-color:var(--gold-bright);color:#fff}
.social .ic{width:17px;height:17px}
.foot-note{font-size:.78rem;line-height:1.6;color:#7d8fa0}
.foot-bar{border-top:1px solid rgba(255,255,255,.12);margin-top:54px}
.foot-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-size:.78rem;color:#7d8fa0}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a{color:#a9bac7;text-decoration:none}
.foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* ---------- responsive ---------- */
@media (max-width:1020px){
.svc-grid,.grid-main-rail,.council-grid,.emg-grid,.news-grid,.about-grid{grid-template-columns:1fr;gap:44px}
.rail .panel,.council-rail .panel{max-width:640px}
.pt-head{grid-template-columns:1fr}
.hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.menu-btn{display:grid}
.head-phone{display:none}
.main-nav{display:none;border-top:1px solid rgba(255,255,255,.08)}
.main-nav.open{display:block}
.main-nav ul{flex-direction:column}
.nav-a{padding:14px 24px;border-top:1px solid rgba(255,255,255,.07)}
.nav-a::after{display:none}
.nav-a.active{background:rgba(255,255,255,.06)}
.brand-name em{display:none}
}
@media (max-width:760px){
.qlinks .wrap{grid-template-columns:repeat(2,1fr)}
.qlinks a{border-top:1px solid var(--line)}
.qlinks a:nth-child(-n+2){border-top:none}
.qlinks a:nth-child(odd){border-left:none}
.foot-grid{grid-template-columns:1fr 1fr;gap:36px}
.er-row{grid-template-columns:1fr;gap:4px}
.gov-banner.open .gov-details{grid-template-columns:1fr}
.tracker{padding:22px 18px}
.track-form{flex-direction:column}
.news-item{grid-template-columns:64px 1fr}
.news-item img{width:64px;height:64px}
}
@media (max-width:560px){
.foot-grid{grid-template-columns:1fr}
.hero-search{flex-wrap:wrap}
.hero-search .btn{width:100%}
.hero-search .ic{display:none}
.hero-search input{padding-left:14px}
.about-facts{gap:22px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}
</style>
</head>
<body id="top">
<!-- icon sprite -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></symbol>
<symbol id="i-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></symbol>
<symbol id="i-chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1z"/></symbol>
<symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7.5l9 6 9-6"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path d="M21 10c0 7-9 12-9 12S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></symbol>
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></symbol>
<symbol id="i-doc" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></symbol>
<symbol id="i-cal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M16 2v4M8 2v4M3 9.5h18"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="M4 12.5l5 5L20 7"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.2 2"/></symbol>
<symbol id="i-card" viewBox="0 0 24 24"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></symbol>
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M5.5 6l1 14a2 2 0 0 0 2 1.8h7a2 2 0 0 0 2-1.8l1-14M10 11v6M14 11v6"/></symbol>
<symbol id="i-bus" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="14" rx="3"/><path d="M4 10h16M7 17v2.5M17 17v2.5"/><circle cx="8.2" cy="13.2" r=".9"/><circle cx="15.8" cy="13.2" r=".9"/></symbol>
<symbol id="i-tree" viewBox="0 0 24 24"><path d="M12 2.5L17 10h-2.6l3.6 5.5H6l3.6-5.5H7l5-7.5z"/><path d="M12 15.5V22"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 22s8-3.5 8-10V5.5L12 2.5 4 5.5V12c0 6.5 8 10 8 10z"/><path d="M9 11.5l2 2 4-4.5"/></symbol>
<symbol id="i-paw" viewBox="0 0 24 24"><circle cx="5.5" cy="10" r="1.7"/><circle cx="9.5" cy="6.2" r="1.7"/><circle cx="14.5" cy="6.2" r="1.7"/><circle cx="18.5" cy="10" r="1.7"/><path d="M12 10.5c-3 0-5.4 2.4-5.4 5 0 1.8 1.3 3 3 3 1 0 1.6-.5 2.4-.5s1.4.5 2.4.5c1.7 0 3-1.2 3-3 0-2.6-2.4-5-5.4-5z"/></symbol>
<symbol id="i-home" viewBox="0 0 24 24"><path d="M3 11l9-8 9 8"/><path d="M5.5 9.8V20h13V9.8"/><path d="M9.5 20v-6h5v6"/></symbol>
<symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 2.8s6.5 6.6 6.5 11.2a6.5 6.5 0 0 1-13 0C5.5 9.4 12 2.8 12 2.8z"/></symbol>
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.6"/><path d="M2.5 20.5v-1.6a5 5 0 0 1 5-5h3a5 5 0 0 1 5 5v1.6M16 4a3.6 3.6 0 0 1 0 7.6M21.5 20.5v-1.6a5 5 0 0 0-3.5-4.8"/></symbol>
<symbol id="i-landmark" viewBox="0 0 24 24"><path d="M12 3L3 8.2h18L12 3z"/><path d="M6 8.2V18M10 8.2V18M14 8.2V18M18 8.2V18M5 18h14M3 21h18"/></symbol>
<symbol id="i-tool" viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></symbol>
<symbol id="i-down" viewBox="0 0 24 24"><path d="M12 3v11M7 10l5 5 5-5M4 20h16"/></symbol>
<symbol id="i-lock" viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></symbol>
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 21V4"/><path d="M5 4h12.5l-2.2 4 2.2 4H5"/></symbol>
<symbol id="i-fb" viewBox="0 0 24 24"><path d="M13.5 21.5v-7.4h2.5l.4-2.9h-2.9V9.3c0-.85.24-1.43 1.46-1.43h1.55V5.3c-.27-.04-1.19-.12-2.26-.12-2.24 0-3.77 1.36-3.77 3.87v2.12H8v2.9h2.44v7.4h3.06z"/></symbol>
<symbol id="i-x" viewBox="0 0 24 24"><path d="M17.6 3.2h2.9l-6.4 7.3 7.5 9.9h-5.9l-4.6-6-5.2 6H3l6.8-7.8L2.6 3.2h6l4.1 5.5 5-5.5zm-1 15.4h1.6L7.5 4.9H5.7l10.9 13.7z"/></symbol>
<symbol id="i-yt" viewBox="0 0 24 24"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.25 5 12 5 12 5s-6.25 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26.2 26.2 0 0 0 2 12a26.2 26.2 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.75 19 12 19 12 19s6.25 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26.2 26.2 0 0 0 22 12a26.2 26.2 0 0 0-.4-4.8zM10 15.2V8.8l5.2 3.2-5.2 3.2z"/></symbol>
<symbol id="i-ig" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></symbol>
</svg>
<a class="skip" href="#main">Skip to main content</a>
<!-- official banner -->
<div class="gov-banner" id="govBanner">
<div class="wrap">
<div class="gov-flag">
<span class="flagbox"><svg class="ic"><use href="#i-flag"/></svg></span>
<span>An official website of the <b>City of Meridian Falls</b></span>
<button class="gov-btn" id="govBtn" aria-expanded="false" aria-controls="govDetails">Here’s how you know <svg class="ic"><use href="#i-chev"/></svg></button>
</div>
<div class="gov-details" id="govDetails">
<div>
<svg class="ic"><use href="#i-landmark"/></svg>
<p><b>Official sites end in .gov.</b> Meridian Falls web addresses originate from city-managed domains under meridianfalls.gov and are maintained by the Department of Technology & Innovation.</p>
</div>
<div>
<svg class="ic"><use href="#i-lock"/></svg>
<p><b>Secure pages use HTTPS.</b> A padlock, or https://, means you’ve safely connected to a City site — share payment and personal information only on official, secure pages.</p>
</div>
</div>
</div>
</div>
<!-- alert bar -->
<div class="alertbar">
<div class="wrap">
<svg class="ic"><use href="#i-alert"/></svg>
<b>Flood advisory</b>
<p>Minor flooding possible along the Kesler River through Friday, Nov 28. Free sandbags at the Public Works Yard, 2100 Foundry Rd, 7 a.m.–7 p.m.</p>
<a href="#emergency">Emergency information</a>
</div>
</div>
<!-- header -->
<header class="site-head" id="siteHead">
<div class="wrap head-in">
<a class="brand" href="#top">
<img class="seal" src="https://placehold.co/108x108/17334b/f3efe6?text=MF&font=lora" alt="City of Meridian Falls official seal" width="54" height="54">
<span class="brand-name">
<strong>City of Meridian Falls</strong>
<em>Open government · Thriving community</em>
</span>
</a>
<div class="head-tools">
<a class="head-phone" href="tel:+15550147700"><svg class="ic"><use href="#i-phone"/></svg> City Link: (555) 014-7700</a>
<a class="btn btn-gold btn-sm" href="#services">Pay a Bill</a>
<button class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="mainNav" aria-label="Toggle navigation menu">
<svg class="ic"><use href="#i-menu"/></svg>
</button>
</div>
</div>
<nav class="main-nav" id="mainNav" aria-label="Primary">
<ul>
<li><a class="nav-a" href="#services">Services</a></li>
<li><a class="nav-a" href="#permits">Permits</a></li>
<li><a class="nav-a" href="#zoning">Planning & Zoning</a></li>
<li><a class="nav-a" href="#council">City Council</a></li>
<li><a class="nav-a" href="#events">Events</a></li>
<li><a class="nav-a" href="#news">News</a></li>
<li><a class="nav-a" href="#emergency">Emergency</a></li>
<li><a class="nav-a" href="#about">About</a></li>
</ul>
</nav>
</header>
<main id="main">
<!-- ============ HERO ============ -->
<section class="hero">
<img class="hero-img" src="https://picsum.photos/1600/900?grayscale" alt="">
<div class="wrap">
<h1>One front door for the City of Meridian Falls.</h1>
<p class="hero-lead">From utility bills to building permits, council agendas to flood alerts — every City service lives here, plainly explained and honestly accounted for. No phone trees, no guesswork.</p>
<form class="hero-search" id="heroForm" role="search">
<label class="sr-only" for="heroSearch">Search city services</label>
<svg class="ic" aria-hidden="true"><use href="#i-search"/></svg>
<input id="heroSearch" type="text" placeholder='Try “utility billing”, “permit”, or “records”…' autocomplete="off">
<button class="btn btn-navy" type="submit">Search Services</button>
</form>
<div class="hero-cta">
<a class="btn btn-ghost-d" href="#tracker">Track a Permit</a>
<a class="lnk lnk-gold" href="#emergency">Report a hazard <svg class="ic"><use href="#i-arrow"/></svg></a>
</div>
<div class="hero-stats">
<div><b>96,400</b><span>Residents served</span></div>
<div><b>1902</b><span>Year incorporated</span></div>
<div><b>$248.6M</b><span>FY 2025 adopted budget</span></div>
<div><b>612</b><span>Acres of parkland</span></div>
</div>
</div>
</section>
<!-- quick links strip -->
<nav class="qlinks" aria-label="Popular services">
<div class="wrap">
<a href="#services"><svg class="ic"><use href="#i-card"/></svg> Pay a Utility Bill</a>
<a href="#tracker"><svg class="ic"><use href="#i-tool"/></svg> Track a Permit</a>
<a href="#faq"><svg class="ic"><use href="#i-doc"/></svg> Request Public Records</a>
<a href="#services"><svg class="ic"><use href="#i-tree"/></svg> Parks & Programs</a>
<a href="#council"><svg class="ic"><use href="#i-landmark"/></svg> Council Agendas</a>
<a href="#about"><svg class="ic"><use href="#i-users"/></svg> City Jobs</a>
</div>
</nav>
<!-- ============ SERVICES ============ -->
<section class="sec sec-w" id="services">
<div class="wrap">
<div class="sec-head">
<p class="kicker">Government Services</p>
<h2 class="sec-title">What can we help you find?</h2>
<p class="sec-lead">Nine departments, one standard: a plain answer in plain language. Search the directory below, or browse by topic. If you can’t find it, City Link operators will walk you through it at (555) 014-7700, weekdays 8 a.m.–5 p.m.</p>
</div>
<div class="svc-search">
<svg class="ic" aria-hidden="true"><use href="#i-search"/></svg>
<label class="sr-only" for="svcSearch">Filter services</label>
<input id="svcSearch" type="text" placeholder="Filter the directory…" autocomplete="off">
<span class="svc-count" id="svcCount">8 of 8 services</span>
</div>
<p class="svc-empty" id="svcEmpty">No services match “<span id="svcEmptyQ"></span>” — call City Link at (555) 014-7700 and we’ll find it for you.</p>
<div class="svc-grid" style="margin-top:38px">
<!-- featured -->
<div class="panel feature-panel">
<img src="https://picsum.photos/800/560?grayscale" alt="City utilities service counter">
<div class="feature-body">
<h3>Utilities & Billing</h3>
<p>Water, sewer, stormwater, and curbside refuse are consolidated into a single monthly statement from the Department of Public Works. The typical household bill runs $84.20; e-statements go out on the 3rd and payment is due on the 15th. Enroll in AutoPay and paperless billing in under two minutes — or set up a payment plan if you’re carrying a past-due balance.</p>
<div class="fact"><svg class="ic"><use href="#i-check"/></svg><span>AutoPay, pay-by-text, and in-person options at City Hall and the Foundry Rd depot</span></div>
<div class="fact"><svg class="ic"><use href="#i-check"/></svg><span>Low-income rate assistance through the Kesler Valley Utility Fund</span></div>
<div class="fact"><svg class="ic"><use href="#i-check"/></svg><span>Start, stop, or transfer service with one business day’s notice</span></div>
<div class="feature-cta">
<a class="btn btn-navy" href="#services"><svg class="ic"><use href="#i-card"/></svg> Pay a Utility Bill</a>
<a class="btn btn-ghost-l" href="#services">Start or Stop Service</a>
</div>
</div>
</div>
<!-- directory -->
<div class="svc-dir">
<a class="svc-row" href="#emergency" data-key="public safety police fire ems dispatch records vacation patrol">
<span class="svc-icon"><svg class="ic"><use href="#i-shield"/></svg></span>
<span><h4>Public Safety</h4><p>Police, Fire & EMS dispatch, records requests, and vacation patrol checks.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#services" data-key="water sewer hydrant flushing cross connection service lines">
<span class="svc-icon"><svg class="ic"><use href="#i-drop"/></svg></span>
<span><h4>Water & Sewer</h4><p>Service lines, hydrant flushing schedule, cross-connection testing.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#services" data-key="waste recycling trash carts bulky item pickup drop off depot">
<span class="svc-icon"><svg class="ic"><use href="#i-trash"/></svg></span>
<span><h4>Waste & Recycling</h4><p>Cart days by zone, bulky-item pickup, and drop-off depot hours.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#events" data-key="parks recreation rentals leagues trails gardens facilities">
<span class="svc-icon"><svg class="ic"><use href="#i-tree"/></svg></span>
<span><h4>Parks & Recreation</h4><p>Facility rentals, youth leagues, trail conditions, and community garden plots.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#news" data-key="transportation streets snow routes potholes transit bridge detour">
<span class="svc-icon"><svg class="ic"><use href="#i-bus"/></svg></span>
<span><h4>Transportation & Streets</h4><p>Snow routes, pothole reports, transit passes, and the Kesler Bridge detour.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#faq" data-key="housing neighborhoods rental registration down payment assistance code complaint">
<span class="svc-icon"><svg class="ic"><use href="#i-home"/></svg></span>
<span><h4>Housing & Neighborhoods</h4><p>Rental registration, down-payment assistance, and file a code compliance complaint.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#services" data-key="animal services licensing adoptions wildlife lost pet registry">
<span class="svc-icon"><svg class="ic"><use href="#i-paw"/></svg></span>
<span><h4>Animal Services</h4><p>Licensing, adoptions, wildlife conflicts, and the lost-pet registry.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
<a class="svc-row" href="#services" data-key="senior human services meals wheels utility fund intake center">
<span class="svc-icon"><svg class="ic"><use href="#i-users"/></svg></span>
<span><h4>Senior & Human Services</h4><p>Meals on Wheels, senior center calendar, and utility fund intake.</p></span>
<svg class="ic"><use href="#i-arrow"/></svg>
</a>
</div>
</div>
</div>
</section>
<!-- ============ PERMITS & PLANNING ============ -->
<section class="sec" id="permits">
<div class="wrap">
<div class="sec-head">
<p class="kicker">Permits & Planning</p>
<h2 class="sec-title">Building something? Start at the Permit Center.</h2>
<p class="sec-lead">One counter, three reviewing departments, and a published clock — so you always know where your application stands.</p>
</div>
<div class="grid-main-rail">
<div class="copy">
<p>Most work that changes a structure, its use, or the ground beneath it needs a permit — from a garage addition to a commercial tenant improvement. Meridian Falls operates a single consolidated Permit Center in City Hall, Room 110, where Development Services, Fire Prevention, and Public Works staff review under one roof. Roughly 60% of residential applications are issued over the counter the same week they arrive, and the e-Permit portal handles the rest around the clock.</p>
<p>Requirements live in the municipal code — <strong>Title 15</strong> governs building and construction, and <strong>Title 17</strong> governs zoning, setbacks, and lot coverage. If you’re unsure which rules apply, call the Permit Center at (555) 014-7720 before you draw; a five-minute conversation early on routinely saves applicants weeks of revision. Cosmetic projects — painting, flooring, like-for-like cabinetry — are exempt.</p>
<p>Fees are set each fiscal year in the adopted fee schedule and are calculated at intake, not at issuance — so the number you’re quoted is the number you pay.</p>
<figure class="photo">
<img src="https://picsum.photos/900/620?grayscale" alt="Plans being reviewed at the Permit Center counter">
<figcaption>Counter intake at the Permit Center, City Hall Room 110 — weekdays, 8 a.m. to 4 p.m.</figcaption>
</figure>
<h3 class="sub">How a permit moves through the City</h3>
<ol class="process">
<li>
<h4>Determine whether you need a permit</h4>
<p>Check Municipal Code §15.04.030 and the exemption list on the e-Permit portal. When in doubt, call — a five-minute call can save weeks.</p>
</li>
<li>
<h4>Submit your application</h4>
<p>Through the e-Permit portal or at Room 110. Include a full plan set (two paper sets, or one PDF) and the intake fee. You’ll get a case number immediately.</p>
</li>
<li>
<h4>Plan review</h4>
<p>Zoning, building, fire, and public works review run in parallel. Residential additions average 10 business days; complex commercial projects route to the NW Plan Review Cooperative.</p>
</li>
<li>
<h4>Inspections</h4>
<p>Schedule by 3:00 p.m. for a next-business-day inspection. Footing, framing, and final inspections are called in one at a time — never batched.</p>
</li>
<li>
<h4>Final approval</h4>
<p>Your Certificate of Occupancy or final sign-off posts to your e-Permit account the same day the last inspection passes. Keep it with your property records.</p>
</li>
</ol>
</div>
<aside class="rail">
<div class="panel panel-pad">
<p class="panel-title"><svg class="ic"><use href="#i-doc"/></svg> Most-requested permits</p>
<div class="permit-list">
<a href="#permits"><svg class="ic"><use href="#i-down"/></svg><span>Residential Building Permit</span><em class="pdf">PDF</em></a>
<a href="#permits"><svg class="ic"><use href="#i-down"/></svg><span>Fence & Accessory Structure</span><em class="pdf">PDF</em></a>
<a href="#permits"><svg class="ic"><use href="#i-down"/></svg><span>Sign Permit</span><em class="pdf">PDF</em></a>
<a href="#permits"><svg class="ic"><use href="#i-down"/></svg><span>Special Event Permit</span><em class="pdf">PDF</em></a>
<a href="#permits"><svg class="ic"><use href="#i-down"/></svg><span>Right-of-Way / Utility Permit</span><em class="pdf">PDF</em></a>
</div>
</div>
<div class="panel panel-pad" id="zoning">
<p class="panel-title"><svg class="ic"><use href="#i-pin"/></svg> Zoning at a glance</p>
<table class="ztable">
<thead><tr><th>District</th><th>What it means</th></tr></thead>
<tbody>
<tr><td>R-1</td><td>Single-family residential · 6,000 sq ft minimum lot</td></tr>
<tr><td>R-3</td><td>Multi-family · up to 24 units/acre near transit</td></tr>
<tr><td>C-1</td><td>Neighborhood commercial</td></tr>
<tr><td>C-2</td><td>General commercial corridor</td></tr>
<tr><td>M-1</td><td>Light industrial · Foundry District</td></tr>
</tbody>
</table>
<a class="rail-more" href="#zoning">View the official zoning map <svg class="ic"><use href="#i-arrow"/></svg></a>
</div>
<div class="panel panel-pad code-panel">
<p class="panel-title"><svg class="ic"><use href="#i-landmark"/></svg> Municipal code</p>
<p>Codified through <strong>Ordinance 2025-41</strong>. Titles 1–18 are searchable online; recent amendments cover impact fees (§3.48) and short-term rentals (§5.62).</p>
<a class="rail-more" href="#faq">Browse the full code <svg class="ic"><use href="#i-arrow"/></svg></a>
</div>
</aside>
</div>
<!-- ============ PERMIT TRACKER ============ -->
<div class="tracker" id="tracker">
<div class="tracker-top">
<div>
<h3>Track a permit</h3>
<p class="tracker-sub">Enter any permit, rezone, or special-event case number to see exactly where it stands — statuses refresh nightly from the e-Permit system.</p>
</div>
<p class="tracker-note"><svg class="ic"><use href="#i-clock"/></svg> Updated nightly · 11:59 p.m.</p>
</div>
<form class="track-form" id="trackForm">
<label class="sr-only" for="trackInput">Case number</label>
<input id="trackInput" type="text" placeholder="e.g. BP-2025-0482" autocomplete="off">
<button class="btn btn-navy" type="submit"><svg class="ic"><use href="#i-search"/></svg> Check Status</button>
</form>
<div class="track-chips">
<span>Try a sample case:</span>
<button type="button" class="chip" data-num="BP-2025-0482">BP-2025-0482</button>
<button type="button" class="chip" data-num="ZC-2025-0119">ZC-2025-0119</button>
<button type="button" class="chip" data-num="RO-2025-0066">RO-2025-0066</button>
<button type="button" class="chip" data-num="EVT-2025-0091">EVT-2025-0091</button>
</div>
<div class="track-res" id="trackResult" aria-live="polite"></div>
</div>
</div>
</section>
<!-- ============ COUNCIL ============ -->
<section class="sec sec-w" id="council">
<div class="wrap">
<div class="sec-head">
<p class="kicker">City Council & Transparency</p>
<h2 class="sec-title">Seven neighbors, one budget, every decision on the record.</h2>
<p class="sec-lead">Recorded votes, published budgets, and open hearings — the machinery of the City, visible to anyone who wants to look.</p>
</div>
<div class="council-grid">
<div class="copy">
<p>Meridian Falls is a council–manager city: the council sets policy and adopts the budget; a professionally appointed City Manager runs the day-to-day. Councilmembers serve four-year terms — six by district, the mayor at-large — and every regular meeting ends with open public comment, time limits equally enforced.</p>
<p>Regular meetings are held the first and third Tuesday at 6:30 p.m. in Council Chambers and streamed live on MF Gov TV, YouTube, and this site. Agendas post the Thursday before at 5:00 p.m.; minutes are draft within five business days and final after council approval. All procurement over $25,000 is competitively bid, with award notices and vendor registration on the procurement portal.</p>
<div class="members">
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-mayor" alt="Portrait of Mayor Dana Whitfield"><b>Dana Whitfield</b><span>Mayor · At-large</span></div>
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-d1" alt="Portrait of Marcus Ellison"><b>Marcus Ellison</b><span>Mayor Pro Tem · Dist. 1</span></div>
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-d2" alt="Portrait of Priya Raman"><b>Priya Raman</b><span>Councilmember · Dist. 2</span></div>
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-d3" alt="Portrait of Tomás Delgado"><b>Tomás Delgado</b><span>Councilmember · Dist. 3</span></div>
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-d4" alt="Portrait of Ingrid Halvorsen"><b>Ingrid Halvorsen</b><span>Councilmember · Dist. 4</span></div>
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-d5" alt="Portrait of Sadie Chen"><b>Sadie Chen</b><span>Councilmember · Dist. 5</span></div>
<div class="member"><img src="https://i.pravatar.cc/150?u=mf-d6" alt="Portrait of Henry Pratt"><b>Henry Pratt</b><span>Councilmember · Dist. 6</span></div>
</div>
<blockquote class="pullquote">
<p>“The measure of this city government is whether a resident can find an answer without knowing somebody. Every page on this site is built to that standard.”</p>
<footer>— Elena Ruiz, City Manager</footer>
</blockquote>
</div>
<aside class="council-rail">
<div class="panel panel-pad">
<p class="panel-title"><svg class="ic"><use href="#i-cal"/></svg> Next regular meeting</p>
<p class="meet-date" style="margin-top:14px">Tue, Dec 9</p>
<div class="meet-meta"><svg class="ic"><use href="#i-clock"/></svg> 6:30 p.m. — public comment from 6:00</div>
<div class="meet-meta"><svg class="ic"><use href="#i-pin"/></svg> Council Chambers, City Hall Room 200</div>
<div class="meet-cta">
<a class="btn btn-gold btn-sm" href="#council"><svg class="ic"><use href="#i-down"/></svg> View Agenda (PDF)</a>
<a class="btn btn-navy btn-sm" href="#council">Watch Live</a>
</div>
</div>
<div class="panel panel-pad">
<p class="panel-title"><svg class="ic"><use href="#i-card"/></svg> FY 2025 adopted budget</p>
<p style="font-size:.84rem;color:var(--muted);margin-top:8px">Fiscal year July 1, 2024 – June 30, 2025. Where each dollar goes:</p>
<div class="budget-bar hl">
<div class="row"><span>General Fund</span><em>$104.4M · 42%</em></div>
<div class="track"><span style="width:100%"></span></div>
</div>
<div class="budget-bar">
<div class="row"><span>Capital Improvement</span><em>$57.2M · 23%</em></div>
<div class="track"><span style="width:55%"></span></div>
</div>
<div class="budget-bar">
<div class="row"><span>Public Safety Levy</span><em>$52.1M · 21%</em></div>
<div class="track"><span style="width:50%"></span></div>
</div>
<div class="budget-bar">
<div class="row"><span>Debt Service</span><em>$19.9M · 8%</em></div>
<div class="track"><span style="width:19%"></span></div>
</div>
<div class="budget-bar">
<div class="row"><span>Enterprise & Special</span><em>$15.0M · 6%</em></div>
<div class="track"><span style="width:14%"></span></div>
</div>
<div class="budget-total"><span>Total appropriations</span><span>$248.6M</span></div>
<div class="doc-links">
<a href="#council"><svg class="ic"><use href="#i-down"/></svg><span>Adopted budget (PDF, 14 MB)</span></a>
<a href="#council"><svg class="ic"><use href="#i-doc"/></svg><span>Annual comprehensive financial report</span></a>
<a href="#council"><svg class="ic"><use href="#i-doc"/></svg><span>Check register — updated monthly</span></a>
<a href="#council"><svg class="ic"><use href="#i-arrow"/></svg><span>Open Budget Portal</span></a>
</div>
</div>
</aside>
</div>
</div>
</section>
<!-- ============ NEWS & EVENTS ============ -->
<section class="sec" id="news">
<div class="wrap">
<div class="news-grid">
<div>
<div class="sec-head sec-head-row">
<div>
<p class="kicker">Newsroom</p>
<h2 class="sec-title" style="margin-bottom:0">Latest from City Hall</h2>
</div>
<a class="lnk" href="#news">All press releases <svg class="ic"><use href="#i-arrow"/></svg></a>
</div>
<article class="news-item">
<img src="https://picsum.photos/200/200?grayscale" alt="Council chamber during a budget session">
<div>
<div class="news-meta"><time datetime="2025-11-21">Nov 21, 2025</time><span class="tag t-budget">Budget</span></div>
<h3><a href="#news">Council advances FY 2026 preliminary budget; public hearing Dec 9</a></h3>
<p>The $261.3M proposal adds six firefighter positions and funds the Riverbend trail extension without a property-tax rate increase. Written comment is open through Dec 5.</p>
</div>
</article>
<article class="news-item">
<img src="https://picsum.photos/200/200?grayscale" alt="Kesler Bridge over the river">
<div>
<div class="news-meta"><time datetime="2025-11-14">Nov 14, 2025</time><span class="tag t-transport">Transportation</span></div>
<h3><a href="#news">Kesler Bridge rehabilitation starts Jan 5 — detour map published</a></h3>
<p>The 14-month project replaces the 1937 deck grid. Through traffic shifts to the Foundry Rd corridor; transit reroutes take effect Dec 30.</p>
</div>
</article>
<article class="news-item">
<img src="https://picsum.photos/200/200?grayscale" alt="Trail along Riverbend Park">
<div>
<div class="news-meta"><time datetime="2025-11-07">Nov 7, 2025</time><span class="tag t-parks">Parks</span></div>
<h3><a href="#news">Riverbend Park trail extension wins $1.4M state grant</a></h3>
<p>The 2.3-mile segment will connect Harbor Hall to the Falls Overlook, closing the largest remaining gap in the valley loop.</p>
</div>
</article>
<article class="news-item">
<img src="https://picsum.photos/200/200?grayscale" alt="New homeowner receiving keys">
<div>
<div class="news-meta"><time datetime="2025-10-30">Oct 30, 2025</time><span class="tag t-housing">Housing</span></div>
<h3><a href="#news">Down Payment Assistance opens for a third round — $2.6M available</a></h3>
<p>Eligible first-time buyers can receive up to $45,000. Applications are scored monthly; the portal closes when funds are committed.</p>
</div>
</article>
</div>
<div id="events">
<div class="sec-head sec-head-row">
<div>
<p class="kicker">Events</p>
<h2 class="sec-title" style="margin-bottom:0">Meetings & community calendar</h2>
</div>
<a class="lnk" href="#events">Full calendar <svg class="ic"><use href="#i-arrow"/></svg></a>
</div>
<div class="ev-item">
<div class="ev-date"><span class="m">Dec</span><span class="d">2</span></div>
<div><h4><a href="#events">Planning Commission</a></h4><p class="ev-meta">6:00 p.m. · Room 2A & streamed live</p></div>
</div>
<div class="ev-item">
<div class="ev-date"><span class="m">Dec</span><span class="d">5</span></div>
<div><h4><a href="#events">Holiday Tree Lighting</a></h4><p class="ev-meta">5:30 p.m. · Civic Plaza — cocoa, carols, and the 40-foot spruce</p></div>
</div>
<div class="ev-item">
<div class="ev-date"><span class="m">Dec</span><span class="d">9</span></div>
<div><h4><a href="#events">City Council — Regular Meeting</a><span class="ev-live">Live stream</span></h4><p class="ev-meta">6:30 p.m. · Council Chambers, Room 200</p></div>
</div>
<div class="ev-item">
<div class="ev-date"><span class="m">Dec</span><span class="d">13</span></div>
<div><h4><a href="#events">Winter Makers Fair</a></h4><p class="ev-meta">10 a.m.–4 p.m. · Civic Plaza — 60+ local vendors</p></div>
</div>
<div class="ev-item">
<div class="ev-date"><span class="m">Dec</span><span class="d">16</span></div>
<div><h4><a href="#events">FY26 Budget Workshop</a></h4><p class="ev-meta">4:00 p.m. · Room 2A — public welcome</p></div>
</div>
<div class="ev-item">
<div class="ev-date"><span class="m">Jan</span><span class="d">20</span></div>
<div><h4><a href="#events">MLK Day of Service</a></h4><p class="ev-meta">8:30 a.m. check-in · Harbor Hall</p></div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ EMERGENCY ============ -->
<section class="sec sec-emg" id="emergency">
<div class="wrap">
<div class="emg-grid">
<div class="copy">
<p class="kicker">Emergency Services</p>
<h2 class="sec-title">Prepared for the flood, the fire, and the ordinary Tuesday.</h2>
<p>The Office of Emergency Management coordinates Police, Fire & EMS, and Public Works under a single all-hazards plan, tested twice a year through full-scale exercises. The Kesler Valley’s principal risks are riverine flooding (February–June), wildfire smoke events, and extended ice storms — each with pre-published playbooks covering evacuation routes (State Routes 12 and 96), shelter sites, and mutual-aid agreements with Kesler County and the Town of Hargrove.</p>
<p>Every resident should be signed up for <strong>CodeRED</strong>, the City’s free alert system: voice, text, and email warnings for evacuation orders, boil-water notices, and severe weather. Sirens are tested the first Wednesday of each month at noon — if you hear them any other time, tune to local broadcasts and follow official instructions.</p>
<div class="kit">
<p class="kit-k">Build your kit — the short list</p>
<ul>
<li><svg class="ic"><use href="#i-check"/></svg><span>One gallon of water per person per day — 14 days for Kesler Valley households</span></li>
<li><svg class="ic"><use href="#i-check"/></svg><span>Battery or hand-crank radio with the NOAA weather band</span></li>
<li><svg class="ic"><use href="#i-check"/></svg><span>Two weeks of medications, pet food, and copies of key documents</span></li>
</ul>
</div>
<div class="emg-cta">
<a class="btn btn-gold" href="#emergency"><svg class="ic"><use href="#i-alert"/></svg> Sign Up for CodeRED Alerts</a>
<a class="btn btn-ghost-d" href="#emergency"><svg class="ic"><use href="#i-down"/></svg> Download the Preparedness Guide</a>
</div>
</div>
<aside class="emg-panel">
<p class="emg-panel-k">In an emergency</p>
<div class="er-row">
<span class="er-big">911</span>
<div><b>Life-threatening emergency</b><p>Police, fire, or medical. Call — don’t text. Location first, then what’s happening.</p></div>
</div>
<div class="er-row">
<span class="er-big">(555) 014-7705</span>
<div><b>Non-emergency dispatch · 24/7</b><p>Noise, abandoned vehicles, delayed reports, and welfare checks.</p></div>
</div>
<div class="er-row">
<span class="er-big"><a class="er-link" href="#emergency">CityFix</a></span>
<div><b>File a hazard report online</b><p>Potholes, streetlights, blocked storm drains — routed to a crew within one business day.</p></div>
</div>
</aside>
</div>
</div>
</section>
<!-- ============ ABOUT ============ -->
<section class="sec sec-w" id="about">
<div class="wrap">
<div class="about-grid">
<figure class="photo" style="margin-top:0">
<img src="https://picsum.photos/760/900?grayscale" alt="The Falls Overlook at dusk">
<figcaption>Falls Overlook at dusk — the original meridian marker stands at the trailhead.</figcaption>
</figure>
<div class="copy">
<p class="kicker">About the City</p>
<h2 class="sec-title">A mill town that learned to plan.</h2>
<p>Meridian Falls takes its name from the survey line set in 1871, but its character was poured at the Hargrove Mill, the logging company whose 1892 camp grew into a town. Incorporated in 1902, the city boomed with the river — sawmills, a rail spur, and the brass-and-brick Foundry District that today houses breweries, studios, and the winter farmers market.</p>
<p>The modern city adopted its charter in 1931, joining the council–manager movement that separated policy from administration. That structure still defines us: a seven-member council that legislates, a City Manager who executes, and a civic habit — recorded votes, published budgets, open hearings — that has outlasted every administration since.</p>
<p>Today, 96,400 residents share 26.4 square miles along the Kesler River, anchored by a regional medical center, a community college campus, and 612 acres of parkland. The City is a guideline-setting member of the Kesler Valley Council of Governments and the Mid-State Transit Partnership.</p>
<div class="about-facts">
<div><b>1902</b><span>Incorporated</span></div>
<div><b>Council–Manager</b><span>Form of government</span></div>
<div><b>26.4 sq mi</b><span>City limits</span></div>
<div><b>9</b><span>Departments</span></div>
</div>
<p style="margin-top:26px"><a class="lnk" href="#about">Read the full city history (PDF) <svg class="ic"><use href="#i-arrow"/></svg></a></p>
</div>
</div>
</div>
</section>
<!-- ============ FAQ ============ -->
<section class="sec" id="faq">
<div class="wrap">
<div class="grid-main-rail">
<div>
<div class="sec-head">
<p class="kicker">Help Center</p>
<h2 class="sec-title">Frequently asked questions</h2>
<p class="sec-lead">The questions City Link answers most, in the order they arrive.</p>
</div>
<div class="acc-item">
<button class="acc-btn" aria-expanded="false"><span>When are property taxes due?</span><svg class="ic"><use href="#i-chev"/></svg></button>
<div class="acc-body"><div class="acc-inner">Kesler County bills on behalf of all taxing districts. The first half is due April 30 and the second half October 31. The county annex at City Hall accepts payments weekdays 8–5, and online payments post same-day before midnight. Senior and disabled-veteran exemptions are administered by the County Assessor — the City’s Community Services desk can help you gather the paperwork.</div></div>
</div>
<div class="acc-item">
<button class="acc-btn" aria-expanded="false"><span>What work requires a building permit?</span><svg class="ic"><use href="#i-chev"/></svg></button>
<div class="acc-body"><div class="acc-inner">Anything structural, electrical, plumbing, or mechanical beyond like-for-like replacement: decks more than 30 inches above grade, fences over six feet, water heaters, furnace replacement, and any addition. Paint, flooring, and cabinetry are exempt. When in doubt, call the Permit Center at (555) 014-7720.</div></div>
</div>
<div class="acc-item">
<button class="acc-btn" aria-expanded="false"><span>How do I appeal a parking citation?</span><svg class="ic"><use href="#i-chev"/></svg></button>
<div class="acc-body"><div class="acc-inner">You have 21 days from the date of issue. Request a hearing online through the e-Citation portal, by mail, or in person at the Finance counter. Hearings are held Wednesdays; if a citation is dismissed or reduced, any amount already paid is refunded within 15 business days.</div></div>
</div>
<div class="acc-item">
<button class="acc-btn" aria-expanded="false"><span>How do I request a public record?</span><svg class="ic"><use href="#i-chev"/></svg></button>
<div class="acc-body"><div class="acc-inner">File a Public Records Request form — online, by mail, or at the City Clerk’s counter. Under City Code §2.68 the Clerk responds within five business days with the records or a written timeline for exemption review. There’s no charge for the first 50 pages; electronic delivery is always free.</div></div>
</div>
<div class="acc-item">
<button class="acc-btn" aria-expanded="false"><span>When is bulky-item pickup?</span><svg class="ic"><use href="#i-chev"/></svg></button>
<div class="acc-body"><div class="acc-inner">Each household gets two free bulky pickups a year, scheduled by zone through the Waste & Recycling page or City Link. Items should be at the curb by 6 a.m. on your scheduled day. The drop-off depot on Foundry Rd accepts appliances and mattresses year-round, Thursday through Sunday.</div></div>
</div>
<div class="acc-item">
<button class="acc-btn" aria-expanded="false"><span>How do I reach a specific department?</span><svg class="ic"><use href="#i-chev"/></svg></button>
<div class="acc-body"><div class="acc-inner">Call City Link at (555) 014-7700 — operators are trained to route or resolve on the first call, weekdays 8 a.m.–5 p.m. Department direct lines, the staff directory, and after-hours numbers are listed on the Contact page.</div></div>
</div>
</div>
<aside class="rail">
<div class="panel panel-pad help-panel">
<p class="panel-title"><svg class="ic"><use href="#i-phone"/></svg> Still need help?</p>
<a class="phone-big" href="tel:+15550147700"><svg class="ic ic-lg"><use href="#i-phone"/></svg> (555) 014-7700</a>
<div class="help-row"><svg class="ic"><use href="#i-clock"/></svg><span>City Link hours: Monday–Friday, 8 a.m.–5 p.m. (except holidays)</span></div>
<div class="help-row"><svg class="ic"><use href="#i-mail"/></svg><span>citylink@meridianfalls.gov — answered within one business day</span></div>
<div class="help-row"><svg class="ic"><use href="#i-pin"/></svg><span>In person: City Hall, 400 Civic Center Plaza — counters open at 8 a.m.</span></div>
<div class="help-stat"><span>Average hold time this week</span><b>1 min 40 s</b></div>
</div>
</aside>
</div>
</div>
</section>
<!-- ============ SUBSCRIBE ============ -->
<section class="sec sec-sub">
<div class="wrap sub-grid">
<div>
<p class="kicker">Stay Informed</p>
<h2>The Falls Wire — one email a month.</h2>
<p class="sub-copy">Meeting agendas, road work, enrollment deadlines, and the occasional photo of the Falls. Written by the Communications Office, read by 31,000 of your neighbors.</p>
</div>
<div>
<form class="news-form" id="newsForm" novalidate>
<label class="sr-only" for="newsEmail">Email address</label>
<input id="newsEmail" type="email" placeholder="you@example.com" autocomplete="email">
<button class="btn btn-gold" type="submit">Subscribe</button>
</form>
<p class="news-err" id="newsErr" hidden>Please enter a valid email address.</p>
<div class="news-ok" id="newsOk" hidden>
<svg class="ic ic-lg"><use href="#i-check"/></svg>
<span>You’re on the list — The Falls Wire lands the first Monday of each month.</span>
</div>
<p class="sub-fine">We never share your address. Unsubscribe in one click.</p>
</div>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="site-foot">
<div class="wrap foot-grid">
<div>
<div class="foot-brand">
<img src="https://placehold.co/88x88/17334b/f3efe6?text=MF&font=lora" alt="City of Meridian Falls seal" width="44" height="44">
<span><strong>City of Meridian Falls</strong><em>Est. 1902</em></span>
</div>
<p class="foot-desc">The official portal of the City of Meridian Falls, Kesler Valley — serving residents, businesses, and visitors since the first gavel fell.</p>
<div class="foot-c"><svg class="ic"><use href="#i-pin"/></svg><span>City Hall — 400 Civic Center Plaza<br>Meridian Falls, Kesler Valley 73402</span></div>
<div class="foot-c"><svg class="ic"><use href="#i-phone"/></svg><a href="tel:+15550147700">(555) 014-7700</a> · TTY 711</div>
<div class="foot-c"><svg class="ic"><use href="#i-mail"/></svg><a href="mailto:citylink@meridianfalls.gov">citylink@meridianfalls.gov</a></div>
</div>
<div>
<p class="foot-h">Departments</p>
<ul class="foot-list">
<li><a href="#services">Police</a></li>
<li><a href="#emergency">Fire & EMS</a></li>
<li><a href="#services">Public Works</a></li>
<li><a href="#permits">Community Development</a></li>
<li><a href="#services">Parks & Recreation</a></li>
<li><a href="#council">Finance</a></li>
<li><a href="#council">City Clerk</a></li>
<li><a href="#about">Human Resources</a></li>
</ul>
</div>
<div>
<p class="foot-h">Popular Links</p>
<ul class="foot-list">
<li><a href="#services">Pay a Utility Bill</a></li>
<li><a href="#permits">Permits & Inspections</a></li>
<li><a href="#faq">Public Records</a></li>
<li><a href="#council">Council Agendas</a></li>
<li><a href="#zoning">Zoning Map</a></li>
<li><a href="#faq">Municipal Code</a></li>
<li><a href="#events">Events Calendar</a></li>
</ul>
</div>
<div>
<p class="foot-h">Connect</p>
<div class="social">
<a href="#top" aria-label="City of Meridian Falls on Facebook"><svg class="ic ic-fill"><use href="#i-fb"/></svg></a>
<a href="#top" aria-label="City of Meridian Falls on X"><svg class="ic ic-fill"><use href="#i-x"/></svg></a>
<a href="#top" aria-label="MF Gov TV on YouTube"><svg class="ic ic-fill"><use href="#i-yt"/></svg></a>
<a href="#top" aria-label="City of Meridian Falls on Instagram"><svg class="ic"><use href="#i-ig"/></svg></a>
</div>
<p class="foot-note">e-Notifications: get agendas, road work, and emergency alerts by text or email — manage preferences anytime.</p>
<p class="foot-note" style="margin-top:12px">The City is committed to WCAG 2.1 AA accessibility. Need an accommodation? Call TTY 711 or email <a href="mailto:ada@meridianfalls.gov" style="color:#c4d1db">ada@meridianfalls.gov</a>.</p>
</div>
</div>
<div class="foot-bar">
<div class="wrap">
<span>© <span id="year">2025</span> City of Meridian Falls. All rights reserved.</span>
<div class="foot-legal">
<a href="#top">Privacy Policy</a>
<a href="#top">Terms of Use</a>
<a href="#top">Accessibility (ADA)</a>
<a href="#top">Sitemap</a>
</div>
<span>Page last reviewed Nov 24, 2025 · Dept. of Technology & Innovation</span>
</div>
</div>
</footer>
<script>
/* ---------- year ---------- */
document.getElementById('year').textContent = new Date().getFullYear();
/* ---------- official banner ---------- */
var govBtn = document.getElementById('govBtn');
govBtn.addEventListener('click', function () {
var open = document.getElementById('govBanner').classList.toggle('open');
govBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
/* ---------- mobile nav ---------- */
var menuBtn = document.getElementById('menuBtn');
var mainNav = document.getElementById('mainNav');
menuBtn.addEventListener('click', function () {
var open = mainNav.classList.toggle('open');
menuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
menuBtn.querySelector('use').setAttribute('href', open ? '#i-close' : '#i-menu');
});
mainNav.querySelectorAll('a').forEach(function (a) {
a.addEventListener('click', function () {
mainNav.classList.remove('open');
menuBtn.setAttribute('aria-expanded', 'false');
menuBtn.querySelector('use').setAttribute('href', '#i-menu');
});
});
/* ---------- sticky header shadow ---------- */
var head = document.getElementById('siteHead');
window.addEventListener('scroll', function () {
head.classList.toggle('scrolled', window.scrollY > 8);
}, { passive: true });
/* ---------- active nav link ---------- */
var navLinks = Array.prototype.slice.call(document.querySelectorAll('.nav-a'));
var watched = ['services', 'permits', 'council', 'news', 'emergency', 'about', 'faq']
.map(function (id) { return document.getElementById(id); })
.filter(Boolean);
if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
navLinks.forEach(function (a) {
a.classList.toggle('active', a.getAttribute('href') === '#' + en.target.id);
});
}
});
}, { rootMargin: '-40% 0px -55% 0px' });
watched.forEach(function (s) { io.observe(s); });
}
/* ---------- hero button focus helper ---------- */
document.querySelectorAll('[data-focus]').forEach(function (el) {
el.addEventListener('click', function (e) {
var t = document.querySelector(el.getAttribute('data-focus'));
if (!t) return;
e.preventDefault();
t.scrollIntoView({ behavior: 'smooth', block: 'center' });
setTimeout(function () { t.focus({ preventScroll: true }); }, 500);
});
});
/* ---------- service directory filter ---------- */
var svcRows = Array.prototype.slice.call(document.querySelectorAll('.svc-row'));
var svcCount = document.getElementById('svcCount');
var svcEmpty = document.getElementById('svcEmpty');
var svcEmptyQ = document.getElementById('svcEmptyQ');
var svcSearch = document.getElementById('svcSearch');
var heroSearch = document.getElementById('heroSearch');
function filterServices(q) {
q = (q || '').trim().toLowerCase();
var n = 0;
svcRows.forEach(function (r) {
var hit = !q || r.getAttribute('data-key').indexOf(q) !== -1;
r.classList.toggle('hide', !hit);
if (hit) n++;
});
svcCount.textContent = n + ' of ' + svcRows.length + ' services';
svcEmptyQ.textContent = q;
svcEmpty.classList.toggle('show', n === 0);
}
svcSearch.addEventListener('input', function () { filterServices(this.value); });
heroSearch.addEventListener('input', function () {
svcSearch.value = this.value;
filterServices(this.value);
});
document.getElementById('heroForm').addEventListener('submit', function (e) {
e.preventDefault();
svcSearch.value = heroSearch.value;
filterServices(heroSearch.value);
document.getElementById('services').scrollIntoView({ behavior: 'smooth' });
});
/* ---------- permit status tracker ---------- */
var PERMITS = {
'BP-2025-0482': {
type: 'Residential Building Permit',
subject: '412 Alder St \u2014 240 sq ft garage addition',
badge: 'In plan review', bclass: 'b-amber',
filed: 'Nov 3, 2025', handler: 'M. Okafor \u00b7 Plans Examiner', updated: 'Updated Nov 24, 2025 \u00b7 4:12 PM',
steps: [
{ l: 'Application received', d: 'Nov 3, 2025', s: 'done' },
{ l: 'Completeness check', d: 'Nov 6, 2025', s: 'done', n: 'Two corrected sheets re-uploaded by the contractor; intake fee of $214 paid.' },
{ l: 'Zoning review', d: 'Nov 12, 2025', s: 'done', n: 'Setbacks and lot coverage comply with \u00a717.24.030 \u2014 no variance required.' },
{ l: 'Building & fire plan review', d: 'In progress', s: 'current', n: 'Routed to the structural reviewer Nov 17. Typical turnaround: 7\u201310 business days.' },
{ l: 'Permit issuance', d: 'Pending', s: 'todo' },
{ l: 'Inspections & final sign-off', d: 'Pending', s: 'todo' }
],
next: 'No action is needed from you right now. Once Building & Fire review clears, the permit posts to your e-Permit account and you\u2019ll receive an email with the balance due and inspection instructions.'
},
'ZC-2025-0119': {
type: 'Rezone petition (C-1 \u2192 C-2)',
subject: '1800 Harbor Ave \u2014 Kesler Landing parcels, 1.4 acres',
badge: 'Scheduled for hearing', bclass: 'b-amber',
filed: 'Sep 18, 2025', handler: 'A. Lindqvist \u00b7 Planning Technician', updated: 'Updated Nov 20, 2025 \u00b7 9:03 AM',
steps: [
{ l: 'Pre-application conference', d: 'Sep 25, 2025', s: 'done' },
{ l: 'Application & neighborhood notice', d: 'Oct 2, 2025', s: 'done', n: 'Notices mailed to 214 parcels within 500 ft of the site.' },
{ l: 'Environmental review (SEPA-type)', d: 'Oct 30, 2025', s: 'done', n: 'Determination of Non-Significance issued; appeal window closed Nov 14.' },
{ l: 'Planning Commission hearing', d: 'Dec 4, 2025 \u00b7 6:00 PM', s: 'current', n: 'Room 2A, City Hall. Testimony sign-up opens 5:30 p.m.; streamed live.' },
{ l: 'City Council decision', d: 'Estimated Jan 2026', s: 'todo' },
{ l: 'Ordinance adopted & recorded', d: 'Pending', s: 'todo' }
],
next: 'Written comment is open through Dec 3 at 5:00 p.m. (planning@meridianfalls.gov). Referenced exhibits are posted with the Dec 4 agenda packet.'
},
'RO-2025-0066': {
type: 'Right-of-Way / Utility Permit',
subject: '900 blk Foundry Rd \u2014 water service tie-in',
badge: 'Ready for inspection', bclass: 'b-green',
filed: 'Oct 27, 2025', handler: 'D. Vo \u00b7 Public Works Inspector', updated: 'Updated Nov 25, 2025 \u00b7 7:40 AM',
steps: [
{ l: 'Application received', d: 'Oct 27, 2025', s: 'done' },
{ l: 'Traffic control plan approved', d: 'Oct 31, 2025', s: 'done', n: 'Single-lane closure with flaggers, per the MUTCD sheet on file.' },
{ l: 'Permit issued', d: 'Nov 10, 2025', s: 'done', n: 'Tap fee receipt #T-88214; bond posted by Ridgeline Water Works.' },
{ l: 'Trench & backfill inspection', d: 'Scheduled Nov 26 \u00b7 AM window', s: 'current', n: 'Contractor called in before the 3:00 p.m. cutoff on Nov 25.' },
{ l: 'Final restoration & bond release', d: 'Pending', s: 'todo' }
],
next: 'The inspection window is 7\u201311 a.m. on Nov 26. The trench must be open, shored, and accessible; restoration follows City standard detail PW-114.'
},
'EVT-2025-0091': {
type: 'Special Event Permit',
subject: 'Winter Makers Fair \u2014 Civic Plaza, Dec 13',
badge: 'Approved', bclass: 'b-green',
filed: 'Oct 8, 2025', handler: 'R. Campos \u00b7 Events & Filming Office', updated: 'Updated Nov 18, 2025 \u00b7 2:22 PM',
steps: [
{ l: 'Application received', d: 'Oct 8, 2025', s: 'done' },
{ l: 'Interdepartmental review', d: 'Oct 24, 2025', s: 'done', n: 'Police, Fire & EMS, and Parks sign-offs complete.' },
{ l: 'Fees & insurance on file', d: 'Nov 18, 2025', s: 'done', n: '$185 event fee paid; certificate of insurance verified.' },
{ l: 'Permit issued', d: 'Nov 18, 2025', s: 'done', n: 'Site plan and restroom counts approved as submitted.' },
{ l: 'Event day & walkthrough', d: 'Dec 13 \u00b7 10 AM\u20134 PM', s: 'current', n: 'Post-event walkthrough with Parks staff: Dec 15, 9:00 a.m.' }
],
next: 'Your approved permit, site plan, and load-in schedule are in your e-Permit account. The damage deposit releases 5\u20137 business days after the walkthrough.'
}
};
var trackForm = document.getElementById('trackForm');
var trackInput = document.getElementById('trackInput');
var trackResult = document.getElementById('trackResult');
function esc(s) {
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
function renderTrack(rec, num) {
var stepsHtml = rec.steps.map(function (s) {
return '<li class="pt-step ' + s.s + '">' +
'<span class="pt-dot">' + (s.s === 'done' ? '<svg class="ic ic-sm" style="stroke-width:2.4"><use href="#i-check"/></svg>' : '') + '</span>' +
'<span><span class="pt-label">' + s.l + '</span>' +
'<span class="pt-date">' + s.d + '</span>' +
(s.n ? '<span class="pt-note">' + s.n + '</span>' : '') +
'</span></li>';
}).join('');
trackResult.innerHTML =
'<div class="pt-head">' +
'<div><span class="pt-badge ' + rec.bclass + '">' + rec.badge + '</span>' +
'<h3 class="pt-title">' + rec.type + '</h3>' +
'<p class="pt-subj">' + rec.subject + '</p></div>' +
'<dl class="pt-meta">' +
'<div><dt>Case number</dt><dd>' + num + '</dd></div>' +
'<div><dt>Filed</dt><dd>' + rec.filed + '</dd></div>' +
'<div><dt>Case handler</dt><dd>' + rec.handler + '</dd></div>' +
'</dl>' +
'</div>' +
'<ol class="pt-list">' + stepsHtml + '</ol>' +
'<div class="pt-next"><span class="pt-next-k">What happens next</span><p>' + rec.next + '</p></div>' +
'<p class="pt-updated">' + rec.updated + ' \u00b7 Meridian Falls e-Permit system</p>';
}
function renderErr(num) {
trackResult.innerHTML =
'<div class="pt-err"><svg class="ic"><use href="#i-alert"/></svg><div>' +
'<strong>No record found for \u201c' + esc(num) + '\u201d.</strong>' +
'<p>Double-check the format \u2014 a two- or three-letter case type, then the year and sequence (e.g. <em>BP-2025-0482</em>). If your case is older than 2019 or was filed on paper, call the Permit Center at (555) 014-7720 or email permitcenter@meridianfalls.gov and staff will look it up.</p>' +
'</div></div>';
}
function lookup(raw) {
var num = raw.trim().toUpperCase().replace(/\s+/g, '');
if (!num) {
renderErr('\u2014');
return;
}
if (PERMITS[num]) { renderTrack(PERMITS[num], num); }
else { renderErr(num); }
}
trackForm.addEventListener('submit', function (e) {
e.preventDefault();
lookup(trackInput.value);
});
document.querySelectorAll('.chip').forEach(function (chip) {
chip.addEventListener('click', function () {
trackInput.value = chip.getAttribute('data-num');
lookup(trackInput.value);
});
});
/* ---------- FAQ accordion ---------- */
var accBtns = Array.prototype.slice.call(document.querySelectorAll('.acc-btn'));
accBtns.forEach(function (btn) {
btn.addEventListener('click', function () {
var isOpen = btn.getAttribute('aria-expanded') === 'true';
accBtns.forEach(function (b) {
b.setAttribute('aria-expanded', 'false');
b.parentElement.classList.remove('open');
b.nextElementSibling.style.maxHeight = null;
});
if (!isOpen) {
btn.setAttribute('aria-expanded', 'true');
btn.parentElement.classList.add('open');
var body = btn.nextElementSibling;
body.style.maxHeight = body.scrollHeight + 'px';
}
});
});
/* ---------- newsletter ---------- */
var newsForm = document.getElementById('newsForm');
var newsEmail = document.getElementById('newsEmail');
var newsErr = document.getElementById('newsErr');
var newsOk = document.getElementById('newsOk');
newsForm.addEventListener('submit', function (e) {
e.preventDefault();
var v = newsEmail.value.trim();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) {
newsErr.hidden = false;
newsEmail.focus();
return;
}
newsErr.hidden = true;
newsForm.hidden = true;
newsOk.hidden = false;
});
</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-12T10:07:16.732Z",
"url": "https://benchmark.aimac.invalid/e6a70e5e75b3005b96c6879261ea8f1312ff9d2aa597936ded5b95dd38e06e97.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-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": []
},
{
"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": []
},
{
"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": []
},
{
"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": "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": "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": "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": "<button class=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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": "<button class=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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": "<form class=\"hero-search\" id=\"heroForm\" role=\"search\">",
"target": [
"#heroForm"
]
}
]
},
{
"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 id=\"top\">",
"target": [
"#top"
]
}
]
},
{
"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": "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\" aria-hidden=\"true\">",
"target": [
"#top > svg[aria-hidden=\"true\"]"
]
}
]
},
{
"id": "aria-prohibited-attr",
"impact": null,
"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": "<button class=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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": "<form class=\"hero-search\" id=\"heroForm\" role=\"search\">",
"target": [
"#heroForm"
]
}
]
},
{
"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": "<form class=\"hero-search\" id=\"heroForm\" role=\"search\">",
"target": [
"#heroForm"
]
}
]
},
{
"id": "aria-valid-attr-value",
"impact": null,
"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": "<button class=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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": "<button class=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "autocomplete-valid",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "the autocomplete attribute is correctly formatted"
}
],
"none": [],
"impact": null,
"html": "<input id=\"heroSearch\" type=\"text\" placeholder=\"Try \u201cutility billing\u201d, \u201cpermit\u201d, or \u201crecords\u201d\u2026\" autocomplete=\"off\">",
"target": [
"#heroSearch"
]
}
]
},
{
"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": "<div class=\"svc-grid\" style=\"margin-top:38px\">",
"target": [
".svc-grid"
]
}
]
},
{
"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=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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>One front door for the City of Meridian Falls.</h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"sec-title\">What can we help you find?</h2>",
"target": [
"#services > .wrap > .sec-head > .sec-title"
]
},
{
"html": "<h3>Utilities & Billing</h3>",
"target": [
".feature-body > h3"
]
},
{
"html": "<h4>Public Safety</h4>",
"target": [
".svc-row[href$=\"#emergency\"] > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Water & Sewer</h4>",
"target": [
".svc-row[href$=\"#services\"]:nth-child(2) > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Waste & Recycling</h4>",
"target": [
".svc-row[href$=\"#services\"]:nth-child(3) > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Parks & Recreation</h4>",
"target": [
".svc-row[href$=\"#events\"] > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Transportation & Streets</h4>",
"target": [
".svc-row[href$=\"#news\"] > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Housing & Neighborhoods</h4>",
"target": [
".svc-row[href$=\"#faq\"] > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Animal Services</h4>",
"target": [
".svc-row[href$=\"#services\"]:nth-child(7) > span:nth-child(2) > h4"
]
},
{
"html": "<h4>Senior & Human Services</h4>",
"target": [
".svc-row[href$=\"#services\"]:nth-child(8) > span:nth-child(2) > h4"
]
},
{
"html": "<h2 class=\"sec-title\">Building something? Start at the Permit Center.</h2>",
"target": [
"#permits > .wrap > .sec-head > .sec-title"
]
},
{
"html": "<h3 class=\"sub\">How a permit moves through the City</h3>",
"target": [
".sub"
]
},
{
"html": "<h4>Determine whether you need a permit</h4>",
"target": [
"li:nth-child(1) > h4"
]
},
{
"html": "<h4>Submit your application</h4>",
"target": [
"li:nth-child(2) > h4"
]
},
{
"html": "<h4>Plan review</h4>",
"target": [
"li:nth-child(3) > h4"
]
},
{
"html": "<h4>Inspections</h4>",
"target": [
"li:nth-child(4) > h4"
]
},
{
"html": "<h4>Final approval</h4>",
"target": [
"li:nth-child(5) > h4"
]
},
{
"html": "<h3>Track a permit</h3>",
"target": [
".tracker-top > div > h3"
]
},
{
"html": "<h2 class=\"sec-title\">Seven neighbors, one budget, every decision on the record.</h2>",
"target": [
"#council > .wrap > .sec-head > .sec-title"
]
},
{
"html": "<h2 class=\"sec-title\" style=\"margin-bottom:0\">Latest from City Hall</h2>",
"target": [
"div:nth-child(1) > .sec-head-row.sec-head > div > .sec-title"
]
},
{
"html": "<h3><a href=\"#news\">Council advances FY 2026 preliminary budget; public hearing Dec 9</a></h3>",
"target": [
"article:nth-child(2) > div > h3"
]
},
{
"html": "<h3><a href=\"#news\">Kesler Bridge rehabilitation starts Jan 5 \u2014 detour map published</a></h3>",
"target": [
"article:nth-child(3) > div > h3"
]
},
{
"html": "<h3><a href=\"#news\">Riverbend Park trail extension wins $1.4M state grant</a></h3>",
"target": [
"article:nth-child(4) > div > h3"
]
},
{
"html": "<h3><a href=\"#news\">Down Payment Assistance opens for a third round \u2014 $2.6M available</a></h3>",
"target": [
"article:nth-child(5) > div > h3"
]
},
{
"html": "<h2 class=\"sec-title\" style=\"margin-bottom:0\">Meetings & community calendar</h2>",
"target": [
"#events > .sec-head-row.sec-head > div > .sec-title"
]
},
{
"html": "<h4><a href=\"#events\">Planning Commission</a></h4>",
"target": [
".ev-item:nth-child(2) > div:nth-child(2) > h4"
]
},
{
"html": "<h4><a href=\"#events\">Holiday Tree Lighting</a></h4>",
"target": [
".ev-item:nth-child(3) > div:nth-child(2) > h4"
]
},
{
"html": "<h4><a href=\"#events\">City Council \u2014 Regular Meeting</a><span class=\"ev-live\">Live stream</span></h4>",
"target": [
".ev-item:nth-child(4) > div:nth-child(2) > h4"
]
},
{
"html": "<h4><a href=\"#events\">Winter Makers Fair</a></h4>",
"target": [
".ev-item:nth-child(5) > div:nth-child(2) > h4"
]
},
{
"html": "<h4><a href=\"#events\">FY26 Budget Workshop</a></h4>",
"target": [
".ev-item:nth-child(6) > div:nth-child(2) > h4"
]
},
{
"html": "<h4><a href=\"#events\">MLK Day of Service</a></h4>",
"target": [
".ev-item:nth-child(7) > div:nth-child(2) > h4"
]
},
{
"html": "<h2 class=\"sec-title\">Prepared for the flood, the fire, and the ordinary Tuesday.</h2>",
"target": [
".emg-grid > .copy > .sec-title"
]
},
{
"html": "<h2 class=\"sec-title\">A mill town that learned to plan.</h2>",
"target": [
".about-grid > .copy > .sec-title"
]
},
{
"html": "<h2 class=\"sec-title\">Frequently asked questions</h2>",
"target": [
".grid-main-rail > div > .sec-head > .sec-title"
]
},
{
"html": "<h2>The Falls Wire \u2014 one email a month.</h2>",
"target": [
".sub-grid > div:nth-child(1) > h2"
]
}
],
"impact": "serious",
"message": "Page has a heading"
},
{
"id": "landmark",
"data": null,
"relatedNodes": [
{
"html": "<main id=\"main\">",
"target": [
"#main"
]
}
],
"impact": "serious",
"message": "Page has a landmark region"
}
],
"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": "#c3d2de",
"bgColor": "#081624",
"contrastRatio": 11.81,
"fontSize": "9.6pt (12.8px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 11.81"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span>An official website of the <b>City of Meridian Falls</b></span>",
"target": [
".gov-flag > span:nth-child(2)"
]
}
]
},
{
"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": "govDetails",
"relatedNodes": [],
"impact": "critical",
"message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<div class=\"gov-details\" id=\"govDetails\">",
"target": [
"#govDetails"
]
}
]
},
{
"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": [
{
"html": "<label class=\"sr-only\" for=\"heroSearch\">Search city services</label>",
"target": [
"label[for=\"heroSearch\"]"
]
}
],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input id=\"heroSearch\" type=\"text\" placeholder=\"Try \u201cutility billing\u201d, \u201cpermit\u201d, or \u201crecords\u201d\u2026\" autocomplete=\"off\">",
"target": [
"#heroSearch"
]
}
]
},
{
"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 class=\"seal\" src=\"https://placehold.co/108x108/17334b/f3efe6?text=MF&font=lora\" alt=\"City of Meridian Falls official seal\" width=\"54\" height=\"54\">",
"target": [
".seal"
]
}
]
},
{
"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": "explicit-label",
"data": null,
"relatedNodes": [
{
"html": "<label class=\"sr-only\" for=\"heroSearch\">Search city services</label>",
"target": [
"label[for=\"heroSearch\"]"
]
}
],
"impact": "critical",
"message": "Element has an explicit <label>"
},
{
"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 id=\"heroSearch\" type=\"text\" placeholder=\"Try \u201cutility billing\u201d, \u201cpermit\u201d, or \u201crecords\u201d\u2026\" autocomplete=\"off\">",
"target": [
"#heroSearch"
]
}
]
},
{
"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": [
{
"any": [
{
"id": "link-in-text-block-style",
"data": null,
"relatedNodes": [
{
"html": "<div class=\"panel panel-pad\" id=\"zoning\">",
"target": [
"#zoning"
]
}
],
"impact": "serious",
"message": "Links can be distinguished from surrounding text by visual styling"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a class=\"rail-more\" href=\"#zoning\">View the official zoning map <svg class=\"ic\"><use href=\"#i-arrow\"></use></svg></a>",
"target": [
".rail-more[href$=\"#zoning\"]"
]
}
]
},
{
"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 class=\"skip\" href=\"#main\">Skip to main content</a>",
"target": [
".skip"
]
}
]
},
{
"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>",
"target": [
"#mainNav > ul"
]
}
]
},
{
"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><a class=\"nav-a\" href=\"#services\">Services</a></li>",
"target": [
"#mainNav > ul > 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": "<button class=\"gov-btn\" id=\"govBtn\" aria-expanded=\"false\" aria-controls=\"govDetails\">Here\u2019s how you know <svg class=\"ic\"><use href=\"#i-chev\"></use></svg></button>",
"target": [
"#govBtn"
]
}
]
},
{
"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": 164.9,
"height": 36
},
"relatedNodes": [],
"impact": "serious",
"message": "Control has sufficient size (164.9px by 36px, 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 class=\"skip\" href=\"#main\">Skip to main content</a>",
"target": [
".skip"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "td-headers-attr",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The headers attribute is exclusively used to refer to other cells in the table"
}
],
"none": [],
"impact": null,
"html": "<table class=\"ztable\">",
"target": [
"table"
]
}
]
},
{
"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": [
{
"any": [],
"all": [
{
"id": "th-has-data-cells",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "All table header cells refer to data cells"
}
],
"none": [],
"impact": null,
"html": "<table class=\"ztable\">",
"target": [
"table"
]
}
]
}
],
"incomplete": [
{
"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": "39.6pt (52.8px)",
"fontWeight": "bold",
"messageKey": "pseudoContent",
"expectedContrastRatio": "3:1"
},
"relatedNodes": [
{
"html": "<section class=\"hero\">",
"target": [
".hero"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a pseudo element"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<h1>One front door for the City of Meridian Falls.</h1>",
"target": [
"h1"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a pseudo element"
}
]
}
],
"violations": [],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 9622
},
{
"y": 576,
"height": 9622
},
{
"y": 1152,
"height": 9622
},
{
"y": 1728,
"height": 9622
},
{
"y": 2304,
"height": 9622
},
{
"y": 2880,
"height": 9622
},
{
"y": 3456,
"height": 9622
},
{
"y": 4032,
"height": 9622
},
{
"y": 4608,
"height": 9622
},
{
"y": 5184,
"height": 9622
},
{
"y": 5760,
"height": 9622
},
{
"y": 6336,
"height": 9622
},
{
"y": 6912,
"height": 9622
},
{
"y": 7488,
"height": 9622
},
{
"y": 8064,
"height": 9622
},
{
"y": 8640,
"height": 9622
},
{
"y": 8902,
"height": 9622
}
],
"scans": 18,
"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 "Government" 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: "Government"
- Description: Government agencies, official portals, public services, and regulatory resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Government" 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: "Permits", "About", "Events".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Government" category. Consider themes similar to: "Planning & Zoning", "Government Services", "Emergency Services".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "municipal code", "fiscal year", "procurement".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "File Complaint", "Download Form", "Access Records".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Government" sector. Ideas similar but not limited to: "permit tracker".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "budget reports", "press releases", "service updates".
- **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.