Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SBWPC 2026 Election Alert Bar</title>
<style>
:root{--navy:#102A43;--blue:#D9EEF7;--orange:#F47C48;--white:#FFFFFF}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Lato,Arial,sans-serif}
.sbwpc-election-alert{position:relative;z-index:9999;width:100%;background:var(--navy);color:var(--white);border-bottom:5px solid var(--orange);box-shadow:0 4px 14px rgba(16,42,67,.18)}
.sbwpc-alert-inner{width:min(1200px,100%);min-height:72px;margin:0 auto;padding:11px 22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}
.sbwpc-alert-label{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.sbwpc-alert-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--navy);font-size:1.05rem}
.sbwpc-alert-message{min-width:0}
.sbwpc-alert-headline{margin:0;color:var(--white);font-size:clamp(.98rem,1.6vw,1.2rem);font-weight:850;line-height:1.25}
.sbwpc-alert-countdown{margin-top:3px;color:var(--blue);font-size:.84rem;font-weight:700;line-height:1.3}
.sbwpc-alert-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 17px;border:2px solid var(--white);border-radius:999px;background:var(--white);color:var(--navy);font-size:.86rem;font-weight:900;text-decoration:none;white-space:nowrap;transition:transform 160ms ease,background-color 160ms ease}
.sbwpc-alert-action:hover{transform:translateY(-1px);background:var(--blue)}
.sbwpc-alert-action:focus-visible,.sbwpc-alert-control:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sbwpc-alert-control{position:absolute;right:7px;bottom:-31px;width:30px;height:30px;border:0;border-radius:0 0 8px 8px;background:var(--navy);color:var(--white);cursor:pointer;font-size:1rem;font-weight:900}
.sbwpc-alert-progress{position:absolute;left:0;bottom:-5px;width:0;height:5px;background:var(--blue)}
.sbwpc-election-alert.is-collapsed .sbwpc-alert-inner,.sbwpc-election-alert.is-collapsed .sbwpc-alert-progress{display:none}
.sbwpc-election-alert.is-collapsed{min-height:0;border-bottom:0}
@media (prefers-reduced-motion:no-preference){.sbwpc-alert-progress.is-running{animation:sbwpcProgress 7s linear forwards}@keyframes sbwpcProgress{from{width:0}to{width:100%}}}
@media (max-width:760px){.sbwpc-alert-inner{min-height:0;grid-template-columns:1fr auto;gap:10px 14px;padding:13px 16px}.sbwpc-alert-label{grid-column:1/-1;font-size:.72rem}.sbwpc-alert-icon{width:29px;height:29px}.sbwpc-alert-action{padding:10px 13px;font-size:.78rem}}
@media (max-width:480px){.sbwpc-alert-inner{display:flex;flex-wrap:wrap}.sbwpc-alert-label,.sbwpc-alert-message,.sbwpc-alert-action{width:100%}.sbwpc-alert-action{margin-top:2px}}
</style>
</head>
<body>
<section class="sbwpc-election-alert" id="sbwpcElectionAlert" role="region" aria-label="Important 2026 election information">
  <div class="sbwpc-alert-inner">
    <div class="sbwpc-alert-label">
      <span class="sbwpc-alert-icon" aria-hidden="true">✓</span>
      <span>2026 Election Alert</span>
    </div>
    <div class="sbwpc-alert-message" aria-live="polite" aria-atomic="true">
      <p class="sbwpc-alert-headline" id="sbwpcAlertHeadline">November 3 General Election</p>
      <div class="sbwpc-alert-countdown" id="sbwpcAlertCountdown">Loading the next important deadline…</div>
    </div>
    <a class="sbwpc-alert-action" href="https://santabarbaraca.gov/government/city-hall/elections" target="_blank" rel="noopener noreferrer">See Important Dates&nbsp;→</a>
  </div>
  <div class="sbwpc-alert-progress" id="sbwpcAlertProgress" aria-hidden="true"></div>
  <button class="sbwpc-alert-control" id="sbwpcAlertControl" type="button" aria-expanded="true" aria-label="Collapse election alert">×</button>
