/* ========================================================================== Lori Lococo for Mayor — Niagara Falls 2026 Font sizes are in rem so the A+ font-size control scales the whole page. ========================================================================== */ :root{ --purple-900:#2E1743; --purple-700:#442462; --purple-500:#5C3480; --purple-400:#B5A7D1; --purple-50:#F4F1F8; --gold:#E0A526; --gold-hover:#EFB53A; --gold-dark:#B8831A; --ink:#141827; --body:#33343A; --white:#fff; --hairline:#E2E2E2; --on-purple:#E3DAEE; /* body text on purple fields */ --on-purple-soft:#DCD3E8; --on-purple-dim:#CFC5DD; --display:"Libre Franklin",system-ui,-apple-system,Segoe UI,sans-serif; --read:"Newsreader",Georgia,"Times New Roman",serif; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --maxw:1180px; --ease:cubic-bezier(.4,0,.2,1); } /* ---------- accessibility modes (toggled on ) ---------- */ html.fs-lg{font-size:112.5%} /* 18px root */ html.fs-xl{font-size:125%} /* 20px root */ html.contrast{ --body:#000; --ink:#000; --purple-900:#1A0A28; --purple-700:#2A0F44; --purple-500:#3D1A5E; --purple-50:#fff; --hairline:#000; --gold:#FFD24A; --gold-hover:#FFE07A; --on-purple:#fff; --on-purple-soft:#fff; --on-purple-dim:#fff; } html.contrast a{text-decoration:underline} html.contrast .icard,html.contrast .tsmall .card,html.contrast .stats{border-color:#000} html.contrast .pcard{border:1px solid rgba(255,255,255,.5)} html.grayscale{filter:grayscale(1)} /* ---------- base ---------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--read);font-size:1.125rem;line-height:1.65;color:var(--body);background:var(--white)} h1,h2,h3,h4,nav,button,.btn,label,input,th,.ui{font-family:var(--display)} h1,h2,h3,h4{color:var(--ink);line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--s2)} p{margin:0 0 var(--s2);max-width:68ch} a{color:var(--purple-700)} img{max-width:100%;height:auto;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)} section{padding:var(--s6) 0} .eyebrow{font-family:var(--display);font-weight:800;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-700);margin:0 0 var(--s2)} .on-dark .eyebrow{color:var(--purple-400)} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:12px 20px;font-weight:800;z-index:99;font-family:var(--display)} .skip:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px} html.contrast a:focus-visible,html.contrast button:focus-visible{outline-color:#000} /* ---------- buttons (min 44px target) ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px; font-weight:800;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:2px solid transparent; border-radius:2px;cursor:pointer;transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn-gold{background:var(--gold);color:var(--ink)} .btn-gold:hover{background:var(--gold-hover)} .btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost-light:hover{background:#fff;color:var(--purple-900);border-color:#fff} .btn-purple{background:var(--purple-700);color:#fff} .btn-purple:hover{background:var(--purple-900)} .btn-ghost{background:transparent;color:var(--purple-700);border-color:var(--purple-700)} .btn-ghost:hover{background:var(--purple-700);color:#fff} /* ---------- utility bar ---------- */ .util{background:var(--purple-900);color:var(--on-purple-soft);font-family:var(--display);font-size:.84375rem} .util .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:44px;flex-wrap:wrap;padding-top:4px;padding-bottom:4px} .util a{color:var(--on-purple-soft);text-decoration:none;font-weight:600} .util a:hover{color:#fff;text-decoration:underline} .util-group{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .a11y{display:flex;gap:6px} .a11y button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#EDE7F3; min-height:44px;padding:0 14px;font-size:.8125rem;font-weight:700;border-radius:2px;cursor:pointer} .a11y button:hover{background:rgba(255,255,255,.22)} .a11y button[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--hairline)} header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:82px;position:relative} .brand{display:flex;flex-direction:column;text-decoration:none;line-height:1} .brand b{font-family:var(--display);font-weight:900;font-size:1.4375rem;color:var(--purple-700);letter-spacing:-.03em;text-transform:uppercase} .brand span{font-family:var(--display);font-size:.71875rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--body);margin-top:4px} #site-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center} #site-nav a{font-size:.9375rem;font-weight:700;color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:3px solid transparent;display:inline-block} #site-nav a:hover,#site-nav a[aria-current="page"]{border-bottom-color:var(--gold)} .nav-vote a{color:var(--purple-700)} .hdr-cta{display:flex;gap:10px;align-items:center} .nav-toggle{display:none;align-items:center;gap:9px;background:transparent;border:2px solid var(--ink); color:var(--ink);min-height:48px;padding:0 16px;font-weight:800;font-size:.875rem;border-radius:2px;cursor:pointer} .nav-toggle .bars{display:inline-block;width:18px;height:2px;background:currentColor;position:relative} .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor} .nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px} /* ---------- hero ---------- */ .hero{position:relative;background:var(--purple-900);color:#fff;overflow:hidden;padding:var(--s6) 0 0} .hero .swoosh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:end} .hero h1{color:#fff;font-weight:900;font-size:clamp(2.875rem,7.2vw,5.375rem);letter-spacing:-.035em;text-transform:uppercase;margin:0 0 var(--s3)} .hero h1 .elect{display:block;font-size:.36em;letter-spacing:.16em;font-weight:800;color:var(--gold);margin-bottom:.5em} .hero h1 .for{font-family:var(--read);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:.62em;color:var(--purple-400)} .hero .lede{font-size:1.3125rem;color:var(--on-purple);max-width:34ch;margin-bottom:var(--s4)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:var(--s6)} .voice{display:flex;align-items:baseline;gap:.28em;font-family:var(--display);font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:var(--s3);letter-spacing:-.02em} .voice i{font-family:var(--read);font-style:italic;font-weight:600;text-transform:none;font-size:1.9em;color:var(--gold);letter-spacing:-.03em} .voice b{font-size:.95em;letter-spacing:.2em;font-weight:800} .portrait{position:relative;align-self:end;max-width:440px;margin-left:auto;width:100%} .portrait img{position:relative;z-index:2;border-radius:3px 3px 0 0;box-shadow:0 24px 60px rgba(0,0,0,.4)} .portrait::after{content:"";position:absolute;left:-18px;bottom:-1px;width:calc(100% + 36px);height:72%;background:var(--purple-700);border-radius:3px 3px 0 0;z-index:1} /* ---------- vote strip ---------- */ .votestrip{background:var(--gold);color:var(--ink);padding:var(--s3) 0} .votestrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .votestrip .msg{display:flex;align-items:center;gap:18px} .votestrip .cal{background:var(--ink);color:var(--gold);font-family:var(--display);text-align:center;border-radius:3px;padding:8px 14px;flex:0 0 auto} .votestrip .cal em{display:block;font-style:normal;font-size:.6875rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .votestrip .cal strong{display:block;font-size:1.875rem;font-weight:900;line-height:1} .votestrip p{margin:0;font-family:var(--display);font-weight:700;font-size:1.0625rem;max-width:60ch} .votestrip p b{font-weight:900} .votestrip a.lnk{color:var(--ink);font-family:var(--display);font-weight:900;text-decoration:none;border-bottom:3px solid rgba(20,24,39,.35);white-space:nowrap} .votestrip a.lnk:hover{border-bottom-color:var(--ink)} /* ---------- stats ---------- */ .stats{background:var(--purple-50);border-bottom:1px solid var(--hairline)} .stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .stat{padding:var(--s2) 0} .stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.5rem,4.6vw,3.875rem);color:var(--purple-700);line-height:.95;letter-spacing:-.04em} .stat span{display:block;font-family:var(--display);font-size:.90625rem;font-weight:600;color:var(--body);margin-top:10px;max-width:22ch;line-height:1.35} /* ---------- why running ---------- */ .why{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center} .pull{font-family:var(--read);font-size:clamp(1.5625rem,2.9vw,2.375rem);line-height:1.28;color:var(--ink);font-weight:400;letter-spacing:-.015em;margin:0 0 var(--s3);max-width:none} .pull::before{content:"\201C";color:var(--purple-400);font-size:1.1em;line-height:0;vertical-align:-.12em;margin-right:.06em} .attrib{font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--body)} .why figure{margin:0} .why figcaption{font-family:var(--display);font-size:.84375rem;color:var(--body);margin-top:12px;border-left:3px solid var(--gold);padding-left:12px} /* ---------- priorities ---------- */ .priorities{background:var(--purple-700);color:#fff} .priorities h2{color:#fff;font-size:clamp(2rem,4vw,3.125rem);font-weight:900;letter-spacing:-.03em;max-width:20ch} .priorities .intro{color:var(--on-purple);max-width:56ch;font-size:1.1875rem} .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:var(--s5);background:rgba(255,255,255,.16)} .pcard{background:var(--purple-700);padding:var(--s4) var(--s3);transition:background-color .25s var(--ease)} .pcard:hover{background:var(--purple-500)} .pcard .n{font-family:var(--display);font-weight:900;font-size:.8125rem;color:var(--gold);letter-spacing:.12em;display:block;margin-bottom:14px} .pcard h3{color:#fff;font-size:1.3125rem;font-weight:800;letter-spacing:-.01em;margin-bottom:10px} .pcard p{color:var(--on-purple-soft);font-size:1.03125rem;margin:0;max-width:none} /* ---------- record ---------- */ .record .head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)} .record h2{font-size:clamp(1.875rem,3.6vw,2.875rem);font-weight:900;letter-spacing:-.03em;margin:0;max-width:24ch} .rlist{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);columns:2;column-gap:var(--s5)} .rlist li{break-inside:avoid;border-bottom:1px solid var(--hairline);padding:16px 0 16px 34px;position:relative; font-family:var(--display);font-size:1.03125rem;font-weight:600;color:var(--ink);line-height:1.4} .rlist li::before{content:"\2713";position:absolute;left:0;top:15px;color:var(--purple-700);font-weight:900} .record .note{font-size:.9375rem;font-family:var(--display);color:var(--body);margin-top:var(--s3)} /* ---------- testimonials ---------- */ .tst{background:var(--purple-50)} .tst-lead{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s5);align-items:start} .tst blockquote{margin:0;font-family:var(--read);font-size:clamp(1.3125rem,2.15vw,1.6875rem);line-height:1.42;color:var(--ink);letter-spacing:-.01em} .tst blockquote::before{content:"\201C";color:var(--purple-400);font-size:1.4em;line-height:0;vertical-align:-.14em} .tst cite{display:block;font-family:var(--display);font-style:normal;font-weight:800;font-size:.9375rem;color:var(--purple-700);margin-top:var(--s3);line-height:1.4} .tst cite span{display:block;font-weight:500;color:var(--body);font-size:.875rem;margin-top:3px} .tsmall{display:grid;gap:var(--s3);margin-top:var(--s5);grid-template-columns:repeat(3,1fr)} .tsmall .card{background:#fff;border:1px solid var(--hairline);border-top:4px solid var(--purple-700);padding:var(--s3)} .tsmall p{font-size:1.03125rem;margin:0 0 var(--s2);color:var(--body)} .tsmall cite{margin-top:0} /* ---------- get involved ---------- */ .involve h2{font-size:clamp(1.875rem,3.6vw,2.875rem);font-weight:900;letter-spacing:-.03em} .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)} .icard{border:2px solid var(--ink);padding:var(--s4) var(--s3);display:flex;flex-direction:column;align-items:flex-start} .icard h3{font-size:1.5rem;font-weight:900;letter-spacing:-.02em} .icard p{font-size:1.03125rem;flex:1} .icard.feature{background:var(--purple-700);border-color:var(--purple-700);color:#fff} .icard.feature h3{color:#fff} .icard.feature p{color:var(--on-purple-soft)} .ride{margin-top:var(--s4);background:var(--ink);color:#fff;padding:var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .ride h3{color:#fff;font-size:1.375rem;margin:0 0 6px} .ride p{color:#C9CBD4;margin:0;font-size:1.03125rem} /* ---------- updates ---------- */ .updates{border-top:1px solid var(--hairline)} .updates h2{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:900;letter-spacing:-.03em} .ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)} .post time{font-family:var(--display);font-size:.78125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-700)} .post h3{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;margin:10px 0} .post .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--purple-50);margin-bottom:var(--s2)} .post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .post:hover .thumb img{transform:scale(1.04)} .post a{text-decoration:none;display:block} .post p{font-size:1rem;margin:0;color:var(--body)} /* ---------- footer ---------- */ footer{background:var(--purple-900);color:var(--on-purple-dim);padding:var(--s6) 0 var(--s3);font-size:1.03125rem} footer h4{color:#fff;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-bottom:var(--s2)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)} footer a{color:var(--on-purple-dim);text-decoration:none} footer a:hover{color:#fff;text-decoration:underline} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:10px} .fbrand b{display:block;font-family:var(--display);font-weight:900;font-size:1.625rem;color:#fff;text-transform:uppercase;letter-spacing:-.03em} .fbrand .voice{margin:var(--s2) 0 var(--s3);font-size:.9375rem} .social{display:flex;gap:10px;margin-top:var(--s2);flex-wrap:wrap} .social a{width:44px;height:44px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;border-radius:2px;font-family:var(--display);font-weight:800;font-size:.8125rem;color:#fff} .social a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);text-decoration:none} .legal{border-top:1px solid rgba(255,255,255,.16);margin-top:var(--s5);padding-top:var(--s3);font-size:.875rem;display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .flag{background:#FFF8E6;border:1px dashed var(--gold-dark);color:#5C4409;padding:10px 14px;font-family:var(--display);font-size:.84375rem;font-weight:600;margin-top:var(--s2);border-radius:2px} /* ---------- 404 ---------- */ .err{min-height:60vh;display:grid;place-items:center;text-align:center;padding:var(--s6) 0} .err h1{font-size:clamp(2.5rem,8vw,5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em} /* ---------- responsive ---------- */ @media (max-width:1000px){ .nav-toggle{display:inline-flex} #site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff; border-top:1px solid var(--hairline);border-bottom:3px solid var(--purple-700); box-shadow:0 18px 40px rgba(0,0,0,.14);padding:var(--s2) var(--s3);z-index:50} #site-nav.open{display:block} #site-nav ul{flex-direction:column;align-items:stretch;gap:0} #site-nav li{border-bottom:1px solid var(--hairline)} #site-nav li:last-child{border-bottom:none} #site-nav a{display:block;padding:16px 0;font-size:1.0625rem;border-bottom:none} #site-nav a:hover,#site-nav a[aria-current="page"]{color:var(--purple-700);border-bottom:none} .hero .wrap{grid-template-columns:1fr;gap:var(--s4)} .portrait{margin-left:0;max-width:380px} .hero-cta{padding-bottom:var(--s4)} .why,.tst-lead{grid-template-columns:1fr;gap:var(--s4)} .pgrid,.igrid,.ugrid,.tsmall{grid-template-columns:1fr 1fr} .stats .row{grid-template-columns:1fr 1fr;gap:var(--s4)} .fgrid{grid-template-columns:1fr 1fr} .rlist{columns:1} } @media (max-width:620px){ section{padding:var(--s5) 0} .pgrid,.igrid,.ugrid,.tsmall,.stats .row,.fgrid{grid-template-columns:1fr} .votestrip .wrap{align-items:flex-start} .votestrip .msg{align-items:flex-start} .ride{padding:var(--s3)} .hdr-cta .btn{padding:0 18px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} } @media print{ .util,header,.hero-cta,.nav-toggle,.flag{display:none} body{color:#000;font-size:11pt} .hero,.priorities,footer{background:#fff!important;color:#000!important} .hero h1,.priorities h2,footer h4,.fbrand b{color:#000!important} }