/* Camada global de modernização visual (não funcional). */ :root { --wm-radius: 14px; --wm-border: rgba(255, 255, 255, 0.1); --wm-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); --wm-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); --wm-primary: #e50914; --wm-bg-deep: #07070a; --wm-bg-mid: #12121a; --wm-glow: color-mix(in srgb, var(--wm-primary) 28%, transparent); --wm-motion-multiplier: 1; --wm-hover-scale: 1.035; --wm-text: #f5f7ff; --wm-muted: rgba(235, 240, 255, 0.72); --wm-space-1: 8px; --wm-space-2: 12px; --wm-space-3: 16px; --wm-space-4: 22px; --wm-space-5: 28px; } /* Variantes (classe no ): netflix | prime | hbomax — paletas claramente distintas (inspiradas) */ html.wm-theme-netflix, html.wm-theme-cinema, body.wm-theme-netflix, body.wm-theme-cinema { --wm-radius: 4px; --wm-primary: #e50914; --wm-bg-deep: #0a0a0a; --wm-bg-mid: #191919; --wm-glow: color-mix(in srgb, #e50914 42%, transparent); --wm-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); --wm-border: rgba(255, 255, 255, 0.12); --wm-text: #e8e8e8; --wm-muted: rgba(245, 245, 245, 0.68); } html.wm-theme-prime, html.wm-theme-elegant, body.wm-theme-prime, body.wm-theme-elegant { --wm-radius: 10px; --wm-primary: #00a8e1; --wm-bg-deep: #040d19; --wm-bg-mid: #0c1e2e; --wm-glow: color-mix(in srgb, #00a8e1 40%, transparent); --wm-surface: linear-gradient(165deg, rgba(0, 168, 225, 0.12), rgba(255, 255, 255, 0.03)); --wm-border: rgba(0, 168, 225, 0.28); --wm-text: #e3f1fb; --wm-muted: rgba(200, 230, 255, 0.7); } html.wm-theme-hbomax, html.wm-theme-aurora, body.wm-theme-hbomax, body.wm-theme-aurora { --wm-radius: 12px; --wm-primary: #8b5cf6; --wm-bg-deep: #0a0614; --wm-bg-mid: #160f28; --wm-glow: color-mix(in srgb, #7c3aed 45%, transparent); --wm-surface: linear-gradient(165deg, rgba(139, 92, 246, 0.2), rgba(255, 255, 255, 0.03)); --wm-border: rgba(167, 139, 250, 0.32); --wm-text: #f2edff; --wm-muted: rgba(230, 220, 255, 0.7); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: radial-gradient(1200px 520px at 82% -140px, var(--wm-glow), transparent 62%), linear-gradient(180deg, var(--wm-bg-mid), var(--wm-bg-deep)) fixed; color: var(--wm-text); line-height: 1.45; } img, video { max-width: 100%; height: auto; } a { transition: color 0.2s ease, opacity 0.2s ease; } /* Cards e blocos */ .card, .item, .movie-item, .poster-item, .channel-item, .category-item, .generic_content, .modal-content { border-radius: var(--wm-radius) !important; border: 1px solid var(--wm-border); box-shadow: var(--wm-shadow); background: var(--wm-surface); backdrop-filter: blur(8px); } /* Inputs e selects */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], select, textarea { border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important; color: #fff !important; } input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.55); } /* Botões */ button, .btn, a.btn, .generic_price_btn a, .subscribe-btn, .access-btn { border-radius: 12px !important; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important; } button:hover, .btn:hover, a.btn:hover, .generic_price_btn a:hover, .subscribe-btn:hover, .access-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 24px color-mix(in srgb, var(--wm-primary) 22%, transparent); } button, .btn, a.btn { min-height: 42px; } /* Títulos principais */ h1, h2, h3 { letter-spacing: 0.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); line-height: 1.2; } h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.35rem); } h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.85rem); } h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); } p, li, small, label, .nm, .movie-title, .series-title { color: var(--wm-muted); } /* Scrollbar discreta */ * { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; } /* Efeito dinâmico para grades de catálogo */ .lfx-grid .lfx-tile, .poster-item, .movie-item, .channel-item, .category-item { transform-origin: center center; transition: transform calc(0.26s * var(--wm-motion-multiplier)) ease, box-shadow calc(0.26s * var(--wm-motion-multiplier)) ease, border-color calc(0.26s * var(--wm-motion-multiplier)) ease; } .lfx-grid .lfx-tile, .poster-item, .movie-item, .channel-item, .category-item, .item { overflow: hidden; } /* Reduz custo de render em páginas longas */ .category-section, .poster-carousel, .movie-list, .channel-list, .lfx-grid, .lfx-search-results { content-visibility: auto; contain-intrinsic-size: 1px 720px; } .lfx-grid .lfx-tile img, .poster-item img, .movie-item img, .channel-item img, .category-item img, .item img { transition: transform 0.35s ease; } .lfx-grid .lfx-tile:hover, .poster-item:hover, .movie-item:hover, .channel-item:hover, .category-item:hover { transform: scale(var(--wm-hover-scale)); border-color: color-mix(in srgb, var(--wm-primary) 46%, rgba(255, 255, 255, 0.24)) !important; box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--wm-primary) 40%, transparent); z-index: 2; } .lfx-grid .lfx-tile:hover img, .poster-item:hover img, .movie-item:hover img, .channel-item:hover img, .category-item:hover img, .item:hover img { transform: scale(1.04); } /* Barras/topos com acabamento premium */ .navbar, .app-topbar, .lfx-sidebar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lfx-sidebar { background: linear-gradient(180deg, rgba(7, 8, 15, 0.95) 0%, rgba(7, 8, 15, 0.72) 100%) !important; border-right: 1px solid rgba(255, 255, 255, 0.1); } .lfx-sidebar a { border-radius: 12px; } .lfx-sidebar a:hover { background: rgba(255, 255, 255, 0.08); } .navbar, .app-topbar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .section-title, .lfx-section-title { display: flex; align-items: center; gap: 10px; } .section-title::before, .lfx-section-title::before { content: ""; width: 4px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--wm-primary) 82%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--wm-primary) 42%, transparent); } /* Foco visível para navegação por teclado */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--wm-primary) 65%, #fff); outline-offset: 2px; } /* Animação sutil de entrada */ @keyframes wmFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lfx-hero, .app-card, .profile-tile, .plan-card { animation: wmFadeUp calc(0.45s * var(--wm-motion-multiplier)) ease both; } /* Modo performance: reduz custo visual sem perder identidade */ html.wm-performance, body.wm-performance { --wm-motion-multiplier: 0.45; --wm-hover-scale: 1.012; } html.wm-performance *, body.wm-performance * { backdrop-filter: none !important; } /* ===== Responsivo global (tablet/mobile) ===== */ @media (max-width: 1024px) { .lfx-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: var(--wm-space-3) !important; } .horizontal-container { gap: var(--wm-space-3) !important; padding: var(--wm-space-3) !important; } .item { min-width: 260px !important; height: 180px !important; } } @media (max-width: 768px) { body, body.lfx-body { font-size: 15px; } .app-topbar, .navbar { padding: 10px 14px !important; } .card, .modal-content, .app-card { border-radius: 12px !important; } .lfx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 12px !important; gap: 12px !important; } .lfx-grid .lfx-tile img, .poster-item img, .movie-item img { height: auto !important; aspect-ratio: 2 / 3; object-fit: cover; } .horizontal-container { display: grid !important; grid-template-columns: 1fr !important; padding: 10px !important; } .item { min-width: 0 !important; width: 100% !important; height: 170px !important; } .profiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .lfx-sidebar { width: 68px !important; } body.lfx-body { padding-left: 68px !important; } } @media (max-width: 480px) { :root { --wm-space-3: 12px; } body, body.lfx-body { font-size: 14px; } .lfx-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 10px !important; } .profile-tile, .plan-card, .lfx-result-item, .item { border-radius: 10px !important; } .app-page-wrap, .profiles-wrap { padding-left: 10px !important; padding-right: 10px !important; } .lfx-section, .section-title, .lfx-section-title { margin-left: 10px !important; margin-right: 10px !important; } } /* ===== Homex cinematic refresh (global) ===== */ body.lfx-page-homex .lfx-hero, body.lfx-page-homex .lfx-hh { border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 36px 80px rgba(0, 0, 0, 0.55); } body.lfx-page-homex .lfx-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% -5%, color-mix(in srgb, var(--wm-primary, #e50914) 26%, transparent), transparent 62%); pointer-events: none; z-index: 1; } body.lfx-page-homex .lfx-hero-box, body.lfx-page-homex .lfx-hh__inner { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.lfx-page-homex .lfx-hero-box { max-width: min(560px, 100%); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(140deg, rgba(255, 255, 255, 0.16) 0%, rgba(8, 10, 20, 0.62) 55%, rgba(8, 10, 20, 0.84) 100%); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); } body.lfx-page-homex .lfx-section, body.lfx-page-homex .lfx-cx__title { color: #fff !important; letter-spacing: 0.02em; } body.lfx-page-homex .lfx-grid .lfx-tile img, body.lfx-page-homex .lfx-cx__sh, body.lfx-page-homex .lfx-cx__card { border-radius: 14px !important; } body.lfx-page-homex .lfx-grid .lfx-tile, body.lfx-page-homex .lfx-cx__card, body.lfx-page-homex .lfx-citem { border: 1px solid rgba(255, 255, 255, 0.15); background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(8, 10, 20, 0.62)); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42); } body.lfx-page-homex .lfx-badges img, body.lfx-page-homex .lfx-badges .lfx-badge-img { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35); } body.lfx-page-homex .lfx-personal, body.lfx-page-homex .lfx-continue, body.lfx-page-homex .lfx-cx { border-radius: 18px; }