feat(web): editorial slow-food redesign across the whole UI

A complete visual + tonal pass on every page. Replaces the previous shadcn
slate+emerald defaults with an Italian editorial aesthetic — refined slow-food
magazine crossed with a luxury cookbook. Mobile-first, premium, distinctly
Italian, no generic AI-wellness vibes.

Tokens:
- New palette: carta (cream parchment), ink (warm black), oliva (deep olive),
  pomodoro (terracotta), oro (aged gold), rule (hairline). All exposed as
  HSL CSS variables and as Tailwind colors. Dark mode = oxblood/cream.
- Type stack: Fraunces (variable, optical-sizing auto, italic + roman) for
  display / Inter Tight for body / JetBrains Mono with tnum + zero for
  numerals. Replaces Inter-only setup.
- Font feature settings on body and .font-display for ligatures, opsz
  and stylistic alternates.
- Subtle SVG paper grain on body::before (multiply blend, 4.5% opacity).
- 2px radius default (editorial print, not soft web).

Component primitives:
- Button — mono uppercase 11px tracking-widest, sharp corners, hover
  inverts ink/cream. Variants tuned for the new palette.
- Input — bottom-only hairline, Fraunces 18px text, italic placeholders.
- Label — tiny mono caps, ink-soft.
- Card — top + bottom hairlines only, no shadow; Fraunces title and italic
  description; CardFooter has its own top-rule.
- Select — same hairline-bottom trigger as Input; SelectContent panel uses
  a hard 6px offset shadow for an editorial print stamp feel.

New component:
- Masthead — top-of-page newspaper header with thick top-rule, KP wordmark
  with terracotta dot, "ANNO I · N. 0X" issue label, today's date in Italian.

Pages:
- / — Massive Fraunces "Una keto italiana, sostenibile." with terracotta
  dot, italic Fraunces tagline, right-column nav with category eyebrows
  (CUCINA / PROFILO) and arrow rule. Bottom: "Tre principi" with roman
  numerals I/II/III. Disclaimer in italic.
- /sign-in — "CAPITOLO II / Bentornato in cucina." split layout.
- /sign-up — "CAPITOLO III / Inizia il tuo percorso." Italian copy refresh.
- /welcome — Editor's-letter layout with the four PRD §14.3 points as a
  Roman-numeral list; custom hand-drawn check icon for the consent boxes.
- /profile — 7/5 split: form on the left (anagrafica + peso group), summary
  on the right with massive mono numerals (BMR, TDEE, multiplier) and italic
  "kcal" units; empty-state copy until the profile is saved.
- /plan — "CAPITOLO V / Il tuo piano." Italian-formatted week range. Each
  day has a Roman-numeral mark (I-VII), Fraunces day name, mono kcal total.
  Each meal slot uses Roman numerals (I-IV) for the meal index.
- Cookie banner — refreshed to match (italic Fraunces, "PRIVACY" eyebrow,
  outline button).

Italian copy refresh:
- Headline: "Una keto italiana, sostenibile" (was "KetoPath")
- Tagline: narrative arc instead of marketing line
- CTAs: "Iscriviti" / "Accedi" (was "Inizia gratis" / "Scopri come funziona")
- Greeting: "Buongiorno, {name}." (was "Accesso effettuato come ...")
- Profile: weight columns become Iniziale / Attuale / Obiettivo under a
  "Peso (chilogrammi)" group eyebrow.

E2E updated to match: home looks for the new headline and CTA labels;
profile uses the new "Come ti chiami" / "Iniziale / Attuale / Obiettivo"
labels and asserts numeric values separately from the "kcal" unit span.

All 4 specs pass. Verified visually at 1280×900 and 375×812.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/app/[locale]/plan/page.tsx

@@ -3,8 +3,8 @@ import { redirect } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
 
+import { Masthead } from '@/components/masthead';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { getServerSession } from '@/lib/auth';
 
 import { fetchCurrentPlan, regeneratePlan } from './actions';
