Three bugs and a lighter page: 367 KB of fonts became 57

THE BUGS.

Tapping any field zoomed the page in on iOS, because Safari does that to anything under 16px and `field`
was 14px. Every enquiry typed on a phone began by throwing the layout sideways. 16px on phones, the denser
size back at sm where no browser does it.

The focus ring vanished on the sage bands: one colour for the whole site, and sage-500 on sage-800 is
about 2.5:1 — under the 3:1 a focus indicator needs. It went missing exactly where the page's main calls
to action live. Cream on those sections now.

THE FONTS. AdBhashitha shipped 1605 glyphs to set 187 codepoints, as .woff, unpreloaded: 306 KB for the
face every heading uses, arriving after first paint so each page opened in a fallback serif and then
reflowed. Subset to Latin and the punctuation it actually has, every layout feature kept, compressed to
woff2: **306 KB → 8 KB**, and a pixel diff of the catering page before and after is exactly zero. The
script wordmark is only recompressed, never subset — its swashes come from alternates and the logo is the
one thing that must not change shape. All three faces are preloaded now and together weigh less than the
display face did alone.

THE REST OF THE LIST. The products filter wrapped to three rows on a phone with "PASTRIES" stranded on the
last; it is a scrolling snap row below sm, wrapping and centred above it, and the negative margin lets a
half-chip show at the edge so it is obviously scrollable. Chips are 44px tall and the gallery arrows 44px
wide — both were under the thumb-sized minimum. The contact form has a honeypot: a real field with a
plausible name, off-page rather than display:none, skipped by the tab key. A filled one gets the same
thank-you a person gets, because telling a bot it failed only teaches it to try again — and nothing is
recorded or sent, which the test proves against the enquiry table.

And the catering small print, which was loose text floating between two rows of cards, is a soft panel
belonging to the table above it.

61 tests. Verified at 390 and 900.

Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>

src/main/resources/static/js/gallery.js

@@ -14,7 +14,7 @@
   'use strict';
 
   var ARROW =
-    'absolute top-1/2 -translate-y-1/2 grid place-items-center h-10 w-10 rounded-full bg-bakery-900/40 ' +
+    'absolute top-1/2 -translate-y-1/2 grid place-items-center h-11 w-11 rounded-full bg-bakery-900/40 ' +
     'text-white backdrop-blur-sm transition hover:bg-bakery-900/60 focus:outline-none focus-visible:ring-2 ' +
     'focus-visible:ring-white';
 

src/main/resources/templates/catering.html

@@ -89,7 +89,7 @@
             three cards led to the same place, since an enquiry is about the table rather than the size,
             and the label read "Ask about the 15–20 people" on the tables whose sizes are headcounts.
           */-->
-          <div class="mt-8 measure text-center">
+          <div class="mt-8 measure rounded-panel border border-bakery-200/70 bg-bakery-50/60 px-6 py-6 text-center">
             <div th:if="${!#lists.isEmpty(table.notes)}">
               <h3 class="label text-bakery-500">Good to know</h3>
               <ul class="mt-3 space-y-2 text-sm text-bakery-700">

src/main/resources/templates/contact.html

@@ -43,6 +43,16 @@
           <input type="email" id="email" name="email" th:value="${email}" required
                  class="field">
         </div>
+        <!--/*
+          The spam trap. Not display:none — the crawlers that matter check for that — but positioned off
+          the page, skipped by the tab key and told not to autofill. A person never sees it; a bot fills in
+          every field it finds. See SiteController#submit for what happens then.
+        */-->
+        <div class="absolute left-[-9999px]" aria-hidden="true">
+          <label for="website">Website</label>
+          <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
+        </div>
+
         <div class="mb-4">
           <label class="block text-sm font-medium text-bakery-800 mb-2" for="message">Message</label>
           <textarea id="message" name="message" rows="5" required th:text="${message}"

src/main/resources/templates/fragments/head.html

@@ -18,8 +18,12 @@
 
   <!--/* Open the connection to the photo bucket while the head is still parsing. */-->
   <link rel="preconnect" th:href="${assetOrigin}" crossorigin>
-  <!--/* The wordmark is set in Raleway; without preloading it arrives late and the logo visibly reflows. */-->
+  <!--/* All three are above the fold — the wordmark, every heading, and the body — and all three together
+         are now smaller than the display face alone used to be. Without preloading, each page opens in
+         the fallback and then reflows into the brand. */-->
   <link rel="preload" as="font" type="font/woff2" href="/fonts/raleway-latin.woff2" crossorigin>
+  <link rel="preload" as="font" type="font/woff2" href="/fonts/LeJour-Script.woff2" crossorigin>
+  <link rel="preload" as="font" type="font/woff2" href="/fonts/AdBhashitha.woff2" crossorigin>
   <link th:if="${preload}" rel="preload" as="image" th:href="${preload}" fetchpriority="high">
 
   <title th:text="${title}">The Vine Coffeehouse + Bakery</title>

src/main/resources/templates/products.html

@@ -15,7 +15,7 @@
       forty items instead of whichever twelve the default filter showed. The filtering itself has always
       been the server's job — this just stopped pretending otherwise.
     */-->
-    <div class="flex flex-wrap justify-center gap-4 mb-12">
+    <div class="filter-row mb-12">
       <a th:each="category : ${categories}"
          th:href="${category == 'All' ? '/products' : '/products?category=' + #uris.escapeQueryParam(category)}"
          th:text="${category}"