/* ===================================================================== BANNER ENHANCE - ADBELEM (estilo Saks) --------------------------------------------------------------------- Adiciona 3 melhorias visuais ao banner existente: 1. Dots visíveis com barrinha de progresso animada 2. Transição SLIDE HORIZONTAL estilo Saks (sem sobreposição visual) 3. Fade-in inicial elegante quando carrega Carregar DEPOIS de home.css no : ===================================================================== */ /* ===================================================================== 1. VARIÁVEIS GLOBAIS ===================================================================== */ :root { --banner-slide-duration: 5s; /* sincronizado com data-interval via JS */ --banner-transition-speed: 1800ms; /* velocidade do deslize horizontal */ } /* ===================================================================== 2. TRANSIÇÃO SLIDE HORIZONTAL (estilo Saks) --------------------------------------------------------------------- O slide ATIVO ocupa a tela (z-index alto, à frente). O slide ANTERIOR (was-active) fica POR TRÁS escondido (z-index baixo). Só o slide que está entrando é visível durante a transição. ===================================================================== */ .home-banner .banner-slider { overflow: hidden; } /* Estado padrão: slides fora de tela à direita, INVISÍVEIS */ .home-banner .banner-slide { transition: transform var(--banner-transition-speed) cubic-bezier(0.25, 0.1, 0.25, 1); transform: translateX(100%); opacity: 1; /* sempre opaco — quem controla visibilidade é o z-index */ z-index: 1; /* fica POR TRÁS por padrão */ } /* Slide ATIVO ocupa a tela e fica NA FRENTE */ .home-banner .banner-slide.active { transform: translateX(0); z-index: 3; /* fica POR CIMA de tudo */ } /* Slide anterior — ainda visível, mas POR TRÁS do ativo */ .home-banner .banner-slide.was-active { transform: translateX(-100%); z-index: 2; /* fica ATRÁS do ativo, mas na frente dos outros */ } /* ===================================================================== 3. DOTS VISÍVEIS COM BARRINHA DE PROGRESSO ===================================================================== */ .home-banner .banner-dots { display: flex !important; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); gap: 10px; z-index: 10; } .home-banner .banner-dot { width: 36px; height: 4px; background: rgba(255, 255, 255, 0.4); border-radius: 2px; border: none; padding: 0; cursor: pointer; position: relative; overflow: hidden; transition: background 0.3s; } .home-banner .banner-dot:hover { background: rgba(255, 255, 255, 0.6); } .home-banner .banner-dot.active { background: rgba(255, 255, 255, 0.4); } .home-banner .banner-dot::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #fff; border-radius: 2px; } .home-banner .banner-dot.active::after { width: 100%; animation: bannerProgressFill var(--banner-slide-duration) linear forwards; } .home-banner .banner-dot.active.reset-progress::after { animation: none; width: 0; } @keyframes bannerProgressFill { from { width: 0%; } to { width: 100%; } } @media (max-width: 768px) { .home-banner .banner-dot { width: 28px; } } /* ===================================================================== 4. FADE-IN INICIAL DO BANNER ===================================================================== */ .home-banner { opacity: 0; transition: opacity 0.8s ease-out; } .home-banner.banner-ready { opacity: 1; } /* ===================================================================== 5. ACESSIBILIDADE ===================================================================== */ @media (prefers-reduced-motion: reduce) { .home-banner { transition: none !important; opacity: 1 !important; } .home-banner .banner-slide { transition: opacity 0.3s ease !important; transform: none !important; opacity: 0 !important; } .home-banner .banner-slide.active { transform: none !important; opacity: 1 !important; } .home-banner .banner-dot.active::after { animation: none !important; width: 100% !important; } }