/* ========================================================================== SHAHAZ.com — Homepage section styles (assets/css/shahaz-homepage.css) Homepage only. Spacing, gutters and the shared section header live in assets/css/shahaz-home-layout.css; the Category Section and the Luxury Promotions in their own files. Contents: 1. Container 5. Luxury World entry 2. Video tap feedback 6. Marketplace Entry Point (fixed design) + hero background 3. Vouchers 7. Tap / focus resets 4. Vendor Spotlight 8. Mobile header flow ========================================================================== */ /* 1. Container — ZIP-374 (owner): clean white, no cream/gold tint behind the sections */ .shahaz-homepage { background: #fff; overflow-x: hidden; } /* 2. Video tap feedback (created by shahaz-home-video-sound-controller.js) */ .shahaz-video-tap-feedback{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%) scale(.82);padding:7px 10px;border-radius:999px;background:rgba(20,8,24,.84);color:#fff;box-shadow:none;font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap;opacity:0;pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .16s ease,transform .22s cubic-bezier(.2,.8,.2,1);box-sizing:border-box;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis} .shahaz-video-tap-feedback.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)} .shahaz-video-tap-feedback.is-on{box-shadow:0 0 0 1px rgba(255,215,90,.32) inset} .shahaz-video-tap-feedback.is-off{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset} @media(prefers-reduced-motion:reduce){.shahaz-video-tap-feedback{transition:none}} /* 4. Vendor Spotlight — ZIP-523: its own file now, assets/css/shahaz-vendor-spotlight.css (owner reference "Brand Spotlight"). */ /* 5. Luxury World entry (template-parts/home/07a-luxury-world-entry.php) */ .shz-home-luxury-entry{position:relative;width:100%;margin:0;overflow:visible;isolation:isolate} .shz-home-luxury-entry__link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,46%);grid-template-rows:auto auto;align-items:center;column-gap:clamp(18px,2.8vw,42px);row-gap:clamp(16px,2vw,24px);min-height:clamp(250px,24vw,330px);padding:clamp(22px,2.8vw,38px) clamp(18px,3.2vw,44px) clamp(18px,2.2vw,28px);border:1px solid rgba(190,18,111,.30);border-radius:clamp(18px,2.2vw,30px);text-decoration:none!important;color:#241d2d!important;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 86% 24%,rgba(255,0,143,.18),transparent 30%),linear-gradient(115deg,rgba(255,255,255,.72),rgba(255,235,246,.50) 46%,rgba(255,214,235,.38));box-shadow:none;transform:none;opacity:1;transition:box-shadow .35s ease,border-color .35s ease} .shz-home-luxury-entry__link:hover{transform:none;border-color:rgba(190,18,111,.48);box-shadow:none} .shz-home-luxury-entry__link::before{content:"";position:absolute;inset:1px;z-index:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.34) 46%,transparent 62%);background-size:220% 100%;animation:shzLuxuryEntryBreath 7.5s ease-in-out infinite} .shz-home-luxury-entry__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:5;background:linear-gradient(90deg,transparent,#f00091,#ffd45f,#f00091,transparent);background-size:220% 100%;animation:shzLuxuryEntryEdge 4.8s linear infinite;pointer-events:none} .shz-home-luxury-entry__copy{position:relative;z-index:4;display:grid;gap:clamp(5px,.55vw,8px);min-width:0} .shz-home-luxury-entry__eyebrow{font-size:clamp(.62rem,.78vw,.76rem);font-weight:900;letter-spacing:.22em;line-height:1.2;color:#a80a65;text-transform:uppercase} .shz-home-luxury-entry__copy strong{font-size:clamp(1.45rem,3.25vw,3rem);line-height:1.02;font-weight:900;letter-spacing:-.035em;color:#241d2d;text-wrap:balance;text-shadow:none} .shz-home-luxury-entry__copy strong em{font-style:normal;color:#d4007e} .shz-home-luxury-entry__subtitle{max-width:64rem;font-size:clamp(.78rem,1.12vw,1rem);line-height:1.45;font-weight:650;color:#4d4051} .shz-home-luxury-entry__visuals{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:clamp(7px,1.15vw,15px);width:100%;min-width:0;height:clamp(118px,13vw,178px);pointer-events:none} .shz-home-luxury-entry__visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;aspect-ratio:1/1.08;border:2px solid rgba(255,255,255,.94);border-radius:clamp(12px,1.35vw,18px);overflow:hidden;background:rgba(255,245,250,.68);box-shadow:0 0 0 1px rgba(190,18,111,.28);text-decoration:none!important;pointer-events:auto;transform:none;transition:transform .28s ease,box-shadow .28s ease,filter .28s ease} .shz-home-luxury-entry__visual:hover,.shz-home-luxury-entry__visual:focus-visible,.shz-home-luxury-entry__visual.is-hovered{transform:translateY(-3px);box-shadow:none;filter:saturate(1.04)} .shz-home-luxury-entry__visual-media{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0;user-select:none;-webkit-user-drag:none;transition:opacity .25s ease,transform .35s ease} .shz-home-luxury-entry__visual-media.is-changing{animation:shzLuxuryProductSwap .34s ease both} .shz-home-luxury-entry__portal{position:relative;z-index:5;grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:clamp(9px,1vw,14px);width:100%;min-width:0;padding:clamp(13px,1.25vw,17px) clamp(16px,1.8vw,24px);border:1px solid rgba(255,255,255,.72);border-radius:999px;background:linear-gradient(135deg,rgba(91,0,67,.96),rgba(205,0,121,.96) 55%,rgba(245,49,151,.94));box-shadow:none;color:#fff!important;font-size:clamp(.68rem,.9vw,.82rem);font-weight:900;letter-spacing:.10em;text-align:center;white-space:nowrap;text-decoration:none!important;transform:translateZ(0);transition:transform .3s ease,box-shadow .3s ease} .shz-home-luxury-entry__portal::before{content:"";position:absolute;inset:-2px;border-radius:inherit;border:1px solid rgba(255,209,103,.62);pointer-events:none;animation:shzLuxuryEntryPulse 2.8s ease-in-out infinite} .shz-home-luxury-entry__portal-label{position:relative;z-index:2} .shz-home-luxury-entry__portal-line{position:relative;width:clamp(18px,2vw,28px);height:1px;background:rgba(255,255,255,.86);box-shadow:none;transition:width .3s ease} .shz-home-luxury-entry__portal:hover{transform:translateY(-2px) scale(1.008);box-shadow:none} .shz-home-luxury-entry__portal:hover .shz-home-luxury-entry__portal-line{width:clamp(24px,2.7vw,36px)} .shz-home-luxury-entry__aurora{position:absolute;z-index:1;width:clamp(120px,18vw,250px);aspect-ratio:1;border-radius:50%;pointer-events:none;will-change:transform,opacity;animation:shzLuxuryEntryAurora 7s ease-in-out infinite} .shz-home-luxury-entry__aurora--one{right:5%;top:-72%;background:radial-gradient(circle,rgba(255,255,255,.86) 0 4%,rgba(255,118,202,.68) 14%,rgba(240,0,145,.30) 40%,transparent 70%)} .shz-home-luxury-entry__aurora--two{left:28%;bottom:-82%;background:radial-gradient(circle,rgba(255,255,255,.86) 0 4%,rgba(255,118,202,.4) 18%,rgba(240,0,145,.22) 42%,transparent 70%);animation-delay:-3.2s} .shz-home-luxury-entry__ring{position:absolute;z-index:2;width:clamp(180px,25vw,360px);aspect-ratio:1;border:1px solid rgba(217,27,140,.17);border-radius:50%;pointer-events:none;transform:rotate(-14deg);animation:shzLuxuryEntryRing 9s ease-in-out infinite} .shz-home-luxury-entry__ring--one{right:-8%;top:-68%}.shz-home-luxury-entry__ring--two{left:-9%;bottom:-78%;animation-delay:-4.2s} .shz-home-luxury-entry__sheen{position:absolute;z-index:3;top:-30%;bottom:-30%;left:-24%;width:18%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.58),transparent);transform:skewX(-18deg) translateX(-150%);animation:shzLuxuryEntrySheen 5.8s ease-in-out infinite;pointer-events:none} .shz-home-luxury-entry__sparkfield{position:absolute;inset:0;z-index:3;pointer-events:none} .shz-home-luxury-entry__sparkfield i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:none;opacity:0;animation:shzLuxuryEntrySpark 3.6s ease-in-out infinite} .shz-home-luxury-entry__sparkfield i:nth-child(1){left:12%;top:24%;animation-delay:-.3s}.shz-home-luxury-entry__sparkfield i:nth-child(2){left:32%;top:78%;animation-delay:-1.7s}.shz-home-luxury-entry__sparkfield i:nth-child(3){left:47%;top:18%;animation-delay:-2.4s}.shz-home-luxury-entry__sparkfield i:nth-child(4){left:63%;top:70%;animation-delay:-.9s}.shz-home-luxury-entry__sparkfield i:nth-child(5){right:25%;top:20%;animation-delay:-2.9s}.shz-home-luxury-entry__sparkfield i:nth-child(6){right:12%;top:76%;animation-delay:-1.2s}.shz-home-luxury-entry__sparkfield i:nth-child(7){left:7%;top:63%;animation-delay:-3.1s}.shz-home-luxury-entry__sparkfield i:nth-child(8){right:42%;top:86%;animation-delay:-2s} @keyframes shzLuxuryEntryBreath{0%,100%{background-position:100% 0;opacity:.35}50%{background-position:0 0;opacity:.82}} @keyframes shzLuxuryEntryEdge{0%{background-position:100% 0}100%{background-position:-100% 0}} @keyframes shzLuxuryEntryPulse{0%,100%{opacity:.45;transform:scale(.985)}50%{opacity:.95;transform:scale(1.008)}} @keyframes shzLuxuryEntryAurora{0%,100%{transform:translate3d(-10px,0,0) scale(.88);opacity:.42}50%{transform:translate3d(18px,12px,0) scale(1.12);opacity:.72}} @keyframes shzLuxuryEntryRing{0%,100%{transform:rotate(-14deg) scale(.96);opacity:.42}50%{transform:rotate(3deg) scale(1.04);opacity:.78}} @keyframes shzLuxuryEntrySheen{0%,58%{transform:skewX(-18deg) translateX(-150%);opacity:0}68%{opacity:.85}84%,100%{transform:skewX(-18deg) translateX(720%);opacity:0}} @keyframes shzLuxuryEntrySpark{0%,100%{opacity:0;transform:scale(.35)}35%{opacity:.92;transform:scale(1.25)}62%{opacity:.28;transform:scale(.72)}} @keyframes shzLuxuryProductSwap{0%{opacity:.35;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}} @media (max-width:900px){.shz-home-luxury-entry__link{grid-template-columns:minmax(0,1fr) minmax(245px,44%);column-gap:18px}.shz-home-luxury-entry__visuals{gap:7px;height:126px}} @media (max-width:700px){.shz-home-luxury-entry__link{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:14px;min-height:0;padding:18px 14px 16px;border-radius:22px}.shz-home-luxury-entry__copy{grid-row:1}.shz-home-luxury-entry__copy strong{font-size:clamp(1.65rem,8.5vw,2.35rem);line-height:1.02}.shz-home-luxury-entry__subtitle{display:none!important}.shz-home-luxury-entry__eyebrow{font-size:.60rem;letter-spacing:.18em}.shz-home-luxury-entry__visuals{grid-row:2;width:100%;height:clamp(82px,24vw,118px);gap:6px}.shz-home-luxury-entry__visual{border-radius:12px}.shz-home-luxury-entry__portal{grid-row:3;min-height:48px;padding:13px 16px}.shz-home-luxury-entry__portal-line{width:24px}} @media (max-width:390px){.shz-home-luxury-entry__link{padding:16px 10px 13px}.shz-home-luxury-entry__copy strong{font-size:1.55rem}.shz-home-luxury-entry__visuals{height:84px;gap:4px}.shz-home-luxury-entry__visual{border-width:1.5px;border-radius:10px}.shz-home-luxury-entry__portal{font-size:.66rem;letter-spacing:.08em}} @media (prefers-reduced-motion:reduce){.shz-home-luxury-entry__link,.shz-home-luxury-entry__link:hover{transform:none;transition:none}.shz-home-luxury-entry__link::before,.shz-home-luxury-entry__link::after,.shz-home-luxury-entry__aurora,.shz-home-luxury-entry__ring,.shz-home-luxury-entry__sheen,.shz-home-luxury-entry__sparkfield i,.shz-home-luxury-entry__portal::before{animation:none!important}} /* ===================================================================== * PHASE 42.1 — LUXURY WORLD HOMEPAGE PORTAL — 30% VERTICAL COMPRESSION * Surgical visual-only adjustment. The portal remains fully clickable and * its text/content stays intact; only vertical breathing room is reduced. * ===================================================================== */ .shz-home-luxury-entry__link{ /* Previous vertical sizing: clamp(132px,14vw,184px) + 18–32px vertical padding. * New target is approximately 70% of the previous vertical footprint. */ min-height:clamp(92px,9.8vw,129px); padding-top:clamp(13px,1.75vw,22px); padding-bottom:clamp(13px,1.75vw,22px); gap:clamp(10px,1.7vw,21px); } @media (max-width:700px){ .shz-home-luxury-entry__link{ gap:9px; padding-top:14px; padding-bottom:13px; } .shz-home-luxury-entry__copy{gap:5px} .shz-home-luxury-entry__copy strong{line-height:1.0} .shz-home-luxury-entry__subtitle{line-height:1.34} .shz-home-luxury-entry__portal{ min-height:38px; padding:9px 13px; } } @media (max-width:390px){ .shz-home-luxury-entry__link{ padding-top:12px; padding-bottom:11px; gap:8px; } .shz-home-luxury-entry__subtitle{line-height:1.30} .shz-home-luxury-entry__portal{min-height:36px;padding:8px 12px} } /* 6. SHAHAZ Marketplace Entry Carousel — ZIP 194 spacing refinement + seamless infinite loop */ .shahaz-marketplace-entry{--mpe-cols:6;--mpe-gap:clamp(6px,1vw,12px);--mpe-ratio:.78;--mpe-label-fs:clamp(7px,1.35vw,13px);--mpe-card-h:calc((100vw - (var(--mpe-cols) - 1) * var(--mpe-gap)) / var(--mpe-cols) / var(--mpe-ratio));--mpe-zoom-room:calc(var(--mpe-card-h) * .17);--mpe-label-drop:calc(var(--mpe-label-fs) * .616 - var(--mpe-card-h) * .041);position:relative;width:100%;margin:0 0 calc(min(0px, var(--mpe-label-drop)) - 1px);padding:0;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#ff5aa8 0%,#ff7fba 30%,#ffd84d 52%,#ff8bc6 76%,#ff5aa8 100%);background-size:220% 100%;animation:shahazMarketplaceBackground 14s ease-in-out infinite}.shahaz-marketplace-entry__track-wrap{position:relative;overflow:visible;padding:0}.shahaz-marketplace-entry__track{display:flex;align-items:stretch;gap:var(--mpe-gap);width:100%;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;padding:var(--mpe-zoom-room) 0 calc(max(0px, var(--mpe-label-drop)) + 1px);overscroll-behavior-x:contain}.shahaz-marketplace-entry__track::-webkit-scrollbar{display:none}.shahaz-marketplace-entry__card{position:relative;flex:0 0 calc((100% - (var(--mpe-cols) - 1) * var(--mpe-gap)) / var(--mpe-cols));min-width:0;aspect-ratio:var(--mpe-ratio);text-decoration:none;scroll-snap-align:center;transform:scale(.9);transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.2,1);z-index:1}.shahaz-marketplace-entry__card.is-focus{transform:translateY(calc(var(--mpe-card-h) * -.04)) scale(1.2);z-index:5}/* ZIP-351 (owner): every card curves the same way, like an edge-curved phone screen; only the colourful border stays (the extra white inner ring is gone); the photo sits inside it like a showcase. */.shahaz-marketplace-entry__media{position:relative;display:block;width:100%;height:calc(100% - 18%);overflow:hidden;border:0;border-radius:22% / 17%;background:#fff;box-shadow:none}.shahaz-marketplace-entry__image{position:absolute;inset:5.5%;width:89%;height:89%;border-radius:17% / 13%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease}.shahaz-marketplace-entry__image.is-visible{opacity:1}.shahaz-marketplace-entry__live-border{position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(120deg,#ff087f,#ffd84d,#7a00ff,#ff087f) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.95;animation:shahazMarketplaceBorder 4.2s linear infinite}.shahaz-marketplace-entry__label{position:relative;display:flex;align-items:center;justify-content:center;height:18%;padding:3px 2px;text-align:center;overflow:hidden}.shahaz-marketplace-entry__label strong{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--mpe-label-fs);font-weight:1000;line-height:1.1;color:#65005f;text-shadow:none}.shahaz-marketplace-entry__card.is-focus .shahaz-marketplace-entry__label strong{color:#d90072}@keyframes shahazMarketplaceBorder{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}@keyframes shahazMarketplaceBackground{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@media(max-width:390px){.shahaz-marketplace-entry{--mpe-cols:5;--mpe-gap:6px;--mpe-label-fs:7px}}@media(min-width:768px){.shahaz-marketplace-entry{--mpe-ratio:.82}.shahaz-marketplace-entry__media{height:82%}.shahaz-marketplace-entry__label{height:18%}}@media(prefers-reduced-motion:reduce){.shahaz-marketplace-entry__card,.shahaz-marketplace-entry__image{transition:none}.shahaz-marketplace-entry__live-border, .shahaz-marketplace-entry{animation:none}} /* Requested: remove the shadow/3D effect behind Marketplace Entry labels. */ .shahaz-marketplace-entry__label strong { text-shadow: none; } /* ZIP-206 — Marketplace Entry Point 1 vertical spacing: ONE rule set for * mobile, tablet and desktop (variables live on the base rule above). * · Top: the track's top padding equals exactly how far the centred card * grows when it zooms (scale 1.12 → 6% of the card height per side), so * the zoomed card can never be clipped or slide under the header on any * screen. The breathing room above it is the header's own bottom padding. * · Bottom: --mpe-label-drop is how far the zoomed card's label text reaches * past the card box; the track bottom padding + section bottom margin put * that text exactly on the section edge, so the next section's own top * padding is the same small gap on every device. * Card size, aspect ratio, zoom and carousel behaviour are unchanged. */ /* ZIP-218: Remove touch/focus highlight and text shadow from Homepage Marketplace Entry cards only. */ .shahaz-marketplace-entry__card, .shahaz-marketplace-entry__card:focus, .shahaz-marketplace-entry__card:active{ -webkit-tap-highlight-color:transparent; outline:none!important; box-shadow:none!important; } .shahaz-marketplace-entry__label strong{ text-shadow:none!important; } /* 7. ZIP-269 QA FINAL — remove browser/UA blue click-focus treatment across the * entire homepage interaction surface without changing the existing SHAHAZ * magenta/gold focus-visible designs. Touch highlight is also neutralized so * mobile taps do not flash a blue rectangular overlay. */ .shahaz-homepage a, .shahaz-homepage button, .shahaz-homepage [role="button"], .shahaz-homepage input, .shahaz-homepage select, .shahaz-homepage textarea{ -webkit-tap-highlight-color:transparent; } .shahaz-homepage a:focus:not(:focus-visible), .shahaz-homepage button:focus:not(:focus-visible), .shahaz-homepage [role="button"]:focus:not(:focus-visible), .shahaz-homepage input:focus:not(:focus-visible), .shahaz-homepage select:focus:not(:focus-visible), .shahaz-homepage textarea:focus:not(:focus-visible){ outline:none!important; box-shadow:none!important; } /* ZIP-274 QA: prevent the browser's blue rectangular focus treatment from * appearing after taps/clicks on homepage links, cards and controls. */ .shahaz-homepage a:focus, .shahaz-homepage button:focus, .shahaz-homepage [role="button"]:focus, .shahaz-homepage input:focus, .shahaz-homepage select:focus, .shahaz-homepage textarea:focus{ -webkit-tap-highlight-color:transparent!important; outline:none!important; } .shahaz-homepage a:active, .shahaz-homepage button:active, .shahaz-homepage [role="button"]:active, .shahaz-homepage input:active, .shahaz-homepage select:active, .shahaz-homepage textarea:active{ -webkit-tap-highlight-color:transparent!important; } /* ========================================================= * HOMEPAGE MEDIA/INTERACTION QA — NON-KEYBOARD TAP FOCUS * Preserve intentional :focus-visible accessibility while preventing * browser/WebView blue tap rectangles during ordinary pointer/touch use. * ========================================================= */ #shahaz-homepage a:focus:not(:focus-visible), #shahaz-homepage button:focus:not(:focus-visible), #shahaz-homepage [role="button"]:focus:not(:focus-visible), #shahaz-homepage [tabindex]:focus:not(:focus-visible) { outline: none !important; -webkit-tap-highlight-color: transparent !important; } #shahaz-homepage a, #shahaz-homepage button, #shahaz-homepage [role="button"] { -webkit-tap-highlight-color: transparent; } /* ZIP-476 (owner): the focused entry card zooms 1.2× and rises 4 % of its height; the row keeps 17 % of the card * height free above it (--mpe-zoom-room) so the zoomed card is never cut, under every header design. */ /* Marketplace Entry Point + banner area: clean white background by default. * The animated pink/gold background returns only with body.shz-mpe1-color-bg * (admin switch). */ body:not(.shz-mpe1-color-bg) .shahaz-marketplace-entry{ background:#ffffff !important; animation:none !important; } /* 8. Mobile header flow */ @media (max-width:767px){ #shahaz-header ~ .shahaz-homepage-main, #shahaz-header ~ main{ position:relative; } }