- Our Story
Rooted in Ghana.
Inspired by beauty.
@@ -533,7 +567,7 @@
From our first collection to now, khy has remained dedicated to artistry, quality, and Ghanaian-inspired sophistication. diff --git a/scripts/main.js b/scripts/main.js index fdde915..5f11295 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1080,6 +1080,7 @@ if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", function () { initHeroCarousel(); initMobileMenu(); + initCuratedCardsTap(); }); // Hero Carousel Functionality @@ -1099,15 +1100,6 @@ function initHeroCarousel() { ]; let currentImageIndex = 0; - let originalHeight = null; - - // Function to capture original image height on first load - function captureOriginalHeight() { - if (!originalHeight) { - originalHeight = heroImage.offsetHeight; - console.log("Original image height captured:", originalHeight + "px"); - } - } // Function to update image with fade transition function updateImage(newIndex) { @@ -1121,15 +1113,9 @@ function initHeroCarousel() { heroImage.src = carouselImages[newIndex]; heroImage.alt = `Carousel image ${newIndex + 1}`; - // Apply original height to maintain uniformity - if (originalHeight && newIndex !== 0) { - heroImage.style.height = originalHeight + "px"; - heroImage.style.objectFit = "cover"; - } else if (newIndex === 0) { - // Reset to original for the first image - heroImage.style.height = "auto"; - heroImage.style.objectFit = "initial"; - } + // Ensure image always fits its container uniformly + heroImage.style.height = "100%"; + heroImage.style.objectFit = "cover"; // Fade in new image heroImage.style.opacity = "1"; @@ -1172,12 +1158,7 @@ function initHeroCarousel() { } } - // Capture original height after image loads - if (heroImage.complete) { - captureOriginalHeight(); - } else { - heroImage.addEventListener("load", captureOriginalHeight); - } + // No dynamic height capture needed; CSS handles sizing // Auto-advance carousel every 5 seconds setInterval(() => { @@ -1186,6 +1167,36 @@ function initHeroCarousel() { }, 5000); } +// Tap-to-toggle for curated cards on touch devices +function initCuratedCardsTap() { + try { + const cards = document.querySelectorAll(".curated-card"); + if (!cards || cards.length === 0) return; + + // Only enable on coarse pointers (touch) + const isTouchLike = window.matchMedia( + "(hover: none), (pointer: coarse)" + ).matches; + if (!isTouchLike) return; + + cards.forEach((card) => { + card.addEventListener("click", (e) => { + // Toggle active state; second tap removes it + card.classList.toggle("is-active"); + }); + + // Optional: remove active when tapping outside the card + document.addEventListener("click", (evt) => { + if (!card.contains(evt.target)) { + card.classList.remove("is-active"); + } + }); + }); + } catch (err) { + console.warn("Failed to init curated card tap behavior:", err); + } +} + // Mobile Menu Functionality function initMobileMenu() { const mobileMenuButton = document.getElementById("mobile-menu-button"); diff --git a/styles/main.css b/styles/main.css index 4c0c1ea..7d9d40d 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1879,6 +1879,18 @@ video { padding-bottom: 0.5rem; } +.pb-6 { + padding-bottom: 1.5rem; +} + +.pb-4 { + padding-bottom: 1rem; +} + +.pt-0 { + padding-top: 0px; +} + .text-left { text-align: left; } @@ -2999,10 +3011,26 @@ video { height: 64px; } + .lg\:h-\[70vh\] { + height: 70vh; + } + + .lg\:h-screen { + height: 100vh; + } + + .lg\:max-h-screen { + max-height: 100vh; + } + .lg\:min-h-\[64px\] { min-height: 64px; } + .lg\:min-h-screen { + min-height: 100vh; + } + .lg\:w-36 { width: 9rem; } @@ -3099,12 +3127,26 @@ video { gap: 1rem; } + .lg\:gap-10 { + gap: 2.5rem; + } + .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } + .lg\:space-y-10 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2.5rem * var(--tw-space-y-reverse)); + } + + .lg\:self-center { + align-self: center; + } + .lg\:overflow-visible { overflow: visible; } @@ -3114,6 +3156,11 @@ video { padding-right: 0px; } + .lg\:py-0 { + padding-top: 0px; + padding-bottom: 0px; + } + .lg\:pr-2 { padding-right: 0.5rem; } @@ -3164,6 +3211,14 @@ video { font-size: 1rem; line-height: 1.5rem; } + + .lg\:leading-snug { + line-height: 1.375; + } + + .lg\:leading-tight { + line-height: 1.25; + } } @media (min-width: 1280px) {