</section>
<script>
(function(){
const bar=document.getElementById("sbwpcElectionAlert");
const headline=document.getElementById("sbwpcAlertHeadline");
const countdown=document.getElementById("sbwpcAlertCountdown");
const progress=document.getElementById("sbwpcAlertProgress");
const control=document.getElementById("sbwpcAlertControl");
if(!bar||!headline||!countdown||!progress||!control)return;
const milestones=[
{title:"Candidate filing closes Friday, August 7 at 5:00 PM",date:"2026-08-07T17:00:00-07:00",label:"candidate filing closes"},
{title:"Voter Information Guides begin mailing September 24",date:"2026-09-24T00:00:00-07:00",label:"Voter Information Guides begin mailing"},
{title:"Vote-by-mail ballots begin mailing October 5",date:"2026-10-05T00:00:00-07:00",label:"vote-by-mail begins"},
{title:"The voter registration deadline is October 19",date:"2026-10-19T23:59:59-07:00",label:"the voter registration deadline"},
{title:"Conditional voter registration begins October 20",date:"2026-10-20T00:00:00-07:00",label:"conditional voter registration begins"},
{title:"Election Day is Tuesday, November 3",date:"2026-11-03T20:00:00-08:00",label:"polls close on Election Day"}];
let index=0,timer;
function active(){const now=Date.now();return milestones.filter(x=>new Date(x.date).getTime()>now)}
function remaining(date){const d=new Date(date).getTime()-Date.now();if(d<=0)return"This deadline has arrived.";const days=Math.floor(d/86400000),hours=Math.floor((d%86400000)/3600000),mins=Math.floor((d%3600000)/60000);if(days>=2)return days+" days remaining";if(days===1)return"1 day and "+hours+" hours remaining";if(hours>=1)return hours+" hours and "+mins+" minutes remaining";return Math.max(mins,1)+" minutes remaining"}
function special(){const now=new Date(),start=new Date("2026-11-03T00:00:00-08:00"),end=new Date("2026-11-03T20:00:00-08:00");if(now>=start&&now<=end)return{title:"Election Day is today — polls close at 8:00 PM",sub:"Make your plan to vote and confirm your voting location."};if(now>end)return{title:"Thank you for participating in the 2026 General Election",sub:"Visit SBWPC for election updates and community action."};return null}
function restart(){progress.classList.remove("is-running");void progress.offsetWidth;progress.classList.add("is-running")}
function render(){const s=special();if(s){headline.textContent=s.title;countdown.textContent=s.sub;progress.classList.remove("is-running");return}const list=active();if(!list.length)return;if(index>=list.length)index=0;const item=list[index];headline.textContent=item.title;countdown.textContent=remaining(item.date)+" until "+item.label+".";restart()}
function rotate(){const list=active();if(list.length>1){index=(index+1)%list.length;render()}}
function start(){clearInterval(timer);timer=setInterval(rotate,7000)}
control.addEventListener("click",function(){const collapsed=bar.classList.toggle("is-collapsed");control.textContent=collapsed?"!":"×";control.setAttribute("aria-expanded",String(!collapsed));control.setAttribute("aria-label",collapsed?"Open election alert":"Collapse election alert");if(collapsed)clearInterval(timer);else{render();start()}})
render();start();setInterval(render,60000);
})();
</script>
</body>
</html>

Banner carousel full

A non-partisan political action committee, we endorse candidates who align with our positions and advocate for a feminist agenda. We are committed to social action against discrimination based on gender, race, ethnicity, sexual orientation, gender identity, religion, age, or ability. 

