feat: add responsive overlay styles and enhance ScrollOverlays component

2026-04-17 15:37:27 +04:00
parent 83d0d9ab00
commit a955da7ec8
3 changed files with 175 additions and 21 deletions
@@ -363,3 +363,144 @@ html {
    max-height: 100dvh !important;
  }
 }
+
+/* ===== Scroll Overlay Responsive ===== */
+
+/* Overlay glass panels (side sections) */
+.overlay-panel {
+  max-width: 450px;
+  padding: 2.5rem;
+  border-radius: 1.5rem;
+}
+
+/* Overlay section positioning */
+.overlay-section-left {
+  left: clamp(2rem, 6vw, 6rem);
+}
+
+.overlay-section-right {
+  right: clamp(2rem, 6vw, 6rem);
+}
+
+.overlay-heading {
+  font-size: clamp(2rem, 3.5vw, 3rem);
+}
+
+.overlay-hero-heading {
+  font-size: clamp(2.5rem, 5vw, 4.5rem);
+}
+
+.overlay-stat {
+  font-size: 1.8rem;
+}
+
+/* Tablet */
+@media (max-width: 1024px) {
+  .overlay-panel {
+    max-width: 380px;
+    padding: 2rem;
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .overlay-section-left,
+  .overlay-section-right {
+    left: 50% !important;
+    right: auto !important;
+    transform: translateX(-50%);
+    width: 90vw;
+    max-width: 400px;
+  }
+
+  .overlay-section-left {
+    top: auto !important;
+    bottom: 6vh !important;
+    align-items: center !important;
+  }
+
+  .overlay-section-right {
+    top: auto !important;
+    bottom: 6vh !important;
+    align-items: center !important;
+  }
+
+  .overlay-panel {
+    max-width: 100%;
+    padding: 1.5rem;
+    border-radius: 1.25rem;
+    text-align: center !important;
+  }
+
+  .overlay-panel > div {
+    align-items: center !important;
+  }
+
+  .overlay-hero-heading {
+    font-size: clamp(1.8rem, 8vw, 2.8rem);
+  }
+
+  .overlay-heading {
+    font-size: clamp(1.5rem, 6vw, 2rem);
+  }
+
+  .overlay-stat {
+    font-size: 1.4rem;
+  }
+
+  .overlay-brand {
+    top: 8vh !important;
+    bottom: auto !important;
+  }
+
+  .overlay-brand .overlay-panel,
+  .overlay-brand span,
+  .overlay-brand p {
+    font-size: 0.7rem;
+  }
+
+  .overlay-scroll-hint {
+    bottom: 1.5rem !important;
+  }
+}
+
+/* Small phones */
+@media (max-width: 480px) {
+  .overlay-section-left,
+  .overlay-section-right {
+    width: 92vw;
+    bottom: 4vh !important;
+  }
+
+  .overlay-panel {
+    padding: 1.25rem;
+    border-radius: 1rem;
+  }
+
+  .overlay-hero-heading {
+    font-size: clamp(1.5rem, 7vw, 2.2rem);
+  }
+
+  .overlay-heading {
+    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
+  }
+
+  .overlay-stat {
+    font-size: 1.2rem;
+  }
+}
+
+/* Very small phones */
+@media (max-width: 375px) {
+  .overlay-panel {
+    padding: 1rem;
+  }
+
+  .overlay-hero-heading {
+    font-size: 1.5rem;
+  }
+
+  .overlay-heading {
+    font-size: 1.3rem;
+  }
+}