@@ -27,27 +27,58 @@ export default async function PlanPage({ params: { locale } }: { params: { local
   return <PlanPageContent plan={plan} />;
 }
 
+const ITALIAN_DATE = new Intl.DateTimeFormat('it-IT', {
+  day: 'numeric',
+  month: 'long',
+  year: 'numeric',
+});
+
+function formatWeek(weekStart: string): string {
+  const start = new Date(`${weekStart}T00:00:00`);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 6);
+  const startStr = new Intl.DateTimeFormat('it-IT', { day: 'numeric', month: 'long' }).format(
+    start,
+  );
+  const endStr = ITALIAN_DATE.format(end);
+  return `${startStr} – ${endStr}`;
+}
+
 function PlanPageContent({ plan }: { plan: Awaited<ReturnType<typeof fetchCurrentPlan>> }) {
   const t = useTranslations('Plan');
 
   return (
-    <main className="mx-auto min-h-screen max-w-5xl px-4 py-10 sm:px-6">
-      <Card>
-        <CardHeader className="flex flex-row items-start justify-between gap-4">
-          <div>
-            <CardTitle>{t('title')}</CardTitle>
-            <CardDescription>
-              {plan ? t('weekOf', { date: plan.weekStart }) : t('noPlan')}
-            </CardDescription>
+    <div className="mx-auto min-h-screen max-w-6xl px-6 sm:px-10">
+      <Masthead issueLabel="N. 05 — Cucina" />
+      <main className="py-12 sm:py-16">
+        <div className="grid items-end gap-6 md:grid-cols-12">
+          <div className="md:col-span-8">
+            <p className="editorial-eyebrow animate-fade-up">Capitolo V</p>
+            <h1 className="font-display text-display text-ink animate-fade-up mt-3 font-medium leading-[0.95] tracking-tight [animation-delay:120ms]">
+              {t('title')}
+              <span className="text-pomodoro">.</span>
+            </h1>
+            <p className="font-display text-ink-soft animate-fade-up mt-5 max-w-2xl text-xl italic leading-snug [animation-delay:240ms]">
+              {plan ? formatWeek(plan.weekStart) : t('noPlan')}
+            </p>
           </div>
-          <form action={regeneratePlan}>
-            <Button type="submit" variant={plan ? 'outline' : 'default'} size="sm">
-              {plan ? t('regenerate') : t('generate')}
-            </Button>
-          </form>
-        </CardHeader>
-        <CardContent>{plan ? <PlanWeek plan={plan} /> : null}</CardContent>
-      </Card>
-    </main>
+          <div className="animate-fade-up [animation-delay:360ms] md:col-span-4 md:text-right">
+            <form action={regeneratePlan}>
+              <Button type="submit" variant={plan ? 'outline' : 'default'} size="lg">
+                {plan ? t('regenerate') : t('generate')}
+              </Button>
+            </form>
+          </div>
+        </div>
+
+        <div className="rule animate-rule-in my-10 [animation-delay:420ms]" />
+
+        {plan ? (
+          <div className="animate-fade-up [animation-delay:480ms]">
+            <PlanWeek plan={plan} />
+          </div>
+        ) : null}
+      </main>
+    </div>
   );
 }

apps/web/src/app/[locale]/plan/plan-week.tsx

@@ -17,11 +17,11 @@ const DAY_KEYS = [
   'saturday',
   'sunday',
 ] as const;
+const DAY_NUMERAL = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'];
 
 export function PlanWeek({ plan }: { plan: CurrentPlan }) {
   const t = useTranslations('Plan');
 
-  // Group slots by day for quick lookup.
   const byDay = new Map<number, PlanSlot[]>();
   for (const slot of plan.slots) {
     if (!byDay.has(slot.dayOfWeek)) byDay.set(slot.dayOfWeek, []);
@@ -29,25 +29,31 @@ export function PlanWeek({ plan }: { plan: CurrentPlan }) {
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-14">
       {DAY_KEYS.map((dayKey, idx) => {
         const slots = (byDay.get(idx) ?? []).sort(
           (a, b) => MEAL_ORDER.indexOf(a.meal) - MEAL_ORDER.indexOf(b.meal),
         );
         const dayKcal = slots.reduce((sum, s) => sum + (s.selected?.kcal ?? 0), 0);
         return (
-          <section key={dayKey} aria-labelledby={`day-${dayKey}`}>
-            <header className="mb-2 flex items-baseline justify-between">
-              <h2 id={`day-${dayKey}`} className="text-lg font-semibold">
+          <section key={dayKey} aria-labelledby={`day-${dayKey}`} className="space-y-5">
+            <header className="border-ink/15 grid items-baseline gap-2 border-b pb-3 sm:grid-cols-[auto_1fr_auto]">
+              <span className="font-display text-pomodoro text-xl font-medium italic leading-none">
+                {DAY_NUMERAL[idx]}
+              </span>
+              <h2
+                id={`day-${dayKey}`}
+                className="font-display text-ink text-2xl font-medium leading-none tracking-tight sm:text-3xl"
+              >
                 {t(`days.${dayKey}`)}
               </h2>
-              <span className="text-muted-foreground text-xs">
+              <span className="text-ink-soft font-mono text-[11px] uppercase tracking-widest">
                 {t('dayTotal', { kcal: Math.round(dayKcal) })}
               </span>
             </header>
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
-              {slots.map((slot) => (
-                <SlotCard key={slot.id} slot={slot} />
+            <div className="divide-ink/10 grid grid-cols-1 divide-y sm:grid-cols-2 sm:gap-x-8 sm:divide-y-0 lg:grid-cols-4 lg:gap-x-6">
+              {slots.map((slot, slotIdx) => (
+                <SlotCard key={slot.id} slot={slot} index={slotIdx} />
               ))}
             </div>
           </section>
@@ -57,7 +63,9 @@ export function PlanWeek({ plan }: { plan: CurrentPlan }) {
   );
 }
 
-function SlotCard({ slot }: { slot: PlanSlot }) {
+const MEAL_ROMAN = ['I', 'II', 'III', 'IV'];
+
+function SlotCard({ slot, index }: { slot: PlanSlot; index: number }) {
   const t = useTranslations('Plan');
   const [open, setOpen] = useState(false);
   const [pending, startTransition] = useTransition();
@@ -70,32 +78,42 @@ function SlotCard({ slot }: { slot: PlanSlot }) {
   }
 
   return (
-    <article className="border-border bg-card flex flex-col rounded-md border p-3">
-      <p className="text-muted-foreground text-xs uppercase tracking-wider">
-        {t(`meals.${slot.meal}`)}
-      </p>
-      <p className="mt-1 text-sm font-medium leading-tight">
+    <article className="group relative flex flex-col gap-3 py-5 sm:py-2">
+      <header className="flex items-baseline justify-between gap-3">
+        <p className="editorial-eyebrow flex items-baseline gap-2">
+          <span className="font-display not-italic-children text-pomodoro text-base italic">
+            {MEAL_ROMAN[index]}
+          </span>
+          <span>{t(`meals.${slot.meal}`)}</span>
+        </p>
+      </header>
+      <p className="font-display text-ink text-lg font-medium leading-tight">
         {slot.selected?.name ?? t('noRecipe')}
       </p>
       {slot.selected ? (
-        <p className="text-muted-foreground mt-1 text-xs">{Math.round(slot.selected.kcal)} kcal</p>
+        <p className="text-ink-soft font-mono text-xs tracking-tight">
+          {Math.round(slot.selected.kcal)}{' '}
+          <span className="font-display text-[10px] italic">kcal</span>
+        </p>
       ) : null}
       {slot.alternatives.length > 0 ? (
-        <div className="mt-2">
+        <div className="mt-1">
           <button
             type="button"
             onClick={() => setOpen((v) => !v)}
-            className="text-primary text-xs hover:underline"
+            className="text-ink-soft decoration-pomodoro hover:text-ink font-mono text-[10px] uppercase tracking-widest underline decoration-[1.5px] underline-offset-[5px] transition-colors"
           >
             {open ? t('hideAlternatives') : t('showAlternatives', { n: slot.alternatives.length })}
           </button>
           {open ? (
-            <ul className="mt-2 space-y-1">
+            <ul className="border-ink/15 mt-3 space-y-2 border-t pt-3">
               {slot.alternatives.map((alt) => (
-                <li key={alt.id} className="flex items-center justify-between gap-2">
-                  <span className="text-xs">
+                <li key={alt.id} className="flex items-baseline justify-between gap-2">
+                  <span className="font-display text-ink text-sm leading-snug">
                     {alt.name}{' '}
-                    <span className="text-muted-foreground">({Math.round(alt.kcal)} kcal)</span>
+                    <span className="text-ink-dim font-mono text-[10px]">
+                      {Math.round(alt.kcal)} kcal
+                    </span>
                   </span>
                   <Button
                     type="button"