fix(home): single-column hero, monochrome action icons, drop countdown

Tim 2026-06-14 hotfix on the home page that shipped 3 commits ago:

The quick-actions row was pinned into the narrow right-column
'ctas' grid area on desktop (240-280px wide). On mobile that
column got squished into the right half of the viewport, the
4 buttons stacked weirdly, and the headline collapsed because
the parent two-column grid had nowhere to put it. Emoji icons
(🏟️📅👥📊) rendered as colourful native emoji on iOS/Android
which clashed with the rest of the app's monochrome visual
language.

Fix:
  - Hero grid simplified to single-column at >=880px. Headline,
    lede, then the actions row stack full-width. No more
    'headline | ctas' two-column layout that pushed the
    actions into a sidebar.
  - Quick-actions row spans the full hero width: grid-column:
    1 / -1, 2x2 on mobile, 4-up at >=720px.
  - Emoji icons swapped for the monochrome SVG icons we already
    use in the slide-out drawer and bottom dock (PredictIcon,
    CalendarIcon, GroupsIcon, BarChartIcon). Same visual
    language end-to-end.
  - Removed the gold 'primary' tone on My picks. All four
    buttons render with the same neutral glass treatment per
    Tim's 'not colourful'.
  - Countdown timer block removed: tournament is in flight,
    the 00:00:00:00 readout was just visual noise.

Going straight to main since this is a regression on a live
surface that just shipped.

Signed-off-by: Tim Thomas <0800tim@gmail.com>

Author: 0800tim

apps/web/app/home.css

@@ -157,15 +157,18 @@
 
 @media (min-width: 880px) {
   .vt-home-hero-top {
-    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 280px);
+    /* Tim 2026-06-14: single column on desktop now. The 4-button
+     * quick-actions row replaces the right-column ctas, so the
+     * headline + lede stack full-width and actions sit beneath
+     * them as a clean strip. Drops the old two-column hero grid. */
+    grid-template-columns: 1fr;
     grid-template-areas:
-      "headline ctas"
-      "lede     lede";
-    column-gap: clamp(32px, 5vw, 64px);
+      "headline"
+      "lede"
+      "actions";
     row-gap: 24px;
   }
   .vt-home-headline { grid-area: headline; }
-  .vt-home-hero-ctas { grid-area: ctas; align-self: end; padding-bottom: 6px; }
   /* Tim 2026-05-29: the lede slot is now a wrapper around two <p>s so
    * both paragraphs (intro + immutability) share one grid cell and
    * stack as normal block flow instead of colliding in the same cell. */
@@ -1664,72 +1667,67 @@
  * marketing-era 3-CTA row now that players need the daily
  * destinations front + centre. Sits in the same `ctas` grid area
  * on the desktop hero. */
+/* Tim 2026-06-14 v2: pull the actions out of the narrow `ctas`
+ * grid column. They now span the full hero width as a single row
+ * of buttons (2x2 on mobile, 4-up at ≥720px). Monochrome icons
+ * from the drawer/dock; no gold primary tile — Tim's "not
+ * colourful" + match the burger menu visual language. */
 .vt-home-hero-actions {
+  /* Span every column of the hero's grid so it doesn't get pinned
+   * into the narrow right-hand ctas slot. */
+  grid-column: 1 / -1;
+  grid-area: actions;
+  align-self: end;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   width: 100%;
+  margin-top: 18px;
 }
 @media (min-width: 720px) {
   .vt-home-hero-actions {
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
   }
 }
-@media (min-width: 960px) {
-  /* On desktop the actions sit in the hero's right column (grid-area
-   * "ctas"). Stay 2x2 there because the column is narrow; revert to
-   * the 4-col row at large width only via the parent's media query. */
-  .vt-home-hero-actions {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (min-width: 1200px) {
-  .vt-home-hero-actions {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.vt-home-hero-actions { grid-area: ctas; align-self: end; padding-bottom: 6px; }
 
 .vt-home-action-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 14px 8px;
-  min-height: 78px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.06);
+  padding: 12px 8px;
+  min-height: 68px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.10);
-  color: #fff;
+  color: rgba(231, 234, 243, 0.94);
   text-decoration: none;
-  font: 700 0.92rem/1.1 "Inter", -apple-system, system-ui, sans-serif;
+  font: 700 0.86rem/1.1 "Inter", -apple-system, system-ui, sans-serif;
   text-align: center;
   transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
 }
 .vt-home-action-btn:hover {
-  background: rgba(255, 255, 255, 0.10);
+  background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.22);
 }
 .vt-home-action-btn:active {
   transform: scale(0.98);
 }
