Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Contact | Santa Barbara Women's Political Committee</title>
<meta name="description" content="Contact the Santa Barbara Women’s Political Committee about elections, endorsements, membership, events, volunteering and organizational questions"/>
<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@400;500&display=swap" rel="stylesheet">
<style>
html,body{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  background:#fffaf1;
}

#sbwpc-contact-modern,
#sbwpc-contact-modern *,
#sbwpc-contact-modern *::before,
#sbwpc-contact-modern *::after{
  box-sizing:border-box;
}

#sbwpc-contact-modern{
  --navy:#0b285d;
  --navy2:#173c74;
  --blue:#20a9ee;
  --rich-blue:#1767b1;
  --cream:#fffaf1;
  --paper:#ffffff;
  --sky:#ebf7fd;
  --salmon:#d9776a;
  --salmon-soft:#f7e6e1;
  --ink:#132347;
  --muted:#61738f;
  --line:#cbe4f0;

  width:100%;
  overflow:hidden;
  background:var(--cream);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  line-height:1.58;
}

#sbwpc-contact-modern a{
  color:inherit;
  text-decoration:none;
}

#sbwpc-contact-modern button,
#sbwpc-contact-modern input{
  font:inherit;
}

#sbwpc-contact-modern .ct-shell{
  width:min(1240px,calc(100% - 40px));
  margin:0 auto;
}

#sbwpc-contact-modern h1,
#sbwpc-contact-modern h2,
#sbwpc-contact-modern h3,
#sbwpc-contact-modern .ct-email-address{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.03em;
}

/* LOCKED LABEL SYSTEM */
#sbwpc-contact-modern .ct-kicker,
#sbwpc-contact-modern .ct-section-label,
#sbwpc-contact-modern .ct-card-label,
#sbwpc-contact-modern .ct-feature .ct-card-label,
#sbwpc-contact-modern .ct-band .ct-card-label{
  display:block!important;
  margin:0 0 10px!important;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:400!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--navy2)!important;
}

#sbwpc-contact-modern .ct-feature .ct-card-label,
#sbwpc-contact-modern .ct-band .ct-card-label{
  color:#f4c4bb!important;
}

/* HERO */
#sbwpc-contact-modern .ct-hero{
  padding:38px 0 42px;
  background:var(--sky);
  border-bottom:1px solid var(--line);
}

#sbwpc-contact-modern .ct-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:42px;
  align-items:end;
}

#sbwpc-contact-modern .ct-hero h1{
  max-width:870px;
  margin:0;
  color:var(--navy);
  font-size:clamp(40px,5vw,66px);
  line-height:1.01;
  letter-spacing:-.012em;
  word-spacing:.065em;
}

#sbwpc-contact-modern .ct-hero-copy{
  max-width:760px;
  margin:18px 0 0;
  color:#324e75;
  font-size:16px;
  line-height:1.58;
}

#sbwpc-contact-modern .ct-feature{
  padding:24px;
  border-top:5px solid var(--salmon);
  background:var(--navy);
  color:#fff;
}

#sbwpc-contact-modern .ct-email-address{
  display:block;
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.06;
  overflow-wrap:anywhere;
}

#sbwpc-contact-modern .ct-feature-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
#sbwpc-contact-modern .ct-feature-actions-primary{
  display:grid;
  grid-template-columns:1fr;
}
#sbwpc-contact-modern .ct-feature-actions-primary .ct-button{
  width:100%;
}
#sbwpc-contact-modern .ct-copy-link{
  margin-top:14px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#dbe5f3;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  font-size:11px;
  line-height:1.35;
  font-weight:400;
  letter-spacing:.04em;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
#sbwpc-contact-modern .ct-copy-link:hover,
#sbwpc-contact-modern .ct-copy-link:focus-visible{
  color:#fff;
}

/* BUTTONS */
#sbwpc-contact-modern .ct-button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid var(--navy);
  border-radius:0;
  background:var(--navy);
  color:#fff;
  font-size:11px;
  line-height:1.2;
  font-weight:400;
  letter-spacing:.065em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}

