Embed

<div id="sbwpc-start-wizard">
  <style>
    #sbwpc-start-wizard{--navy:#17365f;--blue:#dceaf5;--cream:#f8f6f0;--coral:#d96858;--green:#26735b;--white:#fff;--ink:#182231;--muted:#596574;--border:#d6dde5;max-width:1050px;margin:0 auto;font-family:Inter,Lato,Arial,sans-serif;color:var(--ink);line-height:1.5}
    #sbwpc-start-wizard *{box-sizing:border-box}#sbwpc-start-wizard a{text-decoration:none}
    #sbwpc-start-wizard .wizard-shell{overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--white);box-shadow:0 12px 30px rgba(23,54,95,.08)}
    #sbwpc-start-wizard .wizard-hero{padding:28px 26px;background:var(--navy);color:var(--white)}
    #sbwpc-start-wizard .wizard-hero h2{margin:0;color:var(--white);font-size:clamp(27px,4vw,40px);line-height:1.12;letter-spacing:-.5px}
    #sbwpc-start-wizard .wizard-hero p{max-width:760px;margin:10px 0 0;font-size:16px}
    #sbwpc-start-wizard .progress-wrap{padding:18px 24px 0;background:var(--cream)}
    #sbwpc-start-wizard .progress-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
    #sbwpc-start-wizard .progress-track{width:100%;height:8px;overflow:hidden;border-radius:999px;background:#e3e8ed}
    #sbwpc-start-wizard .progress-bar{width:33.333%;height:100%;border-radius:999px;background:var(--coral);transition:width .25s ease}
    #sbwpc-start-wizard .wizard-body{min-height:420px;padding:26px;background:var(--cream)}
    #sbwpc-start-wizard .step{display:none}#sbwpc-start-wizard .step.active{display:block}
    #sbwpc-start-wizard .step h3{margin:0;color:var(--navy);font-size:24px;line-height:1.2}
    #sbwpc-start-wizard .step-intro{margin:7px 0 20px;color:var(--muted);font-size:15px}
    #sbwpc-start-wizard .choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
    #sbwpc-start-wizard .choice{min-height:132px;padding:18px;border:2px solid var(--border);border-radius:14px;background:var(--white);color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
    #sbwpc-start-wizard .choice:hover{transform:translateY(-2px);border-color:var(--navy);box-shadow:0 8px 18px rgba(23,54,95,.08)}
    #sbwpc-start-wizard .choice.selected{border-color:var(--navy);box-shadow:0 0 0 3px rgba(23,54,95,.12)}
    #sbwpc-start-wizard .choice-icon{display:flex;width:38px;height:38px;align-items:center;justify-content:center;margin-bottom:12px;border-radius:50%;background:var(--blue);color:var(--navy);font-size:20px;font-weight:800}
    #sbwpc-start-wizard .choice strong{display:block;font-size:17px;line-height:1.25}
    #sbwpc-start-wizard .choice span:last-child{display:block;margin-top:5px;color:var(--muted);font-size:13px}
    #sbwpc-start-wizard .button-row{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
    #sbwpc-start-wizard .wizard-button{border:0;border-radius:9px;padding:11px 17px;background:var(--navy);color:var(--white);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
    #sbwpc-start-wizard .wizard-button.secondary{border:2px solid var(--navy);background:transparent;color:var(--navy)}
    #sbwpc-start-wizard .wizard-button:disabled{opacity:.45;cursor:not-allowed}
    #sbwpc-start-wizard .result-header{margin-bottom:16px;padding:20px;border-left:7px solid var(--coral);border-radius:13px;background:var(--white)}
    #sbwpc-start-wizard .result-header h3{font-size:25px}#sbwpc-start-wizard .result-header p{margin:7px 0 0;color:var(--muted);font-size:15px}
    #sbwpc-start-wizard .path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
    #sbwpc-start-wizard .path-card{display:flex;flex-direction:column;min-height:245px;padding:18px;border:1px solid var(--border);border-top:5px solid var(--navy);border-radius:14px;background:var(--white)}
    #sbwpc-start-wizard .path-card:nth-child(2){border-top-color:var(--green)}#sbwpc-start-wizard .path-card:nth-child(3){border-top-color:var(--coral)}
    #sbwpc-start-wizard .path-number{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--blue);color:var(--navy);font-size:13px;font-weight:800}
    #sbwpc-start-wizard .path-card h4{margin:12px 0 6px;font-size:18px;line-height:1.25}
    #sbwpc-start-wizard .path-card p{margin:0;color:var(--muted);font-size:14px}
    #sbwpc-start-wizard .path-link{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;padding:10px 13px;border-radius:8px;background:var(--navy);color:var(--white);font-size:13px;font-weight:800}
    #sbwpc-start-wizard .result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
    #sbwpc-start-wizard .privacy-note{margin:14px 0 0;color:var(--muted);font-size:12px}
    @media(max-width:780px){#sbwpc-start-wizard .choice-grid,#sbwpc-start-wizard .path-grid{grid-template-columns:1fr}#sbwpc-start-wizard .choice{min-height:auto}#sbwpc-start-wizard .wizard-body{min-height:0;padding:21px}#sbwpc-start-wizard .wizard-hero{padding:25px 21px}}
  </style>

  <div class="wizard-shell">
    <section class="wizard-hero">
      <h2>Where Do I Start?</h2>
      <p>Answer three quick questions and receive a personalized path to voting, volunteering, leadership, membership, events or supporting SBWPC.</p>
    </section>

    <div class="progress-wrap">
      <div class="progress-meta"><span id="progress-label">Step 1 of 3</span><span>About 20 seconds</span></div>
      <div class="progress-track"><div class="progress-bar" id="progress-bar"></div></div>
    </div>

    <main class="wizard-body">
      <section class="step active" data-step="1">
        <h3>What would you like to do?</h3>
        <p class="step-intro">Choose the option that best matches your goal today.</p>
        <div class="choice-grid">
          <button class="choice" type="button" data-answer="goal" data-value="new"><span class="choice-icon">1</span><strong>I’m new</strong><span>Learn what SBWPC does and how to begin.</span></button>
          <button class="choice" type="button" data-answer="goal" data-value="vote"><span class="choice-icon">✓</span><strong>I’m voting</strong><span>Find election, candidate and voter information.</span></button>
          <button class="choice" type="button" data-answer="goal" data-value="volunteer"><span class="choice-icon">+</span><strong>I want to volunteer</strong><span>Find a practical way to contribute.</span></button>
          <button class="choice" type="button" data-answer="goal" data-value="run"><span class="choice-icon">→</span><strong>I want to run</strong><span>Explore candidate preparation and training.</span></button>
          <button class="choice" type="button" data-answer="goal" data-value="donate"><span class="choice-icon">$</span><strong>I want to support</strong><span>Join, attend or financially support the work.</span></button>
          <button class="choice" type="button" data-answer="goal" data-value="event"><span class="choice-icon">•</span><strong>I want to attend an event</strong><span>See upcoming workshops and gatherings.</span></button>
        </div>
        <div class="button-row"><span></span><button class="wizard-button next" type="button" disabled>Continue</button></div>
      </section>

      <section class="step" data-step="2">
        <h3>How much time do you have?</h3>
        <p class="step-intro">We’ll tailor the first action to your available time.</p>
        <div class="choice-grid">
          <button class="choice" type="button" data-answer="time" data-value="five"><span class="choice-icon">5</span><strong>About five minutes</strong><span>Give me one fast, useful action.</span></button>
          <button class="choice" type="button" data-answer="time" data-value="hour"><span class="choice-icon">60</span><strong>About an hour</strong><span>I can read, register or attend something.</span></button>
          <button class="choice" type="button" data-answer="time" data-value="ongoing"><span class="choice-icon">∞</span><strong>I want ongoing involvement</strong><span>Show me a longer-term path.</span></button>
        </div>
        <div class="button-row"><button class="wizard-button secondary back" type="button">Back</button><button class="wizard-button next" type="button" disabled>Continue</button></div>
      </section>

      <section class="step" data-step="3">
        <h3>What kind of experience fits you?</h3>
        <p class="step-intro">Choose the environment where you are most likely to participate.</p>
        <div class="choice-grid">
          <button class="choice" type="button" data-answer="style" data-value="learn"><span class="choice-icon">i</span><strong>Learn first</strong><span>I want information before taking action.</span></button>
          <button class="choice" type="button" data-answer="style" data-value="connect"><span class="choice-icon">2</span><strong>Connect with people</strong><span>I prefer events, conversations and community.</span></button>
          <button class="choice" type="button" data-answer="style" data-value="act"><span class="choice-icon">!</span><strong>Take direct action</strong><span>I’m ready for a clear next step.</span></button>
        </div>
        <div class="button-row"><button class="wizard-button secondary back" type="button">Back</button><button class="wizard-button next" type="button" disabled>Build My Path</button></div>
      </section>

      <section class="step" data-step="4">
        <div class="result-header"><h3 id="result-title">Your SBWPC path</h3><p id="result-summary"></p></div>
        <div class="path-grid" id="path-grid"></div>
        <div class="result-actions"><button class="wizard-button secondary" id="restart-wizard" type="button">Start Again</button><a class="wizard-button" href="https://sbwpc.org/" target="_top">Visit SBWPC Home</a></div>
        <p class="privacy-note">This wizard does not collect or store personal information.</p>
      </section>
    </main>
  </div>

  <script>
    (function(){
      const root=document.getElementById('sbwpc-start-wizard');if(!root)return;
      const answers={goal:'',time:'',style:''};let currentStep=1;
      const steps=root.querySelectorAll('.step'),progressBar=root.querySelector('#progress-bar'),progressLabel=root.querySelector('#progress-label');
      const content={
        new:{title:'A welcoming first path into SBWPC',summary:'Start with the mission, see what is happening now, and choose one easy way to participate.',cards:[['Understand the mission','See SBWPC’s purpose, values and approach to feminist political action.','https://sbwpc.org/about/mission','Read the Mission'],['See what is happening','Browse current events, workshops and community programs.','https://sbwpc.org/events/attend-an-event-2','View Events'],['Explore membership','Learn what members receive and how membership supports the work.','https://sbwpc.org/membership/membership-benefits','Membership Benefits']]},
        vote:{title:'Your voter information path',summary:'Begin with SBWPC’s election guide, confirm your registration and review current election information.',cards:[['Open the voter guide','Review races, endorsements and election information from SBWPC.','https://sbwpc.org/elections/2026-voter-guide','View Voter Guide'],['Register or verify','Use Santa Barbara County’s official voter registration resources.','https://www.countyofsb.org/voter-registration','Check Registration'],['Read election coverage','Follow SBWPC news and updates related to candidates and voting.','https://sbwpc.org/news/in-the-news','Read the News']]},
        volunteer:{title:'Your participation path',summary:'Learn about the organization, connect through an event and take the next step toward ongoing involvement.',cards:[['Choose an event','Meet members and learn where your interests fit.','https://sbwpc.org/events/attend-an-event-2','View Events'],['Explore membership','Membership is a practical entry point to SBWPC programs and opportunities.','https://sbwpc.org/membership/membership-benefits','Explore Membership'],['Contact SBWPC','Introduce yourself and share the kind of work you would like to support.','https://sbwpc.org/','Contact SBWPC']]},
        run:{title:'Your candidate preparation path',summary:'Begin with candidate training, understand the endorsement process and study the current electoral landscape.',cards:[['Candidate workshop','Learn campaign messaging, media, fundraising and voter contact.','https://sbwpc.org/blog/are-you-running-for-office','View Workshop'],['Review the voter guide','Study current races, candidates and SBWPC’s endorsement approach.','https://sbwpc.org/elections/2026-voter-guide','Open Voter Guide'],['Attend an event','Build relationships with politically active community members.','https://sbwpc.org/events/attend-an-event-2','View Events']]},
        donate:{title:'Your support path',summary:'Choose the form of support that fits you: membership, event participation or direct engagement with SBWPC.',cards:[['Become a member','Support year-round political education, advocacy and leadership development.','https://sbwpc.org/membership/membership-benefits','Join SBWPC'],['Support Cosmopolitics','Attend or sponsor SBWPC’s annual leadership event.','https://sbwpc.org/events/cosmopolitics','View Cosmopolitics'],['Connect directly','Visit SBWPC to find current join and donate options.','https://sbwpc.org/','Support the Work']]},
        event:{title:'Your event path',summary:'See what is coming up, choose the best event for your interests and bring someone with you.',cards:[['Browse all events','See current workshops, forums and community gatherings.','https://sbwpc.org/events/attend-an-event-2','View Events'],['Candidate workshop','Explore Run Like a Woman and candidate-development programming.','https://sbwpc.org/blog/are-you-running-for-office','View Workshop'],['Cosmopolitics 2026','Review tickets and sponsorship opportunities for the annual event.','https://sbwpc.org/events/cosmopolitics','View Cosmopolitics']]}
      };
      function showStep(n){currentStep=n;steps.forEach(s=>s.classList.toggle('active',Number(s.dataset.step)===n));if(n<=3){progressLabel.textContent='Step '+n+' of 3';progressBar.style.width=(n/3*100)+'%'}else{progressLabel.textContent='Your personalized path';progressBar.style.width='100%'}}
      root.querySelectorAll('.choice').forEach(choice=>choice.addEventListener('click',function(){const key=this.dataset.answer,value=this.dataset.value;answers[key]=value;this.closest('.step').querySelectorAll('[data-answer="'+key+'"]').forEach(i=>i.classList.remove('selected'));this.classList.add('selected');this.closest('.step').querySelector('.next').disabled=false}));
      root.querySelectorAll('.next').forEach(btn=>btn.addEventListener('click',function(){if(currentStep<3)showStep(currentStep+1);else{buildResult();showStep(4)}}));
      root.querySelectorAll('.back').forEach(btn=>btn.addEventListener('click',()=>showStep(currentStep-1)));
      function buildResult(){const result=content[answers.goal]||content.new;const timeText={five:'Your first step can be completed in about five minutes.',hour:'You have enough time to explore a resource or register for an activity.',ongoing:'This path is designed to lead toward ongoing participation.'}[answers.time]||'';const styleText={learn:' Begin with the information-focused step.',connect:' Begin with the event or community-focused step.',act:' Begin with the clearest direct-action step.'}[answers.style]||'';root.querySelector('#result-title').textContent=result.title;root.querySelector('#result-summary').textContent=result.summary+' '+timeText+styleText;const grid=root.querySelector('#path-grid');grid.innerHTML='';result.cards.forEach((card,index)=>{const article=document.createElement('article');article.className='path-card';article.innerHTML='<div class="path-number">'+(index+1)+'</div><h4>'+card[0]+'</h4><p>'+card[1]+'</p><a class="path-link" href="'+card[2]+'" target="_top">'+card[3]+'</a>';grid.appendChild(article)})}
      root.querySelector('#restart-wizard').addEventListener('click',function(){answers.goal='';answers.time='';answers.style='';root.querySelectorAll('.choice').forEach(c=>c.classList.remove('selected'));root.querySelectorAll('.next').forEach(b=>b.disabled=true);showStep(1)});
    })();
  </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. 