Redesigned the Join page

docs/join.md

@@ -1,21 +1,73 @@
-# How to join the weekly dev chat:
+---
+title: Join
+hide:
+  - toc
+---
+# How to join the Weekly Dev Chat
 
-#### The short version
+<div class="wdc-page" markdown>
+  <p class="lead">We meet online deterministically every Tuesday at 12pm Mountain Time.  The in real life events date and time are nondeterministic.</p>
 
-1.  Install [Zoom](https://zoom.us/).
-2.  Find the meeting link on the [#meetup-weekly-dev-chat](https://devedmonton.slack.com/archives/C01LZQ6550V) channel on Dev Edmonton [Slack](https://devedmonton.com/#about-our-slack).
-3.  Alternatively find the link on Weekly Dev Chat event on the Edmonton Unlimited's Meetup [group](https://www.meetup.com/startupedmonton/).
+  <section class="cta">
+    <div class="eyebrow"><span class="dot"></span>Preferred way to join</div>
+    <div class="cta-inner">
+      <div>
+        <h3>Luma Calendar</h3>
+        <p>Follow the WDC Luma calendar to get notified of upcoming events. Register for an event to get the Zoom link for virtual events or address for the IRL event.</p>
+      </div>
+      <div class="cta-actions">
+        <a class="btn primary" href="https://luma.com/weeklydevchat">Luma Calendar</a>
+      </div>
+    </div>
+  </section>
 
-#### The longer version
+  <h2>Alternatives</h2>
 
-The Weekly Dev Chat uses [Zoom](https://zoom.us/). If you don't want to install Zoom you can use it directly in your [browser](https://support.zoom.us/hc/en-us/articles/201362593-Join-My-Meeting-via-Browser) instead.
+  Don't like Luma or you are already on Meetup or the Dev Edmonton Slack? Then use one of the options below.
 
-The recommended way for getting the link for the Zoom meeting is by joining the Dev Edmonton [Slack](https://devedmonton.com/#about-our-slack). The link will be posted every week in the #meetup-weekly-dev-chat channel. The #meetup-weekly-dev-chat channel is where you can post an initial topic suggestion. It is also used to continue the discussion once the chat is over.
+  <section class="tiles">
+    <div class="tile">
+      <h3>Edmonton Unlimited on Meetup</h3>
+      <p>Join the group, find the Weekly Dev Chat event, and the link appears once you register. Good if Meetup is already how you keep track of events. <a href="https://www.meetup.com/startupedmonton/">Join the Meetup group</a></p>
+    </div>
+    <div class="tile">
+      <h3>Dev Edmonton Slack</h3>
+      <p>The link is posted every Tuesday in <code>#meetup-weekly-dev-chat</code>. It is also where topics get suggested and where the conversation keeps going afterwards. Free, and you don't have to live in Edmonton. <a href="https://devedmonton.com/#about-our-slack">Join the Slack</a></p>
+    </div>
+  </section>
 
-You can join the Dev Edmonton Slack even if you don't live in Edmonton and it's free to join. Details on how to join the Dev Edmonton Slack and the organization can be found on their [website](https://devedmonton.com/).
+  <h2>What the virtual chat is like</h2>
 
-A second option is to join the Edmonton Unlimited Meetup [group](https://www.meetup.com/startupedmonton/). Once you join the group look for the Weekly Dev Chat event and the Zoom link will be shown when you register for the event.
+  <section class="tiles">
+    <div class="tile">
+      <h3>Nothing to prepare</h3>
+      <p>A starter topic gets posted each week, but the conversation drifts wherever it wants to. You don't have to prepare anything.</p>
+    </div>
+    <div class="tile">
+      <h3>Cameras off is fine</h3>
+      <p>Cameras and mics are both optional. Listening quietly is a completely normal way to attend, and plenty of people do.</p>
+    </div>
+    <div class="tile">
+      <h3>Any experience level</h3>
+      <p>Students, career switchers, and people twenty years in all end up in the same call.</p>
+    </div>
+  </section>
 
-#### In-Real-Life (IRL) Events
+  <h2>In real life (IRL) events</h2>
+  <section class="tiles">
+    <div>
+      <p>We host IRL events in Edmonton, Alberta, Canada. They are announced on the same <a href="https://luma.com/weeklydevchat">Luma calendar</a> as the virtual events.</p>
+      <p>The IRL events include pair coding, capture the flag (CTF), watch parties, show and tell, hardware swaps, and workshops &mdash; anything goes as long as it's interactive and has audience participation.</p>
+    </div>
+  </section>
 
-We occasionally host in-person meetups in Edmonton. To stay up to date on IRL events, subscribe to our [Luma calendar](https://luma.com/weeklydevchat).
+  <h2>FAQ</h2>
+
+  <div class="qa">
+    <div><p class="q">Do I have to be in Edmonton?</p><p class="a">No. The Tuesday chat is virtual and open to anyone, anywhere. Only the occasional IRL events are Edmonton-based.</p></div>
+    <div><p class="q">Do I need to come every week?</p><p class="a">No. Show up when it works for you &mdash; a lot of people drop in every few weeks.</p></div>
+    <div><p class="q">Is it recorded?</p><p class="a">No. Nothing is recorded or published, so people can speak freely.</p></div>
+    <div><p class="q">What if I'm late?</p><p class="a">Join anyway. People come and go throughout the hour.</p></div>
+    <div><p class="q">Can I suggest a topic?</p><p class="a">Yes. Post it in <code>#meetup-weekly-dev-chat</code> on Dev Edmonton Slack, or just raise it during the chat.</p></div>
+  </div>
+</div>

docs/sponsors/index.md

@@ -4,31 +4,31 @@ hide:
 ---
 # Sponsors
 
-<div class="wdc-sponsors-page" markdown>
+<div class="wdc-page wdc-sponsors-page" markdown>
   <p class="lead">The Weekly Dev Chat is powered by community members like you!</p>
-  <section class="support">
-    <div class="support-card">
+  <section class="tiles">
+    <div class="tile">
       <h3>Show Up</h3>
       <p>Attending events is the best way to support the Weekly Dev Chat.  Bring your curiosity and be willing to share your knowledge and learn from others.</p>
     </div>
-    <div class="support-card">
+    <div class="tile">
       <h3>Spread the Word</h3>
       <p>Invite others who follow our values to an event.  Everyone and anyone is welcome as long as they are kind, supportive, and respectful of others.</p>
     </div>
-    <div class="support-card">
+    <div class="tile">
       <h3>Sponsor</h3>
       <p>Help keep the lights on and get things done with contributions of money, time, skills, or other resources.  Every little bit helps.</p>
     </div>
   </section>
 
-  <section class="become-sponsor">
+  <section class="cta">
     <div class="eyebrow"><span class="dot"></span> Want on this page?</div>
-    <div class="become-inner">
+    <div class="cta-inner">
       <div>
         <h3>Thank you to our Current and Past Sponsors!</h3>
         <p>Email us if you have any questions or would like to make non-financial contributions.</p>
       </div>
-      <div class="become-ctas">
+      <div class="cta-actions">
         <a class="btn primary" href="https://buy.stripe.com/dRmaEY4HJ2xUgcG8PdfIs01">Sponsor</a>
         <a class="btn primary" href="mailto:chris@weeklydevchat.com">Email</a>
       </div>
@@ -48,27 +48,26 @@ hide:
           {% set s = sponsors.sponsors[id] %}
           {% set card_links = s.links if s.links else ([{'label': s.link_label or 'Website', 'url': s.link}] if s.link else []) %}
           <div class="sponsor-card" role="button" tabindex="0">
-            <div class="card-face card-front">
+            <div class="card-front">
               <div class="card-logo">
                 {% if s.image %}<img src="../assets/sponsors/{{ s.image }}" alt="{{ s.name }}">{% else %}<div class="card-logo-placeholder">{{ (s.name or 'Anonymous')[0] }}</div>{% endif %}
               </div>
               <div class="card-footer">
                 <span class="card-tier">{{ s.name or 'Sponsor' }}</span>
               </div>
             </div>
-            <div class="card-face card-back">
-              <div class="card-back-inner">
-                {% if s.tier %}<div class="card-back-tier">{{ s.tier }}</div>{% endif %}
-                <h4 class="card-back-name">{{ s.name }}</h4>
-                {% if s.description %}<p class="card-back-desc">{{ s.description }}</p>{% endif %}
-                {% if card_links %}
-                  <div class="card-back-links">
-                    {% for l in card_links %}
-                      <a href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }} <span class="arrow">↗</span></a>
-                    {% endfor %}
-                  </div>
-                {% endif %}
-              </div>
+            <!-- Not rendered (see .card-back) — the modal script reads these. -->
+            <div class="card-back">
+              {% if s.tier %}<div class="card-back-tier">{{ s.tier }}</div>{% endif %}
+              <h4 class="card-back-name">{{ s.name }}</h4>
+              {% if s.description %}<p class="card-back-desc">{{ s.description }}</p>{% endif %}
+              {% if card_links %}
+                <div class="card-back-links">
+                  {% for l in card_links %}
+                    <a href="{{ l.url }}" target="_blank" rel="noopener">{{ l.label }} ↗</a>
+                  {% endfor %}
+                </div>
+              {% endif %}
             </div>
           </div>
       {% endfor %}

docs/stylesheets/extra.css

@@ -4,8 +4,6 @@
   letter-spacing: -0.02em;
   line-height: 1.1;
   color: var(--md-primary-fg-color, #009688);
-  border-bottom: none;
-  padding-bottom: 0;
 }
 
 .logo-article-img {

docs/stylesheets/page.css

@@ -0,0 +1,172 @@
+/* Shared page vocabulary — tokens plus the components used by more than one
+   page (join, sponsors). Scoped to .wdc-page so it can't leak onto the
+   host/past-host pages. Add .wdc-page to a page's wrapper div to opt in. */
+.wdc-page {
+  --paper: #fafafa;
+  --line: #e0e0e0;
+  --ink: #1a1a1a;
+  --ink-2: #5a5a5a;
+  --ink-3: #8a8a8a;
+  --teal: var(--md-primary-fg-color, #009688);
+  --teal-dark: #00766c;
+  --blue: var(--md-accent-fg-color, #448aff);
+  --radius: 14px;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+.wdc-page .lead {
+  font-size: clamp(22px, 2.5vw, 28px);
+  font-weight: 300;
+  line-height: 1.5;
+  color: var(--ink);
+  margin: 4px 0 12px;
+  max-width: 60ch;
+}
+
+/* Row of tiles. auto-fit collapses the empty tracks, so the column count
+   follows the tile count on its own — a section with two tiles, or one
+   paragraph of prose, needs no modifier class. Stacking below 900px still
+   needs the breakpoint: the content column is wide enough there that the
+   minmax floor alone would keep three tiles side by side. */
+.wdc-page .tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  padding: 20px 0;
+  margin: 16px 0 20px;
+  border-bottom: 1px solid var(--line);
+}
+.wdc-page .tile {
+  padding: 22px;
+  border-radius: var(--radius);
+  background: var(--paper);
+  border: 1px solid var(--line);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.wdc-page .tile:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+.wdc-page .tile h3 {
+  font-weight: 400;
+  font-size: 22px;
+  margin: 10px 0 8px;
+}
+.wdc-page .tile p {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: 15px;
+}
+.wdc-page .tile a {
+  font-weight: 500;
+}
+
+/* Full-width teal call-to-action banner */
+.wdc-page .cta {
+  margin: 20px 0;
+  padding: 40px;
+  border-radius: var(--radius);
+  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+.wdc-page .cta::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 80% 20%, rgba(68, 138, 255, 0.3), transparent 50%);
+  pointer-events: none;
+}
+.wdc-page .cta-inner {
+  display: grid;
+  grid-template-columns: 1.4fr auto;
+  gap: 32px;
+  align-items: center;
+  position: relative;
+}
+.wdc-page .cta h3 {
+  font-weight: 300;
+  font-size: 36px;
+  margin: 14px 0 10px;
+  line-height: 1.15;
+  color: #fff;
+}
+.wdc-page .cta p {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 48ch;
+}
+.wdc-page .cta-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.wdc-page .eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 999px;
+}
+.wdc-page .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--blue);
+  border: 1px solid #fff;
+  box-shadow: 0 0 0 3px rgba(68, 138, 255, 0.3);
+}
+
+.wdc-page .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 48px;
+  border-radius: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+  font-size: 17px;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background 0.15s, border-color 0.15s;
+}
+.wdc-page .btn.primary { background: var(--blue); color: #fff; }
+.wdc-page .btn.primary:hover { background: #2979ff; border-color: #fff; }
+
+/* Question/answer list */
+.wdc-page .qa {
+  display: grid;
+  gap: 18px;
+  margin: 20px 0 8px;
+}
+.wdc-page .qa > div {
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--line);
+}
+.wdc-page .qa > div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.wdc-page .qa .q {
+  margin: 0 0 4px;
+  font-weight: 500;
+  color: var(--ink);
+}
+.wdc-page .qa .a {
+  margin: 0;
+  color: var(--ink-2);
+}
+
+@media (max-width: 900px) {
+  .wdc-page .tiles { grid-template-columns: 1fr; }
+  .wdc-page .cta { padding: 28px; }
+  .wdc-page .cta h3 { font-size: 28px; }
+  .wdc-page .cta-inner { grid-template-columns: 1fr; }
+  .wdc-page .cta-actions { flex-direction: row; }
+}