#sbwpc-contact-modern .ct-button:hover,
#sbwpc-contact-modern .ct-button:focus-visible{
  background:var(--rich-blue);
  border-color:var(--rich-blue);
  color:#fff;
  transform:translateY(-2px);
}

#sbwpc-contact-modern .ct-feature .ct-button{
  background:#fff;
  color:var(--navy);
  border-color:#fff;
}

#sbwpc-contact-modern .ct-feature .ct-button.secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.75);
}

#sbwpc-contact-modern .ct-feature .ct-button:hover,
#sbwpc-contact-modern .ct-feature .ct-button:focus-visible{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

/* SECTIONS */
#sbwpc-contact-modern .ct-section{
  padding:64px 0;
  border-bottom:1px solid #e4e7e8;
  background:#fff;
}

#sbwpc-contact-modern .ct-section.cream{
  background:var(--cream);
}

#sbwpc-contact-modern .ct-section.sky{
  background:#f6fbfd;
}

#sbwpc-contact-modern .ct-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,430px);
  gap:30px;
  align-items:end;
  margin-bottom:34px;
}

#sbwpc-contact-modern .ct-section h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(32px,3.7vw,49px);
  line-height:1;
}

#sbwpc-contact-modern .ct-section-note{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.58;
}

/* TOPIC ROUTING */
#sbwpc-contact-modern .ct-topics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}

#sbwpc-contact-modern .ct-topic{
  min-height:136px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px;
  border:0;
  border-radius:0;
  background:#fff;
  color:var(--navy);
  text-align:left;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}

#sbwpc-contact-modern .ct-topic:nth-child(2),
#sbwpc-contact-modern .ct-topic:nth-child(3),
#sbwpc-contact-modern .ct-topic:nth-child(6){
  background:var(--sky);
}

#sbwpc-contact-modern .ct-topic:hover,
#sbwpc-contact-modern .ct-topic:focus-visible{
  background:var(--navy);
  color:#fff;
  outline:none;
}

#sbwpc-contact-modern .ct-topic h3{
  margin:0;
  color:inherit;
  font-size:24px;
  line-height:1.06;
}

#sbwpc-contact-modern .ct-topic span{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}

#sbwpc-contact-modern .ct-topic:hover span,
#sbwpc-contact-modern .ct-topic:focus-visible span{
  color:#dbe5f3;
}

/* MAILING */
#sbwpc-contact-modern .ct-mailing{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:38px;
  align-items:start;
}

#sbwpc-contact-modern .ct-mailing-copy h3{
  margin:0;
  color:var(--navy);
  font-size:clamp(28px,3vw,38px);
  line-height:1.04;
}

#sbwpc-contact-modern .ct-mailing-copy p:not(.ct-card-label){
  max-width:500px;
  margin:15px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.68;
}

#sbwpc-contact-modern .ct-form{
  padding:26px;
  border-top:5px solid var(--salmon);
  background:var(--navy);
}

#sbwpc-contact-modern .ct-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#sbwpc-contact-modern .ct-field{
  display:grid;
  gap:7px;
}

#sbwpc-contact-modern .ct-field label{
  color:#fff;
  font-size:11px;
  line-height:1.35;
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#sbwpc-contact-modern .ct-input{
  width:100%;
  min-height:48px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:0;
  outline:0;
  background:#fff;
  color:var(--ink);
  font-size:14px;
  font-weight:400;
}

#sbwpc-contact-modern .ct-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(32,169,238,.22);
}

#sbwpc-contact-modern .ct-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

#sbwpc-contact-modern .ct-form .ct-button{
  background:#fff;
  color:var(--navy);
  border-color:#fff;
}

#sbwpc-contact-modern .ct-form .ct-button.secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.75);
}

#sbwpc-contact-modern .ct-form-status{
  min-height:20px;
  margin-top:12px;
  color:#dbe5f3;
  font-size:12px;
  line-height:1.45;
}

/* CIVIC HANDOFF */
#sbwpc-contact-modern .ct-civic{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:center;
  padding:30px;
  border:1px solid var(--line);
  background:#fff;
}

