docs: add expandable detail panels for completed handbook sections (click to reveal)

businesses/sns-hospitality-group/docs/handbook-tracker.html

@@ -79,6 +79,21 @@ tr:last-child td{border-bottom:none}
 .next-steps ul{padding-left:20px}
 .next-steps li{margin-bottom:8px}
 
+.expand-num{cursor:pointer;color:var(--gold);font-weight:700;text-decoration:underline;transition:color .2s}
+.expand-num:hover{color:var(--brown)}
+.section-detail{display:none;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:8px;padding:20px 24px;margin:0 0 4px;animation:fadeIn .3s}
+.section-detail.open{display:block}
+.section-detail h3{color:var(--brown);font-size:1rem;margin:0 0 12px}
+.section-detail h4{color:var(--taupe);font-size:.88rem;margin:16px 0 8px}
+.section-detail p,.section-detail li{font-size:.88rem;margin-bottom:6px}
+.section-detail ul{padding-left:20px}
+.section-detail .principle{background:var(--cream);border-radius:6px;padding:14px 18px;margin:10px 0}
+.section-detail .principle strong{color:var(--brown)}
+.section-detail .looks-like{color:var(--green);font-size:.82rem}
+.section-detail .falls-short{color:var(--attorney-border);font-size:.82rem}
+.section-detail .close-btn{display:inline-block;margin-top:12px;font-size:.8rem;color:var(--muted);cursor:pointer;text-decoration:underline}
+@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+
 footer{text-align:center;color:var(--taupe);font-size:.78rem;padding:40px 24px 20px}
 
 @media print{
@@ -136,26 +151,133 @@ footer{text-align:center;color:var(--taupe);font-size:.78rem;padding:40px 24px 2
 <tr><th>#</th><th>Section</th><th>Owner</th><th>Status</th><th>Notes</th></tr>
 
 <tr class="status-done">
-  <td>1</td>
+  <td><span class="expand-num" onclick="toggleDetail('detail-1')">1</span></td>
   <td>Welcome to The Daily Pour</td>
   <td><span class="badge badge-done">Done</span></td>
   <td>Complete</td>
   <td>Brand identity, who we are, what employees are joining</td>
 </tr>
+<tr><td colspan="5" style="padding:0;border:none">
+<div class="section-detail" id="detail-1">
+  <h3>Section 1 — Welcome to The Daily Pour</h3>
+  <p>This section establishes who we are, what employees are joining, and what we stand for from day one.</p>
+  <h4>What We Communicate</h4>
+  <ul>
+    <li><strong>Who we are:</strong> A mobile coffee trailer fleet serving premium drinks with warmth, consistency, and community pride.</li>
+    <li><strong>What you're joining:</strong> Not just a job — a brand that's building something bigger. Every person on our team represents The Daily Pour.</li>
+    <li><strong>Our expectations:</strong> Pride in the product. Quality without shortcuts. Consistency every single time. Teamwork over ego. Ownership of your role. Cleanliness as a standard, not a reminder. The customer experience above all else.</li>
+  </ul>
+  <h4>The Tone</h4>
+  <p>Warm but direct. We welcome you like family, but we also tell you upfront — this isn't casual work. We hold a standard, and everyone who wears the apron is expected to meet it.</p>
+  <span class="close-btn" onclick="toggleDetail('detail-1')">Close</span>
+</div>
+</td></tr>
+
 <tr class="status-done">
-  <td>2</td>
+  <td><span class="expand-num" onclick="toggleDetail('detail-2')">2</span></td>
   <td>The Five Daily Pour Principles</td>
   <td><span class="badge badge-done">Done</span></td>
   <td>Complete</td>
   <td>Core values with shift examples + customer impact</td>
 </tr>
+<tr><td colspan="5" style="padding:0;border:none">
+<div class="section-detail" id="detail-2">
+  <h3>Section 2 — The Five Daily Pour Principles</h3>
+
+  <div class="principle">
+    <strong>1. Pour With Excellence Daily</strong><br>
+    <em>"If our name is on it, make it worth serving."</em>
+    <p style="margin-top:8px">Every drink, every interaction, every detail reflects the brand. Excellence isn't perfection — it's caring enough to do it right.</p>
+    <p class="looks-like"><strong>Looks like:</strong> Remaking a drink that doesn't meet standard without being asked. Wiping the counter between customers. Tasting a new batch to make sure it's right.</p>
+    <p class="falls-short"><strong>Falling short:</strong> Serving a drink you know isn't right. Cutting corners because it's slow. Saying "good enough" when it isn't.</p>
+  </div>
+
+  <div class="principle">
+    <strong>2. Keep the Pour Consistent</strong><br>
+    <em>"Every customer deserves the same Daily Pour, every time."</em>
+    <p style="margin-top:8px">Consistency builds trust. The Monday morning regular and the first-time visitor should get the exact same quality.</p>
+    <p class="looks-like"><strong>Looks like:</strong> Following recipes exactly. Using timers. Measuring shots. Same greeting, same care, regardless of the rush.</p>
+    <p class="falls-short"><strong>Falling short:</strong> Eyeballing measurements. Skipping steps when busy. Giving regulars better service than new faces.</p>
+  </div>
+
+  <div class="principle">
+    <strong>3. Own Your Pour Daily</strong><br>
+    <em>"See it. Own it. Make it right."</em>
+    <p style="margin-top:8px">If something is wrong, don't walk past it. Don't wait to be told. Ownership means you act because it's your trailer, your team, your brand.</p>
+    <p class="looks-like"><strong>Looks like:</strong> Picking up trash that isn't yours. Flagging a low supply before it runs out. Admitting a mistake and fixing it immediately.</p>
+    <p class="falls-short"><strong>Falling short:</strong> "That's not my job." Waiting for someone else to notice. Hiding an error instead of correcting it.</p>
+  </div>
+
+  <div class="principle">
+    <strong>4. Pour Together Daily</strong><br>
+    <em>"Different roles. One team. One standard."</em>
+    <p style="margin-top:8px">Nobody is above any task. The Location Manager cleans. The barista restocks. We move as one unit, and we win or lose together.</p>
+    <p class="looks-like"><strong>Looks like:</strong> Helping a teammate who's in the weeds. Communicating during a rush. Celebrating a win together.</p>
+    <p class="falls-short"><strong>Falling short:</strong> Letting someone drown while you stand idle. Gossip. Blame. "I did my part" while the team struggles.</p>
+  </div>
+
+  <div class="principle">
+    <strong>5. A Clean Pour Is a Ready Pour</strong><br>
+    <em>"Clean daily. Prepare daily. Serve with pride."</em>
+    <p style="margin-top:8px">A clean trailer is a safe trailer. A prepped station is a fast station. Cleanliness isn't a chore — it's how we show respect for the space, the product, and the customer.</p>
+    <p class="looks-like"><strong>Looks like:</strong> Cleaning as you go. Restocking between rushes. Leaving the trailer better than you found it.</p>
+    <p class="falls-short"><strong>Falling short:</strong> Letting messes pile up. Leaving closing tasks for the next shift. Dirty equipment, sticky surfaces, cluttered stations.</p>
+  </div>
+
+  <span class="close-btn" onclick="toggleDetail('detail-2')">Close</span>
+</div>
+</td></tr>
+
 <tr class="status-done">
-  <td>3</td>
+  <td><span class="expand-num" onclick="toggleDetail('detail-3')">3</span></td>
   <td>Being Part of the Pour (Conduct Standards)</td>
   <td><span class="badge badge-done">Done</span></td>
   <td>Complete</td>
   <td>7 behavioral standards for daily work</td>
 </tr>
+<tr><td colspan="5" style="padding:0;border:none">
+<div class="section-detail" id="detail-3">
+  <h3>Section 3 — Being Part of the Pour Daily (Conduct Standards)</h3>
+  <p>These seven standards translate the principles into everyday employee behavior. They're non-negotiable — this is what "working here" actually means.</p>
+
+  <div class="principle">
+    <strong>1. Show Up Ready</strong>
+    <p style="margin-top:6px">Arrive on time, in uniform, mentally present. "Ready" means you can serve the first customer the moment we open — not that you're still setting up 10 minutes in.</p>
+  </div>
+
+  <div class="principle">
+    <strong>2. Wear the Pour Well Daily</strong>
+    <p style="margin-top:6px">Your appearance IS the brand. Clean uniform, name tag visible, grooming standards met. You're not just making coffee — you're representing something people trust.</p>
+  </div>
+
+  <div class="principle">
+    <strong>3. Speak With Care Daily</strong>
+    <p style="margin-top:6px">Words matter — to customers and to each other. Professional language, respectful tone, no profanity in earshot of customers. How you speak is how we're perceived.</p>
+  </div>
+
+  <div class="principle">
+    <strong>4. Own Your Part Daily</strong>
+    <p style="margin-top:6px">Know your role. Execute it. If something breaks or goes wrong, own it — don't hide it, don't blame. Accountability is the foundation of trust on this team.</p>
+  </div>
+
+  <div class="principle">
+    <strong>5. Protect the Atmosphere Daily</strong>
+    <p style="margin-top:6px">The energy inside this trailer is what customers feel. No drama. No negativity in the workspace. If you have an issue, take it to leadership — not to the person next to you during a rush.</p>
+  </div>
+
+  <div class="principle">
+    <strong>6. Phones Down, People First Daily</strong>
+    <p style="margin-top:6px">When you're on the clock, the phone is away. Not on the counter. Not "just checking a text." The customer in front of you is more important than anything on your screen.</p>
+  </div>
+
+  <div class="principle">
+    <strong>7. Breathe, Reset, Return Daily</strong>
+    <p style="margin-top:6px">Bad moments happen — a rude customer, a mistake, a stressful rush. You're allowed to feel it. Step away for 30 seconds if you need to. Breathe. Reset. Then come back and serve with the same energy you started with. We don't let one moment ruin the whole shift.</p>
+  </div>
+
+  <span class="close-btn" onclick="toggleDetail('detail-3')">Close</span>
+</div>
+</td></tr>
 
 <tr class="status-shared">
   <td>4</td>
@@ -316,5 +438,14 @@ footer{text-align:center;color:var(--taupe);font-size:.78rem;padding:40px 24px 2
 </footer>
 
 </div>
+<script>
+function toggleDetail(id){
+  var el=document.getElementById(id);
+  el.classList.toggle('open');
+  if(el.classList.contains('open')){
+    el.scrollIntoView({behavior:'smooth',block:'nearest'});
+  }
+}
+</script>
 </body>
 </html>