longevity: il guscio della piattaforma, senza semaforo sui punteggi

2026-08-22 13:33:21 +02:00
parent 779aef32e6
commit 34c66ca438
4 changed files with 176 additions and 0 deletions
@@ -0,0 +1,47 @@
+---
+// Layout della piattaforma Longevity. Come Stress Index: token, font e palette del sito,
+// senza Header e Footer pubblici — l'area è riservata e non va mai indicizzata.
+// A differenza di Stress Index (barra laterale con sette voci, giusta per chi ci lavora
+// dentro) qui i pubblici sono due, e uno non è staff: il cliente entra tre o quattro
+// volte l'anno a leggere il proprio referto, non gli serve l'arredamento di uno
+// strumento di lavoro. Il layout prevede due forme:
+// - "referto": una colonna che scorre, senza navigazione (questo task)
+// - "gestionale": barra laterale come Stress Index (arriva col piano del gestionale)
+import '@fontsource/montserrat/400.css';
+import '@fontsource/montserrat/500.css';
+import '@fontsource/montserrat/600.css';
+import '@fontsource/open-sans/400.css';
+import '@fontsource/open-sans/600.css';
+import '../styles/global.css';
+import '../styles/longevity.css';
+
+interface Props {
+  title: string;
+  /** Voci di percorso mostrate nell'intestazione, dopo "Longevity". */
+  crumbs?: string[];
+  /** "referto" (colonna centrata, senza navigazione) o "gestionale" (barra laterale, non ancora implementata). */
+  variante?: 'referto' | 'gestionale';
+}
+const { title, crumbs = [], variante = 'referto' } = Astro.props;
+---
+<!doctype html>
+<html lang="it">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title} — Longevity InsanityLab</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  </head>
+  <body class="lg" data-variante={variante}>
+    <div class="lg-shell">
+      <header class="lg-top">
+        <p class="lg-top__crumbs">
+          <strong>Longevity</strong>
+          {crumbs.map((c) => <span> / {c}</span>)}
+        </p>
+      </header>
+      <main class="lg-main"><slot /></main>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+---
+// Punto di ingresso della piattaforma: non c'è un indice, solo la scorciatoia al
+// referto del cliente. La protezione della rotta è già del middleware (isProtectedPath
+// e canAccessAdminPath in src/lib/auth.ts).
+export const prerender = false;
+return Astro.redirect('/longevity/io');
+---
@@ -0,0 +1,84 @@
+/* Stile della piattaforma Longevity.
+   Vive in un foglio globale, non in <style> scoped, perché le stesse classi servono sia
+   ai componenti Astro sia alle isole React (questionario e radar), che lo scope di Astro
+   non raggiungerebbe. Tutto è prefissato `.lg` e usa i token del sito.
+
+   A differenza di Stress Index qui non c'è semaforo verde/ambra/mattone sui punteggi:
+   il servizio è premium ma non clinico, e un rosso su un punteggio del corpo sarebbe un
+   giudizio, non un'informazione. L'intensità di un punteggio si legge nell'opacità
+   dell'accento del sito (var(--lg-intensita), impostata inline dal componente che disegna
+   il punteggio), mai in un colore diverso. I due soli colori di segnale locali sono:
+   - --lg-tratteggio: il perimetro di ciò che non sappiamo ancora (un asse senza dati
+     sufficienti), non un errore;
+   - --lg-fuori-range: SOLO per una misura sospetta (es. un valore fisiologicamente
+     improbabile), mai per un punteggio — segnala un problema della misura, non della
+     persona. Riusa il mattone di Stress Index (--si-bad: #b05a4e). */
+
+.lg {
+  --lg-line: #e4dfd7;
+  --lg-surface: #ffffff;
+  --lg-tratteggio: #d8d2c8;
+  --lg-fuori-range: #b05a4e;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--c-bg-alt);
+}
+
+/* --- guscio del referto: una colonna che scorre, senza navigazione --- */
+.lg-shell {
+  width: 100%;
+  max-width: 760px;
+  min-height: 100vh;
+  background: var(--lg-surface);
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- intestazione --- */
+.lg-top {
+  padding: 18px 32px;
+  border-bottom: 1px solid var(--lg-line);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--lg-surface);
+}
+.lg-top p { margin: 0; }
+.lg-top__crumbs {
+  font-family: var(--font-heading); font-size: .74rem; letter-spacing: .14em;
+  text-transform: uppercase; color: var(--c-text-light);
+}
+.lg-top__crumbs strong { color: var(--c-heading); font-weight: 600; }
+
+.lg-main { flex: 1; padding: 34px 32px 70px; }
+
+/* --- intestazione di pagina --- */
+.lg-head { margin-bottom: 28px; }
+.lg-head h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); text-transform: none; letter-spacing: .02em; margin-bottom: .25em; }
+.lg-head p { margin: 0; color: var(--c-text-light); font-size: .9rem; }
+
+/* --- la carta di un punteggio ---
+   Nessun colore «buono» o «cattivo»: l'intensità si legge nell'opacità dell'accento
+   (--lg-intensita, 0..1, impostata inline dal componente in base al punteggio). */
+.lg-card { background: var(--lg-surface); border: 1px solid var(--lg-line); padding: 20px 22px; }
+.lg-card--incompleto { border-style: dashed; border-color: var(--lg-tratteggio); }
+
+.lg-score { display: flex; align-items: baseline; gap: 8px; }
+.lg-score__value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 500; color: var(--c-heading); }
+.lg-score__max { font-size: .82rem; color: var(--c-text-light); }
+.lg-score__label {
+  font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
+  letter-spacing: .16em; text-transform: uppercase; color: var(--c-heading);
+}
+
+.lg-score__bar { height: 6px; background: var(--c-bg-alt); overflow: hidden; }
+.lg-score__bar-fill { height: 100%; background: var(--c-accent); opacity: var(--lg-intensita, 1); }
+
+.lg-misura--fuori-range { color: var(--lg-fuori-range); font-weight: 600; }
+
+.lg-muted { color: var(--c-text-light); }
+
+@media (max-width: 640px) {
+  .lg-top, .lg-main { padding-left: 20px; padding-right: 20px; }
+}