#sbwpc-contact-modern .ct-civic h3{
  margin:0;
  color:var(--navy);
  font-size:30px;
  line-height:1.05;
}

#sbwpc-contact-modern .ct-civic p:not(.ct-card-label){
  max-width:760px;
  margin:11px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.58;
}

#sbwpc-contact-modern .ct-civic-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

/* FINAL BAND */
#sbwpc-contact-modern .ct-band{
  padding:58px 0;
  background:var(--navy);
  color:#fff;
}

#sbwpc-contact-modern .ct-band-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:center;
}

#sbwpc-contact-modern .ct-band h2{
  margin:0;
  color:#fff;
  font-size:clamp(32px,4vw,48px);
  line-height:1;
}

#sbwpc-contact-modern .ct-band .ct-button{
  background:#fff;
  color:var(--navy);
  border-color:#fff;
}

/* TOAST */
#sbwpc-contact-modern .ct-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:999999;
  transform:translate(-50%,16px);
  opacity:0;
  pointer-events:none;
  padding:11px 14px;
  border-radius:0;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  box-shadow:0 12px 34px rgba(5,26,58,.22);
  transition:opacity .2s ease,transform .2s ease;
}

#sbwpc-contact-modern .ct-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

/* REVEAL */
#sbwpc-contact-modern .ct-reveal{
  opacity:0;
  transform:translateY(18px);
}

#sbwpc-contact-modern.motion-ready .ct-reveal.is-visible{
  opacity:1;
  transform:none;
  transition:opacity .62s ease,transform .62s cubic-bezier(.22,1,.36,1);
}

#sbwpc-contact-modern :focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
}

@media(max-width:920px){
  #sbwpc-contact-modern .ct-hero-grid,
  #sbwpc-contact-modern .ct-civic,
  #sbwpc-contact-modern .ct-band-grid{
    grid-template-columns:1fr;
  }

  #sbwpc-contact-modern .ct-feature{
    max-width:620px;
  }

  #sbwpc-contact-modern .ct-civic-actions{
    justify-content:flex-start;
  }
}

@media(max-width:760px){
  #sbwpc-contact-modern .ct-shell{
    width:calc(100% - 18px);
  }

  #sbwpc-contact-modern .ct-section{
    padding:46px 0;
  }

  #sbwpc-contact-modern .ct-section-head{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:26px;
  }

  #sbwpc-contact-modern .ct-topics,
  

  #sbwpc-contact-modern .ct-topic{
    min-height:116px;
  }
}

@media(max-width:520px){
  #sbwpc-contact-modern .ct-feature-actions,
  #sbwpc-contact-modern .ct-civic-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  #sbwpc-contact-modern .ct-button{
    width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  #sbwpc-contact-modern,
  #sbwpc-contact-modern *,
  #sbwpc-contact-modern *::before,
  #sbwpc-contact-modern *::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }

  #sbwpc-contact-modern .ct-reveal{
    opacity:1!important;
    transform:none!important;
  }
}
</style>
</head>

<body>
<main id="sbwpc-contact-modern">

<section class="ct-hero" aria-labelledby="ct-title">
  <div class="ct-shell">
    <div class="ct-hero-grid">
      <div class="ct-reveal">
        <p class="ct-kicker">Contact</p>
        <h1 id="ct-title">Start a conversation with SBWPC</h1>
        <p class="ct-hero-copy">Join our mailing list, email SBWPC directly, or choose the topic that best matches your question</p>
      </div>

      <aside class="ct-feature ct-reveal">
        <p class="ct-card-label">Connect With SBWPC</p>
        <span class="ct-email-address">Stay informed or reach us directly</span>
        <div class="ct-feature-actions ct-feature-actions-primary">
          <a class="ct-button" href="https://visitor.constantcontact.com/manage/optin?v=001V75RH3uQHBiPKVg_FoUhab1Y62s-HwempDLsWJ9z52XzNZolyjc6mcKRohU0yNzw2ctac5XToDMRddLM5HcxkhGif7hCbTmT" target="_blank" rel="noopener noreferrer">Join Our Mailing List</a>
          <a class="ct-button secondary" href="mailto:info@sbwpc.org">Email SBWPC</a>
        </div>
        <button class="ct-copy-link" id="ct-copy-email" type="button">Copy info@sbwpc.org</button>
      </aside>
    </div>
  </div>
