@import url('https://fonts.googleapis.com/css?family=Archivo'); /* Carregar fonte dos titulos */
@import url('https://fonts.googleapis.com/css?family=Inter'); /* Carregar fonte dos textos */
body {
font-family: 'Inter', sans-serif; /* Setar fonte dos textos */
color: #DFE1E6; /* Setar cores dos textos */
background-color: #101114; /* Setar cor 5 */
}
h1, h2, h3, h4, h5, h6, .navbar .nav>li>a, .dropdown-menu>li>a, #admin #toolbar .btn {
font-family: 'Archivo', sans-serif; /* Setar fonte dos titulos */
}
h1, h2, h3, h4, h5, h6 {
color: #FFFFFF; /* Setar cores dos titulos */
}
a, .btn-link {
color: #FF8377; /* Setar cores dos links */
}
a:hover, a:focus {
color: #FFA093; /* Setar cores dos links com foco*/
}
#landingpage-subscription #registration-course h4, #landingpage-subscription #registration-course h2, .popover-title, .popover-content {
color: #2E313A;
}
#landingpage-subscription .carousel .carousel-control, .cr-black {
background-color: #2E313A;
}
#steps-cart, #details-course h1, #details-course h2, #details-course h3, #details-course, #payment-methods h4, .modal-body {
color: #101114;
}
#top-menu, footer, #course-banner {
background-color: #0A0B0D; /* Setar cor 1 */
}
#menu-main.navbar {
background-color: #A81419; /* Setar cor 2 */
}
#footer-top, #top-internal, #menu-main .nav>li.active>a, #landing-page #instructor-course {
background-color: #191B20; /* Setar cor 3 */
}
.nav>li>a:hover, .nav>li>a:focus, .panel-default .panel-heading, .panel-default .panel-title, .panel-default .panel-footer, #list-courses .course-unit .course-text, .borda-instrutor, #cart ul li, .nav-tabs>li>a, .panel-default>.panel-heading+.panel-collapse>.panel-body, #landing-page #instructor-course .biography-text, .well, #contact-right .panel-body {
background-color: #181A1F; /* Setar cor 4 */
}
#landing-page .lessons-course {
border-color: #181A1F; /* Setar cor 4 */
}
.nav-pills li.active>a, .nav-pills li>a:hover, .nav-tabs.nav-justified>li>a, .panel-default>.panel-heading+.panel-collapse>.panel-body, .profile-usermenu .nav>li>a, .profile-usermenu, .information-post, .pagination>li>a, .pagination>li>span, .blog-post, .panel-default>.panel-heading, hr, #landing-page #grid-course, .panel-default, .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>.active>a:focus, #landing-page #description-course #informations h5, .form-control, .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus, .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
border-color: #2E313A; /* Setar cor das Bordas */
}
.btn-default, .btn-default:hover {
background-color: #2E313A; /* Setar cor do botão Padrão */
}
.btn-info, .btn-info:hover {
background-color: #D21F26; /* Setar cor do botão de informação */
}
.btn-success, .btn-success:hover, #landing-page #registration-course, .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
background-color: #A81419; /* Setar cor do botão de sucesso */
color: #fff;
}
.btn-danger, .btn-danger:hover, #list-courses .course-unit .language-course-title {
background-color: #33373F; /* Setar cor do botão de atenção */
}
/* aqui entra o css especifico no cliente */
/* ==========================================================
Acadtec · custom_css · proposta v1 · 2026-09-17
Tema Corporate Black (theme_id 3). Anexado ao fim do client.css.
Carrega em TODAS as páginas, inclusive checkout e área do aluno:
os seletores globais (tipografia, botões, formulários) são intencionais;
o resto está escopado em #slider, #courses-list, .content_block e rodapé.
========================================================== */
/* ---------- base ---------- */
body { font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; }
hr { border-top-color: #2E313A; }
/* o bootstrap.css do LMS (Bootswatch Sandstone) força MAIÚSCULAS; a arte usa caixa normal */
.btn, .nav, .navbar .nav > li > a, .dropdown-menu > li > a, .breadcrumb, .pagination, .pager,
.panel .panel-heading, .panel .panel-title { text-transform: none; }
.btn, .btn-lg { text-shadow: none; border: 0; border-radius: 10px; font-weight: 600;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 12px 24px -12px rgba(0,0,0,.8); }
.btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 12px; }
/* todos os botões do tema escuro são de texto claro */
.btn-default, .btn-default:hover, .btn-default:focus,
.btn-info, .btn-info:hover, .btn-info:focus,
.btn-success, .btn-success:hover, .btn-success:focus,
.btn-danger, .btn-danger:hover, .btn-danger:focus { color: #fff; }
.form-control { color: #DFE1E6; background-color: #16181D; border-radius: 10px; box-shadow: none; }
.form-control:focus { border-color: #D21F26; box-shadow: 0 0 0 3px rgba(210,31,38,.28); }
.form-control::placeholder { color: #8A8F99; opacity: 1; }
.panel-default > .panel-heading .panel-title, .panel-default > .panel-heading .panel-title a { font-size: 15px; font-weight: 600; color: #fff; }
/* ---------- ícones dos blocos ----------
O CKEditor 4 do admin APAGA elementos vazios como ao salvar.
Por isso o ícone é um ::before em elemento COM texto: class="pv-ic pv-ic-". */
.pv-ic::before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.pv-ic-server::before { content: "\f233"; }
.pv-ic-pencil::before { content: "\f044"; }
.pv-ic-code::before { content: "\f121"; }
.pv-ic-certificate::before { content: "\f0a3"; }
.pv-ic-shield::before { content: "\f132"; }
.pv-ic-play::before { content: "\f144"; }
.pv-ic-globe::before { content: "\f0ac"; }
.pv-ic-users::before { content: "\f0c0"; }
.pv-ic-file::before { content: "\f0f6"; }
.pv-ic-mail::before { content: "\f0e0"; }
/* ---------- barra do topo (head_block) ---------- */
#top-menu { min-height: 44px; margin: 0; border: 0; border-radius: 0; }
#text-top-menu { font-size: 13px; color: #A7ACB6; }
.pv-topo { display: inline-block; margin: 12px 0; }
.pv-topo.pv-ic::before { margin-right: 7px; color: #FF8377; }
#top-menu ul.flag { margin-top: 12px; }
#top-menu ul.flag li img { width: 18px; border-radius: 2px; }
#menu-top > li > a { color: #DFE1E6; font-size: 13px; font-weight: 600; padding-top: 12px; padding-bottom: 12px; }
#menu-top > li > a:hover, #menu-top > li > a:focus { background: transparent; color: #FF8377; }
/* o item Cadastrar/Login tem class="btn-info" no layout: vira o botão vermelho do topo */
#menu-top > li#environment-access { margin: 7px 0 7px 10px; border-radius: 8px; }
#menu-top > li#environment-access > a, #menu-top > li#environment-access > a:hover { color: #fff; padding: 7px 16px; }
/* ---------- logo + busca ---------- */
#logotipo-search { padding: 20px 0; background: #101114; }
#logotipo-search img { max-height: 75px; width: auto; margin: 0; }
#search-site .input-group { margin-top: 4px; }
#search-site .form-control { height: 46px; padding-left: 20px; border-radius: 999px 0 0 999px; border-color: #2E313A; border-right: 0; }
#search-site .btn { height: 46px; padding: 0 22px; font-size: 14px; border-radius: 0 999px 999px 0; }
#search-site .btn:hover { transform: none; box-shadow: none; }
/* ---------- menu principal: faixa vermelha, fixa ao rolar ---------- */
#menu-main.navbar { min-height: 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }
#menu-main .nav-justified { display: flex; gap: 2px; width: auto; }
#menu-main .nav-justified > li { display: block; width: auto; float: none; }
#menu-main .nav > li > a { padding: 16px 20px; font-size: 14px; font-weight: 600; color: #fff; background: transparent; border-radius: 0; }
#menu-main .nav > li > a:hover, #menu-main .nav > li > a:focus { background: rgba(0,0,0,.28); color: #fff; }
/* item ativo: recorte escuro na faixa vermelha (color3) — "você está aqui" */
#menu-main .nav > li.active > a, #menu-main .nav > li.active > a:hover, #menu-main .nav > li.active > a:focus { color: #fff; }
/* ---------- slides: hero com texto à esquerda ---------- */
#slider { margin-bottom: 0; background: #101114; }
#slider .carousel-inner .item { background: #101114; }
#slider .item > a { display: block; position: relative; }
#slider .item > a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(90deg, rgba(16,17,20,.95) 0%, rgba(16,17,20,.78) 38%, rgba(16,17,20,0) 72%); }
#slider .item img { width: 100%; }
#slider .carousel-caption { left: 50%; right: auto; top: 50%; bottom: auto; width: 100%; max-width: 1170px;
padding: 0 15px; transform: translate(-50%, -50%); text-align: left; text-shadow: none; }
#slider .carousel-caption h2 { max-width: 660px; margin: 0 0 16px; font-size: 46px; line-height: 1.08; font-weight: 800; color: #fff; }
#slider .carousel-caption p { max-width: 520px; margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: #C6CAD2; }
#slider .carousel-control { width: 64px; background: none; opacity: .5; }
#slider .carousel-control:hover { opacity: 1; }
@media (max-width: 1199px) { #slider .carousel-caption h2 { font-size: 38px; } }
@media (max-width: 991px) { #slider .carousel-caption h2 { font-size: 30px; max-width: 460px; } }
/* ---------- blocos da home (content_block / footer_block) ---------- */
/* o layout insere
depois do content_block e antes do footer_block; as faixas já se separam sozinhas */
section.content_block + hr, #courses-list + hr { display: none; }
section.content_block { overflow-x: clip; } /* a faixa .pv-cta usa 100vw; evita rolagem lateral */
.pv-eyebrow { display: inline-block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: #FF8377; }
.pv-sub { font-size: 17px; line-height: 1.6; color: #B7BCC6; }
/* bloco de abertura: é aqui que mora o único da home */
.pv-intro { max-width: 780px; padding: 68px 0 8px; }
.pv-intro h1 { margin: 0 0 18px; font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; color: #fff; }
.pv-intro .pv-sub { max-width: 620px; margin-bottom: 30px; }
.pv-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* três trilhas */
.pv-trilhas { margin-top: 56px; }
.pv-trilha { height: 100%; padding: 28px 26px 22px; background: #181A1F; border: 1px solid #2E313A; border-radius: 16px;
transition: border-color .2s ease, transform .2s ease; }
.pv-trilha:hover { border-color: #D21F26; transform: translateY(-3px); }
.pv-trilha h3 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.pv-trilha h3.pv-ic::before { display: block; width: 46px; height: 46px; margin-bottom: 16px; line-height: 46px; text-align: center;
font-size: 20px; color: #FF8377; background: rgba(210,31,38,.14); border-radius: 12px; }
.pv-trilha p { margin: 0 0 14px; font-size: 14.5px; color: #B7BCC6; }
.pv-trilha .pv-link { margin: 0; font-size: 14px; font-weight: 600; }
/* faixa de garantias */
.pv-provas { margin-top: 44px; padding: 26px 8px 14px; background: #16181D; border: 1px solid #2E313A; border-radius: 16px; }
/* sem flex, as colunas flutuam e a 3ª encaixa sob a mais alta: a faixa sai escadinha no celular */
.pv-provas .row { display: flex; flex-wrap: wrap; }
.pv-provas .row::before, .pv-provas .row::after { display: none; }
.pv-provas .row > div { float: none; }
.pv-prova { display: flex; flex-direction: column; padding: 8px 16px; margin: 0 0 12px; }
.pv-prova.pv-ic::before { margin-bottom: 10px; font-size: 22px; color: #FF8377; }
.pv-prova strong { font-size: 14.5px; line-height: 1.3; color: #fff; }
.pv-prova span { margin-top: 3px; font-size: 13px; line-height: 1.45; color: #9BA1AC; }
/* ---------- títulos das listagens ---------- */
#courses-list h2.text-center { margin: 76px 0 36px; font-size: 34px; color: #fff; }
#courses-list h2.text-center::after { content: ""; display: block; width: 46px; height: 4px; margin: 14px auto 0; background: #D21F26; border-radius: 4px; }
/* ---------- cards (assinaturas e cursos) ---------- */
#courses-list #list-courses { display: flex; flex-wrap: wrap; }
#courses-list #list-courses::before, #courses-list #list-courses::after { display: none; }
#courses-list #list-courses > div { float: none; }
#list-courses .course-unit { height: calc(100% - 30px); overflow: hidden; background: #181A1F; border: 1px solid #2E313A; border-radius: 16px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#list-courses .course-unit:hover { transform: translateY(-4px); border-color: #4A4E59; box-shadow: 0 26px 46px -26px rgba(0,0,0,.9); }
#list-courses .course-unit .course-img { overflow: hidden; }
/* a view define .height-img{height:234px} e a imagem estica; aqui ela recorta em 4:3 */
#list-courses .course-unit .course-img img.height-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: 0; transition: transform .45s ease; }
#list-courses .course-unit:hover .course-img img.height-img { transform: scale(1.05); }
#list-courses .course-unit .language-course-title { left: 12px; bottom: 12px; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; }
#list-courses .course-unit .language-course-title a { color: #fff; }
#list-courses .course-unit .course-text { padding: 20px; text-align: left; }
/* o tema corta o título em UMA linha com reticências; aqui cabem duas inteiras */
#list-courses .course-unit .course-text h4, .nome-instrutor h4 { min-height: 2.6em; max-height: none; margin: 0 0 8px;
font-size: 17px; line-height: 1.3; -webkit-line-clamp: 2; }
#list-courses .course-unit .course-text h4 a { color: #fff; }
#list-courses .course-unit .course-text p { margin-bottom: 0; font-size: 13px; color: #9BA1AC; }
#list-courses .course-unit .course-text br { display: none; }
#list-courses .course-unit .course-text .btn-block { margin-top: 16px; font-size: 14px; padding: 10px 12px; }
#list-courses .course-unit .course-text hr { margin: 16px 0 12px; }
#list-courses .course-unit p.teacher-name a { color: #B7BCC6; font-weight: 500; }
#list-courses .course-unit p.teacher-name img { width: 28px; height: 28px; margin-right: 8px; }
/* ---------- footer_block: faixa de turma fechada ---------- */
/* sem margem negativa no rodapé: .pv-cta é position:relative e pintava por cima dos 60px
de topo do #footer-top, comendo o respiro do "EMPRESA". */
.pv-cta { position: relative; overflow: hidden; margin: 84px calc(50% - 50vw) 0; padding: 76px 0; color: #fff;
background: radial-gradient(70% 130% at 18% 0%, rgba(210,31,38,.30) 0%, rgba(16,17,20,0) 62%), #0A0B0D;
border-top: 1px solid #2E313A; }
.pv-cta-in { max-width: 1170px; margin: 0 auto; padding: 0 15px; }
/* as duas colunas têm alturas bem diferentes (texto ~330px, lista ~220px). Com float do
Bootstrap a lista encosta no topo e sobra um buraco embaixo: aqui elas se centram no mesmo eixo. */
.pv-cta .row { display: flex; flex-wrap: wrap; align-items: center; }
.pv-cta .row::before, .pv-cta .row::after { display: none; }
.pv-cta .row > div { float: none; }
.pv-cta h2 { margin: 0 0 16px; font-size: 40px; line-height: 1.1; font-weight: 800; color: #fff; }
.pv-cta .pv-sub { max-width: 620px; margin-bottom: 30px; }
.pv-lista { margin: 6px 0 0; padding: 0; list-style: none; }
.pv-lista li { padding: 14px 0; font-size: 14.5px; color: #DFE1E6; border-bottom: 1px solid #23262D; }
.pv-lista li:last-child { border-bottom: 0; }
.pv-lista li.pv-ic::before { width: 22px; margin-right: 12px; font-size: 15px; color: #FF8377; }
/* ---------- rodapé ---------- */
#footer-top { margin-top: 0; padding: 54px 0; border-top: 1px solid #2E313A; }
/* as três colunas têm alturas diferentes (5 itens, 3 itens, 2 posts) e o float as prende no topo,
deixando a do meio boiando. Centradas no mesmo eixo, o rodapé fecha equilibrado. */
#footer-top .row { display: flex; flex-wrap: wrap; align-items: center; }
#footer-top .row::before, #footer-top .row::after { display: none; }
#footer-top .row > div { float: none; }
#footer-top ul { margin-bottom: 0; }
#footer-top ul li:last-child { margin-bottom: 0; }
#footer-top .media:last-child { margin-bottom: 0; }
#footer-top h3 { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FF8377; }
#footer-top ul li { margin-bottom: 10px; font-size: 14px; }
#footer-top a { color: #DFE1E6; }
#footer-top a:hover { color: #FF8377; }
#footer-top .fa-lg { font-size: 20px; }
#footer-top .media-object { border-radius: 8px; object-fit: cover; }
#footer-top .media-heading { font-size: 14px; font-weight: 600; line-height: 1.35; color: #fff; }
#footer-top .media-body a { font-size: 13px; color: #9BA1AC; }
footer { padding: 22px 0; font-size: 13px; color: #9BA1AC; }
/* ---------- responsivo ---------- */
@media (max-width: 991px) {
.pv-intro h1 { font-size: 40px; }
.pv-trilhas .col-sm-4 { margin-bottom: 14px; }
}
@media (max-width: 767px) {
#logotipo-search { padding: 14px 0; }
#logotipo-search img { max-height: 54px; }
/* slide: em vez de esticar, recorta e mantém o assunto no quadro */
#slider .item img { height: 260px; min-height: 0; object-fit: cover; object-position: 70% center; }
#slider .item > a::after { background: linear-gradient(90deg, rgba(16,17,20,.94) 0%, rgba(16,17,20,.45) 88%); }
#slider .carousel-caption { padding-bottom: 8px; }
#slider .carousel-caption h2 { max-width: 78%; margin: 0; font-size: 23px; }
#slider .carousel-control { display: none; }
.pv-intro { padding-top: 40px; }
.pv-intro h1 { font-size: 31px; }
.pv-intro .pv-sub, .pv-cta .pv-sub { font-size: 15.5px; }
.pv-acoes .btn { width: 100%; }
.pv-trilhas { margin-top: 34px; }
.pv-provas { margin-top: 30px; padding: 18px 4px 6px; }
.pv-prova { padding: 8px 12px; }
#courses-list h2.text-center { margin: 48px 0 24px; font-size: 26px; }
/* sem largura declarada as colunas encolhem até o conteúdo e os cards saem desiguais.
Duas por linha: 8 cursos em coluna única davam 8.800px de rolagem no celular. */
#courses-list #list-courses > div { width: 50%; padding-left: 7px; padding-right: 7px; }
#list-courses .course-unit { margin-bottom: 14px; height: calc(100% - 14px); }
#list-courses .course-unit .course-text { padding: 14px 12px; }
#list-courses .course-unit .course-text h4 { font-size: 14.5px; min-height: 2.6em; }
#list-courses .course-unit .course-text p { font-size: 12px; }
#list-courses .course-unit .course-text .btn-block { margin-top: 10px; padding: 9px 6px; font-size: 12.5px; }
#list-courses .course-unit .course-text hr { margin: 12px 0 10px; }
#list-courses .course-unit p.teacher-name a { font-size: 12px; }
#list-courses .course-unit p.teacher-name img { width: 22px; height: 22px; margin-right: 6px; }
#list-courses .course-unit .language-course-title { left: 8px; bottom: 8px; padding: 3px 9px; font-size: 11px; }
.pv-cta { margin: 52px calc(50% - 50vw) 0; padding: 52px 0; }
.pv-cta h2 { font-size: 27px; }
.pv-cta .col-md-5 { margin-top: 26px; }
/* o tema esconde o rodapé inteiro no celular (hidden-xs): aqui ele volta */
#footer-top.hidden-xs { display: block !important; padding: 36px 0 30px; }
/* empilhado no celular, centralizar as colunas não faz sentido: cada uma volta a ocupar a linha toda */
#footer-top .row { align-items: stretch; }
#footer-top .row > div { width: 100%; }
#footer-top .col-sm-4, #footer-top .col-sm-3 { margin-bottom: 26px; }
.pv-cta .row { align-items: stretch; }
.pv-cta .row > div { width: 100%; }
}
/* ==========================================================
PÁGINAS INTERNAS
O custom_css é global: vale para catálogo, blog, FAQ, página de
curso, login e checkout. Os quatro defeitos abaixo apareceram
ao conferir essas telas depois de aplicar o tema na Acadtec.
========================================================== */
/* 1. Catálogo, categoria e blog usam