Who We Are

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cosmopolitics Live Banner</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap"
    rel="stylesheet"
  >

  <style>
    :root {
      --navy: #08244f;
      --navy-dark: #041a3a;
      --coral: #ef553f;
      --coral-dark: #d94331;
      --gold: #aa761d;
      --white: #ffffff;
      --banner-bg: #edf3f8;
      --accent-panel: #f7f1e8;
      --ticker-bg: #08244f;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      background: transparent;
      font-family: Inter, Arial, sans-serif;
    }

    .cosmo-banner {
      position: relative;
      width: 100%;
      overflow: hidden;
      color: var(--navy);
      background: var(--banner-bg);
      border: 1px solid rgba(8, 36, 79, 0.16);
      box-shadow: 0 12px 34px rgba(8, 36, 79, 0.16);
      isolation: isolate;
    }

    .cosmo-banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: -35%;
      width: 20%;
      height: 100%;
      background: rgba(255, 255, 255, 0.28);
      transform: skewX(-18deg);
      animation: cosmoShine 7s ease-in-out infinite;
      pointer-events: none;
      z-index: 4;
    }

    .cosmo-main {
      position: relative;
      min-height: 164px;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.65fr);
      align-items: stretch;
    }

    .cosmo-copy {
      min-width: 0;
      padding: 18px 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--banner-bg);
    }

    .cosmo-copy-inner {
      width: 100%;
      max-width: 940px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
    }

    .cosmo-text {
      min-width: 0;
    }

    .cosmo-topline {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 7px;
      flex-wrap: wrap;
    }

    .cosmo-brand {
      color: var(--gold);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.28em;
      text-transform: uppercase;
    }

    .cosmo-live {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 11px;
      border-radius: 999px;
      color: var(--white);
      background: var(--coral);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(239, 85, 63, 0.26);
    }

    .cosmo-live-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--white);
      animation: cosmoPulse 1.35s ease-in-out infinite;
    }

    .cosmo-title {
      margin: 0;
      color: var(--navy-dark);
      font-size: clamp(32px, 3.9vw, 58px);
      line-height: 0.94;
      letter-spacing: -0.055em;
      font-weight: 900;
    }

    .cosmo-title-accent {
      color: var(--coral);
    }

    .cosmo-message {
      margin: 9px 0 0;
      color: var(--navy);
      font-size: clamp(14px, 1.18vw, 18px);
      line-height: 1.25;
      font-weight: 700;
    }

    .cosmo-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 9px;
      min-width: 235px;
    }

    .cosmo-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 13px 20px;
      border: 2px solid var(--coral);
      border-radius: 10px;
      background: var(--coral);
      color: var(--white);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.02em;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
      box-shadow:
        0 6px 0 var(--gold),
        0 12px 22px rgba(8, 36, 79, 0.15);
      transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
      animation: cosmoCtaPulse 2.7s ease-in-out infinite;
    }

    .cosmo-cta:hover {
      transform: translateY(-3px);
      color: var(--coral);
      background: var(--white);
      box-shadow:
        0 8px 0 var(--gold),
        0 16px 26px rgba(8, 36, 79, 0.2);
    }

    .cosmo-cta:focus-visible {
      outline: 4px solid rgba(239, 85, 63, 0.3);
      outline-offset: 4px;
    }

    .cosmo-date {
      margin: 3px 0 0;
      color: var(--navy);
      font-size: 11px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .cosmo-namepanel {
      position: relative;
      min-height: 164px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px 22px;
      text-align: center;
      background: var(--accent-panel);
      border-left: 2px solid rgba(170, 118, 29, 0.48);
    }

    .cosmo-namepanel::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--gold);
      transform: translateY(-50%);
      box-shadow: 0 0 0 6px var(--banner-bg);
    }

    .cosmo-namewrap {
      width: 100%;
      max-width: 390px;
    }

    .cosmo-kicker {
      margin: 0 0 7px;
      color: var(--gold);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .cosmo-name {
      margin: 0;
      color: var(--navy-dark);
      font-size: clamp(42px, 4vw, 66px);
      line-height: 0.9;
      font-weight: 900;
      letter-spacing: -0.065em;
    }

    .cosmo-role {
      margin: 10px 0 0;
      color: var(--coral);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .cosmo-ticker {
      height: 32px;
      overflow: hidden;
      display: flex;
      align-items: center;
      color: var(--white);
      background: var(--ticker-bg);
      border-top: 2px solid var(--gold);
    }

    .cosmo-track {
      display: flex;
      width: max-content;
      white-space: nowrap;
      animation: cosmoScroll 25s linear infinite;
      will-change: transform;
    }

    .cosmo-group {
      display: flex;
      align-items: center;
      gap: 18px;
      padding-right: 18px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .cosmo-sep {
      color: #e0aa4b;
      font-size: 13px;
    }

    @keyframes cosmoScroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @keyframes cosmoPulse {
      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.42;
        transform: scale(0.7);
      }
    }

    @keyframes cosmoCtaPulse {
      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.08);
      }
    }

    @keyframes cosmoShine {
      0%,
      65% {
        left: -35%;
        opacity: 0;
      }

      72% {
        opacity: 1;
      }

      90% {
        left: 120%;
        opacity: 0;
      }

      100% {
        left: 120%;
        opacity: 0;
      }
    }

    @media (max-width: 980px) {
      .cosmo-main {
        grid-template-columns: minmax(0, 1fr) 300px;
      }

      .cosmo-copy-inner {
        gap: 16px;
      }

      .cosmo-actions {
        min-width: 210px;
      }

      .cosmo-name {
        font-size: clamp(38px, 5vw, 54px);
      }
    }

    @media (max-width: 760px) {
      .cosmo-main {
        min-height: 0;
        grid-template-columns: 1fr;
      }

      .cosmo-copy {
        padding: 17px 15px 19px;
      }

      .cosmo-copy-inner {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: center;
      }

      .cosmo-topline {
        justify-content: center;
      }

      .cosmo-title {
        font-size: clamp(31px, 10vw, 46px);
      }

      .cosmo-message {
        font-size: 14px;
      }

      .cosmo-actions {
        width: min(100%, 420px);
        min-width: 0;
        margin: 0 auto;
      }

      .cosmo-cta {
        width: 100%;
        white-space: normal;
      }

      .cosmo-namepanel {
        min-height: 112px;
        border-top: 2px solid rgba(170, 118, 29, 0.48);
        border-left: 0;
        padding: 15px;
      }

      .cosmo-namepanel::before {
        display: none;
      }

      .cosmo-kicker {
        font-size: 9px;
      }

      .cosmo-name {
        font-size: 38px;
      }

      .cosmo-role {
        margin-top: 7px;
        font-size: 9px;
      }

      .cosmo-ticker {
        height: 30px;
      }

      .cosmo-group {
        gap: 13px;
        font-size: 9px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cosmo-track,
      .cosmo-live-dot,
      .cosmo-cta,
      .cosmo-banner::before {
        animation: none;
      }

      .cosmo-cta {
        transition: none;
      }
    }
  </style>
</head>

<body>
  <section
    class="cosmo-banner"
    aria-label="Cosmopolitics ticket and sponsorship banner"
  >
    <div class="cosmo-main">

      <div class="cosmo-copy">
        <div class="cosmo-copy-inner">

          <div class="cosmo-text">
            <div class="cosmo-topline">
              <span class="cosmo-brand">Cosmopolitics</span>

              <span class="cosmo-live">
                <span class="cosmo-live-dot" aria-hidden="true"></span>
                Tickets Available
              </span>
            </div>

            <h2 class="cosmo-title">
              Cosmopolitics
              <span class="cosmo-title-accent">Is Here</span>
            </h2>

            <p class="cosmo-message">
              Join us for an inspiring afternoon of leadership,
              opportunity and community.
            </p>
          </div>

          <div class="cosmo-actions">
            <a
              class="cosmo-cta"
              href="https://www.tickettailor.com/events/sbwpc/2334935"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Purchase Cosmopolitics tickets or sponsorships"
            >
              Get Tickets &amp; Sponsorships
              <span aria-hidden="true">→</span>
            </a>

            <p class="cosmo-date">
              Saturday, September 19, 2026<br>
              11:30 AM–1:30 PM
            </p>
          </div>

        </div>
      </div>

      <div class="cosmo-namepanel">
        <div class="cosmo-namewrap">
          <p class="cosmo-kicker">Featured Speaker</p>
          <p class="cosmo-name">Fiona Ma</p>
          <p class="cosmo-role">California State Treasurer</p>
        </div>
      </div>

    </div>

    <div class="cosmo-ticker" aria-hidden="true">
      <div class="cosmo-track">

        <div class="cosmo-group">
          <span>Leading California Forward</span>
          <span class="cosmo-sep">◆</span>

          <span>Tickets &amp; Sponsorships Now Open</span>
          <span class="cosmo-sep">◆</span>

          <span>Saturday, September 19, 2026</span>
          <span class="cosmo-sep">◆</span>

          <span>11:30 AM–1:30 PM</span>
          <span class="cosmo-sep">◆</span>

          <span>Mar Monte Hotel · Santa Barbara</span>
          <span class="cosmo-sep">◆</span>
        </div>

        <div class="cosmo-group">
          <span>Leading California Forward</span>
          <span class="cosmo-sep">◆</span>

          <span>Tickets &amp; Sponsorships Now Open</span>
          <span class="cosmo-sep">◆</span>

          <span>Saturday, September 19, 2026</span>
          <span class="cosmo-sep">◆</span>

          <span>11:30 AM–1:30 PM</span>
          <span class="cosmo-sep">◆</span>

          <span>Mar Monte Hotel · Santa Barbara</span>
          <span class="cosmo-sep">◆</span>
        </div>

      </div>
    </div>
  </section>
</body>
</html>

Santa Barbara Women's Political Committee

The Santa Barbara Women’s Political Committee (SBWPC) is a non‑partisan political action committee based in Santa Barbara County, United States, that advances inclusive, intersectional and progressive feminist values. Guided by these principles, SBWPC endorses candidates who support its feminist agenda and work to combat discrimination based on gender, race, ethnicity, sexual orientation, gender identity, religion, age or ability. The organization focuses on social action and advocacy to promote equity and representation. 

Who We Are

Cosmopolitics Is Here