</section>

<section class="ct-section">
  <div class="ct-shell">
    <div class="ct-section-head ct-reveal">
      <div>
        <p class="ct-section-label">Choose a Topic</p>
        <h2>What would you like to contact us about</h2>
      </div>
    </div>

    <div class="ct-topics ct-reveal">
      <button class="ct-topic" type="button" data-subject="General SBWPC Question">
        <h3>Organization</h3>
        <span>General questions about SBWPC</span>
      </button>

      <button class="ct-topic" type="button" data-subject="SBWPC Elections Question">
        <h3>Elections</h3>
        <span>Election process, candidate assessment and election-related questions</span>
      </button>

      <button class="ct-topic" type="button" data-subject="SBWPC Endorsement Question">
        <h3>Endorsements</h3>
        <span>Questions about endorsement meetings, process or decisions</span>
      </button>

      <button class="ct-topic" type="button" data-subject="SBWPC Membership Question">
        <h3>Membership</h3>
        <span>Joining, renewing or participating as a member</span>
      </button>

      <button class="ct-topic" type="button" data-subject="SBWPC Event Question">
        <h3>Events</h3>
        <span>Event information, participation and event-related questions</span>
      </button>

      <button class="ct-topic" type="button" data-subject="Volunteer with SBWPC">
        <h3>Volunteering</h3>
        <span>Committees, volunteer opportunities and ways to contribute</span>
      </button>
    </div>
  </div>
</section>

<section class="ct-section sky">
  <div class="ct-shell">
    <div class="ct-civic ct-reveal">
      <div>
        <p class="ct-card-label">Need a Civic Resource</p>
        <h3>Looking for representatives, voting information or a public-action tool</h3>
      </div>
      <div class="ct-civic-actions">
        <a class="ct-button" href="https://sbwpc.org/take-action-2/civic-action-center">Open Civic Action Center</a>
      </div>
    </div>
  </div>
</section>

<div class="ct-toast" id="ct-toast" role="status" aria-live="polite"></div>

<script>
(() => {
  const root=document.getElementById("sbwpc-contact-modern")
  if(!root)return

  root.classList.add("motion-ready")

  const reveals=root.querySelectorAll(".ct-reveal")
  if("IntersectionObserver" in window&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){
    const observer=new IntersectionObserver(entries=>{
      entries.forEach(entry=>{
        if(entry.isIntersecting){
          entry.target.classList.add("is-visible")
          observer.unobserve(entry.target)
        }
      })
    },{threshold:.12})
    reveals.forEach(item=>observer.observe(item))
  }else{
    reveals.forEach(item=>item.classList.add("is-visible"))
  }

  const toast=root.querySelector("#ct-toast")
  let toastTimer
  const announce=message=>{
    toast.textContent=message
    toast.classList.add("show")
    clearTimeout(toastTimer)
    toastTimer=setTimeout(()=>toast.classList.remove("show"),1800)
  }

  root.querySelectorAll(".ct-topic").forEach(button=>{
    button.addEventListener("click",()=>{
      const subject=button.dataset.subject || "General SBWPC Question"
      window.location.href="mailto:info@sbwpc.org?subject="+encodeURIComponent(subject)
    })
  })

  const copy=root.querySelector("#ct-copy-email")
  copy.addEventListener("click",async()=>{
    try{
      await navigator.clipboard.writeText("info@sbwpc.org")
      announce("Email copied")
    }catch(error){
      const temp=document.createElement("textarea")
      temp.value="info@sbwpc.org"
      document.body.appendChild(temp)
      temp.select()
      document.execCommand("copy")
      temp.remove()
      announce("Email copied")
    }
  })

})()
</script>

</main>
</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. 