/* src/server/captura/tmf/site/site.css — o que o site institucional do TMF (/tmf/*) tem a mais que as LPs. Carregado DEPOIS de primeiro-diploma.css (mesmas cores, fontes e componentes). */ /* Menu: no celular vira uma segunda linha, com as 5 páginas numa linha só (gestor 14/10). Ao rolar a página ele recolhe e fica só o logo e o "Quero me matricular" (site.js põe .topo--recolhido). */ .topo__linha { flex-wrap: wrap; } .menu--site { display: flex; order: 3; width: 100%; justify-content: center; flex-wrap: nowrap; gap: 0 clamp(8px, 3vw, 16px); padding: 4px 0 2px; max-height: 44px; overflow: hidden; transition: max-height .25s, opacity .2s, padding .25s, visibility .25s; } .menu--site a { font-size: clamp(.6rem, 2.7vw, .7rem); letter-spacing: .02em; padding: 6px 0; white-space: nowrap; } .menu--site a[aria-current="page"] { color: var(--verde-claro); box-shadow: inset 0 -2px 0 var(--verde-claro); } .topo--recolhido .menu--site { max-height: 0; padding: 0; opacity: 0; visibility: hidden; } @media (min-width: 1024px) { .topo__linha { flex-wrap: nowrap; } .menu--site { order: 0; width: auto; gap: 28px; padding: 0; } .menu--site a { font-size: .8rem; letter-spacing: .05em; } } /* Banners do topo (gestor 14/10): 4 destaques que passam sozinhos, com pontos para escolher. */ .banners { position: relative; } .banners__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .banners__trilho::-webkit-scrollbar { display: none; } .banner { flex: 0 0 100%; scroll-snap-align: start; align-content: center; } .banner--profs, .banner--desconto { display: grid; justify-items: center; text-align: center; padding: 48px var(--lateral) 56px; background: radial-gradient(ellipse 60% 70% at 50% 0, rgba(8,80,0,.55), transparent 70%), radial-gradient(ellipse 30% 60% at 100% 50%, rgba(40,140,130,.18), transparent 70%); } .banner__titulo { font-family: var(--titulo); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.1; margin: 0 0 24px; } .banner--profs .banner__titulo { font-size: clamp(1.7rem, 5vw, 2.8rem); max-width: 26ch; } .banner--profs picture { width: 100%; margin-top: 28px; } .banner--profs img { width: 100%; max-width: 1200px; margin: 0 auto; } .banner__nota { margin: 18px 0 0; color: var(--texto-suave); font-size: .9rem; } .banner--desconto .preco { margin: 0; } .banner__selo { margin: 14px 0 6px; padding: 4px 22px; border: 1px solid var(--verde-claro); border-radius: 999px; color: var(--verde-claro); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; } .banner__valor { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: clamp(4rem, 18vw, 7.5rem); line-height: 1; } .banner__valor-sub { margin: 4px 0 26px; font-size: clamp(1.1rem, 4vw, 1.6rem); } /* Os 4 banners têm a altura do maior. No celular a foto do 1º e do 2º sai (ficava abaixo da dobra e esticava todos os outros); o texto e o botão continuam. */ @media (max-width: 767px) { .banner .hero__foto { display: none; } .banner.hero { padding-bottom: 40px; } } @media (min-width: 768px) and (max-width: 1023px) { .banner .hero__foto { width: min(50%, 300px); } } .banners__pontos { display: flex; justify-content: center; gap: 4px; padding: 8px 0 14px; } .banners__pontos button { width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } .banners__pontos button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: #3c4a3c; transition: width .3s, background .3s; } .banners__pontos button[aria-current="true"]::before { width: 26px; background: var(--verde-claro); } /* Setas (gestor 19/10): no celular e tablet ficam ao lado dos pontos; em tela larga, nas laterais do banner. */ .banners__pontos .banners__seta { width: 40px; height: 40px; margin: 0 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(5,8,5,.6); color: #fff; font-size: 1.6rem; line-height: 1; padding-bottom: 3px; transition: border-color .2s, background .2s; } .banners__pontos .banners__seta::before { display: none; } .banners__pontos .banners__seta:hover { border-color: var(--verde-claro); background: rgba(8,80,0,.6); } @media (min-width: 1280px) { .banners__pontos .banners__seta { position: absolute; top: calc(50% - 46px); width: 48px; height: 48px; margin: 0; } .banners__pontos .banners__seta:first-child { left: 18px; } .banners__pontos .banners__seta:last-child { right: 18px; } } /* No desktop as fotos do 1º e do 2º banner crescem (gestor 19/10: estavam pequenas perto do banner). */ @media (min-width: 1024px) { .banner.hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; } .banner.hero .hero__foto { max-width: 580px; width: 100%; margin: 0 auto 40px; } } /* Dados do curso em caixas sobre fundo verde (gestor 14/10). */ .caixas { padding: 40px var(--lateral); background: linear-gradient(120deg, #063a00, #0b5a08 55%, #12700d); } .caixas__itens { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 14px; } .caixas__itens li { display: grid; gap: 8px; align-content: center; text-align: center; padding: 24px 22px; border-radius: var(--raio); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); } .caixas__itens strong { font-size: 1.1rem; } .caixas__itens span { color: rgba(255,255,255,.85); } @media (min-width: 640px) { .caixas__itens { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .caixas__itens { grid-template-columns: repeat(4, 1fr); max-width: none; } } /* gestor 19/10: os 4 na mesma linha */ /* Espaço do vídeo (o vídeo ainda não chegou: fica a capa com o play). */ .video { position: relative; max-width: 900px; margin: 0 auto 48px; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #050805; box-shadow: 0 24px 50px -24px rgba(5,40,0,.6); } .video img { width: 100%; height: 100%; object-fit: cover; opacity: .7; } .video__play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; border: 4px solid rgba(255,255,255,.85); background: rgba(8,80,0,.55); box-shadow: 0 0 0 6px rgba(76,203,58,.35), 0 0 30px rgba(76,203,58,.6); } .video__play::after { content: ""; position: absolute; left: 34px; top: 24px; border-left: 28px solid #fff; border-top: 18px solid transparent; border-bottom: 18px solid transparent; } /* Diferenciais em mini banners que passam sozinhos: título numa caixa verde sólida, a foto colada embaixo. A lista vai duas vezes (a 2ª escondida do leitor de tela) para a volta não ter emenda. */ .dif__rotulo { text-align: center; color: var(--verde-claro); font-family: var(--titulo); font-size: 1.5rem; margin: 0 0 18px; } .dif { overflow: hidden; margin-inline: calc(-1 * var(--lateral)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); } .dif__trilho { display: flex; gap: 16px; width: max-content; animation: dif-passa 60s linear infinite; } .dif:hover .dif__trilho, .dif:focus-within .dif__trilho { animation-play-state: paused; } .dif__lista { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; } .dif__item { flex: none; width: 270px; display: flex; flex-direction: column; border-radius: var(--raio); overflow: hidden; background: #063a00; } .dif__titulo { flex: 1; padding: 18px 18px 16px; background: #085000; color: #fff; } .dif__titulo h3, .dif__h3 { margin: 0 0 8px; font-family: var(--titulo); font-weight: 600; text-transform: uppercase; font-size: 1.1rem; line-height: 1.15; color: #fff; } .dif__titulo p { margin: 0; font-size: .85rem; line-height: 1.45; color: rgba(255,255,255,.85); } .dif__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @keyframes dif-passa { to { transform: translateX(calc(-50% - 8px)); } } @media (min-width: 1024px) { .dif__item { width: 300px; } } @media (prefers-reduced-motion: reduce) { .dif { overflow-x: auto; } .dif__trilho { animation: none; } .dif__lista[aria-hidden] { display: none; } } /* Grade por semestre (gestor 14/10): no desktop 4 colunas em escada, com a barra que enche ao chegar nela; no celular cada semestre abre e fecha (site.js fecha todos ao carregar). */ .semestres-linha { display: grid; gap: 14px; } .sem { border-radius: var(--raio); padding: 18px; color: #fff; background: linear-gradient(160deg, #0d5f09, #063a00); box-shadow: 0 16px 30px -20px rgba(5,40,0,.7); } .sem summary { display: grid; justify-items: center; gap: 10px; text-align: center; cursor: pointer; list-style: none; } .sem summary::-webkit-details-marker { display: none; } .sem summary::after { content: "Ver matérias ▾"; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #bfe9b5; } .sem[open] summary::after { content: "Fechar ▴"; } .sem__num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #fff; color: #085000; font-weight: 800; font-size: 1.25rem; } .sem__titulo { font-weight: 700; font-size: 1.05rem; } .sem__barra { width: 100%; height: 14px; padding: 3px; border-radius: 999px; background: #fff; } .sem:nth-child(1) { --p: 25%; } .sem:nth-child(2) { --p: 50%; } .sem:nth-child(3) { --p: 75%; } .sem:nth-child(4) { --p: 100%; } .sem__barra i { display: block; height: 100%; width: var(--p); border-radius: 999px; background: #085000; transition: width 1.4s cubic-bezier(.2,.7,.2,1); } .semestres-linha--anima:not(.visivel) .sem__barra i { width: 0; } .sem ul { list-style: none; margin: 16px 0 4px; padding: 0; display: grid; gap: 12px; text-align: center; font-size: .88rem; line-height: 1.4; } .sem li::before { content: "• "; } @media (min-width: 1024px) { .semestres-linha { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 16px; } .sem:nth-child(odd) { margin-top: 28px; } .sem summary { cursor: default; pointer-events: none; } .sem summary::after { display: none; } .sem:nth-child(2) .sem__barra i { transition-delay: .2s; } .sem:nth-child(3) .sem__barra i { transition-delay: .4s; } .sem:nth-child(4) .sem__barra i { transition-delay: .6s; } } @media (prefers-reduced-motion: reduce) { .sem__barra i, .menu--site { transition: none; } } /* Frase de destaque dos professores em minúsculas (gestor 14/10). No desktop, título numa linha, frase em duas e 4 professores por linha (gestor 19/10). */ .chamada { text-transform: none; } @media (min-width: 1024px) { #professores h2 { max-width: none; } #professores .chamada { max-width: 56ch; } .profs { --col: 4; } } /* Nosso DNA no formato do gestor: logos, texto e cada ponto num cartão com o check verde. */ .checks { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; } .checks li { position: relative; padding: 14px 16px 14px 50px; border-radius: 14px; background: #fff; border: 1px solid #e3e8e2; box-shadow: 0 8px 20px -14px rgba(5,40,0,.35); color: var(--texto-suave); } .checks li strong { color: var(--texto); } .checks li::before { content: "✓"; position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #1f9d3a; color: #fff; font-weight: 800; font-size: .8rem; } /* Matérias (gestor 19/10): blocos alternam escuro e claro; o fundo próprio da jornada e do CTA final sai. */ #jornada.secao--clara, .cta-final.secao--clara { background: #fff; } /* Topo das páginas internas: uma coluna, sem foto. */ .hero.hero--pagina { grid-template-columns: 1fr; padding-bottom: 56px; } .hero--pagina .hero__texto { max-width: 860px; margin: 0 auto; padding-bottom: 0; text-align: center; } .hero--pagina h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); } .hero--pagina .sub { margin-bottom: 0; max-width: 60ch; margin-inline: auto; } /* Diferenciais: 6 fotos em grade (nada de carrossel). */ .cards--3 { display: grid; gap: 16px; } @media (min-width: 768px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } } /* Onde o tecnólogo pode atuar / onde não pode. */ .atuacao { display: grid; gap: 16px; margin-top: 8px; } .atuacao__lista { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; } .atuacao__lista li { position: relative; padding-left: 26px; color: var(--texto-suave); } .atuacao__lista li::before { content: "✔"; position: absolute; left: 0; color: var(--verde-claro); font-weight: 700; } .atuacao__lista--nao li::before { content: "✕"; color: #e06c6c; } @media (min-width: 1024px) { .atuacao { grid-template-columns: 1.7fr 1fr; } } /* Nosso DNA: foto + texto lado a lado no desktop. */ .dna { display: grid; gap: 32px; align-items: center; } .dna__foto { width: 100%; border-radius: var(--raio); } .dna .atuacao__lista { margin-bottom: 24px; } .dna__marcas { width: min(100%, 420px); margin: 8px 0 20px; background: #fff; border-radius: 12px; padding: 12px 18px; } @media (min-width: 1024px) { .dna { grid-template-columns: .85fr 1.15fr; gap: 56px; } } /* As duas instituições, lado a lado. */ .instituicoes { display: grid; gap: 16px; margin-top: 8px; } @media (min-width: 768px) { .instituicoes { grid-template-columns: 1fr 1fr; } } /* Parceiros: logos em cards brancos. */ .parceiros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; } .parceiros li { background: #fff; border: 1px solid #e3e8e2; border-radius: 14px; display: grid; place-items: center; } .parceiros img { width: 100%; max-width: 220px; } @media (min-width: 768px) { .parceiros { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .parceiros { grid-template-columns: repeat(6, 1fr); } } /* Contato: WhatsApp, e-mail e Instagram em cards clicáveis. */ .contatos { display: grid; gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; } .contatos a { display: grid; gap: 4px; padding: 22px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--painel); color: var(--texto); text-decoration: none; } .contatos a:hover { border-color: var(--verde-claro); } .contatos strong { font-family: var(--titulo); text-transform: uppercase; letter-spacing: .03em; color: var(--verde-claro); } @media (min-width: 768px) { .contatos { grid-template-columns: repeat(3, 1fr); } } /* Preço da primeira turma em destaque (de / por). */ .preco { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; margin: 6px 0 14px; } .preco s { color: var(--texto-suave); font-size: 1.1rem; } .preco strong { font-family: var(--titulo); font-size: clamp(2.6rem, 9vw, 3.6rem); color: var(--verde-claro); line-height: 1; } .preco span { color: var(--texto-suave); font-weight: 600; } /* Home da CEBEES (cebees.com.br, 20/10: substitui a home do WordPress). */ .home__frase { margin: -4px 0 14px; font-family: var(--titulo); font-weight: 600; font-size: clamp(1.2rem, 3.6vw, 1.6rem); line-height: 1.2; color: #1f9d3a; } .caminhos { display: grid; gap: 16px; max-width: 980px; margin: 8px auto 0; } .caminhos .card__corpo { display: grid; gap: 10px; justify-items: start; height: 100%; align-content: start; } .caminhos h3 { margin: 0; font-family: var(--titulo); text-transform: uppercase; font-size: 1.35rem; line-height: 1.15; } .caminhos p { margin: 0; color: var(--texto-suave); } .caminhos .botao { margin-top: 8px; } .caminhos__selo { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-claro) !important; } @media (min-width: 768px) { .caminhos { grid-template-columns: 1fr 1fr; } } a.video { display: block; } a.video:hover .video__play { background: rgba(8,80,0,.8); } .capas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px auto 28px; padding: 0; max-width: 1100px; list-style: none; } .capas img { width: 100%; border-radius: var(--raio); box-shadow: 0 16px 30px -18px rgba(5,40,0,.6); } @media (min-width: 1024px) { .capas { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .home-cebees .contato .contatos { margin: 18px 0 8px; } @media (min-width: 768px) { .home-cebees .contato .contatos { grid-template-columns: 1fr; } } .home-cebees .campo textarea { width: 100%; min-height: 110px; padding: 10px 12px; border-radius: 10px; border: 1px solid #2c3d2c; background: #0a110a; color: var(--texto); font: inherit; resize: vertical; } .home-cebees .campo textarea:focus { border-color: var(--verde-claro); outline: none; } .home-cebees .cta-final .secao__sub { text-align: center; margin-inline: auto; margin-top: 0; } /* No celular os 5 itens não cabem numa linha: o "Início" sai (o logo já leva à home). */ @media (max-width: 1023px) { .home-cebees .menu--site a[href="/"] { display: none; } } /* Home (MKT 23/10): o contato vai para o fundo claro, entre a oferta e o CTA final (escuros). */ .contato.secao--clara { --erro: #b3261e; } .contato.secao--clara .contato__caixa { background: #f3f6f2; } .contato.secao--clara .campo input, .contato.secao--clara .campo select, .home-cebees .contato.secao--clara .campo textarea { background: #fff; border-color: var(--borda); } /* Player da home (MKT 23/10): o da VSL do Dia do Treinador (treinador/dia-do-treinador.css) nas cores da CEBEES e sem a barra de progresso. Sem controles nativos: um