/** * Sourcyness Slider for Elementor — Frontend Styles v1.0.5 * Critical layout styles are inlined by PHP in . This file handles * arrow presets, bullet presets, hover animations, and 3D effect setup. */ /* ============================================================ * 3D EFFECTS — Need different layout * ============================================================ */ /* Cube needs perspective on the wrapper */ .sourcyness-slider.sourcyness-effect-cube .swiper-wrapper { transform-style: preserve-3d; } /* Coverflow & Flip & Cards — Swiper handles internally; just need overflow visible on parent */ .sourcyness-slider.sourcyness-effect-coverflow, .sourcyness-slider.sourcyness-effect-cards { overflow: visible !important; } .sourcyness-slider.sourcyness-effect-coverflow .swiper-slide, .sourcyness-slider.sourcyness-effect-cards .swiper-slide, .sourcyness-slider.sourcyness-effect-flip .swiper-slide, .sourcyness-slider.sourcyness-effect-cube .swiper-slide { backface-visibility: hidden; } /* Fade — make slides stack via Swiper's class (Swiper handles opacity) */ .sourcyness-slider.sourcyness-effect-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .sourcyness-slider.sourcyness-effect-fade .swiper-slide-active { pointer-events: auto; } /* Creative — additional polish */ .sourcyness-slider.sourcyness-effect-creative { perspective: 1200px; } /* ============================================================ * VIDEO & EMBED RESPONSIVE BEHAVIOR * ============================================================ */ .sourcyness-slide__video { /* Already positioned by inline CSS — just ensure it inherits cover */ pointer-events: none; } /* On very small viewports, swap embeds for the poster image (saves bandwidth + mobile autoplay restrictions) */ @media (max-width: 767px) { .sourcyness-slide__embed { display: none !important; } .sourcyness-slide__bg--poster { display: block !important; } } .sourcyness-slide__bg--poster { /* Hidden on desktop when embed loads; shown on mobile */ display: none; } @media (min-width: 768px) { /* Desktop: only show poster as fallback if iframe fails — handled by JS */ .sourcyness-slide--youtube .sourcyness-slide__bg--poster, .sourcyness-slide--vimeo .sourcyness-slide__bg--poster { display: block; } } /* ============================================================ * ARROWS — BASE LAYOUT * ============================================================ */ .sourcyness-slider .swiper-button-next, .sourcyness-slider .swiper-button-prev { width: 44px !important; height: 44px !important; margin-top: -22px !important; color: #fff !important; background-color: rgba(0, 0, 0, 0.35) !important; border: none; cursor: pointer; z-index: 10 !important; display: flex !important; align-items: center; justify-content: center; transition: all 0.3s ease; } .sourcyness-slider .swiper-button-next:after, .sourcyness-slider .swiper-button-prev:after { font-family: inherit !important; font-size: 22px !important; font-weight: 700; line-height: 1; transition: transform 0.3s ease; } /* ============================================================ * ARROW SHAPES * ============================================================ */ .sourcyness-arrows-shape-circle .swiper-button-next, .sourcyness-arrows-shape-circle .swiper-button-prev { border-radius: 50% !important; } .sourcyness-arrows-shape-square .swiper-button-next, .sourcyness-arrows-shape-square .swiper-button-prev { border-radius: 0 !important; } .sourcyness-arrows-shape-rounded .swiper-button-next, .sourcyness-arrows-shape-rounded .swiper-button-prev { border-radius: 8px !important; } .sourcyness-arrows-shape-none .swiper-button-next, .sourcyness-arrows-shape-none .swiper-button-prev { background-color: transparent !important; border-radius: 0 !important; border: none !important; } /* ============================================================ * ARROW PRESETS — Each preset overrides the :after content * ============================================================ */ /* Chevron */ .sourcyness-arrows-preset-chevron .swiper-button-prev:after { content: '\2039' !important; } .sourcyness-arrows-preset-chevron .swiper-button-next:after { content: '\203A' !important; } .sourcyness-arrows-preset-chevron .swiper-button-prev:after, .sourcyness-arrows-preset-chevron .swiper-button-next:after { font-size: 1.5em; line-height: 0.9; margin-top: -0.05em; } /* Arrow */ .sourcyness-arrows-preset-arrow .swiper-button-prev:after { content: '\2190' !important; } .sourcyness-arrows-preset-arrow .swiper-button-next:after { content: '\2192' !important; } /* Line (minimal — uses pseudo-element borders) */ .sourcyness-arrows-preset-line .swiper-button-prev:after, .sourcyness-arrows-preset-line .swiper-button-next:after { content: '' !important; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; display: block; } .sourcyness-arrows-preset-line .swiper-button-prev:after { transform: rotate(-135deg); margin-left: 4px; } .sourcyness-arrows-preset-line .swiper-button-next:after { transform: rotate(45deg); margin-right: 4px; } /* Minimal Caret (^ rotated) */ .sourcyness-arrows-preset-minimal .swiper-button-prev:after { content: '\02C2' !important; } .sourcyness-arrows-preset-minimal .swiper-button-next:after { content: '\02C3' !important; } .sourcyness-arrows-preset-minimal .swiper-button-prev:after, .sourcyness-arrows-preset-minimal .swiper-button-next:after { font-weight: 300; font-size: 1.4em; } /* Bold block */ .sourcyness-arrows-preset-bold .swiper-button-prev:after { content: '\25C0' !important; } .sourcyness-arrows-preset-bold .swiper-button-next:after { content: '\25B6' !important; } .sourcyness-arrows-preset-bold .swiper-button-prev:after, .sourcyness-arrows-preset-bold .swiper-button-next:after { font-size: 0.85em; } /* ============================================================ * ARROW HOVER ANIMATIONS * ============================================================ */ .sourcyness-arrows-hover-grow .swiper-button-next:hover, .sourcyness-arrows-hover-grow .swiper-button-prev:hover { transform: scale(1.15); } .sourcyness-arrows-hover-shrink .swiper-button-next:hover, .sourcyness-arrows-hover-shrink .swiper-button-prev:hover { transform: scale(0.9); } .sourcyness-arrows-hover-slide .swiper-button-prev:hover:after { transform: translateX(-4px); } .sourcyness-arrows-hover-slide .swiper-button-next:hover:after { transform: translateX(4px); } .sourcyness-arrows-hover-slide.sourcyness-arrows-preset-line .swiper-button-prev:hover:after { transform: rotate(-135deg) translate(4px, -4px); } .sourcyness-arrows-hover-slide.sourcyness-arrows-preset-line .swiper-button-next:hover:after { transform: rotate(45deg) translate(4px, -4px); } .sourcyness-arrows-hover-pulse .swiper-button-next:hover, .sourcyness-arrows-hover-pulse .swiper-button-prev:hover { animation: sourcyness-arrow-pulse 0.6s ease infinite; } @keyframes sourcyness-arrow-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } /* ============================================================ * PAGINATION — BASE * ============================================================ */ .sourcyness-slider .swiper-pagination { bottom: 18px !important; z-index: 10 !important; line-height: 1; } .sourcyness-slider .swiper-pagination-bullet { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.5); opacity: 1 !important; margin: 0 5px !important; transition: all 0.3s ease; } .sourcyness-slider .swiper-pagination-bullet-active { background-color: #fff !important; } /* ============================================================ * PAGINATION PRESETS * ============================================================ */ /* Dots — default, just an active expansion */ .sourcyness-pagination-preset-dots .swiper-pagination-bullet-active { width: 28px !important; border-radius: 5px; } /* Dashes — wide rectangles */ .sourcyness-pagination-preset-dashes .swiper-pagination-bullet { width: 26px !important; height: 4px !important; border-radius: 0 !important; margin: 0 4px !important; } .sourcyness-pagination-preset-dashes .swiper-pagination-bullet-active { width: 38px !important; } /* Numbers — show 1, 2, 3 inside circles */ .sourcyness-pagination-preset-numbers .swiper-pagination-bullet { width: 28px !important; height: 28px !important; border-radius: 50% !important; background-color: rgba(255,255,255,0.25) !important; color: #fff; font-size: 13px; font-weight: 600; line-height: 28px !important; text-align: center; margin: 0 4px !important; opacity: 1 !important; /* number is injected via JS into innerHTML */ } .sourcyness-pagination-preset-numbers .swiper-pagination-bullet-active { background-color: #fff !important; color: #000; } /* Progress bar */ .sourcyness-pagination-preset-progress .swiper-pagination { height: 3px !important; bottom: 0 !important; left: 0 !important; width: 100% !important; background-color: rgba(255,255,255,0.2); } .sourcyness-pagination-preset-progress .swiper-pagination-progressbar-fill { background-color: #fff !important; } /* Fraction (1 / 5) */ .sourcyness-pagination-preset-fraction .swiper-pagination { color: #fff; font-size: 16px; font-weight: 600; text-align: right; right: 24px !important; left: auto !important; bottom: 18px !important; width: auto !important; background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 4px; } .sourcyness-pagination-preset-fraction .sourcyness-frac-current { color: #fff; font-weight: 700; } .sourcyness-pagination-preset-fraction .sourcyness-frac-sep { margin: 0 6px; opacity: 0.6; } /* ============================================================ * RESPONSIVE — SMALLER ARROWS ON MOBILE * ============================================================ */ @media (max-width: 767px) { .sourcyness-slider .swiper-button-next, .sourcyness-slider .swiper-button-prev { width: 36px !important; height: 36px !important; margin-top: -18px !important; } .sourcyness-slider .swiper-button-next:after, .sourcyness-slider .swiper-button-prev:after { font-size: 16px !important; } .sourcyness-pagination-preset-numbers .swiper-pagination-bullet { width: 24px !important; height: 24px !important; line-height: 24px !important; font-size: 11px; } } /* ============================================================ * REDUCED MOTION * ============================================================ */ @media (prefers-reduced-motion: reduce) { .sourcyness-slider * { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }