Change hero background

Author: Tiago-R

css/menikah.css

@@ -39,19 +39,44 @@ html {
 
 
 .hero {
-  /* background-image: url(https://picsum.photos/id/25/1920/1080); */
-  background: linear-gradient(rgba(56, 46, 55, 0.75), rgba(94, 70, 95, 0.75)), rgba(0, 0, 0, 0.95) url(../image/gili.jpg) no-repeat;
-  background-attachment: scroll;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  /* min-height: 100vh; */
+  position: relative;
+  overflow: hidden;
+  background: #111;
+  isolation: isolate;
   color: white;
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  /* background-position-x: left 200px; */
   font-family: 'Raleway', sans-serif;
 }
 
+.hero-background-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.hero-video-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(rgba(56, 46, 55, 0.68), rgba(94, 70, 95, 0.72));
+}
+
+.hero .hero-body {
+  position: relative;
+  z-index: 2;
+}
+
+.hero .space40px {
+  position: relative;
+  z-index: 2;
+}
+
 
 
 .hero .title {
@@ -1107,7 +1132,7 @@ input#flap {
   position: fixed;
   inset: 0;
   z-index: 9999999;
-  background: linear-gradient(180deg, #fff8fd 0%, #f8ecf8 100%);
+  background: linear-gradient(#fdfcfb, #f7f5f2);
 }
 
 .envelope-preloader {
@@ -1129,6 +1154,23 @@ input#flap {
   transform-style: preserve-3d;
 }
 
+.envelope-stage::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 2%;
+  width: min(96vw, 980px);
+  height: min(36vh, 320px);
+  transform: translateX(-50%) translateY(0);
+  pointer-events: none;
+  z-index: 9;
+  opacity: 0;
+  background:
+    radial-gradient(ellipse at 50% 12%, rgba(66, 39, 72, 0.42) 0%, rgba(66, 39, 72, 0.2) 34%, rgba(66, 39, 72, 0) 72%);
+  filter: blur(10px);
+  transition: opacity 0.75s ease, transform 1.1s cubic-bezier(.18, .82, .24, 1);
+}
+
 .envelope-stage::after {
   content: "";
   position: absolute;
@@ -1153,6 +1195,9 @@ input#flap {
   background:
     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%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 248, 255, 0.7),
+    inset 0 -18px 28px rgba(117, 83, 124, 0.1);
 }
 
 .envelope-letter {
@@ -1198,6 +1243,10 @@ input#flap {
   background:
     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%);
+  box-shadow:
+    inset 1px 0 0 rgba(255, 248, 255, 0.62),
+    inset -22px 0 28px rgba(109, 78, 114, 0.16),
+    inset 0 10px 16px rgba(255, 244, 255, 0.18);
   z-index: 4;
 }
 
@@ -1206,6 +1255,10 @@ input#flap {
   background:
     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%);
+  box-shadow:
+    inset -1px 0 0 rgba(255, 248, 255, 0.62),
+    inset 22px 0 28px rgba(109, 78, 114, 0.16),
+    inset 0 10px 16px rgba(255, 244, 255, 0.18);
   z-index: 4;
 }
 
@@ -1214,6 +1267,9 @@ input#flap {
   background:
     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%);
+  box-shadow:
+    inset 0 2px 0 rgba(255, 244, 255, 0.58),
+    inset 0 -24px 34px rgba(109, 78, 114, 0.22);
   z-index: 5;
 }
 
@@ -1224,7 +1280,9 @@ input#flap {
     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(109, 78, 114, 0.12);
+  box-shadow:
+    inset 0 -18px 26px rgba(109, 78, 114, 0.12),
+    inset 0 1px 0 rgba(255, 248, 255, 0.68);
   z-index: 10;
   transform: translateZ(4px) rotateX(0deg);
   backface-visibility: hidden;
@@ -1289,8 +1347,9 @@ input#flap {
 .preloader-hint {
   bottom: calc(env(safe-area-inset-bottom, 0px) + 4.4vh);
   font-family: 'Lato', sans-serif;
+  font-weight: bold;
   font-size: clamp(0.78rem, 1.4vw, 0.95rem);
-  letter-spacing: 0.12em;
+  letter-spacing: 0.5em;
   text-transform: uppercase;
 }
 
@@ -1306,6 +1365,12 @@ input#flap {
 .envelope-preloader.open .envelope-panel-flap {
   transform: translateZ(4px) translateY(-1.2vh) rotateX(36deg);
   filter: brightness(0.97);
+  box-shadow: inset 0 -14px 20px rgba(109, 78, 114, 0.14);
+}
+
+.envelope-preloader.open .envelope-stage::before {
+  opacity: 1;
+  transform: translateX(-50%) translateY(1.2vh);
 }
 
 .envelope-preloader.open .envelope-letter {