Update index.html

index.html

@@ -53,7 +53,9 @@
     }
 
     body {
+      height: 100svh;
       min-height: 100svh;
+      overflow: hidden;
       background:
         linear-gradient(180deg, #fffdf8 0%, #f8f4ee 54%, #f3efe9 100%);
     }
@@ -64,6 +66,7 @@
 
     .screen {
       position: relative;
+      height: 100svh;
       min-height: 100svh;
       display: flex;
       justify-content: center;
@@ -97,30 +100,37 @@
       position: relative;
       z-index: 1;
       width: min(100%, 500px);
+      height: 100svh;
       min-height: 100svh;
-      padding: max(30px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
+      padding: max(22px, env(safe-area-inset-top)) 28px max(20px, env(safe-area-inset-bottom));
       display: grid;
       grid-template-rows: auto 1fr auto;
+      overflow: hidden;
     }
 
     .top-mark {
       display: flex;
       justify-content: center;
       align-items: center;
-      min-height: 44px;
+      min-height: 38px;
+      background: transparent;
     }
 
     .logo {
-      width: 64px;
-      height: 64px;
+      width: 50px;
+      height: 50px;
       display: block;
       object-fit: contain;
+      background: transparent;
+      opacity: .86;
+      mix-blend-mode: multiply;
+      filter: contrast(1.08) saturate(.92);
     }
 
     .hero {
       align-self: center;
       text-align: center;
-      padding: 10px 0 22px;
+      padding: 4px 0 14px;
     }
 
     .script-title {
@@ -128,7 +138,7 @@
       max-width: 390px;
       color: var(--blue);
       font-family: var(--font-script);
-      font-size: clamp(62px, 18vw, 108px);
+      font-size: clamp(54px, 15.5vw, 92px);
       font-weight: 400;
       line-height: .76;
       letter-spacing: -.035em;
@@ -149,23 +159,23 @@
     }
 
     .island-line {
-      width: min(78vw, 340px);
-      margin: clamp(30px, 6svh, 50px) auto 0;
+      width: min(48vw, 220px);
+      max-height: 150px;
+      margin: clamp(18px, 3.5svh, 30px) auto 0;
+      overflow: hidden;
     }
 
     .island-img {
       width: 100%;
+      max-height: 150px;
       height: auto;
       display: block;
       object-fit: contain;
-      opacity: .94;
-      filter: drop-shadow(0 14px 26px rgba(37, 75, 107, .08));
-      animation: islandIn .75s ease .12s both;
-    }
-
-    @keyframes islandIn {
-      from { opacity: 0; transform: translateY(10px) scale(.98); }
-      to { opacity: .94; transform: translateY(0) scale(1); }
+      opacity: 1;
+      filter: none;
+      animation: none;
+      transform: none;
+      mix-blend-mode: multiply;
     }
 
     .form-area {
@@ -381,27 +391,32 @@
     }
 
     .reveal-island {
-      width: min(72vw, 320px);
-      margin: clamp(24px, 5svh, 38px) auto 0;
+      width: min(42vw, 180px);
+      max-height: 120px;
+      margin: clamp(18px, 3.5svh, 28px) auto 0;
+      overflow: hidden;
     }
 
     .reveal-island .island-img {
-      opacity: .28;
+      max-height: 120px;
+      opacity: .22;
       filter: none;
       animation: none;
+      transform: none;
+      mix-blend-mode: multiply;
     }
 
     .reveal-line {
       width: 88px;
       height: 2px;
-      margin: clamp(28px, 6svh, 46px) auto 0;
+      margin: clamp(18px, 3.5svh, 28px) auto 0;
       border-radius: 999px;
       background: var(--olive);
       opacity: .68;
     }
 
     .reveal-note {
-      margin: 18px auto 0;
+      margin: 14px auto 0;
       max-width: 28ch;
       color: rgba(37, 75, 107, .66);
       font-size: 15px;
@@ -412,7 +427,7 @@
     .again {
       align-self: center;
       min-height: 52px;
-      margin-top: clamp(28px, 6svh, 44px);
+      margin-top: clamp(20px, 4svh, 30px);
       border: 1px solid rgba(37, 75, 107, .14);
       border-radius: 999px;
       padding: 0 24px;
@@ -446,11 +461,13 @@
 
     @media (max-width: 380px) {
       .screen::before, .reveal::before { inset: 12px; border-radius: 24px; }
-      .page { padding-left: 22px; padding-right: 22px; }
-      .script-title { font-size: clamp(58px, 18vw, 92px); }
-      .island-line { width: min(72vw, 290px); }
-      input, .discover { min-height: 58px; }
-      .table-name { font-size: clamp(68px, 22vw, 120px); }
+      .page { padding-left: 22px; padding-right: 22px; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
+      .logo { width: 44px; height: 44px; }
+      .script-title { font-size: clamp(50px, 15vw, 78px); }
+      .island-line { width: min(44vw, 180px); max-height: 120px; margin-top: 18px; }
+      .island-img { max-height: 120px; }
+      input, .discover { min-height: 56px; }
+      .table-name { font-size: clamp(62px, 20vw, 104px); }
       .table-name[data-long="true"] { font-size: clamp(52px, 17vw, 94px); }
     }