change envelope color and improve chrome behaviour

Author: Tiago-R

css/menikah.css

@@ -1107,19 +1107,20 @@ input#flap {
   position: fixed;
   inset: 0;
   z-index: 9999999;
-  background: #fff;
+  background: linear-gradient(180deg, #fff8fd 0%, #f8ecf8 100%);
 }
 
 .envelope-preloader {
   position: relative;
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
   cursor: pointer;
   outline: none;
 }
 
 .envelope-preloader:focus-visible {
-  box-shadow: inset 0 0 0 4px rgba(158, 36, 28, 0.28);
+  box-shadow: inset 0 0 0 4px rgba(196, 157, 199, 0.42);
 }
 
 .envelope-stage {
@@ -1137,10 +1138,10 @@ input#flap {
   opacity: 0.42;
   mix-blend-mode: multiply;
   background:
-    repeating-linear-gradient(90deg, rgba(120, 120, 120, 0.04) 0 1px, transparent 1px 3px),
-    repeating-linear-gradient(0deg, rgba(120, 120, 120, 0.045) 0 1px, transparent 1px 4px),
-    radial-gradient(circle at 22% 18%, rgba(110, 110, 110, 0.06) 0, transparent 28%),
-    radial-gradient(circle at 78% 74%, rgba(110, 110, 110, 0.055) 0, transparent 32%);
+    repeating-linear-gradient(90deg, rgba(140, 108, 146, 0.045) 0 1px, transparent 1px 3px),
+    repeating-linear-gradient(0deg, rgba(140, 108, 146, 0.05) 0 1px, transparent 1px 4px),
+    radial-gradient(circle at 22% 18%, rgba(156, 118, 161, 0.07) 0, transparent 28%),
+    radial-gradient(circle at 78% 74%, rgba(156, 118, 161, 0.065) 0, transparent 32%);
 }
 
 .envelope-panel {
@@ -1150,8 +1151,8 @@ input#flap {
 
 .envelope-panel-back {
   background:
-    repeating-linear-gradient(0deg, rgba(84, 64, 41, 0.02) 0 1px, transparent 1px 4px),
-    linear-gradient(180deg, rgba(250, 245, 235, 0.98) 0%, rgba(244, 236, 223, 0.98) 100%);
+    repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.02) 0 1px, transparent 1px 4px),
+    linear-gradient(180deg, rgba(253, 245, 252, 0.98) 0%, rgba(238, 220, 238, 0.98) 100%);
 }
 
 .envelope-letter {
@@ -1162,10 +1163,10 @@ input#flap {
   width: min(78vw, 980px);
   height: min(74vh, 760px);
   background:
-    repeating-linear-gradient(0deg, rgba(84, 64, 41, 0.018) 0 1px, transparent 1px 4px),
-    linear-gradient(180deg, rgba(255, 252, 246, 0.96) 0%, rgba(248, 241, 231, 0.96) 100%);
-  border: 1px solid rgba(117, 89, 56, 0.16);
-  box-shadow: 0 30px 40px rgba(58, 41, 24, 0.08);
+    repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.018) 0 1px, transparent 1px 4px),
+    linear-gradient(180deg, rgba(255, 250, 254, 0.96) 0%, rgba(245, 232, 245, 0.96) 100%);
+  border: 1px solid rgba(150, 112, 150, 0.2);
+  box-shadow: 0 30px 40px rgba(84, 58, 90, 0.12);
   border-radius: 12px 12px 8px 8px;
   display: flex;
   flex-direction: column;
@@ -1179,7 +1180,7 @@ input#flap {
   margin: 0;
   font-family: 'Rouge Script', cursive;
   font-size: clamp(3rem, 8vw, 7.2rem);
-  color: #8d6f61;
+  color: #9b6f94;
   transform: rotate(-1.5deg);
 }
 
@@ -1189,41 +1190,41 @@ input#flap {
   font-size: clamp(0.9rem, 1.8vw, 1.3rem);
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: #8e8e8e;
+  color: #8f758d;
 }
 
 .envelope-panel-left {
   clip-path: polygon(0 0, 52% 54%, 0 100%);
   background:
-    repeating-linear-gradient(0deg, rgba(84, 64, 41, 0.017) 0 1px, transparent 1px 4px),
-    linear-gradient(115deg, rgba(246, 239, 226, 0.97) 0%, rgba(233, 221, 201, 0.97) 100%);
+    repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.017) 0 1px, transparent 1px 4px),
+    linear-gradient(115deg, rgba(248, 236, 247, 0.97) 0%, rgba(226, 200, 228, 0.97) 100%);
   z-index: 4;
 }
 
 .envelope-panel-right {
   clip-path: polygon(100% 0, 48% 54%, 100% 100%);
   background:
-    repeating-linear-gradient(0deg, rgba(84, 64, 41, 0.017) 0 1px, transparent 1px 4px),
-    linear-gradient(245deg, rgba(246, 239, 226, 0.97) 0%, rgba(233, 221, 201, 0.97) 100%);
+    repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.017) 0 1px, transparent 1px 4px),
+    linear-gradient(245deg, rgba(248, 236, 247, 0.97) 0%, rgba(226, 200, 228, 0.97) 100%);
   z-index: 4;
 }
 
 .envelope-panel-bottom {
   clip-path: polygon(0 100%, 50% 56%, 100% 100%);
   background:
-    repeating-linear-gradient(0deg, rgba(84, 64, 41, 0.02) 0 1px, transparent 1px 4px),
-    linear-gradient(180deg, rgba(241, 232, 216, 0.97) 0%, rgba(227, 213, 188, 0.97) 100%);
+    repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.02) 0 1px, transparent 1px 4px),
+    linear-gradient(180deg, rgba(241, 224, 240, 0.97) 0%, rgba(212, 181, 214, 0.97) 100%);
   z-index: 5;
 }
 
 .envelope-panel-flap {
   clip-path: polygon(0 0, 50% 64%, 100% 0);
   background:
-    repeating-linear-gradient(0deg, rgba(84, 64, 41, 0.018) 0 1px, transparent 1px 4px),
-    linear-gradient(180deg, rgba(252, 245, 234, 0.97) 0%, rgba(236, 224, 203, 0.97) 100%);
+    repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.018) 0 1px, transparent 1px 4px),
+    linear-gradient(180deg, rgba(252, 240, 250, 0.97) 0%, rgba(231, 208, 231, 0.97) 100%);
   transform-origin: top center;
   transition: transform 1.1s cubic-bezier(.18, .82, .24, 1), filter 0.8s ease;
-  box-shadow: inset 0 -18px 26px rgba(84, 61, 35, 0.08);
+  box-shadow: inset 0 -18px 26px rgba(109, 78, 114, 0.12);
   z-index: 10;
   transform: translateZ(4px) rotateX(0deg);
   backface-visibility: hidden;
@@ -1257,7 +1258,7 @@ input#flap {
 }
 
 .envelope-seal:focus-visible {
-  outline: 3px solid rgba(255, 224, 186, 1);
+  outline: 3px solid rgba(245, 213, 244, 1);
   outline-offset: 2px;
 }
 
@@ -1272,9 +1273,9 @@ input#flap {
   transform: translateX(-50%);
   text-align: center;
   margin: 0;
-  color: #756458;
+  color: #7f5d7b;
   transition: opacity 0.35s ease;
-  z-index: 12;
+  z-index: 1001;
 }
 
 .preloader-title {
@@ -1286,7 +1287,7 @@ input#flap {
 }
 
 .preloader-hint {
-  bottom: 4.4vh;
+  bottom: calc(env(safe-area-inset-bottom, 0px) + 4.4vh);
   font-family: 'Lato', sans-serif;
   font-size: clamp(0.78rem, 1.4vw, 0.95rem);
   letter-spacing: 0.12em;
@@ -1337,6 +1338,6 @@ input#flap {
   }
 
   .preloader-hint {
-    bottom: 5vh;
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh);
   }
 }