Embed

<div id="sbwpc-action-center">
  <style>
    #sbwpc-action-center {
      --navy: #17365f;
      --light-blue: #dceaf5;
      --cream: #f8f6f0;
      --coral: #d96858;
      --green: #26735b;
      --white: #ffffff;
      --ink: #182231;
      --muted: #596574;
      --border: #d6dde5;

      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      color: var(--ink);
      font-family: Inter, Lato, Arial, sans-serif;
      line-height: 1.5;
    }

    #sbwpc-action-center * {
      box-sizing: border-box;
    }

    #sbwpc-action-center a {
      text-decoration: none;
    }

    /* HERO */

    #sbwpc-action-center .action-hero {
      padding: 32px 28px;
      background: var(--navy);
      color: var(--white);
      border-radius: 16px;
    }

    #sbwpc-action-center .eyebrow {
      margin: 0 0 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    #sbwpc-action-center .action-hero h2 {
      margin: 0;
      color: var(--white);
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.08;
      letter-spacing: -1px;
    }

    #sbwpc-action-center .action-hero p:last-child {
      max-width: 760px;
      margin: 14px 0 0;
      font-size: 16px;
      line-height: 1.55;
    }

    /* FILTERS */

    #sbwpc-action-center .goal-section {
      padding: 30px 0 18px;
    }

    #sbwpc-action-center .goal-section h3 {
      margin: 0 0 5px;
      font-size: 22px;
      line-height: 1.2;
    }

    #sbwpc-action-center .section-intro {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 15px;
    }

    #sbwpc-action-center .goal-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    #sbwpc-action-center .goal-button {
      padding: 9px 15px;
      border: 2px solid var(--navy);
      border-radius: 100px;
      background: var(--white);
      color: var(--navy);
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    #sbwpc-action-center .goal-button:hover,
    #sbwpc-action-center .goal-button.active {
      background: var(--navy);
      color: var(--white);
    }

    /* DAILY ACTION */

    #sbwpc-action-center .daily-action {
      margin: 14px 0 25px;
      padding: 22px;
      border-left: 7px solid var(--coral);
      border-radius: 14px;
      background: var(--cream);
    }

    #sbwpc-action-center .daily-action h3 {
      margin: 4px 0 6px;
      font-size: 21px;
      line-height: 1.25;
    }

    #sbwpc-action-center .daily-action p {
      margin: 0;
      font-size: 15px;
    }

    /* CARD GRID */

    #sbwpc-action-center .action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 17px;
    }

    #sbwpc-action-center .action-card {
      overflow: hidden;
      border: 1px solid var(--border);
      border-top: 6px solid var(--navy);
      border-radius: 15px;
      background: var(--white);
    }

    #sbwpc-action-center .action-card.coral {
      border-top-color: var(--coral);
    }

    #sbwpc-action-center .action-card.green {
      border-top-color: var(--green);
    }

    #sbwpc-action-center .card-toggle {
      width: 100%;
      padding: 21px;
      border: 0;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    #sbwpc-action-center .card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 15px;
    }

    #sbwpc-action-center .card-toggle h3 {
      margin: 10px 0 5px;
      font-size: 19px;
      line-height: 1.25;
    }

    #sbwpc-action-center .card-toggle p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    #sbwpc-action-center .card-symbol {
      flex: 0 0 auto;
      color: var(--navy);
      font-size: 25px;
      font-weight: 400;
      line-height: 1;
    }

    #sbwpc-action-center .badge {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 100px;
      background: var(--light-blue);
      color: var(--navy);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.7px;
      text-transform: uppercase;
    }

    #sbwpc-action-center .card-details {
      display: none;
      padding: 18px 21px 22px;
      border-top: 1px solid var(--border);
      background: var(--cream);
    }

    #sbwpc-action-center .card-details.open {
      display: block;
    }

    #sbwpc-action-center .card-details p {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
    }

    /* BUTTON LINKS */

    #sbwpc-action-center .action-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      padding: 10px 15px;
      border-radius: 8px;
      background: var(--navy);
      color: var(--white);
      font-size: 14px;
      font-weight: 800;
    }

    #sbwpc-action-center .action-link:hover {
      opacity: 0.88;
    }

    #sbwpc-action-center .hidden-card {
      display: none;
    }

    #sbwpc-action-center .filter-status {
      margin-top: 16px;
      color: var(--muted);
      font-size: 13px;
    }

    @media (max-width: 760px) {
      #sbwpc-action-center .action-grid {
        grid-template-columns: 1fr;
      }

      #sbwpc-action-center .action-hero {
        padding: 28px 21px;
      }

      #sbwpc-action-center .action-hero h2 {
        font-size: 30px;
      }

      #sbwpc-action-center .action-hero p:last-child {
        font-size: 15px;
      }

      #sbwpc-action-center .goal-button {
        width: 100%;
      }
    }
  </style>

  <section class="action-hero">
    <p class="eyebrow">Santa Barbara Women’s Political Committee</p>

    <h2>Access. Voice. Power.</h2>

    <p>
      Find the fastest path to vote, participate, attend an event,
      prepare to lead or support feminist political action throughout
      Santa Barbara County.
    </p>
  </section>

  <section class="goal-section">
    <h3>What brings you here?</h3>

    <p class="section-intro">
      Choose a goal to see the most relevant opportunities.
    </p>

    <div class="goal-buttons">
      <button class="goal-button active" type="button" data-goal="all">
        Show Everything
      </button>

      <button class="goal-button" type="button" data-goal="vote">
        I Want to Vote
      </button>

      <button class="goal-button" type="button" data-goal="participate">
        I Want to Participate
      </button>

      <button class="goal-button" type="button" data-goal="lead">
        I Want to Lead
      </button>

      <button class="goal-button" type="button" data-goal="support">
        I Want to Support SBWPC
      </button>
    </div>
  </section>

  <section class="daily-action" aria-live="polite">
    <p class="eyebrow">Today’s Five-Minute Action</p>

    <h3 id="daily-action-title"></h3>

    <p id="daily-action-description"></p>

    <a
      id="daily-action-link"
      class="action-link"
      href="https://sbwpc.org/"
      target="_top"
    >
      Take Action
    </a>
  </section>

  <section class="action-grid">

    

    <article class="action-card coral" data-goals="vote participate">
      <button class="card-toggle" type="button" aria-expanded="false">
        <div class="card-header">
          <div>
            <span class="badge">Election 2026</span>

            <h3>Explore the Voter Guide</h3>

            <p>
              Review election deadlines, districts, candidates and voter
              resources.
            </p>
          </div>

          <span class="card-symbol" aria-hidden="true">+</span>
        </div>
      </button>

      <div class="card-details">
        <p>
          Use the interactive election center to review important dates,
          find district information and access official voter resources.
        </p>

        <a
          class="action-link"
          href="https://sbwpc.org/elections/2026-voter-guide"
          target="_top"
        >
          Open Voter Guide
        </a>
      </div>
    </article>

    

    <article class="action-card green" data-goals="participate support">
      <button class="card-toggle" type="button" aria-expanded="false">
        <div class="card-header">
          <div>
            <span class="badge">Events</span>

            <h3>Attend an Event</h3>

            <p>
              Find workshops, community programs and upcoming SBWPC events.
            </p>
          </div>

          <span class="card-symbol" aria-hidden="true">+</span>
        </div>
      </button>

      <div class="card-details">
        <p>
          View upcoming events, including candidate education programs,
          community gatherings and Cosmopolitics.
        </p>

        <a
          class="action-link"
          href="https://sbwpc.org/events/attend-an-event-2"
          target="_top"
        >
          View Upcoming Events
        </a>
      </div>
    </article>

    

    <article class="action-card coral" data-goals="support participate">
      <button class="card-toggle" type="button" aria-expanded="false">
        <div class="card-header">
          <div>
            <span class="badge">Membership</span>

            <h3>Become a Member</h3>

            <p>
              Join SBWPC and connect with political education, advocacy and
              leadership opportunities.
            </p>
          </div>

          <span class="card-symbol" aria-hidden="true">+</span>
        </div>
      </button>

      <div class="card-details">
        <p>
          Learn about membership benefits and support SBWPC’s work across
          Santa Barbara County.
        </p>

        <a
          class="action-link"
          href="https://sbwpc.org/join/membership-benefits"
          target="_top"
        >
          Explore Membership
        </a>
      </div>
    </article>

    

    <article class="action-card green" data-goals="lead participate">
      <button class="card-toggle" type="button" aria-expanded="false">
        <div class="card-header">
          <div>
            <span class="badge">Leadership</span>

            <h3>Prepare to Run for Office</h3>

            <p>
              Explore SBWPC’s candidate workshop and campaign training.
            </p>
          </div>

          <span class="card-symbol" aria-hidden="true">+</span>
        </div>
      </button>

      <div class="card-details">
        <p>
          Learn about campaign messaging, media, fundraising and the
          fundamentals of running a strong local campaign.
        </p>

        <a
          class="action-link"
          href="https://sbwpc.org/blog/are-you-running-for-office"
          target="_top"
        >
          View Candidate Workshop
        </a>
      </div>
    </article>

    

    <article class="action-card coral" data-goals="vote participate">
      <button class="card-toggle" type="button" aria-expanded="false">
        <div class="card-header">
          <div>
            <span class="badge">News</span>

            <h3>Read the Latest News</h3>

            <p>
              Follow SBWPC election information, public statements and
              organizational updates.
            </p>
          </div>

          <span class="card-symbol" aria-hidden="true">+</span>
        </div>
      </button>

      <div class="card-details">
        <p>
          Read current SBWPC articles about elections, endorsed candidates,
          equal rights and community action.
        </p>

        <a
          class="action-link"
          href="https://sbwpc.org/blog"
          target="_top"
        >
          Read SBWPC News
        </a>
      </div>
    </article>

    

    <article class="action-card green" data-goals="participate support">
      <button class="card-toggle" type="button" aria-expanded="false">
        <div class="card-header">
          <div>
            <span class="badge">Featured Event</span>

            <h3>Attend Cosmopolitics 2026</h3>

            <p>
              Join SBWPC for its annual leadership event featuring Fiona Ma.
            </p>
          </div>

          <span class="card-symbol" aria-hidden="true">+</span>
        </div>
      </button>

      <div class="card-details">
        <p>
          Learn about Cosmopolitics, event details, tickets and sponsorship
          opportunities.
        </p>

        <a
          class="action-link"
          href="https://sbwpc.org/events/cosmopolitics"
          target="_top"
        >
          View Cosmopolitics
        </a>
      </div>
    </article>

  </section>

  <p id="filter-status" class="filter-status" aria-live="polite">
    Showing all action opportunities.
  </p>

  <script>
    (function () {
      const center = document.getElementById("sbwpc-action-center");

      if (!center) return;

      const goalButtons = center.querySelectorAll(".goal-button");
      const cards = center.querySelectorAll(".action-card");
      const filterStatus = center.querySelector("#filter-status");

      goalButtons.forEach(function (button) {
        button.addEventListener("click", function () {
          const selectedGoal = button.getAttribute("data-goal");
          let visibleCards = 0;

          goalButtons.forEach(function (item) {
            item.classList.remove("active");
          });

          button.classList.add("active");

          cards.forEach(function (card) {
            const goals = card.getAttribute("data-goals").split(" ");
            const shouldShow =
              selectedGoal === "all" || goals.includes(selectedGoal);

            card.classList.toggle("hidden-card", !shouldShow);

            if (shouldShow) visibleCards += 1;
          });

          filterStatus.textContent =
            selectedGoal === "all"
              ? "Showing all action opportunities."
              : "Showing " +
                visibleCards +
                " recommended action opportunities.";
        });
      });

      const cardButtons = center.querySelectorAll(".card-toggle");

      cardButtons.forEach(function (button) {
        button.addEventListener("click", function () {
          const details = button.nextElementSibling;
          const symbol = button.querySelector(".card-symbol");
          const isOpen = details.classList.contains("open");

          details.classList.toggle("open", !isOpen);
          button.setAttribute("aria-expanded", String(!isOpen));
          symbol.textContent = isOpen ? "+" : "−";
        });
      });

      const dailyActions = [
        {
          title: "Review the 2026 Voter Guide",
          description:
            "Check election dates, district information and official voter resources.",
          button: "Open Voter Guide",
          link: "https://sbwpc.org/elections/2026-voter-guide"
        },
        {
          title: "Find an Upcoming Event",
          description:
            "Explore SBWPC workshops, community programs and featured events.",
          button: "View Events",
          link: "https://sbwpc.org/events/attend-an-event-2"
        },
        {
          title: "Explore SBWPC Membership",
          description:
            "Learn how membership connects you to advocacy, education and leadership.",
          button: "View Membership",
          link: "https://sbwpc.org/join/membership-benefits"
        },
        {
          title: "Read the Latest SBWPC News",
          description:
            "Catch up on election information, equal-rights advocacy and organizational news.",
          button: "Read the News",
          link: "https://sbwpc.org/blog"
        },
        {
          title: "Explore the Candidate Workshop",
          description:
            "Learn about campaign messaging, media, fundraising and candidate preparation.",
          button: "View Workshop",
          link: "https://sbwpc.org/blog/are-you-running-for-office"
        },
        {
          title: "Learn About Cosmopolitics",
          description:
            "Review event details, tickets and sponsorship opportunities.",
          button: "View Cosmopolitics",
          link: "https://sbwpc.org/events/cosmopolitics"
        }
      ];

      const today = new Date();

      const actionIndex =
        (today.getFullYear() +
          today.getMonth() +
          today.getDate()) %
        dailyActions.length;

      const selectedAction = dailyActions[actionIndex];

      center.querySelector("#daily-action-title").textContent =
        selectedAction.title;

      center.querySelector("#daily-action-description").textContent =
        selectedAction.description;

      const dailyLink = center.querySelector("#daily-action-link");

      dailyLink.textContent = selectedAction.button;
      dailyLink.href = selectedAction.link;
    })();
  </script>
</div>

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. 