/* ========================================================== LEADS 360º PLATFORM THEME.CSS VERSÃO 2.0.0 Arquivo Oficial de Temas ========================================================== */ /* ========================================================== PADRÃO (Fallback) ========================================================== */ :root{ --background:#111111; --surface:#ffffff; --surface-secondary:#eeeeee; --text:#111111; --text-card:#222222; --text-secondary:#666666; --primary:#FAD02C; --primary-hover:#e4bd20; --border:rgba(0,0,0,.12); --shadow:0 20px 45px rgba(0,0,0,.15); --search-background:#ffffff; --search-text:#222222; --search-placeholder:#666666; --button-background:#FAD02C; --button-text:#111111; } /* ========================================================== DARK MODE ========================================================== */ html[data-theme="dark"]{ --background: radial-gradient( circle at 50% 18%, rgba(250,208,44,.28), transparent 38% ), radial-gradient( circle at 80% 90%, rgba(250,208,44,.10), transparent 35% ), linear-gradient( 135deg, #050505, #151515 ); --surface:#333333; --surface-secondary:#252525; --text:#ffffff; --text-card:#ffffff; --text-secondary:#cfcfcf; --primary:#FAD02C; --primary-hover:#e4bd20; --border:rgba(250,208,44,.30); --shadow: 0 20px 55px rgba(0,0,0,.60); --search-background:#ffffff; --search-text:#333333; --search-placeholder:#777777; --button-background:#FAD02C; --button-text:#111111; } /* ========================================================== LIGHT MODE ========================================================== */ html[data-theme="light"]{ --background: radial-gradient( circle at 50% 15%, rgba(250,208,44,.40), transparent 32% ), radial-gradient( circle at 15% 80%, rgba(250,208,44,.18), transparent 30% ), linear-gradient( 135deg, #ffffff, #f5f1de ); --surface:#ffffff; --surface-secondary:#f4f4f4; --text:#111111; --text-card:#111111; --text-secondary:#555555; --primary:#FAD02C; --primary-hover:#e4bd20; --border:rgba(0,0,0,.10); --shadow: 0 15px 35px rgba(0,0,0,.10); --search-background:#ffffff; --search-text:#111111; --search-placeholder:#666666; --button-background:#FAD02C; --button-text:#111111; } /* ========================================================== BODY ========================================================== */ body{ background:var(--background); color:var(--text); transition: background .35s ease, color .35s ease; } /* ========================================================== HERO ========================================================== */ .hero{ color:var(--text); } .hero p{ color:var(--text-secondary); } /* ========================================================== HEADER ========================================================== */ header{ color:var(--text); } .theme-btn{ color:var(--text); } /* ========================================================== PESQUISA ========================================================== */ .search-box{ background:var(--search-background); border:2px solid var(--primary); box-shadow:var(--shadow); } .search-box input{ background:transparent; color:var(--search-text); font-weight:700; } .search-box input::placeholder{ color:var(--search-placeholder); } .search-button{ background:var(--button-background); color:var(--button-text); } /* ========================================================== PESQUISA AVANÇADA ========================================================== */ .location-box select{ background:var(--surface); color:var(--text); border:2px solid var(--primary); } /* ========================================================== LOADER ========================================================== */ .loader{ color:var(--text); } .loader-status p{ color:var(--text); } .loader-status li{ color:var(--text-secondary); } /* ========================================================== CARD PADRÃO ========================================================== */ .card, .result-card, .panel-card, .shortcut{ background:var(--surface); color:var(--text-card); border:1px solid var(--border); box-shadow:var(--shadow); transition: background .30s, color .30s, border-color .30s; } /* ========================================================== CARD RESULTADO ========================================================== */ .result-label{ color:var(--primary); } .result-score{ color:var(--primary); } .result-text{ color:var(--text-secondary); } /* ========================================================== BOTÕES ========================================================== */ button{ background:var(--button-background); color:var(--button-text); } button:hover{ background:var(--primary-hover); } /* ========================================================== BOTÕES SECUNDÁRIOS ========================================================== */ #btnDone, #btnRestart{ background:transparent; color:var(--text); border:2px solid var(--primary); } /* ========================================================== PAINEL MINHA EVOLUÇÃO ========================================================== */ .panel-header{ color:var(--primary); font-weight:700; } .panel-item{ background:var(--surface-secondary); border:1px solid var(--border); } .panel-item span{ color:var(--text-secondary); } .panel-item strong{ color:var(--text); } .panel-opportunity{ color:var(--primary); } /* ========================================================== MATERIAIS ========================================================== */ .panel-pdfs h4{ color:var(--text); } .panel-pdfs ul{ list-style:none; padding:0; margin-top:15px; } .panel-pdfs li{ background:var(--surface-secondary); color:var(--text); padding:12px 16px; margin-bottom:10px; border-radius:10px; border:1px solid var(--border); transition:.25s; } .panel-pdfs li:hover{ border-color:var(--primary); transform:translateX(4px); } /* ========================================================== MENSAGEM ========================================================== */ .panel-message{ color:var(--text-secondary); line-height:1.7; } /* ========================================================== SHORTCUTS ========================================================== */ .shortcut{ text-align:center; } .shortcut strong{ color:var(--text); display:block; margin-top:12px; } .shortcut small{ color:var(--text-secondary); } .shortcut:hover{ transform:translateY(-5px); border-color:var(--primary); } /* ========================================================== ÍCONES ========================================================== */ .shortcut span{ font-size:34px; display:block; } .social-icons{ display:flex; justify-content:center; align-items:center; gap:20px; } .social-icons a{ color:var(--text); transition:.30s; font-size:22px; } .social-icons a:hover{ color:var(--primary); transform:translateY(-3px); } /* ========================================================== FOOTER ========================================================== */ footer{ color:var(--text-secondary); border-top:1px solid var(--border); } .footer-left, .footer-center, .footer-right{ color:inherit; } /* ========================================================== LINKS ========================================================== */ a{ color:inherit; text-decoration:none; } /* ========================================================== TRANSIÇÕES GERAIS ========================================================== */ *{ transition: background .30s, color .30s, border-color .30s, box-shadow .30s; } /* ========================================================== RESPONSIVO ========================================================== */ @media(max-width:768px){ .panel-grid{ grid-template-columns:1fr; } .footer-container{ flex-direction:column; gap:20px; text-align:center; } .shortcuts{ grid-template-columns:1fr 1fr; } } @media(max-width:500px){ .shortcuts{ grid-template-columns:1fr; } } /* ========================================================== AJUSTE CARDS DARK ========================================================== */ html[data-theme="dark"] .card, html[data-theme="dark"] .result-card, html[data-theme="dark"] .panel-card{ background:#333333; color:#ffffff; } html[data-theme="dark"] .card p, html[data-theme="dark"] .result-card p, html[data-theme="dark"] .panel-card p{ color:#ffffff; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] strong{ color:#ffffff; }