/* ============================================================ TRON MOTORS — premium.css v3.0 MUDANÇAS v3: · Sidebar 100% sem roxo — linguagem preto/prata/grafite · Botão "Estoque completo" em branco premium · Campo de busca destacado por contraste neutro · Checkbox/radio em branco/prata · FIX definitivo da faixa lateral direita no mobile: mobile-nav:not(.open) sem box-shadow (a shadow -12px vazava para dentro da viewport quando o painel estava fora) ESTRATÉGIA DE ESPECIFICIDADE: · html.js prefixo (app.js adiciona .js ao ) · Seletores duplos quando necessário · !important apenas em ::placeholder (spec CSS exige) ============================================================ */ /* ══════════════════════════════════════════════════════════════ 0. TOKENS ══════════════════════════════════════════════════════════════ */ :root { /* Superfícies escuras */ --pm-deep: #0C0C0E; --pm-dark: #111114; --pm-dark-mid: #18181C; --pm-dark-edge: rgba(255,255,255,0.055); --pm-dark-sep: rgba(255,255,255,0.044); /* Glass header */ --pm-glass: rgba(253,253,255,0.88); --pm-glass-blur: blur(22px) saturate(1.9); /* Glow — APENAS para header/footer/cards, NUNCA para sidebar */ --pm-glow-xs: 0 0 8px rgba(124,58,237,0.30); --pm-glow-sm: 0 0 14px rgba(124,58,237,0.35), 0 0 28px rgba(124,58,237,0.14); --pm-glow-md: 0 4px 24px rgba(124,58,237,0.42); --pm-glow-ring: 0 0 0 3px rgba(124,58,237,0.18); /* Sidebar — NEUTRO total, preto/prata */ --pm-sb-text: rgba(210,214,220,0.72); --pm-sb-text-hi: rgba(228,231,236,0.96); --pm-sb-text-dim: rgba(180,184,192,0.42); --pm-sb-in-bg: rgba(255,255,255,0.052); --pm-sb-in-br: rgba(255,255,255,0.085); --pm-sb-hover: rgba(255,255,255,0.055); /* hover neutro branco */ --pm-sb-active: rgba(255,255,255,0.090); /* active neutro */ --pm-sb-focus-br: rgba(200,204,210,0.55); /* foco neutro prata */ --pm-sb-focus-sh: 0 0 0 3px rgba(200,204,210,0.12); /* shadow foco neutro */ /* Transições */ --pm-tr: 250ms cubic-bezier(0.4,0,0.2,1); --pm-tr-slow: 400ms cubic-bezier(0.4,0,0.2,1); } /* ══════════════════════════════════════════════════════════════ 1. SCROLLBAR ══════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(180,184,192,0.35); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(200,204,210,0.55); } ::-webkit-scrollbar-corner { background: transparent; } /* ══════════════════════════════════════════════════════════════ 2. HEADER — GLASS ══════════════════════════════════════════════════════════════ */ html.js .site-header { transition: transform var(--pm-tr-slow), box-shadow var(--pm-tr); } html.js .header__bar { background: var(--pm-glass); backdrop-filter: var(--pm-glass-blur); -webkit-backdrop-filter: var(--pm-glass-blur); border-bottom: 1px solid rgba(255,255,255,0.62); transition: height var(--pm-tr), background var(--pm-tr), box-shadow var(--pm-tr), border-color var(--pm-tr); } html.js .site-header.scrolled .header__bar { background: rgba(255,255,255,0.97); backdrop-filter: blur(28px) saturate(2.1); -webkit-backdrop-filter: blur(28px) saturate(2.1); box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 28px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.90) inset; border-bottom-color: rgba(0,0,0,0.07); } html.js .site-header.shrink .header__bar { height: 56px; } html.js .site-header.shrink .logo__brand { font-size: 1.2rem; } html.js .header__logo { transition: opacity var(--pm-tr), filter var(--pm-tr); } html.js .header__logo:hover { opacity: 0.80; filter: brightness(1.06); } html.js .logo__brand { transition: font-size var(--pm-tr); } /* Nav links */ html.js .nav-link { transition: color var(--pm-tr); } html.js .nav-link::after { background: linear-gradient(90deg, var(--accent) 0%, #9B72F8 100%); width: 100%; transform: scaleX(0); transform-origin: left center; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); } html.js .nav-link:hover::after, html.js .nav-link.active::after { width: 100%; transform: scaleX(1); } /* CTA header */ html.js .header__actions .btn-primary { background-color: transparent; background-image: linear-gradient(135deg, #9B72F8 0%, #7C3AED 50%, #5F15D4 100%); border: none; color: #fff; font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 2px 10px rgba(124,58,237,0.28), 0 1px 0 rgba(255,255,255,0.14) inset; transition: all var(--pm-tr); position: relative; overflow: hidden; } html.js .header__actions .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.13) 50%, transparent 75%); background-size: 220% 100%; background-position: -100% 0; transition: background-position 0.52s ease; pointer-events: none; } html.js .header__actions .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--pm-glow-md), 0 1px 0 rgba(255,255,255,0.16) inset; background-image: linear-gradient(135deg, #A880FF 0%, #8B5CF6 50%, #7233D9 100%); } html.js .header__actions .btn-primary:hover::before { background-position: 200% 0; } html.js .header__actions .btn-primary:active { transform: scale(0.97); } html.js .header__icon-btn { transition: all var(--pm-tr); } html.js .header__icon-btn:hover { background: rgba(124,58,237,0.05); border-color: var(--accent-border); color: var(--accent); transform: translateY(-1px); } html.js .header__phone { transition: all var(--pm-tr); } html.js .header__phone:hover { color: var(--accent); transform: translateY(-1px); } html.js .hamburger { transition: all var(--pm-tr); } html.js .hamburger span { border-radius: 2px; transition: all 0.26s cubic-bezier(0.4,0,0.2,1); } html.js .hamburger:hover { border-color: var(--accent-border); background: var(--accent-light); } html.js .hamburger:hover span { background: var(--accent); } /* Dropdown */ html.js .dropdown__menu { background: rgba(255,255,255,0.98); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 20px 56px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.80) inset; transition: opacity var(--pm-tr), visibility var(--pm-tr), transform 0.24s cubic-bezier(0.34,1.20,0.64,1); } html.js .dropdown__item { border-radius: 9px; transition: all var(--pm-tr); } html.js .dropdown__item:hover { background: var(--accent-light); color: var(--accent); transform: translateX(3px); } html.js .dropdown__item:hover svg { color: var(--accent); } html.js .dropdown-col--cta { background: linear-gradient(160deg, var(--gray-50) 0%, rgba(124,58,237,0.05) 100%); } /* Header search */ html.js .header__search { background: rgba(250,250,252,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(0,0,0,0.055); } html.js .header__search .search-bar { background: #fff; border-radius: 12px; border: 1.5px solid var(--border-base); box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: border-color var(--pm-tr), box-shadow var(--pm-tr); } html.js .header__search .search-bar:focus-within { border-color: var(--accent); box-shadow: var(--pm-glow-ring), 0 2px 10px rgba(0,0,0,0.04); } html.js .search-bar__btn { background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); background-color: transparent; border: none; transition: all var(--pm-tr); } html.js .search-bar__btn:hover { transform: translateY(-1px); box-shadow: var(--pm-glow-sm); } @media (max-width: 960px) { html.js .header__bar { background: rgba(255,255,255,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } } /* ══════════════════════════════════════════════════════════════ 3. MOBILE NAV — CARBON DARK (SEM ROXO) FIX CRÍTICO: box-shadow APENAS quando .open Motivo: painel fechado fica em translateX(100%) fora da viewport. Uma shadow de -12px 0 48px projetava 48px para dentro da viewport pela borda direita, criando a faixa lateral visível. ══════════════════════════════════════════════════════════════ */ html.js .mobile-nav { background-color: var(--pm-dark); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(255,255,255,0.030) 3px, rgba(255,255,255,0.030) 4px, transparent 4px, transparent 8px), repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px, transparent 4px, transparent 8px); background-size: 8px 8px, 8px 8px; border-left: 1px solid rgba(255,255,255,0.052); /* SEM box-shadow no estado fechado */ box-shadow: none; transition: transform var(--pm-tr-slow), box-shadow var(--pm-tr); } /* Sombra apenas quando aberto — não vaza para fora da viewport */ html.js .mobile-nav.open { box-shadow: -12px 0 48px rgba(0,0,0,0.55); } html.js .mobile-nav__head--minimal { border-bottom: 1px solid var(--pm-dark-sep); background: rgba(255,255,255,0.02); } html.js .mobile-nav__close { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); transition: all var(--pm-tr); } html.js .mobile-nav__close:hover { background: var(--pm-sb-active); border-color: rgba(255,255,255,0.18); color: rgba(228,231,236,0.90); } /* Links mobile — sem roxo */ html.js .mobile-link { color: rgba(200,204,210,0.65); border-bottom-color: rgba(255,255,255,0.042); font-weight: 500; letter-spacing: 0.02em; transition: all var(--pm-tr); } html.js .mobile-link:hover { background: var(--pm-sb-hover); color: rgba(228,231,236,0.95); padding-left: 22px; } /* BOTÃO "VER ESTOQUE COMPLETO" — BRANCO PREMIUM, SEM ROXO */ html.js .mobile-link--estoque { color: #F0F2F5; font-weight: 700; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; margin: 4px 0; letter-spacing: 0.01em; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; transition: all var(--pm-tr); } html.js .mobile-link--estoque:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #fff; padding-left: 18px; /* override do padding-left padrão do hover */ box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 12px rgba(0,0,0,0.25); transform: translateY(-1px); } html.js .mobile-nav__wa-btn { border-radius: 10px; transition: background var(--pm-tr), transform var(--pm-tr), box-shadow var(--pm-tr); } html.js .mobile-nav__wa-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,173,75,0.30); } html.js .mobile-nav__search-foot { background: rgba(0,0,0,0.22); border-top: 1px solid var(--pm-dark-sep); } html.js .mobile-search-wrap { background: rgba(255,255,255,0.055); border: 1.5px solid rgba(255,255,255,0.10); border-radius: 10px; transition: background var(--pm-tr), border-color var(--pm-tr), box-shadow var(--pm-tr); } html.js .mobile-search-wrap:focus-within { background: rgba(255,255,255,0.08); border-color: var(--pm-sb-focus-br); box-shadow: var(--pm-sb-focus-sh); } html.js .mobile-search-icon { color: rgba(255,255,255,0.28); } html.js .mobile-search-input { color: rgba(225,228,235,0.92); } html.js .mobile-search-input::placeholder { color: rgba(255,255,255,0.26) !important; } html.js .mobile-search-btn { background: rgba(255,255,255,0.14); color: rgba(228,231,236,0.90); font-weight: 600; letter-spacing: 0.05em; border-radius: 7px; border: 1px solid rgba(255,255,255,0.14); transition: all var(--pm-tr); } html.js .mobile-search-btn:hover { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.28); } /* Overlay */ html.js .overlay { background: rgba(6,6,10,0.55); backdrop-filter: blur(5px) saturate(0.88); -webkit-backdrop-filter: blur(5px) saturate(0.88); } /* FIX MOBILE — z-index correto para evitar conflito com sf-overlay */ @media (max-width: 900px) { html.js .mobile-nav { z-index: 395; } html.js .overlay { z-index: 394; } } /* ══════════════════════════════════════════════════════════════ 4. SIDEBAR GENÉRICA — CARBON, SEM ROXO Toda interação usa branco/prata/grafite neutro ══════════════════════════════════════════════════════════════ */ html.js .sidebar { background-color: var(--pm-dark); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(255,255,255,0.028) 3px, rgba(255,255,255,0.028) 4px, transparent 4px, transparent 8px), repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(255,255,255,0.014) 3px, rgba(255,255,255,0.014) 4px, transparent 4px, transparent 8px); background-size: 8px 8px, 8px 8px; border: 1px solid var(--pm-dark-edge); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset; } html.js .sidebar__header { background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--pm-dark-sep); padding: 18px 22px; } html.js .sidebar__title { color: rgba(225,228,235,0.92); font-size: 0.72rem; letter-spacing: 0.14em; } /* Clear — neutro prata */ html.js .sidebar__clear { color: rgba(180,184,192,0.70); background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px 10px; font-size: 0.72rem; transition: all var(--pm-tr); } html.js .sidebar__clear:hover { background: var(--pm-sb-hover); color: rgba(210,214,220,0.95); border-color: rgba(255,255,255,0.18); } html.js .sidebar__section { border-bottom: 1px solid var(--pm-dark-sep); padding: 16px 22px; } html.js .sidebar__section-title { color: var(--pm-sb-text-dim); font-size: 0.67rem; letter-spacing: 0.13em; margin-bottom: 14px; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; transition: color var(--pm-tr); } html.js .sidebar__section-title:hover { color: var(--pm-sb-text); } /* Accordion body */ .sidebar__section-body { overflow: hidden; max-height: 600px; opacity: 1; transition: max-height 0.30s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease; } .sidebar__section.collapsed .sidebar__section-body { max-height: 0; opacity: 0; } /* Checkbox/Radio — BRANCO/PRATA, SEM ROXO */ html.js .sidebar__check { padding: 7px 10px; margin: 0 -10px; border-radius: 8px; gap: 12px; transition: background var(--pm-tr); } html.js .sidebar__check:hover { background: var(--pm-sb-hover); } html.js .sidebar__check input { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; flex-shrink: 0; transition: background var(--pm-tr), border-color var(--pm-tr), box-shadow var(--pm-tr); } html.js .sidebar__check input[type="radio"] { border-radius: 50%; } html.js .sidebar__check input:hover { border-color: rgba(255,255,255,0.38); background: rgba(255,255,255,0.09); } /* Checked — BRANCO/PRATA sólido com marcador escuro */ html.js .sidebar__check input:checked { background: rgba(220,224,230,0.92); border-color: rgba(220,224,230,0.92); box-shadow: 0 1px 3px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.10) inset; } html.js .sidebar__check input:checked::after { content: ''; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; background: #111114; /* marcador escuro sobre fundo claro */ border-radius: 1px; } html.js .sidebar__check input[type="radio"]:checked::after { border-radius: 50%; width: 6px; height: 6px; } /* Labels */ html.js .sidebar__check-label { color: var(--pm-sb-text); font-size: 0.85rem; transition: color var(--pm-tr); } html.js .sidebar__check:hover .sidebar__check-label { color: var(--pm-sb-text-hi); } /* Checked label — BRANCO, não lilás */ html.js .sidebar__check input:checked ~ .sidebar__check-label { color: rgba(228,231,236,0.96); font-weight: 500; } /* Price inputs */ html.js .sidebar__price-label { color: var(--pm-sb-text-dim); font-size: 0.70rem; } html.js .sidebar__price-sep { color: rgba(255,255,255,0.20); } html.js .sidebar .form-input { background: var(--pm-sb-in-bg); border: 1px solid var(--pm-sb-in-br); color: var(--pm-sb-text-hi); border-radius: 8px; transition: background var(--pm-tr), border-color var(--pm-tr), box-shadow var(--pm-tr); } html.js .sidebar .form-input:focus { background: rgba(255,255,255,0.08); border-color: var(--pm-sb-focus-br); box-shadow: var(--pm-sb-focus-sh); outline: none; color: #fff; } html.js .sidebar .form-input::placeholder { color: rgba(255,255,255,0.22) !important; } /* Campo de busca — DESTAQUE POR CONTRASTE MATERIAL, SEM COR */ html.js .sidebar .search-bar { background: rgba(255,255,255,0.07); /* levemente mais sólido que os outros inputs */ border: 1.5px solid rgba(255,255,255,0.14); /* borda mais refinada */ border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.06) inset; /* inset light sutil */ } html.js .sidebar .search-bar:focus-within { background: rgba(255,255,255,0.10); border-color: var(--pm-sb-focus-br); box-shadow: var(--pm-sb-focus-sh), 0 1px 0 rgba(255,255,255,0.08) inset; } html.js .sidebar .search-bar__icon { color: rgba(255,255,255,0.28); } html.js .sidebar .search-bar__input { color: var(--pm-sb-text-hi); } html.js .sidebar .search-bar__input::placeholder { color: rgba(255,255,255,0.24) !important; } /* Nav links sidebar */ html.js .sidebar__nav-link { color: var(--pm-sb-text); transition: all var(--pm-tr); } html.js .sidebar__nav-link:hover, html.js .sidebar__nav-link.active { background: var(--pm-sb-active); color: rgba(228,231,236,0.96); border-left-color: rgba(200,204,210,0.60); padding-left: 28px; } /* Botão aplicar — NEUTRO, sem gradiente roxo */ html.js .sidebar__action { padding: 14px 22px 18px; } html.js .sidebar__action .btn-primary { background-color: rgba(255,255,255,0.09); background-image: none; border: 1px solid rgba(255,255,255,0.14); color: rgba(228,231,236,0.92); font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 8px rgba(0,0,0,0.22); transition: all var(--pm-tr); } html.js .sidebar__action .btn-primary:hover { background-color: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: #fff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 16px rgba(0,0,0,0.30); } /* ══════════════════════════════════════════════════════════════ 5. SIDEBAR FILTROS (.sidebar-filters) — SEM ROXO Mesmo sistema: preto/prata/grafite ══════════════════════════════════════════════════════════════ */ /* Desktop */ @media (min-width: 901px) { html.js .sidebar-filters { background-color: var(--pm-dark); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(255,255,255,0.028) 3px, rgba(255,255,255,0.028) 4px, transparent 4px, transparent 8px), repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(255,255,255,0.014) 3px, rgba(255,255,255,0.014) 4px, transparent 4px, transparent 8px); background-size: 8px 8px, 8px 8px; border: 1px solid var(--pm-dark-edge); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.04) inset; scrollbar-color: rgba(180,184,192,0.25) transparent; } } /* Mobile slide-in — preservar border-radius:0 e z-index originais */ @media (max-width: 900px) { html.js .sidebar-filters { background-color: var(--pm-dark); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(255,255,255,0.025) 3px, rgba(255,255,255,0.025) 4px, transparent 4px, transparent 8px), repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px, transparent 4px, transparent 8px); background-size: 8px 8px, 8px 8px; border-right: 1px solid var(--pm-dark-edge); /* border-radius:0 do original preservado — NÃO sobrescrever */ } } /* SF Header */ html.js .sf-header { background: rgba(0,0,0,0.25); border-bottom: 1px solid var(--pm-dark-sep); } html.js .sf-title { color: rgba(225,228,235,0.92); } /* SF Clear — neutro, sem roxo */ html.js .sf-clear { color: rgba(180,184,192,0.70); background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 3px 10px; transition: all var(--pm-tr); } html.js .sf-clear:hover { background: var(--pm-sb-hover); color: rgba(210,214,220,0.95); border-color: rgba(255,255,255,0.18); } /* SF Close */ html.js .sf-close { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.40); transition: all var(--pm-tr); } html.js .sf-close:hover { background: var(--pm-sb-hover); color: rgba(210,214,220,0.85); border-color: rgba(255,255,255,0.18); } html.js .sf-section { border-bottom: 1px solid var(--pm-dark-sep); } html.js .sf-section:last-child { border-bottom: none; } html.js .sf-section-title { color: var(--pm-sb-text-dim); } /* Accordion body */ .sf-section-body { overflow: hidden; max-height: 600px; opacity: 1; transition: max-height 0.30s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease; } .sf-section.sf-collapsed .sf-section-body { max-height: 0; opacity: 0; } /* SF Search — DESTAQUE POR CONTRASTE MATERIAL, SEM COR */ html.js .sf-search { background: rgba(0,0,0,0.18); border-radius: 8px; } html.js .sf-search__icon { color: rgba(200,204,210,0.38); } html.js .sf-search__input { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.12); color: var(--pm-sb-text-hi); border-radius: 8px; /* inset light para parecer premium, não template */ box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; } html.js .sf-search__input:focus { background: rgba(255,255,255,0.09); border-color: var(--pm-sb-focus-br); box-shadow: var(--pm-sb-focus-sh), 0 1px 0 rgba(255,255,255,0.07) inset; } html.js .sf-search__input::placeholder { color: rgba(255,255,255,0.26) !important; } /* SF Select — preservar background-image (chevron SVG) */ html.js .sf-select { background-color: var(--pm-sb-in-bg); border-color: var(--pm-sb-in-br); color: var(--pm-sb-text); border-radius: 9px; transition: border-color var(--pm-tr), box-shadow var(--pm-tr), background-color var(--pm-tr); } html.js .sf-select:hover { border-color: rgba(255,255,255,0.18); background-color: rgba(255,255,255,0.07); } html.js .sf-select:focus { background-color: rgba(255,255,255,0.08); border-color: var(--pm-sb-focus-br); box-shadow: var(--pm-sb-focus-sh); color: var(--pm-sb-text-hi); } html.js .sf-select option { background: var(--pm-dark-mid); color: var(--pm-sb-text-hi); } /* Price */ html.js .sf-price-label { color: var(--pm-sb-text-dim); } html.js .sf-price-sep { color: rgba(255,255,255,0.20); } html.js .sf-price-input { background: var(--pm-sb-in-bg); border-color: var(--pm-sb-in-br); color: var(--pm-sb-text-hi); border-radius: 9px; transition: border-color var(--pm-tr), box-shadow var(--pm-tr), background var(--pm-tr); } html.js .sf-price-input:focus { background: rgba(255,255,255,0.08); border-color: var(--pm-sb-focus-br); box-shadow: var(--pm-sb-focus-sh); color: #fff; } html.js .sf-price-input::placeholder { color: rgba(255,255,255,0.20) !important; } /* Apply — neutro, sem gradiente roxo */ html.js .sf-apply { border-top: 1px solid var(--pm-dark-sep); } html.js .sf-apply .btn { background-color: rgba(255,255,255,0.09); background-image: none; border: 1px solid rgba(255,255,255,0.14); color: rgba(228,231,236,0.92); font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 8px rgba(0,0,0,0.22); transition: all var(--pm-tr); } html.js .sf-apply .btn:hover { background-color: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: #fff; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 16px rgba(0,0,0,0.30); } /* SF Overlay */ html.js .sf-overlay { background: rgba(6,6,10,0.55); backdrop-filter: blur(4px) saturate(0.88); -webkit-backdrop-filter: blur(4px) saturate(0.88); } /* ══════════════════════════════════════════════════════════════ 6. VEHICLE CARDS ══════════════════════════════════════════════════════════════ */ html.js .vehicle-card { transition: transform 0.26s cubic-bezier(0.4,0,0.2,1), box-shadow 0.26s cubic-bezier(0.4,0,0.2,1), border-color 0.26s cubic-bezier(0.4,0,0.2,1); } html.js .vehicle-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(124,58,237,0.18); border-color: rgba(124,58,237,0.22); } html.js .vehicle-card:active { transform: translateY(-2px) scale(0.99); } html.js .vc-btn-primary { transition: all var(--pm-tr); font-weight: 600; } html.js .vc-btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(124,58,237,0.28); } html.js .vc-btn-wa { transition: all var(--pm-tr); } html.js .vc-btn-wa:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(26,173,75,0.25); } /* ══════════════════════════════════════════════════════════════ 7. FOOTER ══════════════════════════════════════════════════════════════ */ .site-footer { position: relative; } .site-footer::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(124,58,237,0.55) 25%, rgba(124,58,237,0.90) 50%, rgba(124,58,237,0.55) 75%, transparent 100%); } html.js .footer__col-title { font-size: 0.67rem; letter-spacing: 0.15em; padding-left: 14px; position: relative; } html.js .footer__col-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--accent); border-radius: 50%; box-shadow: var(--pm-glow-xs); } html.js .footer__link { position: relative; display: inline-block; transition: color 0.24s ease; } html.js .footer__link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), #9B72F8); transform: scaleX(0); transform-origin: left; transition: transform 0.24s ease; } html.js .footer__link:hover { color: #fff; } html.js .footer__link:hover::after { transform: scaleX(1); } html.js .footer__social-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; transition: all 0.24s ease; } html.js .footer__social-btn:hover { background: rgba(124,58,237,0.12); border-color: rgba(124,58,237,0.28); color: #B794FF; transform: translateY(-3px); box-shadow: 0 4px 14px rgba(124,58,237,0.20); } html.js .footer__contact svg { color: rgba(124,58,237,0.55); } html.js .footer__contact a { transition: color 0.22s ease; } html.js .footer__contact a:hover { color: #fff; } html.js .footer__bottom-links a { position: relative; transition: color 0.22s ease; } html.js .footer__bottom-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform 0.22s ease; } html.js .footer__bottom-links a:hover { color: rgba(232,236,242,0.80); } html.js .footer__bottom-links a:hover::after { transform: scaleX(1); } .footer__version-dot { background: var(--accent); box-shadow: var(--pm-glow-xs); animation: pm-dot-pulse 3s ease-in-out infinite; } @keyframes pm-dot-pulse { 0%,100% { box-shadow: 0 0 4px rgba(124,58,237,0.40); } 50% { box-shadow: 0 0 10px rgba(124,58,237,0.70); } } html.js .footer__whatsapp-btn { border-radius: 12px; font-weight: 600; letter-spacing: 0.03em; transition: all var(--pm-tr); box-shadow: 0 2px 12px rgba(26,173,75,0.22); } html.js .footer__whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,173,75,0.32); color: #fff; } html.js .footer__whatsapp-btn:active { transform: scale(0.97); } /* ══════════════════════════════════════════════════════════════ 8. MICRO-INTERAÇÕES GLOBAIS ══════════════════════════════════════════════════════════════ */ html.js .btn { transition: all var(--pm-tr); position: relative; overflow: hidden; } html.js .btn:active { transform: scale(0.97); } html.js .btn-secondary { transition: all var(--pm-tr); } html.js .btn-secondary:hover { transform: translateY(-1px); } :focus-visible { outline: 2px solid rgba(200,204,210,0.70); outline-offset: 3px; border-radius: 5px; } html.js .pag-btn { transition: all var(--pm-tr); } html.js .pag-btn:hover { transform: translateY(-1px); } html.js .pag-btn.is-active { box-shadow: 0 2px 12px rgba(124,58,237,0.28); } /* ══════════════════════════════════════════════════════════════ 9. REVEAL ══════════════════════════════════════════════════════════════ */ .reveal { transition: opacity 0.52s cubic-bezier(0.4,0,0.2,1), transform 0.52s cubic-bezier(0.4,0,0.2,1); } /* ══════════════════════════════════════════════════════════════ 10. REDUCED MOTION ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .reveal { transition: none; } .footer__version-dot { animation: none; } html.js .vehicle-card, html.js .btn, html.js .footer__social-btn, html.js .footer__link { transition-duration: 1ms; } } /* ══════════════════════════════════════════════════════════════ 11. FOOTER BOTTOM — MOBILE CENTRALIZADO Remove v1.0 via CSS (elemento removido do HTML também). No mobile: copyright e links centralizados. ══════════════════════════════════════════════════════════════ */ /* Remove qualquer versão que ainda exista (segurança) */ .footer__version { display: none; } @media (max-width: 640px) { .footer__bottom-inner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); } .footer__bottom-links { justify-content: center; } }