/* =================================================================== Tema Claro - Site Publico Camada de sobrescrita do tema-premium-site.css, ativada quando recebe a classe "tema-claro" (via botao de alternancia no menu, sistema/js/tema-claro.js). Nao altera o tema-premium-site.css original: o modo escuro continua sendo o CSS "de baixo" e este arquivo so entra em vigor com a classe presente. Os modais de checkout (.modal-premium-checkout) e o seletor de cores do painel (#panel) NAO sao cobertos aqui de proposito - continuam escuros nos dois modos, ja que abrem sobre um fundo escurecido e nao fazem parte do "corpo" das paginas. =================================================================== */ html.tema-claro { --tc-bg: #F5FAF7; --tc-bg-alt: #EAF3EE; --tc-surface: #FFFFFF; --tc-surface-2: #F0F7F3; --tc-ink: #0E1F18; --tc-ink-2: #1B2E24; --tc-muted-1: #24352B; --tc-muted-2: #3C5347; --tc-muted-3: #55705F; --tc-muted-4: #79937F; --tc-border: rgba(14, 31, 24, 0.10); --tc-border-soft: rgba(14, 31, 24, 0.07); --tc-accent-text: #0F6E56; --tc-accent-fill: rgba(93, 202, 165, 0.14); --tc-shadow: rgba(20, 45, 35, 0.10); --tc-shadow-strong: rgba(20, 45, 35, 0.16); } html.tema-claro body#wrapper.pagina-premium-escura { background-color: var(--tc-bg) !important; } /* ---------- Barra superior ---------- */ html.tema-claro #top-header { background-color: var(--tc-bg-alt) !important; border-bottom: 1px solid var(--tc-border-soft); } html.tema-claro #top-header .contact_links li, html.tema-claro #top-header .contact_links a, html.tema-claro #top-header .copyright, html.tema-claro #top-header .social_links a { color: var(--tc-muted-2); } html.tema-claro #top-header .fa { color: var(--tc-accent-text); } html.tema-claro #top-header a:hover { color: var(--tc-accent-text) !important; } html.tema-claro #top-header .search-box .input-search { background: var(--tc-surface); color: var(--tc-ink); border: 1px solid var(--tc-border); } html.tema-claro #top-header .btn-search { color: var(--tc-accent-text); } /* ---------- Menu principal ---------- */ html.tema-claro body header { background: var(--tc-surface) !important; box-shadow: 0 4px 20px var(--tc-shadow); } html.tema-claro .navbar-inverse { background-color: var(--tc-surface) !important; border-color: var(--tc-border-soft) !important; } html.tema-claro .navbar-inverse .navbar-brand span { color: var(--tc-ink); } html.tema-claro .navbar-inverse .navbar-nav > li > a { color: var(--tc-ink-2) !important; } html.tema-claro .navbar-inverse .navbar-nav > li > a::after { background: var(--tc-accent-text); } html.tema-claro .navbar-inverse .navbar-nav > li > a:hover { color: var(--tc-accent-text) !important; } html.tema-claro .navbar-inverse .navbar-nav > li.active > a, html.tema-claro .navbar-inverse .navbar-nav > li.active > a:hover, html.tema-claro .navbar-inverse .navbar-nav > li.active > a:focus { background-color: var(--tc-accent-fill) !important; color: var(--tc-accent-text) !important; } html.tema-claro .navbar-inverse .navbar-toggle { border-color: var(--tc-border); } html.tema-claro .navbar-inverse .navbar-toggle .icon-bar { background-color: var(--tc-accent-text); } html.tema-claro .dropdown-menu.navbar-nav-sub { background-color: var(--tc-surface); border: 1px solid var(--tc-border); box-shadow: 0 10px 28px var(--tc-shadow-strong); } html.tema-claro .dropdown-menu.navbar-nav-sub > li > a { color: var(--tc-ink-2) !important; } html.tema-claro .dropdown-menu.navbar-nav-sub > li > a:hover, html.tema-claro .dropdown-menu.navbar-nav-sub > li > a:focus { background-color: var(--tc-accent-fill) !important; color: var(--tc-accent-text) !important; } /* ---------- Rodape ---------- */ html.tema-claro #bottom-footer { background: linear-gradient(135deg, var(--tc-bg-alt) 0%, rgba(93, 202, 165, 0.22) 100%) !important; } html.tema-claro #bottom-footer .btm-footer-links a, html.tema-claro #bottom-footer .copyright, html.tema-claro #bottom-footer .copyright span, html.tema-claro #bottom-footer .copyright a { color: var(--tc-ink-2) !important; } html.tema-claro #bottom-footer .btm-footer-links a:hover, html.tema-claro #bottom-footer .copyright a:hover { color: var(--tc-accent-text) !important; } /* =================================================================== Modelo 1 (Executivo) - blocos reaproveitaveis nas paginas publicas =================================================================== */ html.tema-claro .premium-hero { background: var(--tc-bg); } html.tema-claro .premium-tag { background: var(--tc-accent-fill); color: var(--tc-accent-text); } html.tema-claro .premium-hero h1 { color: var(--tc-ink); } html.tema-claro .premium-hero h1 span { color: var(--tc-accent-text); } html.tema-claro .premium-hero p.premium-lead { color: var(--tc-muted-2); } html.tema-claro .premium-btn-ghost { border: 1px solid var(--tc-border); color: var(--tc-ink-2); } html.tema-claro .premium-btn-ghost:hover { border-color: var(--tc-accent-text); color: var(--tc-accent-text) !important; } html.tema-claro .premium-stats-card { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .premium-stat-num { color: var(--tc-accent-text); } html.tema-claro .premium-stat-num.azul { color: #2E6FCE; } html.tema-claro .premium-stat-num.coral { color: #C15F34; } html.tema-claro .premium-stat-label { color: var(--tc-muted-3); } html.tema-claro .premium-secao { background: var(--tc-bg); } html.tema-claro .premium-secao-titulo h2 { color: var(--tc-ink); } html.tema-claro .premium-secao-titulo p { color: var(--tc-muted-3); } html.tema-claro .premium-secao-titulo a { color: var(--tc-accent-text); } html.tema-claro .premium-card { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .premium-card:hover { box-shadow: 0 14px 28px var(--tc-shadow-strong); border-color: #1D9E75; } html.tema-claro .premium-card-capa i { color: rgba(255, 255, 255, 0.75); } html.tema-claro .premium-card-corpo h4 { color: var(--tc-ink); } html.tema-claro .premium-card-corpo p { color: var(--tc-muted-3); } html.tema-claro .premium-preco small { color: var(--tc-muted-4); } html.tema-claro .premium-pill { background: var(--tc-accent-fill); color: var(--tc-accent-text); } html.tema-claro .premium-cta-final p { color: rgba(255, 255, 255, 0.82); } html.tema-claro .premium-depoimento-card { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .premium-depoimento-card p { color: var(--tc-muted-2); } html.tema-claro .premium-depoimento-autor b { color: var(--tc-ink); } html.tema-claro .premium-depoimento-autor span { color: var(--tc-muted-4); } /* ---------- Cabecalho de listagem (busca + contador) ---------- */ html.tema-claro .premium-lista-total { color: var(--tc-muted-1); } html.tema-claro .premium-lista-total b { color: var(--tc-ink); } html.tema-claro .premium-busca-box input { background: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-ink); } html.tema-claro .premium-busca-box input::placeholder { color: var(--tc-muted-4); } html.tema-claro .premium-busca-box i { color: var(--tc-accent-text); } /* ---------- Abas (Cursos / Pacotes) ---------- */ html.tema-claro .premium-aba-item { background: var(--tc-surface-2); border: 1px solid var(--tc-border); color: var(--tc-muted-2); } html.tema-claro .premium-aba-item:hover { background: var(--tc-surface); color: var(--tc-ink); } /* ---------- Grid + paginacao injetados via AJAX ---------- */ html.tema-claro .premium-vazio { color: var(--tc-muted-3); } html.tema-claro .premium-paginacao a { background-color: var(--tc-surface) !important; border: 1px solid var(--tc-border) !important; color: var(--tc-ink-2) !important; } html.tema-claro .premium-paginacao a:hover { border-color: var(--tc-accent-text) !important; color: var(--tc-accent-text) !important; } /* =================================================================== Pagina do curso (curso.php) - Modelo 2 "Hero de Vendas" =================================================================== */ html.tema-claro .curso-hero { background: radial-gradient(circle at 25% 15%, rgba(93, 202, 165, 0.16), transparent 60%), var(--tc-bg); } html.tema-claro .curso-hero-titulo { color: var(--tc-ink); } html.tema-claro .curso-hero-lead { color: var(--tc-muted-2); } html.tema-claro .curso-preco-antigo { color: var(--tc-muted-4); } html.tema-claro .curso-hero-extra a { color: var(--tc-muted-3); } html.tema-claro .curso-hero-extra a:hover { color: var(--tc-accent-text); } html.tema-claro .curso-hero-tecnologias { color: var(--tc-muted-4); } html.tema-claro .curso-hero-video { border: 1px solid var(--tc-border); } html.tema-claro .curso-prova-social { background: var(--tc-surface); border-top: 1px solid var(--tc-border); border-bottom: 1px solid var(--tc-border); } html.tema-claro .curso-prova-num { color: var(--tc-accent-text); } html.tema-claro .curso-prova-lbl { color: var(--tc-muted-3); } html.tema-claro .curso-secao-alt { background: var(--tc-bg-alt); border-top: 1px solid var(--tc-border-soft); border-bottom: 1px solid var(--tc-border-soft); } html.tema-claro .curso-roadmap-modulo { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .curso-roadmap-cabecalho { color: var(--tc-ink); } html.tema-claro .curso-roadmap-cabecalho i { color: var(--tc-accent-text); } html.tema-claro .curso-roadmap-aulas div { border-top: 1px solid var(--tc-border-soft); color: var(--tc-muted-2); } html.tema-claro .curso-roadmap-aulas div:hover { color: var(--tc-ink); } html.tema-claro .curso-roadmap-tag { color: var(--tc-accent-text); } html.tema-claro .curso-roadmap-tag.curso-roadmap-cad { color: var(--tc-muted-4); } html.tema-claro .curso-rel-card, html.tema-claro .curso-aval-card { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .curso-rel-card:hover { border-color: #1D9E75; } html.tema-claro .curso-rel-capa { background-color: var(--tc-surface-2); } html.tema-claro .curso-rel-body h5 { color: var(--tc-ink); } html.tema-claro .curso-rel-body p { color: var(--tc-muted-3); } html.tema-claro .curso-aval-nome { color: var(--tc-ink); } html.tema-claro .curso-aval-data { color: var(--tc-muted-4); } html.tema-claro .curso-aval-estrelas { color: #B8892E; } html.tema-claro .curso-aval-card p { color: var(--tc-muted-2); } html.tema-claro .curso-barra-flutuante { background: var(--tc-surface); border-top: 1px solid var(--tc-border); box-shadow: 0 -8px 24px var(--tc-shadow); } html.tema-claro .curso-barra-nome { color: var(--tc-muted-3); } /* =================================================================== Pagina de Contatos =================================================================== */ html.tema-claro .premium-contato-form .form-control { background: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-ink); } html.tema-claro .premium-contato-form .form-control:focus { background: var(--tc-surface); border-color: var(--tc-accent-text); color: var(--tc-ink); } html.tema-claro .premium-contato-form .form-control::placeholder { color: var(--tc-muted-4); } html.tema-claro .premium-contato-form label { color: var(--tc-muted-1); } html.tema-claro .premium-contato-form .form-check-label { color: var(--tc-muted-3); } html.tema-claro #msg.text-success { color: var(--tc-accent-text); } html.tema-claro .premium-contato-info { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .premium-contato-info-titulo { color: var(--tc-ink); } html.tema-claro .premium-contato-info-item { border-bottom: 1px solid var(--tc-border-soft); color: var(--tc-muted-1) !important; } html.tema-claro .premium-contato-info-item i { background: var(--tc-accent-fill); color: var(--tc-accent-text); } html.tema-claro .premium-contato-info-item:hover { color: var(--tc-accent-text) !important; } /* =================================================================== Pagina de Perguntas Frequentes =================================================================== */ html.tema-claro .premium-faq-item { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .premium-faq-pergunta { color: var(--tc-ink); } html.tema-claro .premium-faq-pergunta i { color: var(--tc-accent-text); } html.tema-claro .premium-faq-resposta { color: var(--tc-muted-2); } html.tema-claro .premium-faq-resposta a { color: var(--tc-accent-text); } /* =================================================================== Texto simples (Termos, Politica) e formularios utilitarios =================================================================== */ html.tema-claro .premium-static-content { color: var(--tc-muted-2); } html.tema-claro .premium-static-content a { color: var(--tc-accent-text); } html.tema-claro .premium-static-content .aviso-conteudo { background: rgba(184, 137, 46, 0.10); border: 1px solid rgba(184, 137, 46, 0.3); color: #8A5F14; } html.tema-claro .premium-cert-form .form-control { background: var(--tc-surface); border: 1px solid var(--tc-border); color: var(--tc-ink); } html.tema-claro .premium-cert-form .form-control::placeholder { color: var(--tc-muted-4); } html.tema-claro .premium-cert-form .form-control:focus { background: var(--tc-surface); border-color: var(--tc-accent-text); color: var(--tc-ink); } html.tema-claro .premium-cert-form label { color: var(--tc-muted-1); } html.tema-claro .premium-cert-imagem { background: var(--tc-surface); border: 1px solid var(--tc-border); } /* =================================================================== Pagina Sobre =================================================================== */ html.tema-claro .premium-vantagem-card { background: var(--tc-surface); border: 1px solid var(--tc-border); } html.tema-claro .premium-vantagem-card i { color: var(--tc-accent-text); } html.tema-claro .premium-vantagem-card h4 { color: var(--tc-ink); } html.tema-claro .premium-vantagem-card p { color: var(--tc-muted-3); } /* ---------- Botao de alternancia claro/escuro (menu) ---------- */ .tema-toggle-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(93, 202, 165, 0.10); border: 1px solid rgba(93, 202, 165, 0.35); border-radius: 999px; padding: 5px 6px 5px 10px; cursor: pointer; line-height: 1; } .tema-toggle-btn .fa { font-size: 13px; color: #5DCAA5; } .tema-toggle-track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #5DCAA5; flex-shrink: 0; } .tema-toggle-knob { position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; border-radius: 50%; background: #0A1614; transition: left 0.18s ease; } html.tema-claro .tema-toggle-knob { left: 2px; } @media (max-width: 767px) { .tema-toggle-btn { margin: 10px 15px; } }