-.vt-home-action-btn[data-tone="primary"] {
-  background: linear-gradient(180deg, #fbbf24, #f59e0b);
-  border-color: #fcd34d;
-  color: #1a1206;
-  box-shadow: 0 6px 18px rgba(251, 191, 36, 0.30);
-}
-.vt-home-action-btn[data-tone="primary"]:hover {
-  background: linear-gradient(180deg, #fcd34d, #fbbf24);
-}
 .vt-home-action-icon {
-  font-size: 1.6rem;
-  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  color: rgba(231, 234, 243, 0.94);
+}
+.vt-home-action-icon svg {
+  width: 100%;
+  height: 100%;
 }
 .vt-home-action-label {
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: 0.01em;
 }

apps/web/app/page.tsx

@@ -25,6 +25,12 @@ import { getTranslations } from "next-intl/server";
 import { AppShell } from "@/components/shell";
 import { RevealOnScroll } from "@/components/motion/RevealOnScroll";
 import { CountdownBanner } from "@/components/ui";
+import {
+  PredictIcon,
+  CalendarIcon,
+  GroupsIcon,
+  BarChartIcon,
+} from "@/components/shell/icons";
 
 import "./home.css";
 
@@ -208,30 +214,40 @@ export default async function HomePage(): Promise<JSX.Element> {
                 <span className="vt-home-hero-line">{headlineC}</span>
               </h1>
 
-              {/* Tim 2026-06-13: tournament-in-flight quick actions.
-                * Replaces the previous 3-CTA marketing row (predict /
-                * pool / bot-arena) with the four daily destinations
-                * players need now the WC has kicked off: their picks,
-                * the pickable schedule, pools, and the leaderboard.
-                * Layout: 2x2 grid on mobile, single row on desktop. */}
-              <div className="vt-home-hero-actions" data-count="4">
-                <Link href="/world-cup-2026" className="vt-home-action-btn" data-tone="primary">
-                  <span className="vt-home-action-icon" aria-hidden="true">🏟️</span>
+              {/* Tim 2026-06-14: tournament-in-flight quick actions.
+                * Overlaid on the hero banner full-width; 2x2 grid on
+                * mobile, single row on desktop. Monochrome icons match
+                * the drawer + dock so the visual language is consistent.
+                * Not colourful per Tim. */}
+              <nav
+                className="vt-home-hero-actions"
+                aria-label="Quick actions"
+              >
+                <Link href="/world-cup-2026" className="vt-home-action-btn">
+                  <span className="vt-home-action-icon" aria-hidden="true">
+                    <PredictIcon />
+                  </span>
                   <span className="vt-home-action-label">{actionMyPicks}</span>
                 </Link>
                 <Link href="/world-cup-2026/calendar" className="vt-home-action-btn">
-                  <span className="vt-home-action-icon" aria-hidden="true">📅</span>
+                  <span className="vt-home-action-icon" aria-hidden="true">
+                    <CalendarIcon />
+                  </span>
                   <span className="vt-home-action-label">{actionSchedule}</span>
                 </Link>
                 <Link href="/pools" className="vt-home-action-btn">
-                  <span className="vt-home-action-icon" aria-hidden="true">👥</span>
+                  <span className="vt-home-action-icon" aria-hidden="true">
+                    <GroupsIcon />
+                  </span>
                   <span className="vt-home-action-label">{actionPools}</span>
                 </Link>
                 <Link href="/leaderboard" className="vt-home-action-btn">
-                  <span className="vt-home-action-icon" aria-hidden="true">📊</span>
+                  <span className="vt-home-action-icon" aria-hidden="true">
+                    <BarChartIcon />
+                  </span>
                   <span className="vt-home-action-label">{actionLeaderboard}</span>
                 </Link>
-              </div>
+              </nav>
 
               {/* Tim 2026-06-05: single lede paragraph replaces the
                 * previous "Nobody will correctly predict..." + global
@@ -266,14 +282,10 @@ export default async function HomePage(): Promise<JSX.Element> {
                   <span className="vt-home-stat-label">{statClaimToGlory}</span>
                 </li>
               </ul>
-              <div className="vt-home-stats-countdown">
-                <CountdownBanner
-                  targetUtc={WC_2026_KICKOFF_UTC}
-                  eyebrow={countdownEyebrow}
-                  title={countdownTitle}
-                  compact
-                />
-              </div>
+              {/* Tim 2026-06-14: countdown removed now that the
+                * tournament is in flight. The stat-strip alone reads
+                * cleanly. CountdownBanner import kept for the other
+                * surfaces that still use it. */}
             </div>
           </div>
         </section>