/** * ToysEasy Homepage Hero * * Static presentation only. * WoodMart remains responsible for Slider / Swiper runtime behavior. */ /* ========================================================= HOMEPAGE HERO — DESKTOP Original artwork ratio: 1920 × 450 ========================================================= */ @media (min-width: 1025px) { /* * Remove Elementor's default column padding. * Prevents Header ↔ Hero gap. */ body.home [class~="elementor-element-0000003"] > .elementor-container > .elementor-column > .elementor-element-populated { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } /* * Do NOT control Slider width here. * * Width/stretch remains under WoodMart/P13 during this migration step. * This file only establishes the final aspect ratio. */ body.home #slider-73 { height: auto !important; min-height: 0 !important; aspect-ratio: 1920 / 450 !important; } /* * Children follow the stable parent height. */ body.home #slider-73 .wd-carousel-container, body.home #slider-73 .wd-carousel-inner, body.home #slider-73 .wd-carousel, body.home #slider-73 .wd-slide { height: 100% !important; min-height: 0 !important; } /* * Hero artwork. * * No transform. * No delayed class. * No JS geometry recalculation. */ body.home #slider-73 .wd-slide-bg { width: 100% !important; height: 100% !important; min-height: 0 !important; background-position: center center !important; background-repeat: no-repeat !important; /* Protect against subpixel bright seams. */ background-color: #121312 !important; } } /* ========================================================= HERO-C — LEGACY HERO VISUAL POLISH Migrated from CSS-only MU plugins. WoodMart remains the Slider runtime owner. ========================================================= */ /* ========================================================= HERO-C migrated from: toyseasy-hero-arrows-hover.php Exact CSS extracted from former MU plugin. ========================================================= */ /* Hero slider navigation buttons */ .wd-slider .wd-btn-arrow, .wd-slider .wd-nav-arrows > div, .wd-slider .swiper-button-prev, .wd-slider .swiper-button-next, .woodmart-slider .wd-btn-arrow, .woodmart-slider .swiper-button-prev, .woodmart-slider .swiper-button-next { border-radius: 4px !important; transition: background-color .18s ease, color .18s ease !important; } /* Hover: whole arrow area = yellow */ .wd-slider .wd-btn-arrow:hover, .wd-slider .wd-nav-arrows > div:hover, .wd-slider .swiper-button-prev:hover, .wd-slider .swiper-button-next:hover, .woodmart-slider .wd-btn-arrow:hover, .woodmart-slider .swiper-button-prev:hover, .woodmart-slider .swiper-button-next:hover { background-color: #FFC700 !important; color: #111 !important; } /* Arrow icon itself becomes black */ .wd-slider .wd-btn-arrow:hover:before, .wd-slider .wd-nav-arrows > div:hover:before, .wd-slider .swiper-button-prev:hover:after, .wd-slider .swiper-button-next:hover:after, .woodmart-slider .wd-btn-arrow:hover:before, .woodmart-slider .swiper-button-prev:hover:after, .woodmart-slider .swiper-button-next:hover:after { color: #111 !important; } /* SVG arrows if WoodMart uses SVG */ .wd-slider .wd-btn-arrow:hover svg, .wd-slider .swiper-button-prev:hover svg, .wd-slider .swiper-button-next:hover svg, .woodmart-slider .wd-btn-arrow:hover svg, .woodmart-slider .swiper-button-prev:hover svg, .woodmart-slider .swiper-button-next:hover svg { color: #111 !important; stroke: currentColor !important; fill: currentColor !important; } /* TOYSEASY HERO DEFAULT BLACK + NO DOTS V1 */ /* * ONLY change the normal/default arrow background. * :not(:hover) is intentional so the existing yellow hover * effect remains untouched. */ .wd-slider .wd-btn-arrow:not(:hover), .wd-slider .wd-nav-arrows > div:not(:hover), .wd-slider .swiper-button-prev:not(:hover), .wd-slider .swiper-button-next:not(:hover), .woodmart-slider .wd-btn-arrow:not(:hover), .woodmart-slider .wd-nav-arrows > div:not(:hover), .woodmart-slider .swiper-button-prev:not(:hover), .woodmart-slider .swiper-button-next:not(:hover) { background-color: #111318 !important; } /* Remove ONLY Hero Slider pagination dots */ .wd-slider .swiper-pagination, .wd-slider .swiper-pagination-bullets, .wd-slider .wd-nav-pagin, .wd-slider .wd-nav-pagin-wrap, .woodmart-slider .swiper-pagination, .woodmart-slider .swiper-pagination-bullets, .woodmart-slider .wd-nav-pagin, .woodmart-slider .wd-nav-pagin-wrap { display: none !important; } /* END TOYSEASY HERO DEFAULT BLACK + NO DOTS V1 */ /* ========================================================= HERO-C migrated from: toyseasy-hero-cursor.php Exact CSS extracted from former MU plugin. ========================================================= */ /* * Hero Slider: * override WoodMart/Swiper grab cursor * with normal clickable pointer cursor. */ .wd-slider, .wd-slider .wd-slide, .wd-slider .wd-slide *, .woodmart-slider, .woodmart-slider .woodmart-slide, .woodmart-slider .woodmart-slide * { cursor: pointer !important; } /* Prevent mouse-down from changing back to grabbing hand */ .wd-slider:active, .wd-slider .wd-slide:active, .wd-slider .wd-slide *:active, .woodmart-slider:active, .woodmart-slider .woodmart-slide:active, .woodmart-slider .woodmart-slide *:active { cursor: pointer !important; } /* ========================================================= HERO-C migrated from: toyseasy-hero-hover.php Exact CSS extracted from former MU plugin. ========================================================= */ /* 防止放大 1% 后超出 Slider 边缘 */ .wd-slider .wd-slide, .woodmart-slider .woodmart-slide { overflow: hidden !important; } /* Hero 背景动画 */ .wd-slider .wd-slide .wd-slide-bg, .woodmart-slider .woodmart-slide .wd-slide-bg { transition: transform .35s ease, filter .35s ease !important; transform-origin: center center !important; } /* 鼠标经过：轻微放大 + 轻微提亮 */ .wd-slider .wd-slide:hover .wd-slide-bg, .woodmart-slider .woodmart-slide:hover .wd-slide-bg { transform: scale(1.01) !important; filter: brightness(1.035) !important; } /* 有链接的 Slide 显示手型 */ .wd-slider .wd-slide a[href], .woodmart-slider .woodmart-slide a[href], .wd-slider .wd-slide:has(a[href]), .woodmart-slider .woodmart-slide:has(a[href]) { cursor: pointer !important; } /* 减少动画用户不强行动画 */ @media (prefers-reduced-motion: reduce) { .wd-slider .wd-slide .wd-slide-bg, .woodmart-slider .woodmart-slide .wd-slide-bg { transition: none !important; } } /* END HERO-C */ /* ========================================================== HOMEPAGE HERO — NEUTRALIZE WOODMART NEGATIVE GAP Keep wd-negative-gap full-width behavior, but prevent the Hero container from extending 10px outside the viewport. ========================================================== */ @media (min-width: 1025px) { body.home .elementor-element-0000003.wd-negative-gap > .elementor-container { margin-left: 0 !important; margin-right: 0 !important; } } /* END HOMEPAGE HERO NEGATIVE GAP FIX */ /* ========================================================= HOMEPAGE HERO — TABLET NEGATIVE GAP FIX WoodMart keeps wd-negative-gap active below desktop. Prevent the hero container from escaping the viewport. ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-element-00000003.wd-negative-gap > .elementor-container { margin-left: 0 !important; margin-right: 0 !important; } } /* END HOMEPAGE HERO TABLET NEGATIVE GAP FIX */ /* ============================================================ HOMEPAGE HERO — WOODMART STRETCH EDGE FIX Prevent fractional wd-section-stretch geometry from leaving a visible strip at the viewport edge. ============================================================ */ @media (min-width: 1025px) { body.home .entry-content > .elementor > .elementor-top-section.wd-negative-gap:first-child .wd-slider.wd-section-stretch { left: 0 !important; right: auto !important; width: calc(100% + 30px) !important; max-width: none !important; margin-left: -15px !important; margin-right: -15px !important; } } /* END HOMEPAGE HERO STRETCH EDGE FIX */