/* People’s Party of Maine — Neocities stylesheet Author: You :) | Single dependency for index.html Notes: Uses CSS variables for light/dark themes, responsive layout, and print styles. */ :root{ --bg: #f7f4ec; /* paper tan */ --ink: #1b1f24; --muted: #5c6a79; --primary: #0b4a6e; /* north star blue */ --accent: #2e6b3f; /* pine */ --banner: #efe8d6; --focus: #ffbf47; --card: #ffffff; --link: #0b4a6e; } /* Dark mode is toggled by setting data-theme="dark" on */ [data-theme="dark"]{ --bg:#0f1215; --ink:#e7ecf3; --muted:#95a3b3; --primary:#8cc2ff; --accent:#83d2a3; --banner:#1a2027; --card:#151a20; --link:#9fd1ff; } /* Reset-ish */ *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif} a{color:var(--link)} a:hover{text-decoration:none} img{max-width:100%;height:auto;display:block} /* Layout helpers */ .container{max-width:1200px;margin:0 auto;padding:0 1rem} .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} .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem} /* Header */ .site-header{background:var(--banner);border-bottom:1px solid #00000014} .topbar{display:flex;align-items:center;gap:.75rem;justify-content:space-between;padding:.5rem 0} .brand{display:flex;align-items:center;gap:.75rem} .brand svg{width:44px;height:32px;display:block} .brand .title{font-weight:800;letter-spacing:.3px} .tagline{color:var(--muted);font-size:.9rem} .actions{display:flex;align-items:center;gap:.5rem} /* Buttons */ .btn{appearance:none;border:1px solid #00000022;background:var(--card);color:var(--ink);padding:.55rem .9rem;border-radius:.5rem;font-weight:600;cursor:pointer;line-height:1} .btn-primary{background:var(--primary);color:white;border-color:var(--primary)} .btn-ghost{background:transparent} .btn:focus{outline:3px solid color-mix(in srgb, var(--focus) 60%, transparent);outline-offset:1px} /* Skip link */ .skip{position:absolute;left:-999px;top:auto} .skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem;border-radius:.4rem;z-index:10} /* Primary nav */ nav.primary{border-top:1px solid #00000014;border-bottom:1px solid #00000014;background:var(--card)} .navwrap{display:flex;gap:1rem;align-items:center} .menu{display:flex;gap:1rem;list-style:none;margin:0;padding:.5rem 0} .menu a{display:block;padding:.75rem .5rem;border-radius:.4rem;color:var(--ink);text-decoration:none;font-weight:600} .menu a[aria-current="page"], .menu a:hover{background:var(--banner)} .mobile-toggle{display:none} /* Hero */ .hero{padding:2.5rem 0;background:linear-gradient(0deg,transparent,transparent 60%,#00000006 60%,#00000006 100%)} .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center} .hero h1{font-size:2.2rem;line-height:1.15;margin:.2rem 0 .6rem} .hero p.lede{font-size:1.05rem;color:var(--muted)} .statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem} .stat{background:var(--card);border:1px solid #00000010;border-radius:.75rem;padding:1rem} .stat strong{display:block;font-size:1.25rem} /* Main layout */ .layout{display:grid;grid-template-columns:260px 1fr;gap:2rem;padding:2rem 0} .sidenav{position:sticky;top:1rem;align-self:start} .sidenav nav{background:var(--card);border:1px solid #00000012;border-radius:.75rem;padding:.75rem} .sidenav a{display:block;padding:.5rem .5rem;border-radius:.4rem;color:var(--ink);text-decoration:none} .sidenav a:hover{background:var(--banner)} /* Sections */ section{scroll-margin-top:5rem} h2{margin:0 0 .5rem} .section{background:var(--card);border:1px solid #00000012;border-radius:.9rem;padding:1.25rem;margin-bottom:1.25rem} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .callout{border-left:4px solid var(--accent);padding:.5rem 1rem;background:color-mix(in srgb, var(--accent) 8%, transparent)} /* Details */ details{border:1px solid #00000014;border-radius:.6rem;padding:.75rem;background:var(--bg)} summary{cursor:pointer;font-weight:700} /* Tables */ table{width:100%;border-collapse:collapse} th,td{border:1px solid #0000001e;padding:.6rem;text-align:left} th{background:var(--banner)} /* Cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .card{background:var(--card);border:1px solid #00000012;border-radius:.75rem;padding:1rem} /* Notices */ .notice{display:flex;gap:.75rem;align-items:flex-start;background:color-mix(in srgb, var(--primary) 10%, transparent);border:1px solid color-mix(in srgb, var(--primary) 30%, transparent);padding:1rem;border-radius:.6rem} /* Forms */ .newsletter{display:grid;grid-template-columns:2fr 1fr;gap:.5rem} .input{width:100%;padding:.7rem .8rem;border:1px solid #00000022;border-radius:.5rem;background:var(--card);color:var(--ink)} .input:focus{outline:3px solid color-mix(in srgb, var(--focus) 60%, transparent);outline-offset:1px} /* Footer */ footer{margin-top:2rem;border-top:1px solid #00000014;background:var(--banner)} .footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.5rem;padding:1.5rem 0} .small{font-size:.9rem;color:var(--muted)} .subfooter{border-top:1px solid #00000014;padding:1rem 0;color:var(--muted);font-size:.9rem} /* Responsive */ @media (max-width: 960px){ .hero-grid{grid-template-columns:1fr} .layout{grid-template-columns:1fr} .cards{grid-template-columns:1fr 1fr} .footgrid{grid-template-columns:1fr 1fr} } @media (max-width: 720px){ .mobile-toggle{display:block} .menu{display:none} .menu.open{display:flex;flex-direction:column} .cards{grid-template-columns:1fr} .newsletter{grid-template-columns:1fr} } /* Print */ @media print{ .site-header, nav.primary, .sidenav, .actions, .notice, .newsletter, .subfooter{display:none!important} body{background:white;color:black} .section{border:1px solid #000;padding:1rem} }