Update index.html

index.html

@@ -110,21 +110,11 @@
       min-height: 44px;
     }
 
-    .monogram {
-      width: 48px;
-      height: 48px;
-      border-radius: 50%;
-      border: 1px dashed rgba(208, 138, 122, .74);
-      display: grid;
-      place-items: center;
-      color: var(--coral);
-      background: rgba(255, 253, 248, .72);
-    }
-
-    .monogram svg {
-      width: 28px;
-      height: 28px;
+    .logo {
+      width: 64px;
+      height: 64px;
       display: block;
+      object-fit: contain;
     }
 
     .hero {
@@ -159,32 +149,25 @@
     }
 
     .island-line {
-      width: min(72vw, 310px);
-      margin: clamp(32px, 7svh, 54px) auto 0;
-      color: var(--olive);
-      opacity: .90;
+      width: min(78vw, 340px);
+      margin: clamp(30px, 6svh, 50px) auto 0;
     }
 
-    .island-line svg {
+    .island-img {
       width: 100%;
       height: auto;
       display: block;
-      overflow: visible;
+      object-fit: contain;
+      opacity: .94;
+      filter: drop-shadow(0 14px 26px rgba(37, 75, 107, .08));
+      animation: islandIn .75s ease .12s both;
     }
 
-    .island-line path {
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 3;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-dasharray: 850;
-      stroke-dashoffset: 850;
-      animation: draw 1.45s ease .2s forwards;
+    @keyframes islandIn {
+      from { opacity: 0; transform: translateY(10px) scale(.98); }
+      to { opacity: .94; transform: translateY(0) scale(1); }
     }
 
-    @keyframes draw { to { stroke-dashoffset: 0; } }
-
     .form-area {
       align-self: end;
       padding-bottom: clamp(6px, 2.4svh, 26px);
@@ -397,6 +380,17 @@
       font-size: clamp(58px, 18vw, 112px);
     }
 
+    .reveal-island {
+      width: min(72vw, 320px);
+      margin: clamp(24px, 5svh, 38px) auto 0;
+    }
+
+    .reveal-island .island-img {
+      opacity: .28;
+      filter: none;
+      animation: none;
+    }
+
     .reveal-line {
       width: 88px;
       height: 2px;
@@ -476,12 +470,7 @@
   <main class="screen">
     <div class="page">
       <div class="top-mark">
-        <div class="monogram" aria-hidden="true">
-          <svg viewBox="0 0 64 64" role="img">
-            <path d="M18 35 C23 25 32 21 43 24 C37 27 34 31 35 40 C28 35 23 35 18 35 Z" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M29 39 C34 32 43 28 53 30" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </div>
+        <img class="logo" src="logo.png" alt="Logo matrimonio" />
       </div>
 
       <section class="hero" aria-label="Trova la tua cala">
@@ -491,9 +480,7 @@
         </h1>
 
         <div class="island-line" aria-hidden="true">
-          <svg viewBox="0 0 420 300">
-            <path d="M202 25 C226 38 241 62 238 83 C254 72 279 79 286 98 C302 98 323 113 319 132 C344 144 350 174 329 191 C313 204 316 224 291 229 C268 233 251 217 231 231 C215 242 198 271 170 262 C149 255 141 232 119 229 C93 226 78 201 91 179 C100 163 81 149 95 126 C108 106 129 109 142 93 C155 76 143 54 165 41 C176 34 190 35 202 25 Z" />
-          </svg>
+          <img class="island-img" src="isola.png" alt="" />
         </div>
       </section>
 
@@ -514,6 +501,9 @@
       <p class="hello" id="hello"></p>
       <p class="table-kicker">Il tuo tavolo è</p>
       <h2 class="table-name" id="tableName"></h2>
+      <div class="reveal-island" aria-hidden="true">
+        <img class="island-img" src="isola.png" alt="" />
+      </div>
       <div class="reveal-line" aria-hidden="true"></div>
       <p class="reveal-note">In che cala cenerai? L’hai appena scoperto.</p>
       <button class="again" id="again" type="button">Cerca un altro nome</button>