Improve hero RSVP readability: whiter text, bordered buttons, a cohesive reason panel

The "are you in?" subtext and the In/Out button labels were both dim
grey (text-on-dark-dim/text-on-dark) against a photo backdrop -- bumped
to white, and gave both buttons a shared border (border-white/30) for
definition against the image, same colour on both so they read as a
matched pair.

The Out reason step (label, textarea, Cancel/Confirm) used to be loose
floating controls directly on the photo -- now wrapped in one bordered/
backed panel (same border colour as the In/Out pair) so it reads as one
cohesive control instead of scattered text and buttons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9

mobile/templates/mobile/_hero_rsvp.html

@@ -21,11 +21,16 @@
     Neither button is colour-coded (no green "In") -- nobody has answered yet
     at this point (that's the whole reason for the "are you in?" prompt), so
     a green default would misleadingly read as an already-recorded answer.
-    Both are the same neutral steel tone and, via min-w-0, exactly the same
+    Both are the same neutral steel tone with a shared border/white-Text
-    width -- flex-1 alone doesn't guarantee that once one button's label is
+    treatment for readability against the photo backdrop, and via min-w-0,
-    longer ("Out" vs "In"): flex items default to min-width:auto, so the
+    exactly the same width -- flex-1 alone doesn't guarantee that once one
-    longer label's own intrinsic width can win a bigger share of the row
+    button's label is longer ("Out" vs "In"): flex items default to
-    unless min-width is forced to 0 on both.
+    min-width:auto, so the longer label's own intrinsic width can win a
+    bigger share of the row unless min-width is forced to 0 on both.
+
+    The Out reason step (label + textarea + Cancel/Confirm) is wrapped in one
+    bordered/backed panel, same border colour as the In/Out pair -- reads as
+    one cohesive control rather than loose floating text and buttons.
 {% endcomment %}
 <div class="mt-3" x-data="{ asking: false, reason: '{{ hero_attendance.note|default:""|escapejs }}' }">
     <div class="flex gap-2" x-show="!asking">
@@ -33,20 +38,20 @@
             {% csrf_token %}
             <input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
             <input type="hidden" name="status" value="present">
-            <button class="btn w-full bg-steel text-on-dark" type="submit">{% trans "In" %}</button>
+            <button class="btn w-full border border-white/30 bg-steel text-white" type="submit">{% trans "In" %}</button>
         </form>
-        <button class="btn w-full min-w-0 flex-1 bg-steel text-on-dark" type="button" @click="asking = true">{% trans "Out" %}</button>
+        <button class="btn w-full min-w-0 flex-1 border border-white/30 bg-steel text-white" type="button" @click="asking = true">{% trans "Out" %}</button>
     </div>
 
-    <form x-show="asking" x-cloak method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}" hx-boost="false">
+    <form x-show="asking" x-cloak class="rounded-lg border border-white/30 bg-steel/60 p-3" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}" hx-boost="false">
         {% csrf_token %}
         <input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
         <input type="hidden" name="status" value="absent">
-        <label class="mb-1 block text-xs font-semibold text-on-dark-dim">{% trans "Reason -- only you and the coach can see this" %}</label>
+        <label class="mb-1 block text-xs font-semibold text-white">{% trans "Reason -- only you and the coach can see this" %}</label>
-        <textarea class="h-16 w-full rounded-lg border border-steel bg-steel p-2 text-sm text-white placeholder:text-on-dark-dim" name="note" x-model="reason" required minlength="2" placeholder="{% trans "e.g. sick, family event..." %}"></textarea>
+        <textarea class="h-16 w-full rounded-lg border border-white/20 bg-black/20 p-2 text-sm text-white placeholder:text-on-dark" name="note" x-model="reason" required minlength="2" placeholder="{% trans "e.g. sick, family event..." %}"></textarea>
         <div class="mt-2 flex gap-2">
-            <button class="btn flex-1 bg-steel text-on-dark" type="button" @click="asking = false">{% trans "Cancel" %}</button>
+            <button class="btn flex-1 border border-white/30 bg-steel text-white" type="button" @click="asking = false">{% trans "Cancel" %}</button>
-            <button class="btn btn-dark flex-1" type="submit">{% trans "Confirm" %}</button>
+            <button class="btn btn-dark flex-1 border border-white/30" type="submit">{% trans "Confirm" %}</button>
         </div>
     </form>
 </div>

mobile/templates/mobile/home.html

@@ -58,7 +58,7 @@
                             <p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% trans "Replies are closed for this event" %}</p>
                             <span class="pill pill-neutral mt-2">{{ hero_attendance.get_status_display }}</span>
                         {% else %}
-                            <p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} &mdash; are you in?{% endblocktrans %}</p>
+                            <p class="mt-3 font-display text-xs font-extrabold text-white uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} &mdash; are you in?{% endblocktrans %}</p>
                             {% include "mobile/_hero_rsvp.html" %}
                         {% endif %}
                     </div>

static/css/app.css

@@ -4564,6 +4564,21 @@
   .border-warning {
     border-color: var(--color-warning);
   }
+  .border-white {
+    border-color: var(--color-white);
+  }
+  .border-white\/20 {
+    border-color: color-mix(in srgb, #fff 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+  .border-white\/30 {
+    border-color: color-mix(in srgb, #fff 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
   .border-l-info {
     border-left-color: var(--color-info);
   }
@@ -4603,6 +4618,15 @@
   .bg-base-200 {
     background-color: var(--color-base-200);
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-black\/20 {
+    background-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
   .bg-info {
     background-color: var(--color-info);
   }