Spaces:

MatteoScript
/

TableauDuMariage

Running

App Files Files Community

MatteoScript commited on 8 days ago

Commit

3b4b9ad

verified ·

1 Parent(s): 75f9d9e

Update index.html

Browse files

Files changed (1) hide show

index.html +263 -208

index.html CHANGED Viewed

@@ -3,19 +3,28 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-  <meta name="theme-color" content="#0d6b7d" />
-  <title>Scopri il tuo Tavolo</title>
   <style>
     :root {
-      --navy: #073348;
-      --blue: #0a6f89;
-      --aqua: #9de7df;
-      --foam: #f3fffb;
-      --sand: #ffe2a3;
-      --gold: #f7ba56;
-      --coral: #ff9b86;
-      --white: rgba(255, 255, 255, .92);
-      --shadow: 0 30px 90px rgba(3, 45, 64, .34);
     }
     * { box-sizing: border-box; }
@@ -25,51 +34,54 @@
       width: 100%;
       min-height: 100%;
       margin: 0;
-      font-family: ui-rounded, "SF Pro Rounded", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      color: var(--navy);
-      background: #0d6b7d;
       overflow-x: hidden;
     }
     body {
       min-height: 100svh;
       background:
-        radial-gradient(circle at 18% 10%, rgba(255,255,255,.92) 0 7%, transparent 24%),
-        radial-gradient(circle at 88% 13%, rgba(255,226,163,.9) 0 8%, transparent 25%),
-        radial-gradient(circle at 50% 96%, rgba(255,255,255,.32) 0 12%, transparent 42%),
-        linear-gradient(145deg, #d7fff6 0%, #8be5e2 26%, #1e98b1 61%, #064a66 100%);
     }
-    body::before,
-    body::after {
       content: "";
       position: fixed;
-      left: -20vw;
-      right: -20vw;
-      bottom: -10vh;
-      height: 33vh;
       pointer-events: none;
-      z-index: 0;
       background:
-        radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.92) 0 12%, transparent 13%),
-        radial-gradient(70% 90% at 16% 8%, rgba(255,255,255,.70) 0 12%, transparent 13%),
-        radial-gradient(70% 90% at 84% 5%, rgba(255,255,255,.66) 0 12%, transparent 13%);
-      filter: blur(1px);
-      opacity: .75;
-      animation: wave 7s ease-in-out infinite alternate;
     }
     body::after {
-      bottom: -4vh;
-      height: 26vh;
-      opacity: .35;
-      animation-duration: 11s;
-      animation-direction: alternate-reverse;
     }
-    @keyframes wave {
-      from { transform: translateX(-4vw) translateY(0) rotate(-2deg); }
-      to { transform: translateX(4vw) translateY(-1.5vh) rotate(1deg); }
     }
     .app {
@@ -82,151 +94,158 @@
     }
     .card {
       width: min(100%, 460px);
       border-radius: 36px;
       overflow: hidden;
-      border: 1px solid rgba(255,255,255,.56);
-      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
       box-shadow: var(--shadow);
-      backdrop-filter: blur(26px);
-      -webkit-backdrop-filter: blur(26px);
       animation: enter .72s cubic-bezier(.2,.9,.2,1.12) both;
     }
-    @keyframes enter {
-      from { opacity: 0; transform: translateY(24px) scale(.97); }
-      to { opacity: 1; transform: translateY(0) scale(1); }
-    }
-    .hero {
-      position: relative;
-      padding: 32px 24px 22px;
-      text-align: center;
-      isolation: isolate;
     }
-    .hero::before {
       content: "";
       position: absolute;
-      top: 8px;
       left: 50%;
-      width: 184px;
-      height: 184px;
       border-radius: 50%;
-      transform: translateX(-50%);
       z-index: -1;
-      background: radial-gradient(circle, rgba(255,246,194,.96) 0 27%, rgba(255,212,122,.58) 28% 45%, transparent 46%);
-      animation: sunPulse 4s ease-in-out infinite alternate;
     }
-    @keyframes sunPulse {
-      from { opacity: .72; transform: translateX(-50%) scale(.95); }
-      to { opacity: 1; transform: translateX(-50%) scale(1.06); }
     }
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 9px 13px;
-      border-radius: 999px;
-      color: #06425a;
-      background: rgba(255,255,255,.68);
-      box-shadow: 0 10px 24px rgba(5, 48, 68, .10);
-      font-size: 12px;
-      font-weight: 950;
-      letter-spacing: .12em;
-      text-transform: uppercase;
     }
     h1 {
-      margin: 22px auto 10px;
       max-width: 8ch;
-      font-size: clamp(43px, 13vw, 64px);
       line-height: .86;
       letter-spacing: -.07em;
-      color: #063a52;
       text-wrap: balance;
     }
