/* ============================================================ Storefront home page — hero slider styles (caption, arrows, dots, CTA). Loaded once in home.blade.php's . ============================================================ */ /* ---- Hero slides ------------------------------------------ */ /* touch-action: pan-y on the hero lets the browser keep VERTICAL scroll (so the page can scroll past the hero) while leaving HORIZONTAL gestures to the swipe handler in shop-interactions.js. Without this, the browser eats horizontal swipes as page-pan attempts and the JS handler never sees a clean dx. */ [data-hero-slider] { touch-action: pan-y; } [data-hero-slider] .hero-caption { touch-action: pan-y; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; background-image: var(--hero-img); background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-slide.is-active { opacity: 1; } @media (max-width: 767px) { .hero-slide { background-image: var(--hero-img-mobile, var(--hero-img)); } } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Desktop: show desktop video, hide mobile. Mobile: swap. */ .hero-video--mobile { display: none; } @media (max-width: 767px) { .hero-video--desktop { display: none; } .hero-video--mobile { display: block; } } /* ---- Caption card ----------------------------------------- Cream translucent card with navy text. Keeps the brand palette (navy text on cream) AND stays legible over any photo background. A backdrop blur softens whatever's behind it. A thin top + bottom gold rule frames the title for an editorial / fashion-magazine feel — Hermès / Aritzia / Fear of God Athletics pattern. */ .hero-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; color: #13273F; background: rgba(244, 240, 234, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 32px 40px 34px; border-radius: 14px; box-shadow: 0 10px 40px -18px rgba(19, 39, 63, .25); max-width: 460px; width: calc(100% - 48px); } .hero-eyebrow { font-size: 15px; letter-spacing: .32em; text-transform: uppercase; font-weight: 400; color: #13273F; margin-bottom: 16px; } .hero-title { font-size: clamp(34px, 5.2vw, 56px); font-weight: 500; letter-spacing: .04em; line-height: 1.05; margin: 0 0 16px; padding-bottom: 18px; position: relative; text-transform: uppercase; color: #13273F; } .hero-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 2px; background: #13273F; } .hero-subtitle { font-size: 18px; line-height: 1.5; letter-spacing: .02em; margin: 0; color: #13273F; opacity: .9; } @media (max-width: 575px) { .hero-caption { padding: 26px 28px 28px; } .hero-eyebrow { font-size: 12px; letter-spacing: .26em; margin-bottom: 12px; } .hero-title { padding-bottom: 14px; margin-bottom: 12px; } .hero-subtitle { font-size: 15px; } } /* ---- Prev/next arrows ------------------------------------- */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(19, 39, 63, .35); color: #F4F0EA; border: 0; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 20px; z-index: 3; } .hero-arrow-prev { left: 24px; } .hero-arrow-next { right: 24px; } /* ---- Pagination dots -------------------------------------- */ .hero-dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(244, 240, 234, .5); cursor: pointer; padding: 0; } .hero-dot.is-active { background: #F4F0EA; } /* ---- Hero CTA "Xem sản phẩm" + all "Xem tất cả" buttons ---- Navy fill + cream label. Pancake's .x-button-wrapper carries the visible background box (set via the --color_00 CSS variable); the inner .x-button is the text label. Both need navy so the whole pill reads as one block. !important is needed to beat Pancake's id-scoped --color_00 rule. */ #BUTTON-glsd1m0q .x-button-wrapper, #BUTTON-glsd1m0q .x-button, #BUTTON-ok4s2h9h .x-button-wrapper, #BUTTON-ok4s2h9h .x-button, .btnTab .x-button-wrapper, .btnTab .x-button, .post-list__read-button { background: #13273F !important; border-color: #13273F !important; color: #F4F0EA !important; } #BUTTON-glsd1m0q:hover .x-button-wrapper, #BUTTON-glsd1m0q:hover .x-button, #BUTTON-ok4s2h9h:hover .x-button-wrapper, #BUTTON-ok4s2h9h:hover .x-button, .btnTab:hover .x-button-wrapper, .btnTab:hover .x-button, .post-list__read-button:hover { background: #F4F0EA !important; color: #13273F !important; border-color: #13273F !important; } /* ---- Outfit / styling list — title color override ---------- Pancake's static bundle hard-codes .post-list__title color to #000. Override here so outfit titles ("Outfit mùa hè tối giản" etc.) read in brand navy. */ .post-list__title, .post-list__title-link, .post-list__description { color: #13273F !important; } /* ---- Section tabs ("NEW ARRIVAL" / "BEST SELLER") ---------- */ /* Force the nav labels to brand navy; inactive sits at 55% opacity so the active item still pops. Underline highlight is navy too. */ .cake-tabs-nav-list .tabs-nav-item span { color: #13273F !important; opacity: .55; transition: opacity .2s ease; } .cake-tabs-nav-list .tabs-nav-item.active span, .cake-tabs-nav-list .tabs-nav-item:hover span { opacity: 1; } .cake-tabs-nav-list .tabs-nav-item .highlight-icon { background: #13273F !important; } /* ---- Product-list empty state ----------------------------- */ .home-empty { padding: 40px 0; text-align: center; width: 100%; }