/* ========================================================= THEME — BLACK-ORANGE (por página) Tons: preto + cinza + laranja (accent) Cobre: Menu/Topbar + Mobile Menu, Hero overlay, Hero Play CTA, Countdown (Hero + Section), Promo+Info, Trailer, Footer, Carousel Uso: 1) 2) ========================================================= */ body[data-theme="black-orange"]{ /* Accent (laranja) substitui o “azul” do main */ --light-blue-1: #FF7A18; /* Gradientes de botões/CTAs (laranja “premium”) */ --gradient-light-blue-1: linear-gradient(137deg, #FF9A3D 0%, #FF6A00 100%); --gradient-light-blue-2: linear-gradient(137deg, #FF8A2B 0%, #FF5A00 100%); /* Cards em cinza escuro */ --card-color-1: #1A1A1A; --card-color-2: #121212; /* Glow laranja (mantém compatibilidade com quem usa --shadow-glow-blue) */ --shadow-glow: 0 0 18px rgba(255, 122, 24, .45); --shadow-glow-blue: var(--shadow-glow); } /* ========================================================= HERO — overlay preto (desktop + mobile) ========================================================= */ body[data-theme="black-orange"] .hero__overlay{ background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.78) 38%, rgba(0,0,0,0.26) 72%, rgba(0,0,0,0.00) 100% ); } @media (max-width: 830px){ body[data-theme="black-orange"] .hero__overlay{ background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.78) 38%, rgba(0,0,0,0.66) 70%, rgba(0,0,0,0.22) 100% ); } } /* ========================================================= MENU — preto translúcido com “tinta” laranja ========================================================= */ body[data-theme="black-orange"] .topbar{ background: rgba(0,0,0,.62); border-bottom: 1px solid rgba(255, 122, 24, .12); } /* links */ body[data-theme="black-orange"] .nav__link:hover{ color: #FF9A3D; text-shadow: var(--shadow-glow); } body[data-theme="black-orange"] .nav__link--gold{ color: #FF7A18; /* destaque laranja */ } body[data-theme="black-orange"] .nav__link--gold:hover{ color: #FFB066; text-shadow: var(--shadow-glow); } /* CTA do menu */ body[data-theme="black-orange"] .nav__cta:hover{ color: #FF7A18; box-shadow: var(--shadow-glow); } /* mobile menu */ body[data-theme="black-orange"] .mobile-menu{ background: rgba(0,0,0,.88); border-top: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .mobile-menu__link:hover{ color: #FF9A3D; text-shadow: var(--shadow-glow); } body[data-theme="black-orange"] .mobile-menu__link--gold{ color: #FF7A18; } body[data-theme="black-orange"] .mobile-menu__cta:hover{ color: #FF7A18; box-shadow: var(--shadow-glow); } /* ========================================================= HERO PLAY CTA — cobre .topbar__cta e .topbar__cta--blue ========================================================= */ body[data-theme="black-orange"] .topbar__cta:hover{ color: #FF7A18; box-shadow: var(--shadow-glow); } body[data-theme="black-orange"] .topbar__cta--blue{ border-color: rgba(255, 122, 24, .85); } body[data-theme="black-orange"] .topbar__cta--blue:hover{ background: var(--gradient-light-blue-2); border-color: rgba(255, 122, 24, 1); color: var(--white); box-shadow: var(--shadow-glow); } /* ========================================================= COUNTDOWN (Hero + Section) — cinza/preto + detalhes laranja ========================================================= */ body[data-theme="black-orange"] .countdown{ background: rgba(18,18,18,.72); border-color: rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .countdown__divider{ background: rgba(255,255,255,.14); } body[data-theme="black-orange"] .countdown__title{ color: rgba(255,255,255,.90); } /* Standalone countdown section */ body[data-theme="black-orange"] .countdown-section{ background: linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(0,0,0,.92) 55%, rgba(18,18,18,.96) 120% ); border-top: 1px solid rgba(255, 122, 24, .12); border-bottom: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .countdown.countdown--xl{ background: rgba(0,0,0,.50); border-color: rgba(255, 122, 24, .16); } /* ========================================================= PROMO + INFO — preto/cinza com gradiente sutil + cupom laranja ========================================================= */ body[data-theme="black-orange"] .promo-section, body[data-theme="black-orange"] .info-section{ background: linear-gradient(90deg, rgb(10,10,10) 0%, rgb(18,18,18) 55%, rgb(28,28,28) 130% ); } /* cupom */ body[data-theme="black-orange"] .coupon-code{ background: rgba(0,0,0,.55); border-color: #FF9A3D; box-shadow: 0 0 20px rgba(255, 122, 24, .22); animation: couponGlowOrange 1.2s ease-in-out infinite; } @keyframes couponGlowOrange{ 0%,100%{ box-shadow: 0 0 20px rgba(255, 122, 24, .20); } 50%{ box-shadow: 0 0 34px rgba(255, 122, 24, .45), 0 0 46px rgba(255, 122, 24, .18); } } /* botão copiar */ body[data-theme="black-orange"] .copy-btn{ background: #FF7A18; } body[data-theme="black-orange"] .copy-btn:hover{ background: #FF9A3D; box-shadow: 0 8px 18px rgba(255, 122, 24, .20); } /* CTA grande */ body[data-theme="black-orange"] .btn-primary-large{ background: var(--gradient-light-blue-2); box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .btn-primary-large:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 22px rgba(255, 122, 24, .28); filter: drop-shadow(0 0 16px rgba(255, 122, 24, .18)); } /* ========================================================= TRAILER — preto/cinza com borda laranja sutil ========================================================= */ body[data-theme="black-orange"] .trailer{ background: linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(0,0,0,.92) 55%, rgba(18,18,18,.96) 110% ); border-top: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .trailer__inner{ background: radial-gradient(circle at 20% 12%, rgba(255, 122, 24, .22), transparent 34%), radial-gradient(circle at 85% 22%, rgba(255, 154, 61, .16), transparent 30%), linear-gradient(180deg, rgba(18, 18, 18, .08), rgba(0, 0, 0, .28)); } body[data-theme="black-orange"] .trailer__title:last-of-type{ color: #FF9A3D; text-shadow: var(--shadow-glow); } body[data-theme="black-orange"] .video--plyr{ border: 1px solid rgba(255, 122, 24, .18); box-shadow: 0 24px 60px rgba(0,0,0,.50), 0 0 28px rgba(255, 122, 24, .10); } body[data-theme="black-orange"] .video--plyr .plyr{ --plyr-color-main: #FF7A18; } body[data-theme="black-orange"] .video--plyr .plyr__control--overlaid{ background: var(--gradient-light-blue-2); } body[data-theme="black-orange"] .video-link__play:hover, body[data-theme="black-orange"] .video--plyr .plyr__control--overlaid:hover{ box-shadow: var(--shadow-glow); } /* ========================================================= FOOTER — mantém preto, hover laranja ========================================================= */ body[data-theme="black-orange"] .footer__link:hover{ color: #FF9A3D; text-shadow: var(--shadow-glow); } /* ========================================================= CAROUSEL — preto/cinza com hover laranja ========================================================= */ body[data-theme="black-orange"] .carousel-section{ background: linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(0,0,0,.92) 55%, rgba(18,18,18,.96) 110% ); border-top: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .slideLeft, body[data-theme="black-orange"] .slideRight{ border-color: rgba(255, 122, 24, .20); background: rgba(0,0,0,.35); } body[data-theme="black-orange"] .slideLeft:hover, body[data-theme="black-orange"] .slideRight:hover{ background: rgba(0,0,0,.50); box-shadow: 0 10px 30px rgba(0,0,0,.35), var(--shadow-glow); } body[data-theme="black-orange"] .carousel__link, body[data-theme="black-orange"] .carousel-section .carousel a{ border-color: rgba(255, 122, 24, .10); background: rgba(0,0,0,.25); } body[data-theme="black-orange"] .carousel__link:hover, body[data-theme="black-orange"] .carousel-section .carousel a:hover{ border-color: rgba(255, 122, 24, .22); box-shadow: 0 18px 40px rgba(0,0,0,.48), var(--shadow-glow); } /* ========================================================= SEÇÕES ADICIONAIS — Lang Switcher, Timeline, Form, Banner, Elements ========================================================= */ body[data-theme="black-orange"] .lang-switcher__trigger{ background: rgba(0,0,0,.42); border-color: rgba(255, 122, 24, .22); } body[data-theme="black-orange"] .lang-switcher__trigger:hover{ box-shadow: var(--shadow-glow); border-color: rgba(255, 122, 24, .42); } body[data-theme="black-orange"] .lang-switcher__popover{ background: rgba(0,0,0,.96); border: 1px solid rgba(255, 122, 24, .20); border-color: rgba(255, 122, 24, .20); } body[data-theme="black-orange"] .lang-switcher__option{ color: #ffe6cf; } body[data-theme="black-orange"] .lang-switcher__option:hover{ background: rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .timeline-section{ background: linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(0,0,0,.92) 55%, rgba(18,18,18,.96) 110% ); border-top: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .timeline__card{ background: rgba(0,0,0,.60); border-color: rgba(255, 122, 24, .18); } body[data-theme="black-orange"] .timeline__axis{ background: rgba(255, 122, 24, .28); } body[data-theme="black-orange"] .timeline__dot, body[data-theme="black-orange"] .timeline__line, body[data-theme="black-orange"] .timeline__icon{ border-color: rgba(255, 122, 24, .34); } body[data-theme="black-orange"] .timeline__icon{ color: #FF9A3D; } body[data-theme="black-orange"] .form-section{ background: linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(0,0,0,.92) 55%, rgba(18,18,18,.96) 110% ); border-top: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .form-section__card{ background: rgba(0,0,0,.68); border-color: rgba(255, 122, 24, .18); } body[data-theme="black-orange"] .form-field__input{ background: rgba(0,0,0,.62); border-color: rgba(255, 122, 24, .24); } body[data-theme="black-orange"] .form-field__input:focus{ border-color: rgba(255, 122, 24, .55); box-shadow: 0 0 0 3px rgba(255, 122, 24, .18); } body[data-theme="black-orange"] .form-toggle__input:checked + .form-toggle__control{ background: #FF7A18; } body[data-theme="black-orange"] .form-section__submit, body[data-theme="black-orange"] .form-modal__button{ background: var(--gradient-light-blue-2); box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .form-modal__dialog{ background: rgba(0,0,0,.96); border-color: rgba(255, 122, 24, .20); } body[data-theme="black-orange"] .banner-full{ background: linear-gradient(180deg, rgba(18,18,18,.92) 0%, rgba(0,0,0,.92) 55%, rgba(18,18,18,.96) 110% ); border-top: 1px solid rgba(255, 122, 24, .12); } body[data-theme="black-orange"] .lp-element--card .card{ background: rgba(0,0,0,.62) !important; border: 1px solid rgba(255, 122, 24, .16) !important; } body[data-theme="black-orange"] .lp-element--image img{ border: 1px solid rgba(255, 122, 24, .22); box-shadow: 0 18px 40px rgba(0,0,0,.48), var(--shadow-glow); }