-    .subtitle {
-      margin: 0 auto;
-      max-width: 28ch;
-      color: rgba(7, 51, 72, .72);
-      font-size: 16px;
-      line-height: 1.42;
-      font-weight: 720;
     }
     .islands {
       display: flex;
       justify-content: center;
       align-items: end;
-      gap: 7px;
-      height: 40px;
-      margin-top: 22px;
     }
     .island {
       display: block;
       border-radius: 999px 999px 22px 22px;
-      background: linear-gradient(180deg, #ffeeb7, #ecae47);
-      box-shadow: inset 0 -8px 0 rgba(129, 76, 23, .12);
       animation: bob 3.2s ease-in-out infinite;
     }
-    .island:nth-child(1) { width: 42px; height: 15px; animation-delay: -.15s; }
-    .island:nth-child(2) { width: 82px; height: 28px; animation-delay: -.55s; }
-    .island:nth-child(3) { width: 35px; height: 13px; animation-delay: -.9s; }
     @keyframes bob {
       0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-5px); }
     }
     .form {
-      padding: 6px 24px 28px;
     }
     label {
       display: block;
-      margin: 0 0 10px;
-      color: rgba(7, 51, 72, .70);
       font-size: 12px;
-      font-weight: 950;
-      letter-spacing: .11em;
       text-transform: uppercase;
     }
     input {
       width: 100%;
-      min-height: 64px;
       border: 0;
       outline: none;
       border-radius: 24px;
       padding: 0 18px;
-      color: var(--navy);
-      background: rgba(255,255,255,.91);
-      font-size: 18px;
-      font-weight: 860;
       box-shadow:
-        inset 0 0 0 1px rgba(7, 51, 72, .09),
-        0 16px 32px rgba(3, 45, 64, .14);
       transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
     }
     input::placeholder {
-      color: rgba(7, 51, 72, .35);
-      font-weight: 760;
     }
     input:focus {
       transform: translateY(-1px);
       background: #fff;
       box-shadow:
-        inset 0 0 0 2px rgba(10,111,137,.34),
-        0 18px 36px rgba(3, 45, 64, .18);
     }
     .discover {
@@ -238,14 +257,14 @@
       border-radius: 24px;
       overflow: hidden;
       cursor: pointer;
-      color: #063a52;
       background:
-        linear-gradient(115deg, rgba(255,255,255,.72), transparent 30% 68%, rgba(255,255,255,.70)),
-        linear-gradient(135deg, #ffe5a6, #fff0b8 45%, #ff9b86);
-      box-shadow: 0 20px 38px rgba(140, 82, 24, .27), inset 0 -3px 0 rgba(109, 59, 18, .14);
-      font-size: 18px;
-      font-weight: 1000;
-      letter-spacing: -.02em;
       transition: transform .16s ease, filter .16s ease;
     }
@@ -256,9 +275,9 @@
       left: -46%;
       width: 35%;
       height: 280%;
-      background: rgba(255,255,255,.74);
       transform: rotate(23deg);
-      animation: shine 3.15s ease-in-out infinite;
     }
     @keyframes shine {
@@ -285,15 +304,15 @@
     }
     .message-card {
-      border-radius: 24px;
-      padding: 18px 16px;
       text-align: center;
-      color: rgba(7, 51, 72, .78);
-      background: rgba(255,255,255,.62);
-      border: 1px solid rgba(255,255,255,.6);
-      box-shadow: 0 14px 30px rgba(3, 45, 64, .12);
       font-size: 14px;
-      font-weight: 800;
       line-height: 1.35;
     }
@@ -303,13 +322,13 @@
       z-index: 20;
       display: grid;
       place-items: center;
