/* ═══════════════════════════════════════════════════════════════════════════ Página de curso — layout editorial (versão de testes) CSS próprio, fora do Tailwind: enquanto o desenho está em discussão, cada ajuste precisa ser "editar e publicar", sem recompilar o build. Tudo escopado em .cv2 — o resto do site continua com o CSS de sempre. Esta rodada: imagem cobrindo o hero inteiro, Montserrat em toda a página, dados do curso com peso de manchete, cartão de matrícula como elemento mais forte (coluna reservada, acompanha a rolagem) e grade curricular em grid, com a ementa à vista — sem numeração e sem sanfona. ═══════════════════════════════════════════════════════════════════════════ */ .cv2 { --ink: #08090d; --ink-2: #0d0f15; --ink-3: #12141c; --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .06); --gold: #e2b772; --gold-hi: #f6e0b4; --text: #eceef3; --muted: #9aa1af; --muted-2: #6f7683; --pad: clamp(18px, 3.2vw, 52px); --maxw: 1560px; --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--ink); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; } .cv2 ::selection { background: var(--gold); color: #0a0b0f; } .cv2 h1, .cv2 h2, .cv2 h3, .cv2 h4 { font-family: var(--font); font-weight: 700; letter-spacing: -.02em; margin: 0; } .cv2 .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* ── Tipografia ─────────────────────────────────────────────────────────── */ .cv2 .display { font-size: clamp(2.3rem, 4.1vw, 3.9rem); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; } .cv2 .h2 { font-size: clamp(1.7rem, 2.9vw, 2.6rem); line-height: 1.12; font-weight: 700; } .cv2 .eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .cv2 .lede { font-size: clamp(1rem, 1.18vw, 1.16rem); line-height: 1.62; color: #c4c9d4; } .cv2 .body { font-size: 1rem; line-height: 1.75; color: #aeb4c2; } .cv2 .body p + p { margin-top: 1.1em; } .cv2 .small { font-size: .82rem; color: var(--muted); } .cv2 .em { color: var(--gold-hi); font-style: italic; font-weight: 600; } /* ── Progresso de leitura ───────────────────────────────────────────────── */ .cv2-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); z-index: 60; transition: width .1s linear; } /* ═══ HERO — imagem cobrindo a faixa inteira ══════════════════════════════ */ .cv2 .hero { position: relative; isolation: isolate; } /* A imagem cobre apenas a primeira tela: antes ela esticava por trás de várias seções, aparecendo deformada e sem leitura. */ .cv2 .hero-bg { position: absolute; top: 0; left: 0; right: 0; height: min(100vh, 900px); z-index: -2; overflow: hidden; } .cv2 .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; } .cv2 .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,13,.88) 0%, rgba(8,9,13,.72) 34%, rgba(8,9,13,.28) 62%, rgba(8,9,13,.42) 100%), linear-gradient(180deg, rgba(8,9,13,.45) 0%, rgba(8,9,13,.06) 28%, rgba(8,9,13,.72) 80%, #08090d 100%); } .cv2 .crumbs { font-size: .78rem; color: var(--muted-2); padding-top: clamp(20px, 2.6vw, 34px); } .cv2 .crumbs a { color: var(--muted); text-decoration: none; } .cv2 .crumbs a:hover { color: #fff; } .cv2 .crumbs span { margin: 0 .5em; opacity: .4; } .cv2 .hero-text { padding: clamp(32px, 4.6vw, 70px) 0 clamp(40px, 5vw, 72px); } @media (min-width: 1060px) { .cv2 .hero-text { min-height: calc(100vh - 230px); display: flex; flex-direction: column; justify-content: center; } } .cv2 .hero-text h1 { max-width: 17ch; margin-bottom: clamp(16px, 1.8vw, 24px); } .cv2 .hero-text .lede { max-width: 50ch; } /* Dados do curso com peso de manchete */ .cv2 .keyfacts { display: grid; gap: 1px; margin-top: clamp(26px, 3vw, 40px); background: var(--line-2); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; } @media (min-width: 620px) { .cv2 .keyfacts { grid-template-columns: repeat(3, 1fr); } } .cv2 .keyfact { display: flex; align-items: center; gap: 14px; padding: clamp(16px, 1.7vw, 22px) clamp(16px, 1.8vw, 24px); background: rgba(10, 12, 17, .74); backdrop-filter: blur(6px); transition: background .35s ease; } .cv2 .keyfact:hover { background: rgba(18, 21, 29, .88); } .cv2 .keyfact svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; } .cv2 .keyfact b { display: block; font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 700; line-height: 1.1; } .cv2 .keyfact span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; } /* ═══ Coluna reservada para o cartão ══════════════════════════════════════ */ .cv2 .lead-grid { display: grid; gap: clamp(26px, 3vw, 52px); align-items: start; } @media (min-width: 1060px) { /* Duas colunas: hero e apresentação empilham à esquerda; o cartão ocupa a direita nas duas linhas, por isso desce junto com a leitura. */ .cv2 .lead-grid { grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 410px); } .cv2 .lead-hero { grid-column: 1; grid-row: 1; } .cv2 .lead-body { grid-column: 1; grid-row: 2; } .cv2 .lead-aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 88px; } } @media (max-width: 1059px) { /* No celular a ordem é a da decisão: título, cartão de inscrição e só depois a apresentação do curso. */ .cv2 .lead-hero { order: 1; } .cv2 .lead-aside { order: 2; } .cv2 .lead-body { order: 3; } .cv2 .lead-grid { display: flex; flex-direction: column; } } /* ── Cartão de matrículas ───────────────────────────────────────────────── */ .cv2 .enroll { border: 1px solid rgba(226, 183, 114, .34); border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, #171a23 0%, #0d1016 62%); box-shadow: 0 50px 110px -55px rgba(0,0,0,.95), 0 0 70px -34px rgba(226,183,114,.24); } .cv2 .enroll-top { padding: clamp(20px, 2.1vw, 28px); background: radial-gradient(120% 90% at 50% 0%, rgba(226,183,114,.17), transparent 62%); border-bottom: 1px solid var(--line-2); } .cv2 .enroll-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; } .cv2 .enroll-price b { font-size: clamp(1.7rem, 2.2vw, 2.15rem); font-weight: 800; letter-spacing: -.03em; } .cv2 .enroll-price span { font-size: .84rem; color: var(--muted); } .cv2 .specs { padding: clamp(6px, .8vw, 10px) clamp(20px, 2.1vw, 28px) clamp(16px, 1.8vw, 22px); margin: 0; } .cv2 .spec { display: flex; align-items: center; gap: 15px; padding: clamp(13px, 1.4vw, 17px) 0; border-bottom: 1px solid var(--line-2); } .cv2 .spec:last-of-type { border-bottom: 0; } .cv2 .spec-ico { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid rgba(226,183,114,.22); border-radius: 6px; background: rgba(226,183,114,.07); } .cv2 .spec-ico svg { width: 21px; height: 21px; color: var(--gold); } .cv2 .spec dt { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .cv2 .spec dd { margin: 3px 0 0; font-size: 1.14rem; font-weight: 700; line-height: 1.15; } .cv2 .spec dd small { display: block; font-size: .76rem; font-weight: 400; color: var(--muted); margin-top: 3px; } .cv2 .enroll-foot { padding: 0 clamp(20px, 2.1vw, 28px) clamp(20px, 2.1vw, 28px); } .cv2 .coord-mini { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; } .cv2 .coord-mini .faces { display: flex; flex-shrink: 0; } .cv2 .coord-mini .faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #141721; margin-left: -12px; } .cv2 .coord-mini .faces img:first-child { margin-left: 0; } .cv2 .coord-mini b { display: block; font-size: .86rem; font-weight: 600; } .cv2 .coord-mini span { font-size: .73rem; color: var(--muted-2); } /* ── Cartão em tela baixa (notebook) ──────────────────────────────────── O cartão é grudado no topo e cresce para baixo: numa tela de 1366×768 ele fica mais alto que a área visível e o fim some — a certificação some, e é justamente o argumento que fecha. Duas medidas, nesta ordem: abaixo de 900px de altura o cartão se aperta (menos respiro entre as linhas, ícones menores), e só se ainda assim não couber é que rola por dentro. O `top` também encolhe, para o cartão começar mais acima. */ @media (min-width: 1060px) { .cv2 .enroll { max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(226,183,114,.45) transparent; } .cv2 .enroll::-webkit-scrollbar { width: 6px; } .cv2 .enroll::-webkit-scrollbar-thumb { background: rgba(226,183,114,.4); border-radius: 3px; } .cv2 .enroll::-webkit-scrollbar-track { background: transparent; } } @media (min-width: 1060px) and (max-height: 900px) { .cv2 .lead-aside { top: 76px; } .cv2 .enroll { max-height: calc(100dvh - 92px); } .cv2 .enroll-top { padding: 20px 22px 18px; } .cv2 .enroll-top .eyebrow { font-size: .66rem; } .cv2 .specs { padding: 4px 22px 14px; } .cv2 .spec { padding: 10px 0; gap: 13px; } .cv2 .spec-ico { width: 38px; height: 38px; } .cv2 .spec-ico svg { width: 18px; height: 18px; } .cv2 .spec dd { font-size: 1.04rem; } .cv2 .spec dd small { font-size: .72rem; } .cv2 .enroll-foot { padding: 0 22px 18px; } .cv2 .coord-mini { padding-top: 13px; } } /* Telas ainda mais baixas (1280×720 com barras do navegador): o subtítulo do cartão e os detalhes de cada linha saem — o essencial é o botão e os quatro dados. */ @media (min-width: 1060px) and (max-height: 760px) { .cv2 .enroll-top .lede, .cv2 .spec dd small { display: none; } .cv2 .spec { padding: 9px 0; } } /* ── Botões ─────────────────────────────────────────────────────────────── */ .cv2 .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 26px; border: 0; border-radius: 4px; cursor: pointer; font: 700 .96rem/1 var(--font); color: #0a0b0f; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 16px 38px -16px rgba(226,183,114,.8); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, filter .25s ease; } .cv2 .btn:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -18px rgba(226,183,114,.95); filter: brightness(1.05); } .cv2 .btn:active { transform: translateY(0); } .cv2 .btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.7,.2,1); } .cv2 .btn:hover::after { left: 115%; } .cv2 .btn svg { width: 17px; height: 17px; } .cv2 .arrow-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); text-decoration: none; font-weight: 600; font-size: .9rem; } .cv2 .arrow-link svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); } .cv2 .arrow-link:hover svg { transform: translateX(5px); } /* ── Seções ─────────────────────────────────────────────────────────────── */ .cv2 .section { padding: clamp(52px, 6.4vw, 100px) 0; border-top: 1px solid var(--line-2); } .cv2 .section.no-rule { border-top: 0; } .cv2 .section-head { margin-bottom: clamp(28px, 3.4vw, 46px); } .cv2 .section-head .eyebrow { display: block; margin-bottom: 12px; } .cv2 .section-head h2 { max-width: 22ch; } .cv2 .section-head .lede { margin-top: 14px; max-width: 58ch; } .cv2 .split-cols { display: grid; gap: clamp(26px, 3.4vw, 60px); } @media (min-width: 1000px) { .cv2 .split-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } } .cv2 .split-cols .section-head { margin-bottom: 0; } /* Pilares */ .cv2 .pillars { display: grid; gap: 1px; background: var(--line-2); margin-top: clamp(32px, 3.4vw, 48px); } @media (min-width: 720px) { .cv2 .pillars { grid-template-columns: 1fr 1fr; } } @media (min-width: 1160px) { .cv2 .pillars { grid-template-columns: repeat(4, 1fr); } } .cv2 .pillar { background: var(--ink); padding: clamp(20px, 2.2vw, 30px); transition: background .35s ease; } .cv2 .pillar:hover { background: var(--ink-2); } .cv2 .pillar i { display: block; width: 22px; height: 22px; color: var(--gold); margin-bottom: 16px; } .cv2 .pillar h3 { font-size: .96rem; font-weight: 600; margin-bottom: 7px; } .cv2 .pillar p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); } /* ═══ Grade curricular em grid ════════════════════════════════════════════ */ /* Colunas em vez de grade rígida: as ementas variam muito de tamanho, e numa grade todos os cartões de uma linha esticam até o mais alto, deixando buraco embaixo dos curtos. Em fluxo de colunas cada cartão tem a própria altura. */ /* ── Grade curricular ─────────────────────────────────────────────────── No computador, as disciplinas ficam numa lista à esquerda e o conteúdo da escolhida abre no painel da direita: a pessoa varre os nomes de uma vez, em vez de percorrer uma parede de cartões. No celular não há espaço para duas colunas, então cada item vira uma sanfona. Sem JS o painel fica vazio e nenhum conteúdo se perde: os corpos continuam dentro dos itens, abertos na sequência. O JS é que os move para o painel — move, não copia, para o texto existir uma vez só na página. */ .cv2 .grade { display: grid; gap: clamp(14px, 1.6vw, 22px); align-items: start; } .cv2 .grade-lista { display: grid; gap: 10px; } .cv2 .grade-painel { display: none; } .cv2 .mod { border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.005)); transition: border-color .35s ease, background .35s ease; } .cv2 .mod-slim { padding: clamp(20px, 2vw, 28px); } .cv2 .mod:hover { border-color: rgba(226,183,114,.32); } /* O cabeçalho é um botão de verdade: teclado e leitor de tela ganham de graça. */ .cv2 .mod-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: clamp(15px, 1.5vw, 19px) clamp(16px, 1.7vw, 22px); background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font-family: var(--font); } .cv2 .mod-slim .mod-top { padding: 0; cursor: default; } .cv2 .mod-nome { flex: 1 1 auto; min-width: 0; } .cv2 .mod h3 { font-size: 1.01rem; font-weight: 700; line-height: 1.32; margin: 0; } /* `margin-left: auto` empurra a etiqueta para a borda mesmo quando o nome é curto: a coluna de cargas fica alinhada de cima a baixo da lista. */ .cv2 .mod-h { flex-shrink: 0; margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--gold); border: 1px solid rgba(226,183,114,.28); border-radius: 4px; padding: 4px 8px; } .cv2 .mod-chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted-2); transition: transform .45s cubic-bezier(.2,.8,.25,1), color .3s ease; } .cv2 .mod.is-open > .mod-top .mod-chev { transform: rotate(180deg); color: var(--gold); } .cv2 .mod-top:hover .mod-chev { color: var(--gold); } .cv2 .mod-top:focus-visible { outline: 2px solid rgba(226,183,114,.55); outline-offset: -2px; border-radius: 6px; } /* Altura animada nos dois sentidos; o JS mede e devolve para `auto` no fim. */ .cv2 .mod-corpo { overflow: hidden; } .cv2-anim .mod-corpo { transition: height .42s cubic-bezier(.2,.8,.25,1); } .cv2 .mod-corpo-in { padding: 0 clamp(16px, 1.7vw, 22px) clamp(18px, 1.8vw, 24px); } .cv2 .mod-rotulo { margin: 0 0 12px; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); } .cv2 .mod .topics { margin: 0; padding: 0; list-style: none; } .cv2 .mod .topics li { position: relative; padding-left: 15px; margin-bottom: 8px; font-size: .86rem; line-height: 1.55; color: var(--muted); } .cv2 .mod .topics li::before { content: ''; position: absolute; left: 0; top: .58em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .7; } .cv2 .mod .ementa { font-size: .87rem; line-height: 1.66; color: var(--muted); } .cv2 .mod-vazio { margin: 0; font-size: .85rem; color: var(--muted-2); font-style: italic; } /* Os tópicos entram em cascata quando o item abre. */ .cv2-anim .mod .topics li { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.25,1); } .cv2-anim .mod.is-open .topics li { opacity: 1; transform: none; } /* ── Computador: lista à esquerda, conteúdo à direita ──────────────────── */ @media (min-width: 1024px) { .cv2 .grade.is-preview { grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); gap: clamp(20px, 2.2vw, 34px); } .cv2 .grade.is-preview .grade-painel { display: block; position: sticky; top: 96px; } /* Na lista o corpo não aparece: ele está no painel. */ .cv2 .grade.is-preview .grade-lista .mod-corpo { display: none; } .cv2 .grade.is-preview .mod-chev { display: none; } .cv2 .grade.is-preview .mod { transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); } .cv2 .grade.is-preview .mod:hover { transform: translateX(3px); } /* O item escolhido fica marcado por um fio dourado à esquerda. */ .cv2 .grade.is-preview .mod.is-ativo { border-color: rgba(226,183,114,.45); background: linear-gradient(90deg, rgba(226,183,114,.1), rgba(226,183,114,.02)); box-shadow: inset 3px 0 0 var(--gold); } .cv2 .grade.is-preview .mod.is-ativo h3 { color: #f3f5f9; } .cv2 .grade.is-preview .mod.is-ativo:hover { transform: none; } /* Disciplina com ementa longa deixava o painel mais alto que a tela: ele passava do fim da janela e o começo saía por cima ao rolar. Limitado à altura visível, com rolagem própria — o painel nunca some de vista. */ .cv2 .grade-painel-in { border: 1px solid var(--line-2); border-radius: 7px; padding: clamp(24px, 2.4vw, 34px); background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006)); min-height: 280px; max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(226,183,114,.4) transparent; } .cv2 .grade-painel-in::-webkit-scrollbar { width: 6px; } .cv2 .grade-painel-in::-webkit-scrollbar-thumb { background: rgba(226,183,114,.35); border-radius: 3px; } .cv2 .grade-painel-in::-webkit-scrollbar-track { background: transparent; } .cv2 .grade-painel .mod-corpo { display: block; height: auto !important; } .cv2 .grade-painel .mod-corpo-in { padding: 0; } .cv2 .grade-painel .mod-rotulo { color: var(--gold); } .cv2 .grade-painel .topics { columns: 2; column-gap: clamp(20px, 2vw, 34px); } .cv2 .grade-painel .topics li { break-inside: avoid; } .cv2 .grade-painel .mod-titulo { font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 6px; } .cv2 .grade-painel .mod-carga { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--gold); border: 1px solid rgba(226,183,114,.28); border-radius: 4px; padding: 4px 8px; margin-bottom: 20px; } /* Troca de disciplina: o conteúdo antigo sai, o novo entra de baixo. */ .cv2 .grade-painel-in { transition: opacity .22s ease; } .cv2 .grade-painel.is-trocando .grade-painel-in { opacity: 0; } .cv2-anim .grade-painel .topics li { opacity: 1; transform: none; } .cv2 .grade-painel.is-entrando .grade-painel-in > * { animation: modEntra .45s cubic-bezier(.2,.8,.25,1) both; } @keyframes modEntra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } } /* ── Professores ────────────────────────────────────────────────────────── */ .cv2 .faculty { display: grid; gap: clamp(28px, 3vw, 46px); } @media (min-width: 760px) { .cv2 .faculty { grid-template-columns: 1fr 1fr; } } @media (min-width: 1240px) { .cv2 .faculty { grid-template-columns: repeat(3, 1fr); } } .cv2 .person { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 1.7vw, 22px); align-items: start; } .cv2 .person-photo { width: clamp(108px, 9vw, 144px); aspect-ratio: 1; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: var(--ink-3); } /* As fotos ficam em cor nos dois temas. O preto e branco dava unidade à página, mas apagava as pessoas — e é delas que a página fala. */ .cv2 .person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .cv2 .person:hover .person-photo img { transform: scale(1.04); } .cv2 .person-photo.is-empty { display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: var(--muted-2); } .cv2 .person-role { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .cv2 .person h3 { font-size: 1.02rem; font-weight: 700; margin: 8px 0; line-height: 1.3; } .cv2 .person p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--muted); } .cv2 .person .bio-more { color: var(--gold); cursor: pointer; font-size: .8rem; font-weight: 600; background: none; border: 0; padding: 5px 0 0; font-family: var(--font); } .cv2 .coord { display: grid; gap: clamp(26px, 3vw, 44px); margin-bottom: clamp(40px, 4.6vw, 66px); } @media (min-width: 900px) { .cv2 .coord { grid-template-columns: 1fr 1fr; } } .cv2 .coord .person-photo { width: clamp(136px, 11vw, 178px); } .cv2 .coord .person h3 { font-size: 1.2rem; } /* ── Dúvidas ────────────────────────────────────────────────────────────── */ .cv2 .faq { border-top: 1px solid var(--line-2); max-width: 92ch; } .cv2 .faq-item { border-bottom: 1px solid var(--line-2); } .cv2 .faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: clamp(18px, 2vw, 26px) 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: 600 1rem/1.45 var(--font); transition: color .25s ease; } .cv2 .faq-q:hover { color: var(--gold); } .cv2 .faq-x { position: relative; width: 15px; height: 15px; flex-shrink: 0; margin-top: 5px; transition: transform .4s cubic-bezier(.2,.7,.2,1); } .cv2 .faq-x::before, .cv2 .faq-x::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--muted); } .cv2 .faq-x::after { transform: rotate(90deg); } .cv2 .faq-item.is-open .faq-x { transform: rotate(45deg); } .cv2 .faq-a { overflow: hidden; height: 0; transition: height .45s cubic-bezier(.2,.7,.2,1); } .cv2 .faq-a-inner { padding-bottom: clamp(18px, 2vw, 26px); max-width: 74ch; color: var(--muted); font-size: .93rem; line-height: 1.72; } /* ── Fechamento ─────────────────────────────────────────────────────────── */ .cv2 .closing { position: relative; overflow: hidden; border-top: 1px solid var(--line-2); } .cv2 .closing-inner { padding: clamp(62px, 7.6vw, 122px) 0; text-align: center; } .cv2 .closing h2 { margin: 0 auto 20px; max-width: 20ch; } .cv2 .closing .lede { margin: 0 auto; max-width: 52ch; } .cv2 .closing .btn { width: auto; min-width: 290px; margin-top: 34px; } .cv2 .closing::before { content: ''; position: absolute; left: 50%; top: 0; width: 900px; height: 400px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(226,183,114,.13), transparent 70%); pointer-events: none; } /* ── Barra fixa (celular) ───────────────────────────────────────────────── */ .cv2-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(10,11,15,.95); backdrop-filter: blur(16px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .4s cubic-bezier(.2,.7,.2,1); font-family: var(--font); } .cv2-dock.is-on { transform: translateY(0); } .cv2-dock .dock-info { flex: 1; min-width: 0; } .cv2-dock .dock-info b { display: block; font-size: .8rem; font-weight: 700; } .cv2-dock .dock-info span { font-size: .72rem; color: var(--muted); } .cv2-dock .btn { width: auto; padding: 14px 22px; } @media (min-width: 1060px) { .cv2-dock { display: none; } } /* ── Entrada dos elementos ──────────────────────────────────────────────── */ .cv2.cv2-anim [data-rise] { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .cv2.cv2-anim [data-rise].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cv2 [data-rise], .cv2.cv2-anim [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; } .cv2 .hero-bg img { transform: none !important; } } /* Tópicos que sobraram do corte */ .cv2 .mod .more { margin-top: 10px; font-size: .78rem; font-weight: 600; color: var(--muted-2); } /* ── Símbolo da marca como fundo ───────────────────────────────────────── O ícone da logo (vetorizado do favicon) entra bem discreto onde a seção ficaria com muito espaço vazio. Decorativo: fica atrás de tudo e não recebe clique. */ .cv2 .has-mark { position: relative; overflow: hidden; } .cv2 .mark-bg { position: absolute; pointer-events: none; z-index: 0; color: rgba(226, 183, 114, .13); width: clamp(280px, 38vw, 620px); max-height: 84%; aspect-ratio: 509 / 428; right: -4%; top: 50%; transform: translateY(-50%); } .cv2 .mark-bg svg { width: 100%; height: 100%; display: block; } .cv2 .has-mark > *:not(.mark-bg) { position: relative; z-index: 1; } /* No fechamento a seção é mais baixa que a largura do símbolo: mandar pela largura fazia a figura estourar e ser cortada em cima. Aqui a altura manda, e a proporção do desenho define a largura. */ .cv2 .closing .mark-bg { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); height: min(74%, 380px); width: auto; aspect-ratio: 509 / 428; color: rgba(226,183,114,.10); } /* ── Grade sem ementa cadastrada ───────────────────────────────────────── Alguns cursos só têm o nome das disciplinas. Em vez de cartões altos e vazios, uma lista compacta em colunas. */ .cv2 .list-modules { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; } @media (min-width: 720px) { .cv2 .list-modules { grid-template-columns: 1fr 1fr; } } @media (min-width: 1240px) { .cv2 .list-modules { grid-template-columns: repeat(3, 1fr); } } .cv2 .mod-slim { background: var(--ink); border: 0; border-radius: 0; margin: 0; padding: clamp(16px, 1.7vw, 22px) clamp(18px, 1.9vw, 24px); transition: background .3s ease; } .cv2 .mod-slim:hover { background: var(--ink-2); transform: none; } .cv2 .mod-slim .mod-top { margin-bottom: 0; align-items: center; } .cv2 .mod-slim h3 { font-size: .95rem; font-weight: 600; } /* Quem pediu menos animação no sistema recebe os tópicos parados. */ @media (prefers-reduced-motion: reduce) { .cv2 .mod .topics li { opacity: 1 !important; transform: none !important; transition: none !important; } .cv2 .mod-corpo, .cv2 .mod-chev { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ MODO CLARO O site inteiro tem tema claro (html.light-mode), mas esta página nascia só no escuro: o topo e o rodapé trocavam de cor e o miolo continuava preto. Aqui a paleta inteira é redefinida — as variáveis resolvem quase tudo, e o que estava escrito com cor fixa (gradientes sobre a foto, cartões, barra do celular) ganha versão própria. O dourado da marca fica bonito sobre preto, mas some sobre branco: nos textos ele escurece para um tom de bronze, que mantém a identidade e passa no contraste. Em fundo cheio (botões) o dourado original continua. ═══════════════════════════════════════════════════════════════════════════ */ .light-mode .cv2 { --ink: #f6f7f9; --ink-2: #ffffff; --ink-3: #eceef2; --line: rgba(15, 23, 42, .14); --line-2: rgba(15, 23, 42, .09); --gold: #8a6a33; /* bronze: dourado legível sobre claro */ --gold-hi: #6f5426; --text: #0f172a; --muted: #4a5568; --muted-2: #6b7280; } /* Foto do hero: o véu que escurecia para o texto branco passa a clarear */ .light-mode .cv2 .hero-bg::after { background: linear-gradient(90deg, rgba(246,247,249,.94) 0%, rgba(246,247,249,.84) 34%, rgba(246,247,249,.42) 62%, rgba(246,247,249,.55) 100%), linear-gradient(180deg, rgba(246,247,249,.42) 0%, rgba(246,247,249,.1) 28%, rgba(246,247,249,.8) 80%, #f6f7f9 100%); } .light-mode .cv2 .keyfact { background: rgba(255, 255, 255, .82); } .light-mode .cv2 .keyfact:hover { background: #fff; } /* Cartão de matrículas: continua sendo a peça de maior peso, agora em claro */ .light-mode .cv2 .enroll { background: linear-gradient(180deg, #ffffff 0%, #f3f4f7 100%); border-color: rgba(138, 106, 51, .34); box-shadow: 0 40px 90px -50px rgba(15, 23, 42, .45), 0 0 60px -34px rgba(226, 183, 114, .5); } .light-mode .cv2 .enroll-top { background: radial-gradient(120% 90% at 50% 0%, rgba(226, 183, 114, .22), transparent 62%); } .light-mode .cv2 .spec-ico { background: rgba(226, 183, 114, .14); border-color: rgba(138, 106, 51, .26); } .light-mode .cv2 .coord-mini .faces img { border-color: #fff; } /* Botões: fundo dourado cheio, texto escuro — igual nos dois temas */ .light-mode .cv2 .btn { background: linear-gradient(180deg, #f2d49c, #dcae63); color: #14110a; box-shadow: 0 16px 34px -18px rgba(138, 106, 51, .7); } .light-mode .cv2 .btn:hover { box-shadow: 0 22px 44px -18px rgba(138, 106, 51, .85); } /* Cartões da grade e listas */ .light-mode .cv2 .mod { background: linear-gradient(180deg, #ffffff, #fbfbfd); border-color: rgba(15, 23, 42, .1); } .light-mode .cv2 .mod:hover { background: linear-gradient(180deg, #fffaf0, #ffffff); border-color: rgba(138, 106, 51, .32); } .light-mode .cv2 .mod-slim { background: #fff; } .light-mode .cv2 .mod-slim:hover { background: #f7f8fa; } /* Grade no tema claro: o item escolhido troca o fio dourado por bronze, que é o tom que passa no contraste sobre branco. */ .light-mode .cv2 .grade.is-preview .mod.is-ativo { border-color: rgba(138,106,51,.4); background: linear-gradient(90deg, rgba(226,183,114,.18), rgba(255,255,255,.4)); box-shadow: inset 3px 0 0 #8a6a33; } .light-mode .cv2 .grade.is-preview .mod.is-ativo h3 { color: #10131a; } .light-mode .cv2 .grade-painel-in { background: #fff; border-color: rgba(15,23,42,.1); } .light-mode .cv2 .grade-painel .mod-rotulo, .light-mode .cv2 .grade-painel .mod-carga { color: #8a6a33; } .light-mode .cv2 .grade-painel .mod-carga { border-color: rgba(138,106,51,.3); } .light-mode .cv2 .mod-chev { color: #64748b; } .light-mode .cv2 .mod.is-open > .mod-top .mod-chev, .light-mode .cv2 .mod-top:hover .mod-chev { color: #8a6a33; } .light-mode .cv2 .list-modules { background: rgba(15, 23, 42, .09); border-color: rgba(15, 23, 42, .1); } .light-mode .cv2 .pillar { background: var(--ink); } .light-mode .cv2 .pillar:hover { background: #fff; } .light-mode .cv2 .pillars { background: rgba(15, 23, 42, .09); } /* Fotos dos professores voltam a cor mais cedo: preto e branco sobre fundo claro achata demais o rosto */ .light-mode .cv2 .person:hover .person-photo img { filter: none; } /* Fechamento e barra do celular */ .light-mode .cv2 .closing::before { background: radial-gradient(50% 60% at 50% 0%, rgba(226, 183, 114, .28), transparent 70%); } .light-mode .cv2-dock { background: rgba(255, 255, 255, .96); border-top-color: rgba(15, 23, 42, .12); } .light-mode .cv2-dock .dock-info b { color: #0f172a; } /* Símbolo da marca ao fundo */ .light-mode .cv2 .mark-bg { color: rgba(138, 106, 51, .09); } .light-mode .cv2 .closing .mark-bg { color: rgba(138, 106, 51, .07); } /* Seleção de texto */ .light-mode .cv2 ::selection { background: #e2b772; color: #14110a; } /* ── Vídeo de apresentação ────────────────────────────────────────────── A capa fica no lugar do player até alguém pedir para ver: um iframe do YouTube em toda visita pesa na página e entrega dado do visitante sem necessidade. */ .cv2 .video-frame { position: relative; margin: 0; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 9; background: var(--ink-3); cursor: pointer; border: 1px solid var(--line-2); } .cv2 .video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; filter: brightness(.62); } .cv2 .video-frame:hover img { transform: scale(1.035); filter: brightness(.72); } .cv2 .video-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .cv2 .video-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; display: grid; place-items: center; cursor: pointer; border: 0; border-radius: 50%; color: #0a0b0f; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 20px 50px -18px rgba(226,183,114,.85); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .cv2 .video-play svg { width: 34px; height: 34px; margin-left: 4px; } .cv2 .video-frame:hover .video-play { transform: scale(1.07); box-shadow: 0 26px 60px -18px rgba(226,183,114,1); } /* Anel que pulsa, discreto, só para o play não parecer estático */ .cv2 .video-play::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(226,183,114,.5); animation: cv2Pulse 2.6s ease-out infinite; } @keyframes cv2Pulse { 0% { transform: scale(.9); opacity: .8 } 70% { transform: scale(1.25); opacity: 0 } 100% { opacity: 0 } } /* ── Material do curso ──────────────────────────────────────────────────── */ .cv2 .material { display: grid; gap: clamp(20px, 2.6vw, 38px); align-items: center; padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(226,183,114,.24); border-radius: 10px; background: linear-gradient(120deg, rgba(226,183,114,.07), rgba(255,255,255,.012) 55%); } @media (min-width: 900px) { .cv2 .material { grid-template-columns: auto minmax(0,1fr) auto; } } .cv2 .material-ico { display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; color: var(--gold); border: 1px solid rgba(226,183,114,.28); background: rgba(226,183,114,.08); } .cv2 .material-ico svg { width: 30px; height: 30px; } .cv2 .material-cta .btn { width: auto; min-width: 250px; } .light-mode .cv2 .material { background: linear-gradient(120deg, rgba(226,183,114,.16), rgba(255,255,255,.5) 55%); border-color: rgba(138,106,51,.28); } .light-mode .cv2 .material-ico { background: rgba(226,183,114,.16); border-color: rgba(138,106,51,.25); } .light-mode .cv2 .video-frame { border-color: rgba(15,23,42,.1); } /* Texto corrido no tema claro: .lede e .body tinham cor fixa, herdada do desenho escuro, e sobre fundo claro ficavam ilegíveis — no hero, onde ainda passa a foto por trás, praticamente sumiam. */ .light-mode .cv2 .lede { color: #3d4759; } .light-mode .cv2 .body { color: #434e63; } .light-mode .cv2 .hero-text .lede { color: #2f3949; font-weight: 500; } .light-mode .cv2 .crumbs a { color: #475569; } .light-mode .cv2 .crumbs a:hover { color: #0f172a; } .light-mode .cv2 .enroll-price span, .light-mode .cv2 .spec dd small { color: #55607a; } /* O rodapé do site tem margem superior de 96px, pensada para páginas de fundo transparente. Nesta, que tem fundo próprio, ela vira uma faixa vazia. */ .page-course-v2 footer { margin-top: 0; } /* ═══════════════════════════════════════════════════════════════════════════ MODAL "BAIXAR PROJETO DO CURSO" Duas metades: a arte do curso à esquerda, o formulário à direita. Enquanto os dados não estiverem completos, a arte fica embaçada e o cadeado fechado; ao completar, o cadeado abre, o embaçado sai e o botão acende. É um contrato visual — o conteúdo está ali, a um passo. ═══════════════════════════════════════════════════════════════════════════ */ .dlm { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 18px; font-family: 'Montserrat', Inter, system-ui, sans-serif; } .dlm.hidden { display: none; } .dlm-veu { position: absolute; inset: 0; background: rgba(6, 7, 10, .72); backdrop-filter: blur(6px); } .dlm-caixa { position: relative; display: grid; width: 100%; max-width: 940px; max-height: calc(100dvh - 36px); overflow: auto; border-radius: 18px; background: #0f1218; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 50px 120px -40px rgba(0,0,0,.95); animation: dlmEntra .42s cubic-bezier(.2,.8,.25,1) both; } @media (min-width: 860px) { .dlm-caixa { grid-template-columns: 1fr 1.08fr; max-height: min(88dvh, 720px); } } @keyframes dlmEntra { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } } .dlm-x { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.08); color: #cbd2de; transition: background .25s ease, color .25s ease, transform .25s ease; } .dlm-x svg { width: 16px; height: 16px; } .dlm-x:hover { background: rgba(255,255,255,.16); color: #fff; transform: rotate(90deg); } /* ── Arte com cadeado ───────────────────────────────────────────────────── */ .dlm-arte { position: relative; margin: 0; overflow: hidden; min-height: 230px; background: #12141c; } @media (max-width: 859px) { .dlm-arte { min-height: 190px; } } .dlm-arte img { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(9px) saturate(.85) brightness(.55); transform: scale(1.1); transition: filter .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .dlm-arte-veu { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(8,9,13,.55), rgba(8,9,13,.8)); transition: opacity .9s ease; } .dlm.is-livre .dlm-arte img { filter: none; transform: scale(1.02); } .dlm.is-livre .dlm-arte-veu { opacity: .35; } .dlm-cadeado { position: absolute; inset: 0; margin: auto; width: 116px; height: 116px; display: grid; place-items: center; color: var(--gold, #e2b772); border-radius: 50%; background: radial-gradient(circle, rgba(226,183,114,.2), rgba(226,183,114,.05) 65%, transparent 72%); transition: transform .6s cubic-bezier(.2,.8,.25,1), opacity .5s ease; } .dlm-cadeado .dlm-lock { width: 60px; height: 70px; overflow: visible; } .dlm-cadeado-anel { position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(226,183,114,.45); animation: dlmPulso 2.8s ease-out infinite; } @keyframes dlmPulso { 0% { transform: scale(.94); opacity: .75 } 70% { transform: scale(1.14); opacity: 0 } 100% { opacity: 0 } } /* O gesto de destravar: o arco gira em torno do pino da direita — a dobradiça real do objeto — e a perna da esquerda sobe para fora do corpo. `transform-box: view-box` é o que faz o transform-origin em coordenadas do desenho valer igual em todos os navegadores; sem ele o pivô vai para a caixa do próprio traço e o arco sai voando para o lado. */ .dlm-arco { transform-box: view-box; transform-origin: 44px 32px; transition: transform .75s cubic-bezier(.34,1.32,.5,1); } .dlm.is-livre .dlm-arco { transform: rotate(32deg); } /* O miolo recua junto, como se a lingueta tivesse soltado. */ .dlm-miolo { transform-box: view-box; transform-origin: 32px 45px; transition: transform .5s ease .1s, opacity .5s ease; } .dlm.is-livre .dlm-miolo { transform: scale(.7); opacity: .5; } .dlm.is-livre .dlm-cadeado { transform: scale(.86) translateY(-4px); opacity: .9; } .dlm.is-livre .dlm-cadeado-anel { animation: none; opacity: 0; } .dlm-selo { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(226,183,114,.3); background: rgba(12,14,20,.72); backdrop-filter: blur(8px); color: #e9ecf3; } .dlm-selo svg { width: 20px; height: 20px; color: var(--gold, #e2b772); flex-shrink: 0; } .dlm-selo b { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .dlm-selo span { font-size: .72rem; color: #9aa1af; line-height: 1.5; } /* ── Formulário ─────────────────────────────────────────────────────────── */ .dlm-form { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; justify-content: center; } .dlm-risco { display: block; width: 58px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f6e0b4, #e2b772); margin-bottom: 20px; } .dlm-form h3 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -.025em; color: #f2f4f8; line-height: 1.1; } .dlm-sub { margin: 12px 0 24px; font-size: .95rem; line-height: 1.6; color: #9aa1af; } .dlm-campo, .dlm-fone { margin-bottom: 12px; } .dlm-campo { display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } .dlm-campo svg { width: 19px; height: 19px; color: #7b8494; flex-shrink: 0; transition: color .25s ease; } .dlm-campo input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 15px 0; font: 400 .95rem/1.2 inherit; color: #eef0f5; } .dlm-campo input::placeholder { color: #8b93a3; } .dlm-campo:focus-within { border-color: rgba(226,183,114,.55); background: rgba(226,183,114,.05); box-shadow: 0 0 0 3px rgba(226,183,114,.12); } .dlm-campo:focus-within svg { color: var(--gold, #e2b772); } .dlm-campo.is-ok { border-color: rgba(52,211,153,.35); } /* Telefone: país + um único campo, visualmente. Os inputs reais continuam no formulário, escondidos, e são preenchidos pelo JS. */ /* Sem JS, o trio original continua em pé com sua própria grade de três colunas. `is-unificado` só entra quando o campo único foi criado — o que depende do JS é o que o JS mesmo liga. */ .dlm-fone { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; } .dlm-fone.is-unificado { grid-template-columns: auto minmax(0,1fr); } .dlm-fone.is-unificado .ph-trio { display: contents; } .dlm-inp { padding: 15px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); color: #eef0f5; font: 400 .95rem/1.2 inherit; outline: none; } .dlm-inp:focus { border-color: rgba(226,183,114,.55); } /* O país é um