/* ========================================================== ProtoTek 3D - Theme PRO (v2 - corrigido) - Corrige CSS quebrado (removido "...") - Escurece fundos claros e padroniza UI dark - Evita texto preto em fundo escuro (usa preto só em blocos claros) - Coloque este CSS como ÚLTIMO arquivo carregado no ========================================================== */ :root{ --ptk-bg0:#050810; --ptk-bg1:#0a0e27; --ptk-surface: rgba(255,255,255,.04); --ptk-surface2: rgba(255,255,255,.06); --ptk-stroke: rgba(0,212,255,.18); --ptk-stroke2: rgba(0,212,255,.32); --ptk-text: rgba(255,255,255,.88); --ptk-muted: rgba(255,255,255,.62); --ptk-accent:#00d4ff; --ptk-accent2:#0066ff; --ptk-radius: 14px; --ptk-shadow: 0 14px 50px rgba(0,0,0,.45); } /* Base */ html, body{ background: radial-gradient(900px 520px at 14% 10%, rgba(0,212,255,.10), transparent 60%), radial-gradient(900px 520px at 86% 20%, rgba(0,102,255,.12), transparent 55%), linear-gradient(135deg, var(--ptk-bg0) 0%, var(--ptk-bg1) 100%) !important; color: var(--ptk-text) !important; } /* Tipografia */ body{ font-size: 16px !important; } h1,h2,h3,h4,h5,h6{ color:#fff !important; text-shadow:none !important; } /* Links: branco/cinza no padrão (mais PRO), cyan só no hover */ a{ color: var(--ptk-text) !important; text-decoration:none; } a:hover{ color: var(--ptk-accent) !important; text-shadow: 0 0 10px rgba(0,212,255,.25); } /* Se existir algum bloco realmente claro, links podem ser pretos lá */ .bg-white a, .bg-light a, .alert-light a, .card.bg-light a{ color:#0b0f14 !important; } .bg-white a:hover, .bg-light a:hover, .alert-light a:hover, .card.bg-light a:hover{ color:#0b0f14 !important; text-shadow:none !important; text-decoration: underline; } /* Header / Top */ header, #top{ background: rgba(5,8,16,.70) !important; border-bottom: 1px solid var(--ptk-stroke) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #top a{ color: var(--ptk-text) !important; } #top a:hover{ color: var(--ptk-accent) !important; } /* Menu */ #menu{ background: rgba(5,8,16,.65) !important; border: 1px solid var(--ptk-stroke) !important; border-radius: var(--ptk-radius) !important; box-shadow: var(--ptk-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #menu .nav > li > a{ color: var(--ptk-text) !important; } #menu .nav > li > a:hover{ color: #fff !important; text-shadow: 0 0 10px rgba(0,212,255,.25); } /* Dropdowns (carrinho/menu) */ .dropdown-menu, #header-cart .dropdown-menu, #menu .dropdown-menu{ background: rgba(5,8,16,.92) !important; border: 1px solid var(--ptk-stroke) !important; box-shadow: 0 18px 55px rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .dropdown-menu a, .dropdown-menu .dropdown-item, #menu .dropdown-inner a{ color: var(--ptk-text) !important; } .dropdown-menu a:hover, .dropdown-menu .dropdown-item:hover, #menu .dropdown-inner ul li a:hover{ background: rgba(0,212,255,.12) !important; color:#fff !important; } /* Breadcrumb (era branco) */ .breadcrumb{ background: rgba(255,255,255,.04) !important; border: 1px solid var(--ptk-stroke) !important; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .breadcrumb > li{ text-shadow:none !important; } /* Cards / Produtos */ .card, .product-thumb, .thumbnail, .panel{ background: var(--ptk-surface) !important; border: 1px solid var(--ptk-stroke) !important; border-radius: var(--ptk-radius) !important; box-shadow: 0 14px 40px rgba(0,0,0,.35); } .card:hover, .product-thumb:hover, .thumbnail:hover, .panel:hover{ border-color: var(--ptk-stroke2) !important; box-shadow: 0 18px 60px rgba(0,0,0,.48), 0 0 25px rgba(0,212,255,.12); transform: translateY(-4px); } /* Botões (menos “borda grossa”, mais premium) */ .btn{ border-radius: 12px !important; } .btn-primary{ background: linear-gradient(90deg, var(--ptk-accent2), var(--ptk-accent)) !important; border: 1px solid var(--ptk-stroke2) !important; color:#fff !important; box-shadow: 0 12px 30px rgba(0,102,255,.18); } .btn-primary:hover{ filter: brightness(1.05); box-shadow: 0 18px 45px rgba(0,212,255,.18); } /* Inputs */ input, textarea, select, .form-control, .form-select{ background: rgba(5,8,16,.70) !important; color: var(--ptk-text) !important; border: 1px solid rgba(0,212,255,.20) !important; border-radius: 12px !important; } input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.45) !important; } input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus{ border-color: rgba(0,212,255,.45) !important; box-shadow: 0 0 0 .25rem rgba(0,212,255,.12) !important; outline: none !important; } /* Tabelas */ .table, table{ background: rgba(255,255,255,.03) !important; color: var(--ptk-text) !important; } .table th, th{ background: rgba(0,102,255,.18) !important; color:#fff !important; border-bottom: 1px solid rgba(0,212,255,.22) !important; } .table td, td{ border-bottom: 1px solid rgba(0,212,255,.10) !important; } .table tr:hover, tr:hover{ background: rgba(0,212,255,.08) !important; } /* Áreas que costumam ficar “brancas” no tema original */ .well, .list-group-item, .pagination > li > a, .pagination > li > span, .alert, .modal-content, .popover, .tooltip-inner{ background: rgba(255,255,255,.04) !important; color: var(--ptk-text) !important; border-color: rgba(0,212,255,.14) !important; } /* Logo */ #logo img{ filter: drop-shadow(0 0 8px rgba(0,212,255,.35)); transition: all .25s ease; } #logo img:hover{ filter: drop-shadow(0 0 15px rgba(0,212,255,.65)); transform: translateY(-1px); }