/* ========================================================================== MoneyTalks.Vote — shared dark theme for content pages (Learn guides, state pages, About, FAQ, Coverage, Glossary, Contact, etc.) ========================================================================== */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;} :root{ --bg:#05070e;--bg-1:#080c16;--bg-2:#0c1220;--bg-3:#111a2c; --panel:rgba(255,255,255,.035);--panel-2:rgba(255,255,255,.06); --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16); --text:#eaf0f8;--text-dim:#9aa7bd;--text-faint:#61708a; --green:#31f0a6;--green-2:#12cf8b;--green-deep:#0a9668;--green-soft:rgba(49,240,166,.12); --dem:#3b9dff;--rep:#ff4d63;--err:#ff6377; --grad:linear-gradient(120deg,#31f0a6 0%,#26d6c8 48%,#3b9dff 100%); --f-display:'Space Grotesk','Inter',sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'Inter',system-ui,sans-serif; } /* Set on so the body background is NOT propagated to the canvas, which keeps the repeating map tied to the page box and predictable. */ html{background:var(--bg);} /* Repeating US-map background across the whole page, top to bottom. The first (gradient) layer is a translucent dark wash that dims the map; raise/lower its alpha to make the map more or less visible. */ body{font-family:var(--f-body);color:var(--text);line-height:1.7;position:relative; background-color:var(--bg); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100dvh;overflow-x:hidden;} /* Full-width map band, repeating downward. Identical to the homepage wrapper so every page renders the background exactly the same way (in-flow, above the glow). */ .map-bg-wrap{ position:relative; background-image:linear-gradient(rgba(5,7,14,.72),rgba(5,7,14,.72)),url('map.jpg'); background-repeat:repeat,repeat-y; background-size:auto,100% auto; background-position:top center,top center; } body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(900px 500px at 82% -6%,rgba(59,157,255,.14),transparent 60%),radial-gradient(760px 480px at 4% 2%,rgba(49,240,166,.10),transparent 62%);} ::selection{background:rgba(49,240,166,.28);color:#fff;} /* ── top bar (matches homepage) ── */ .topbar{position:sticky;top:0;z-index:200;background:rgba(6,9,16,.72); -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--line);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);} .topbar-in{max-width:1180px;margin:0 auto;padding:15px 34px;display:flex;align-items:center;gap:26px;} .brand{font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.5px;color:#fff;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;border:none;} .brand:hover{border:none;} .brand .dot{color:var(--green);} .brand .tld{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .topnav{display:flex;align-items:center;gap:4px;margin-left:8px;flex-wrap:wrap;} .topnav a{font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--text-dim);text-decoration:none;padding:8px 13px;border-radius:9px;border:none;transition:color .16s,background .16s;} .topnav a:hover{color:#fff;background:var(--panel-2);} .top-cta{margin-left:auto;display:flex;align-items:center;gap:12px;} .top-live{display:none;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--green);} .top-live b{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(49,240,166,.6);animation:livePulse 2.4s infinite;} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(49,240,166,.5);}70%{box-shadow:0 0 0 7px rgba(49,240,166,0);}100%{box-shadow:0 0 0 0 rgba(49,240,166,0);}} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}} .btn-primary{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:13.5px;color:#04120c;background:var(--grad);border:none;border-radius:11px;padding:10px 20px;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 6px 22px rgba(49,240,166,.28);transition:transform .16s,box-shadow .16s,filter .16s;} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(49,240,166,.4);filter:brightness(1.05);border:none;} .nav-toggle{display:none;margin-left:auto;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;width:42px;height:38px;color:#fff;font-size:17px;cursor:pointer;align-items:center;justify-content:center;} /* ── article container ── */ .wrap{max-width:780px;margin:0 auto;padding:52px 40px 90px;} .wrap.narrow,.wrap{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right));} .crumb{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:.5px;margin-bottom:22px;} .crumb a{color:var(--green);text-decoration:none;} .crumb a:hover{color:var(--green);} .kicker{display:inline-block;font-family:var(--f-mono);font-size:11px;color:var(--green);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;} h1{font-family:var(--f-display);font-size:clamp(30px,5vw,44px);font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-1px;line-height:1.12;} .updated{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:.4px;margin-bottom:42px;display:block;} h2{font-family:var(--f-display);font-size:24px;font-weight:600;color:#fff;margin:38px 0 13px;padding-bottom:10px;border-bottom:1px solid var(--line);letter-spacing:-.4px;} h3{font-family:var(--f-display);font-size:19px;font-weight:600;color:#fff;margin:26px 0 10px;letter-spacing:-.2px;} p{font-size:15.5px;color:var(--text-dim);margin-bottom:17px;line-height:1.85;} a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(49,240,166,.32);transition:border-color .16s,color .16s;} a:hover{border-color:var(--green);} strong{color:#fff;font-weight:600;} ul,ol{color:var(--text-dim);font-size:15.5px;line-height:1.85;margin:0 0 17px 22px;} li{margin-bottom:7px;} /* intro paragraph (faq/glossary) */ .intro{font-size:16.5px;color:var(--text-dim);line-height:1.8;margin-bottom:30px;} /* callout / CTA box */ .cta{margin-top:42px;padding:22px 26px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:0 12px 12px 0;} .cta p{font-size:14.5px;margin:0;color:var(--text-dim);} .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:0 12px 12px 0;padding:16px 18px;margin-top:8px;} .note p{margin:0;font-style:italic;color:var(--text-dim);} .contact-box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;padding:20px 24px;margin-top:40px;} .contact-box p{margin:0;font-size:13.5px;color:var(--text-dim);} /* related links */ .related{margin-top:48px;border-top:1px solid var(--line);padding-top:26px;} .related .lbl{font-family:var(--f-mono);font-size:10px;color:var(--text-faint);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:15px;} .related ul{list-style:none;margin:0;} .related li{margin-bottom:11px;font-size:14.5px;} /* stylish state pills (matches homepage battleground pills) */ .state-pills{display:flex;flex-direction:column;align-items:center;gap:11px;margin:2px 0 22px;} .pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;} .state-pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;font-family:var(--f-body);font-size:14.5px;font-weight:500;color:var(--text);text-decoration:none;border:1px solid var(--line-2);background:var(--panel-2);border-radius:100px;padding:10px 21px;transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s;} .state-pill span{position:relative;z-index:1;transition:color .2s;} .state-pill::before{content:'';position:absolute;inset:-1px;border-radius:100px;background:var(--grad);opacity:0;transition:opacity .25s;z-index:0;} .state-pill:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 12px 30px -8px rgba(49,240,166,.5);} .state-pill:hover span{color:#04120c;font-weight:600;} .state-pill:hover::before{opacity:1;} .state-pill:active{transform:translateY(-1px);} .state-pill.is-current{pointer-events:none;border-color:transparent;} .state-pill.is-current::before{opacity:1;} .state-pill.is-current span{color:#04120c;font-weight:600;} .related-more{font-size:14.5px;text-align:center;} /* faq */ .faq-item{border-bottom:1px solid var(--line);padding:26px 0;} .faq-item:first-of-type{padding-top:0;} .faq-item:last-of-type{border-bottom:none;} /* glossary term */ .term{border-bottom:1px solid var(--line);padding:22px 0;} .term:last-child{border-bottom:none;} .term h2,.term h3{border:none;padding:0;margin:0 0 6px;font-size:19px;} /* learn.html index */ .lead,.section-lead{font-size:16.5px;color:var(--text-dim);line-height:1.8;margin-bottom:16px;} .section-h{font-family:var(--f-display);font-size:22px;font-weight:600;color:#fff;margin:40px 0 6px;letter-spacing:-.3px;} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:24px 0;} .cards a,.states a{text-decoration:none;border:none;} .cards>a,.card,.states>a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 22px;transition:transform .2s,border-color .2s,background .2s;color:var(--text);} .cards>a:hover,.states>a:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--panel-2);} /* Guide cards: hover fills with the same gradient as the "Explore the Money" button */ .cards>a.card{position:relative;overflow:hidden;} .cards>a.card>*{position:relative;z-index:1;} .cards>a.card::before{content:'';position:absolute;inset:-1px;border-radius:16px;background:var(--grad);opacity:0;transition:opacity .25s;z-index:0;} .cards>a.card:hover{border-color:transparent;box-shadow:0 20px 44px -14px rgba(49,240,166,.4);} .cards>a.card:hover::before{opacity:1;} .cards>a.card:hover h3,.cards>a.card:hover p,.cards>a.card:hover .go{color:#04120c;} .cards>a.card:hover h3{font-weight:700;} .cards>a.card:hover .go{font-weight:700;} .num{font-family:var(--f-mono);font-size:11px;color:var(--green);letter-spacing:1px;margin-bottom:10px;display:block;} .go{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:none;} .states{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:20px 0;} /* Battleground State buttons: hover fills with the same gradient as the "Explore the Money" button */ .states-gradient>a{position:relative;overflow:hidden;font-weight:500;} .states-gradient>a span{position:relative;z-index:1;transition:color .2s;} .states-gradient>a::before{content:'';position:absolute;inset:-1px;border-radius:16px;background:var(--grad);opacity:0;transition:opacity .25s;z-index:0;} .states-gradient>a:hover{border-color:transparent;box-shadow:0 14px 34px -10px rgba(49,240,166,.45);} .states-gradient>a:hover::before{opacity:1;} .states-gradient>a:hover span{color:#04120c;font-weight:600;} .backtotracker{display:block;margin-top:44px;padding:22px 26px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:0 12px 12px 0;} .backtotracker p{margin:0;font-size:15px;color:var(--text-dim);line-height:1.75;} .backtotracker a{color:var(--green);font-weight:600;} /* contact form */ .subtitle{font-size:16px;color:var(--text-dim);margin-bottom:44px;line-height:1.8;} .form-group{margin-bottom:20px;} .form-row{display:flex;gap:16px;} .form-row .form-group{flex:1;min-width:0;} label{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;} input[type="text"],input[type="email"],select,textarea{width:100%;padding:12px 15px;font-family:var(--f-body);font-size:16px;color:var(--text);background:var(--bg-3);border:1px solid var(--line-2);border-radius:11px;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none;} input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(49,240,166,.14);} input::placeholder,textarea::placeholder{color:var(--text-faint);} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2331f0a6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;cursor:pointer;} select option{background:#0c1220;color:var(--text);} textarea{resize:vertical;min-height:200px;line-height:1.7;} .captcha-label{display:block;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;} .captcha-error{display:none;font-family:var(--f-mono);font-size:12px;color:var(--err);margin-top:8px;} .submit-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);font-size:15px;font-weight:700;color:#04120c;background:var(--grad);border:none;border-radius:12px;padding:14px 30px;cursor:pointer;box-shadow:0 6px 22px rgba(49,240,166,.28);transition:filter .18s,transform .16s;} .submit-btn:hover{filter:brightness(1.06);transform:translateY(-1px);} .submit-btn:disabled{opacity:.55;cursor:not-allowed;} .spin{width:15px;height:15px;border:2px solid rgba(4,18,12,.35);border-top-color:#04120c;border-radius:50%;animation:spin .7s linear infinite;display:none;} @keyframes spin{to{transform:rotate(360deg);}} #fSuccess,#fError{display:none;border-radius:12px;padding:24px 26px;margin-top:8px;} #fSuccess{background:var(--green-soft);border:1px solid rgba(49,240,166,.4);} #fSuccess h3{font-family:var(--f-display);color:var(--green);margin-bottom:5px;} #fSuccess p{color:var(--text);margin:0;} #fError{background:rgba(255,77,99,.08);border:1px solid rgba(255,77,99,.35);} #fError p{color:#ffb3bd;margin:0;} /* ── footer (matches homepage) ── */ .site-footer{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(5,7,14,.55),rgba(3,5,11,.85));padding:64px 0 30px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);margin-top:72px;text-align:left;} .footer-top{max-width:1180px;margin:0 auto;padding:0 34px;display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;} .footer-brand .brand{font-size:24px;margin-bottom:16px;} .footer-brand p{font-size:14px;color:var(--text-dim);line-height:1.7;max-width:34ch;margin-bottom:20px;} .footer-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--green);border:1px solid rgba(49,240,166,.28);border-radius:30px;padding:7px 14px;} .footer-live b{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;} .footer-col h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px;} .footer-col a{display:block;font-size:14px;color:var(--text-dim);text-decoration:none;padding:5px 0;border:none;transition:color .16s;} .footer-col a:hover{color:var(--green);} .footer-bottom{max-width:1180px;margin:44px auto 0;padding:22px 34px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;} .footer-bottom .copy{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:.3px;} .footer-bottom .disc{font-size:11px;color:var(--text-faint);max-width:60ch;line-height:1.6;} .footer-bottom .disc a{color:var(--green);text-decoration:none;border:none;} @media(max-width:960px){ .footer-top{grid-template-columns:1fr 1fr;gap:32px;} .footer-brand{grid-column:1/-1;} } @media(max-width:720px){ .topnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--bg-1);border-bottom:1px solid var(--line);padding:10px 18px 16px;margin:0;} .topbar.open .topnav{display:flex;} .topnav a{padding:12px 12px;font-size:15px;} .nav-toggle{display:flex;} .top-cta{margin-left:0;} .top-cta .btn-primary,.top-live{display:none;} .topbar.open .top-cta .btn-primary{display:inline-flex;margin:8px 18px 0;} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.spin{animation:none;}.top-live b,.footer-live b{animation:none;}} @media(max-width:600px){ .topbar-in{padding:13px 20px;} .wrap{padding:36px 22px 64px;} h1{font-size:28px;} .form-row{flex-direction:column;gap:0;} .footer-top{grid-template-columns:1fr;gap:6px 32px;} .footer-brand{margin-bottom:14px;} } /* --- Surfaces sit on a darker base so text stays legible over the map background --- */ .cards>a,.card,.states>a{background:rgba(10,14,24,.80);} .cards>a:hover,.states>a:hover{background:rgba(18,24,38,.86);} .cta,.note,.contact-box{background:rgba(10,14,24,.80);} .state-pill{background:rgba(18,24,38,.82);}