-      padding: max(20px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
-      color: #fff;
       background:
-        radial-gradient(circle at 50% 21%, rgba(255,236,169,.95) 0 8%, rgba(255,206,109,.45) 9% 18%, transparent 34%),
-        radial-gradient(circle at 22% 78%, rgba(157,231,223,.42), transparent 31%),
-        radial-gradient(circle at 86% 75%, rgba(255,155,134,.36), transparent 28%),
-        linear-gradient(145deg, #0a87a3 0%, #075f7d 45%, #042d46 100%);
       opacity: 0;
       pointer-events: none;
       transform: scale(1.03);
@@ -323,69 +342,82 @@
       transform: scale(1);
     }
-    .reveal::before,
-    .reveal::after {
       content: "";
       position: absolute;
-      left: -25vw;
-      right: -25vw;
-      bottom: -6vh;
-      height: 30vh;
       background:
-        radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,.88) 0 12%, transparent 13%),
-        radial-gradient(70% 90% at 15% 6%, rgba(255,255,255,.58) 0 12%, transparent 13%),
-        radial-gradient(70% 90% at 84% 7%, rgba(255,255,255,.52) 0 12%, transparent 13%);
-      opacity: .56;
-      animation: revealWave 6s ease-in-out infinite alternate;
     }
     .reveal::after {
-      bottom: -1vh;
-      opacity: .28;
-      animation-duration: 9s;
-      animation-direction: alternate-reverse;
-    }
-    @keyframes revealWave {
-      from { transform: translateX(-4vw) rotate(-2deg); }
-      to { transform: translateX(4vw) translateY(-1vh) rotate(1deg); }
     }
     .reveal-content {
       position: relative;
       z-index: 2;
-      width: min(100%, 560px);
-      min-height: min(76svh, 720px);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       border-radius: 38px;
-      padding: 32px 22px;
-      background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
-      border: 1px solid rgba(255,255,255,.26);
-      box-shadow: 0 40px 110px rgba(0,0,0,.28);
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
-      animation: revealPop .7s cubic-bezier(.2,.9,.16,1.22) both;
     }
-    .reveal.show .reveal-content {
-      animation: revealPop .7s cubic-bezier(.2,.9,.16,1.22) both;
     }
     @keyframes revealPop {
-      from { opacity: 0; transform: translateY(32px) scale(.86) rotate(-1.5deg); filter: blur(8px); }
-      60% { opacity: 1; transform: translateY(-4px) scale(1.03) rotate(.5deg); filter: blur(0); }
       to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
     }
     .hello {
-      margin: 0 0 18px;
-      color: rgba(255,255,255,.86);
-      font-size: clamp(18px, 5vw, 24px);
-      font-weight: 900;
       letter-spacing: .02em;
     }
@@ -393,53 +425,62 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
-      margin-bottom: 16px;
       padding: 10px 14px;
       border-radius: 999px;
-      color: #063a52;
-      background: rgba(255,255,255,.86);
-      box-shadow: 0 14px 34px rgba(0,0,0,.12);
-      font-size: 13px;
-      font-weight: 1000;
-      letter-spacing: .14em;
       text-transform: uppercase;
     }
     .table-name {
       margin: 0;
-      max-width: 9ch;
-      color: #fff7c8;
-      font-size: clamp(58px, 18vw, 118px);
-      line-height: .82;
-      letter-spacing: -.08em;
-      font-weight: 1000;
-      text-shadow:
-        0 8px 0 rgba(0,0,0,.10),
-        0 24px 52px rgba(0,0,0,.28);
       text-wrap: balance;
     }
     .reveal-note {
-      margin: 24px auto 0;
       max-width: 26ch;
-      color: rgba(255,255,255,.86);
-      font-size: 16px;
       line-height: 1.35;
-      font-weight: 800;
     }
     .again {
       min-height: 52px;
-      margin-top: 30px;
       border: 0;
       border-radius: 999px;
       padding: 0 22px;
-      color: #063a52;
-      background: rgba(255,255,255,.92);
-      box-shadow: 0 18px 42px rgba(0,0,0,.18);
-      font-size: 15px;
-      font-weight: 950;
       cursor: pointer;
     }
@@ -463,8 +504,10 @@
     @media (max-width: 380px) {
       .app { padding-left: 12px; padding-right: 12px; }
-      .hero { padding: 28px 18px 20px; }
-      .form { padding-left: 18px; padding-right: 18px; }
       input, .discover { min-height: 60px; border-radius: 22px; }
       .reveal-content { border-radius: 32px; padding-left: 16px; padding-right: 16px; }
     }
@@ -485,9 +528,8 @@
   <main class="app">
     <section class="card" aria-label="Scopri il tavolo">
       <div class="hero">
-        <div class="badge">💍 Tableau de Mariage</div>
         <h1>Trova la tua Cala</h1>
-        <p class="subtitle">Inserisci nome e cognome e lasciati guidare dalle Tremiti.</p>
         <div class="islands" aria-hidden="true">
           <span class="island"></span>
           <span class="island"></span>
@@ -508,17 +550,30 @@
   <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
     <div class="reveal-content">
       <p class="hello" id="hello"></p>
-      <div class="small-title">🌊 Il tuo tavolo è</div>
       <h2 class="table-name" id="tableName"></h2>
-      <p class="reveal-note">Brinda, sorridi e goditi la serata.</p>
       <button class="again" id="again" type="button">Cerca un altro nome</button>
     </div>
   </section>
   <script>
-    const DATA_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSlb-0cSIFaGN_BWrn_S9tQoQsdqGH7qYRYQGC3_3wRB-rGzwZoPoxIBNr9l6NmxW9Ont82YKIdGKIR/pub?output=csv";
-    const SAMPLE_CSV = ``;
     const els = {
       input: document.getElementById("guestName"),
@@ -701,13 +756,13 @@
     function celebrate() {
       resizeCanvas();
-      const colors = ["#fff7c8", "#ffe2a3", "#ff9b86", "#9de7df", "#ffffff"];
       const centerX = window.innerWidth / 2;
       const centerY = window.innerHeight * .42;
-      confetti = Array.from({ length: 190 }, () => {
         const angle = Math.random() * Math.PI * 2;
-        const speed = 4 + Math.random() * 9;
         return {
           x: centerX,
           y: centerY,

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <meta name="theme-color" content="#F3EFE9" />
+  <title>Trova la tua Cala</title>
+  <!-- Montserrat è il font pulito del moodboard. Amsterdam One viene usato se disponibile nel device/sito. -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <style>
     :root {
+      --blue: #254B6B;
+      --blue-soft: #8FA3B3;
+      --olive: #939675;
+      --sage: #C2C5B2;
+      --coral: #D08A7A;
+      --rose: #EDD3CD;
+      --cream: #F3EFE9;
+      --paper: rgba(255, 253, 248, .86);
+      --white: #fffaf4;
+      --shadow: 0 28px 80px rgba(37, 75, 107, .18);
+      --font-main: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-script: "Amsterdam One", "Amsterdam", "Allura", "Great Vibes", "Snell Roundhand", "Brush Script MT", cursive;
     }
     * { box-sizing: border-box; }
       width: 100%;
       min-height: 100%;
       margin: 0;
+      font-family: var(--font-main);
+      color: var(--blue);
+      background: var(--cream);
       overflow-x: hidden;
     }
     body {
       min-height: 100svh;
       background:
+        radial-gradient(circle at 17% 13%, rgba(237, 211, 205, .72) 0 9%, transparent 31%),
+        radial-gradient(circle at 88% 11%, rgba(194, 197, 178, .58) 0 10%, transparent 30%),
+        radial-gradient(circle at 50% 94%, rgba(143, 163, 179, .18) 0 18%, transparent 48%),
+        linear-gradient(180deg, #fffaf4 0%, #f3efe9 64%, #eee7de 100%);
     }
+    body::before {
       content: "";
       position: fixed;
+      inset: -10vh -20vw auto auto;
+      width: 90vw;
+      height: 88vh;
       pointer-events: none;
+      opacity: .18;
       background:
+        repeating-conic-gradient(from 198deg at 72% 48%, transparent 0deg 7deg, rgba(147,150,117,.54) 7deg 9deg, transparent 9deg 15deg);
+      transform: rotate(-10deg);
+      filter: blur(.5px);
+      z-index: 0;
     }
     body::after {
+      content: "";
+      position: fixed;
+      inset: auto -15vw -18vh -15vw;
+      height: 34vh;
+      pointer-events: none;
+      opacity: .26;
+      background:
+        radial-gradient(80% 90% at 50% 0%, rgba(143,163,179,.55) 0 11%, transparent 12%),
+        radial-gradient(80% 90% at 16% 7%, rgba(143,163,179,.36) 0 11%, transparent 12%),
+        radial-gradient(80% 90% at 84% 6%, rgba(143,163,179,.30) 0 11%, transparent 12%);
+      animation: softWave 8s ease-in-out infinite alternate;
+      z-index: 0;
     }
+    @keyframes softWave {
+      from { transform: translateX(-3vw) rotate(-1.5deg); }
+      to { transform: translateX(3vw) translateY(-1vh) rotate(1deg); }
     }
     .app {
     }
     .card {
+      position: relative;
       width: min(100%, 460px);
+      min-height: min(92svh, 760px);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
       border-radius: 36px;
       overflow: hidden;
+      border: 1px solid rgba(255,255,255,.88);
+      background:
+        linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,250,244,.58)),
+        radial-gradient(circle at 50% 22%, rgba(237,211,205,.55), transparent 28%);
       box-shadow: var(--shadow);
+      backdrop-filter: blur(22px);
+      -webkit-backdrop-filter: blur(22px);
       animation: enter .72s cubic-bezier(.2,.9,.2,1.12) both;
     }
+    .card::before {
+      content: "";
+      position: absolute;
+      inset: 26px;
+      border-radius: 29px;
+      border: 1px solid rgba(37,75,107,.10);
+      pointer-events: none;
     }
+    .card::after {
       content: "";
       position: absolute;
       left: 50%;
+      top: 24%;
+      width: 280px;
+      height: 280px;
+      transform: translate(-50%, -50%);
       border-radius: 50%;
+      background:
+        radial-gradient(circle, rgba(237,211,205,.50) 0 26%, transparent 27%),
+        radial-gradient(circle, rgba(208,138,122,.18) 0 44%, transparent 45%);
+      pointer-events: none;
       z-index: -1;
+      animation: halo 5s ease-in-out infinite alternate;
     }
+    @keyframes enter {
+      from { opacity: 0; transform: translateY(24px) scale(.97); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
     }
+    @keyframes halo {
+      from { opacity: .64; transform: translate(-50%, -50%) scale(.96); }
+      to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
+    }
+    .hero {
+      position: relative;
+      padding: 42px 28px 30px;
+      text-align: center;
+      isolation: isolate;
     }
     h1 {
+      margin: 0 auto;
       max-width: 8ch;
+      color: var(--blue);
+      font-size: clamp(55px, 15vw, 82px);
       line-height: .86;
       letter-spacing: -.07em;
+      font-weight: 900;
       text-wrap: balance;
     }
+    .script-mark {
+      display: block;
+      margin: 10px auto 0;
+      color: var(--coral);
+      font-family: var(--font-script);
+      font-size: clamp(32px, 9vw, 54px);
+      line-height: .95;
+      font-weight: 400;
+      letter-spacing: .01em;
+      opacity: .95;
     }
     .islands {
       display: flex;
       justify-content: center;
       align-items: end;
+      gap: 8px;
+      height: 42px;
+      margin-top: 28px;
     }
     .island {
       display: block;
       border-radius: 999px 999px 22px 22px;
+      background: linear-gradient(180deg, #edd3cd 0%, #d08a7a 62%, #c47c70 100%);
+      box-shadow: inset 0 -7px 0 rgba(37,75,107,.07);
       animation: bob 3.2s ease-in-out infinite;
     }
+    .island:nth-child(1) { width: 42px; height: 14px; animation-delay: -.15s; background: linear-gradient(180deg, #c2c5b2, #939675); }
+    .island:nth-child(2) { width: 84px; height: 27px; animation-delay: -.55s; }
+    .island:nth-child(3) { width: 36px; height: 13px; animation-delay: -.9s; background: linear-gradient(180deg, #c2c5b2, #939675); }
     @keyframes bob {
       0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-4px); }
     }
     .form {
+      padding: 2px 28px 46px;
     }
     label {
       display: block;
+      margin: 0 0 12px;
+      color: rgba(37, 75, 107, .72);
       font-size: 12px;
+      font-weight: 800;
+      letter-spacing: .14em;
       text-transform: uppercase;
     }
     input {
       width: 100%;
+      min-height: 66px;
       border: 0;
       outline: none;
       border-radius: 24px;
       padding: 0 18px;
+      color: var(--blue);
+      background: rgba(255,255,255,.88);
+      font-size: 17px;
+      font-weight: 700;
       box-shadow:
+        inset 0 0 0 1px rgba(37,75,107,.08),
+        0 14px 30px rgba(37,75,107,.10);
       transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
     }
     input::placeholder {
+      color: rgba(37,75,107,.36);
+      font-weight: 700;
     }
     input:focus {
       transform: translateY(-1px);
       background: #fff;
       box-shadow:
+        inset 0 0 0 2px rgba(208,138,122,.42),
+        0 18px 38px rgba(37,75,107,.14);
     }
     .discover {
       border-radius: 24px;
       overflow: hidden;
       cursor: pointer;
+      color: #fffaf4;
       background:
+        linear-gradient(110deg, rgba(255,255,255,.32), transparent 28% 70%, rgba(255,255,255,.24)),
+        linear-gradient(135deg, var(--blue) 0%, #315c7c 48%, var(--coral) 100%);
+      box-shadow: 0 18px 36px rgba(37,75,107,.22), inset 0 -3px 0 rgba(0,0,0,.10);
+      font-size: 17px;
+      font-weight: 800;
+      letter-spacing: -.01em;
       transition: transform .16s ease, filter .16s ease;
     }
       left: -46%;
       width: 35%;
       height: 280%;
+      background: rgba(255,255,255,.54);
       transform: rotate(23deg);
+      animation: shine 3.2s ease-in-out infinite;
     }
     @keyframes shine {
     }
     .message-card {
+      border-radius: 22px;
+      padding: 16px;
       text-align: center;
+      color: rgba(37, 75, 107, .80);
+      background: rgba(255,255,255,.70);
+      border: 1px solid rgba(37,75,107,.08);
+      box-shadow: 0 12px 28px rgba(37,75,107,.10);
       font-size: 14px;
+      font-weight: 700;
       line-height: 1.35;
     }
       z-index: 20;
       display: grid;
       place-items: center;
+      padding: max(18px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
+      color: var(--blue);
       background:
+        radial-gradient(circle at 18% 12%, rgba(237,211,205,.78) 0 10%, transparent 32%),
+        radial-gradient(circle at 82% 14%, rgba(194,197,178,.64) 0 10%, transparent 32%),
+        radial-gradient(circle at 50% 94%, rgba(143,163,179,.20) 0 20%, transparent 54%),
+        linear-gradient(180deg, #fffaf4 0%, #f3efe9 74%, #eee7de 100%);
       opacity: 0;
       pointer-events: none;
       transform: scale(1.03);
       transform: scale(1);
     }
+    .reveal::before {
       content: "";
       position: absolute;
+      inset: -5vh -12vw auto auto;
+      width: 90vw;
+      height: 90vh;
+      opacity: .18;
       background:
+        repeating-conic-gradient(from 200deg at 70% 50%, transparent 0deg 7deg, rgba(147,150,117,.62) 7deg 9deg, transparent 9deg 16deg);
+      transform: rotate(-10deg);
+      z-index: 0;
     }
     .reveal::after {
+      content: "";
+      position: absolute;
+      left: -16vw;
+      right: -16vw;
+      bottom: -15vh;
+      height: 34vh;
+      opacity: .22;
+      background:
+        radial-gradient(80% 90% at 50% 0%, rgba(143,163,179,.55) 0 11%, transparent 12%),
+        radial-gradient(80% 90% at 16% 7%, rgba(143,163,179,.36) 0 11%, transparent 12%),
+        radial-gradient(80% 90% at 84% 6%, rgba(143,163,179,.30) 0 11%, transparent 12%);
+      animation: softWave 8s ease-in-out infinite alternate;
+      z-index: 0;
     }
     .reveal-content {
       position: relative;
       z-index: 2;
+      width: min(100%, 580px);
+      min-height: min(80svh, 760px);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       border-radius: 38px;
+      padding: 34px 22px;
+      background: rgba(255,250,244,.72);
+      border: 1px solid rgba(255,255,255,.86);
+      box-shadow: 0 36px 100px rgba(37,75,107,.20);
       backdrop-filter: blur(18px);
       -webkit-backdrop-filter: blur(18px);
+      animation: revealPop .74s cubic-bezier(.2,.9,.16,1.22) both;
+      overflow: hidden;
     }
+    .reveal-content::before {
+      content: "";
+      position: absolute;
+      top: 30px;
+      left: 50%;
+      width: 210px;
+      height: 210px;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      background:
+        radial-gradient(circle, rgba(237,211,205,.58) 0 27%, transparent 28%),
+        radial-gradient(circle, rgba(208,138,122,.16) 0 45%, transparent 46%);
+      z-index: -1;
     }
     @keyframes revealPop {
+      from { opacity: 0; transform: translateY(32px) scale(.86) rotate(-1.4deg); filter: blur(8px); }
+      60% { opacity: 1; transform: translateY(-4px) scale(1.03) rotate(.4deg); filter: blur(0); }
       to { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
     }
     .hello {
+      margin: 0 0 22px;
+      color: rgba(37, 75, 107, .72);
+      font-size: clamp(15px, 4.6vw, 21px);
+      font-weight: 700;
       letter-spacing: .02em;
     }
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      margin-bottom: 18px;
       padding: 10px 14px;
       border-radius: 999px;
+      color: var(--cream);
+      background: var(--olive);
+      box-shadow: 0 13px 28px rgba(147,150,117,.20);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: .15em;
       text-transform: uppercase;
     }
     .table-name {
       margin: 0;
+      max-width: 11ch;
+      color: var(--blue);
+      font-family: var(--font-main);
+      font-size: clamp(48px, 14vw, 96px);
+      line-height: .91;
+      letter-spacing: -.055em;
+      font-weight: 900;
       text-wrap: balance;
+      text-shadow: 0 16px 36px rgba(37,75,107,.12);
+    }
+    .script-cala {
+      display: block;
+      margin-top: 16px;
+      color: var(--coral);
+      font-family: var(--font-script);
+      font-size: clamp(42px, 13vw, 82px);
+      line-height: .82;
+      font-weight: 400;
+      letter-spacing: .01em;
     }
     .reveal-note {
+      margin: 28px auto 0;
       max-width: 26ch;
+      color: rgba(37, 75, 107, .72);
+      font-size: 15px;
       line-height: 1.35;
+      font-weight: 600;
     }
     .again {
       min-height: 52px;
+      margin-top: 28px;
       border: 0;
       border-radius: 999px;
       padding: 0 22px;
+      color: #fffaf4;
+      background: var(--blue);
+      box-shadow: 0 16px 38px rgba(37,75,107,.22);
+      font-size: 14px;
+      font-weight: 800;
       cursor: pointer;
     }
     @media (max-width: 380px) {
       .app { padding-left: 12px; padding-right: 12px; }
+      .card { min-height: 90svh; border-radius: 32px; }
+      .hero { padding: 38px 20px 26px; }
+      h1 { font-size: clamp(50px, 15vw, 74px); }
+      .form { padding-left: 22px; padding-right: 22px; }
       input, .discover { min-height: 60px; border-radius: 22px; }
       .reveal-content { border-radius: 32px; padding-left: 16px; padding-right: 16px; }
     }
   <main class="app">
     <section class="card" aria-label="Scopri il tavolo">
       <div class="hero">
         <h1>Trova la tua Cala</h1>
+        <span class="script-mark" aria-hidden="true">Tremiti</span>
         <div class="islands" aria-hidden="true">
           <span class="island"></span>
           <span class="island"></span>
   <section id="reveal" class="reveal" aria-live="assertive" aria-hidden="true">
     <div class="reveal-content">
       <p class="hello" id="hello"></p>
+      <div class="small-title">Il tuo tavolo è</div>
       <h2 class="table-name" id="tableName"></h2>
+      <span class="script-cala" aria-hidden="true">buona cena</span>
+      <p class="reveal-note">Segui la tua cala e goditi la serata.</p>
       <button class="again" id="again" type="button">Cerca un altro nome</button>
     </div>
   </section>
   <script>
+    const DATA_URL = "";
+    const SAMPLE_CSV = `
+Nome Cognome,Nome del tavolo
+Gaia Pollastrini,Cala Matano
+Matteo Bergamelli,Cala delle Arene
+Luca Bianchi,Cala Tramontana
+Sara Conti,Cala Spido
+Marco De Santis,Cala Zio Cesare
+Elena Ferri,Cala degli Inglesi
+Davide Greco,Cala Tonda
+Chiara Romano,Cala dei Benedettini
+Alessandro Rinaldi,Cala Pietre di Fucile
+Martina Esposito,Cala Sorrentino
+`;
     const els = {
       input: document.getElementById("guestName"),
     function celebrate() {
       resizeCanvas();
+      const colors = ["#254B6B", "#8FA3B3", "#939675", "#C2C5B2", "#D08A7A", "#EDD3CD", "#F3EFE9"];
       const centerX = window.innerWidth / 2;
       const centerY = window.innerHeight * .42;
+      confetti = Array.from({ length: 180 }, () => {
         const angle = Math.random() * Math.PI * 2;
+        const speed = 4 + Math.random() * 8.5;
         return {
           x: centerX,
           y: centerY,