/* ============================================================================ YOU2WORLD — site público ---------------------------------------------------------------------------- CSS em arquivo próprio (antes vivia inline num index.html de 315 linhas ilegíveis). O Cloudflare Pages serve estático igual; a diferença é poder manter isso daqui a seis meses. Os tokens são os MESMOS do portal (private-essence-astro/src/styles/global.css), com a mesma nomenclatura, para os dois projetos falarem a mesma língua. ========================================================================== */ :root { /* ===== Paleta YOU2WORLD (direção 3b do pacote de design) ===== A regra: nenhuma cor faz dois trabalhos. Ciano é movimento, âmbar é mérito e prazo, navy é estrutura. Vermelho só para erro. O sufixo diz o PAPEL — é o que impede usar cor de preenchimento para escrever: -fill preenche. NÃO escreve sobre fundo claro. -text escreve sobre fundo claro. -on-navy escreve sobre navy/escuro. */ --pe-navy: #082B4D; /* estrutura, texto, comando 14,35:1 no branco */ --pe-navy-soft: #0C3A63; /* superfície navy, painéis */ --pe-cyan-fill: #12B8C8; /* movimento — preenche 2,41:1 (gráfico) */ --pe-cyan-text: #096871; /* ciano que escreve sobre claro 6,50:1 */ --pe-cyan-on-navy: #4FD3E0; /* ciano que escreve sobre navy 8,02:1 */ --pe-amber-fill: #E9A13B; /* mérito, prazo — preenche 2,18:1 (gráfico) */ --pe-amber-text: #7A5210; /* âmbar que escreve sobre claro 6,90:1 */ --pe-amber-on-navy: #E9A13B; /* âmbar que escreve sobre navy 6,58:1 */ --pe-paper: #F5F4F1; /* fundo */ --pe-label: #5C6B80; /* texto secundário 5,43:1 */ --pe-ok: #2e7d32; --pe-alerta: #c0392b; --superficie: #FFFFFF; --texto: #082B4D; --texto-suave: #3d4a5c; --fio: rgba(8, 43, 77, 0.10); --fio-forte: rgba(8, 43, 77, 0.16); /* Tipografia YOU2WORLD (pacote de design) — MESMOS nomes do portal. Outfit herda a geometria do logo; IBM Plex Sans ganha nos 13-15px pela altura-x maior e traz numeral tabular. Servidas pelo proprio dominio: ver assets/fonts. */ --pe-font-display: 'Outfit', system-ui, sans-serif; --pe-font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-display: var(--pe-font-display); --font-body: var(--pe-font-body); --raio-sm: 6px; --raio-md: 12px; --raio-lg: 20px; --raio-pill: 100px; --sombra-sm: 0 2px 8px rgba(8, 43, 77, 0.06); --sombra-md: 0 6px 24px rgba(8, 43, 77, 0.10); --transicao: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --largura: 1100px; } /* Tema escuro: os papéis se invertem conforme o fundo — é o coração do mecanismo. Quem escreve no escuro é o tom que no claro só preenchia. */ [data-theme="dark"] { --pe-amber-text: #f0b84a; --pe-cyan-text: #3FB6C1; --pe-paper: #0b1220; --superficie: #16263f; --texto: #e8ecf2; --texto-suave: #b8c4d6; --pe-label: #b8c4d6; --fio: rgba(200, 215, 240, 0.12); --fio-forte: rgba(200, 215, 240, 0.20); --pe-ok: #6fd6a0; --pe-alerta: #ef8a7c; } /* ===== base ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); color: var(--texto); background: var(--pe-paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* A textura do Private Essence, mantida de propósito: conversa com o trecho tracejado do logo novo. No papel vai cover/center bottom, como o pacote pede. */ body::before { content: ''; position: fixed; inset: 0; background: url('../img/textura.png') center bottom / cover no-repeat; opacity: 0.5; pointer-events: none; z-index: 0; } [data-theme="dark"] body::before { opacity: 0.06; } img { max-width: 100%; display: block; } a { color: inherit; } .container { max-width: var(--largura); margin: 0 auto; padding: 0 1.5rem; } .secao { position: relative; z-index: 1; padding: 4.5rem 0; } .secao + .secao { border-top: 1px solid var(--fio); } .eyebrow { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--pe-amber-text); } .titulo-secao { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 600; line-height: 1.2; color: var(--texto); letter-spacing: -0.01em; } .texto-apoio { color: var(--texto-suave); font-size: 0.95rem; max-width: 62ch; } /* Texto longo e texto curto: os dois foram escritos, um para cada largura. Alternam por display:none, que esconde do leitor de tela junto — assim nunca há leitura dupla. O breakpoint é o mesmo do resto do mobile (720px), não um número novo. */ .so-estreito { display: none; } /* ===== botões ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 0.9rem 1.8rem; border-radius: var(--raio-sm); border: 1px solid transparent; cursor: pointer; transition: var(--transicao); } /* Sobre navy escreve o branco; sobre âmbar escreve o NAVY (branco sobre âmbar dá 2,18 no claro e 1,80 no escuro — a regra da paleta). */ .btn-primario { background: var(--pe-navy); color: #fff; } .btn-primario:hover { background: var(--pe-navy-soft); } .btn-secundario { background: transparent; color: var(--texto); border-color: var(--fio-forte); } .btn-secundario:hover { border-color: var(--pe-navy); } [data-theme="dark"] .btn-primario { background: var(--pe-cyan-fill); color: var(--pe-navy); } [data-theme="dark"] .btn-primario:hover { background: var(--pe-cyan-on-navy); } /* ===== cabeçalho ===== */ .cabecalho { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--pe-paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--fio); } .cabecalho-inner { max-width: var(--largura); margin: 0 auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* O lockup é 4,65:1 e JÁ CONTÉM o nome — por isso não há texto ao lado dele. A largura manda e a altura é consequência: com height fixo + max-width o navegador esmaga a marca (o login do portal provou isso). */ .marca img { width: 168px; max-width: 100%; height: auto; } /* A marca nao encolhe: sem isto o flex a espremia para 83px a 320px, porque o "Portal do Aluno" ao lado pedia espaco. Quem cede e o link, nao o logo. */ .marca { flex-shrink: 0; } /* ===== o minimo de 130px do lockup ===== A fundacao da marca diz que abaixo de 130px o pontilhado do traco fecha e vira mancha. Numa fatia anterior reduzi o lockup para 124px resolvendo o aperto do header a 320px — pela via errada. O pacote manda TROCAR pela marca grafica, nao encolher. */ /* !important pela mesma razao do portal: a regra generica de tema ([data-theme="dark"] .y2w-escuro { display: block }) vive mais abaixo e tem especificidade maior. Sem isso o aviao reaparece no tema escuro fora do media query, em tamanho natural, embaixo do wordmark. */ .pe-marca-min { display: none !important; } /* No rodape o lockup tem largura de sobra — a marca grafica so serve ao cabecalho. */ .rodape .pe-marca-min { display: none !important; } @media (max-width: 480px) { .cabecalho .marca .pe-lockup { display: none !important; } .cabecalho .marca .pe-marca-min { width: 34px; height: 34px; } .cabecalho .marca .y2w-claro.pe-marca-min { display: block !important; } .cabecalho .marca .y2w-escuro.pe-marca-min { display: none !important; } [data-theme="dark"] .cabecalho .marca .y2w-claro.pe-marca-min { display: none !important; } [data-theme="dark"] .cabecalho .marca .y2w-escuro.pe-marca-min { display: block !important; } /* O link cabe inteiro de novo: a marca grafica ocupa 34px no lugar dos 124px. */ .link-portal { font-size: 0.74rem; padding: 0.45rem 0.7rem; } .link-portal .completo { display: inline; } } .y2w-escuro { display: none; } [data-theme="dark"] .y2w-claro { display: none; } [data-theme="dark"] .y2w-escuro { display: block; } .cabecalho-acoes { display: flex; align-items: center; gap: 0.5rem; } .link-portal { font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--pe-cyan-text); padding: 0.5rem 0.9rem; border-radius: var(--raio-sm); white-space: nowrap; } .link-portal:hover { background: color-mix(in srgb, var(--pe-cyan-fill) 12%, transparent); } .btn-tema { background: none; border: 1px solid var(--fio); border-radius: var(--raio-sm); width: 36px; height: 36px; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--texto); flex-shrink: 0; } /* ===== herói ===== */ .heroi { position: relative; z-index: 1; padding: 4rem 0 4.5rem; text-align: center; } .heroi h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 1rem 0; color: var(--texto); } /* O título é quebrado em DUAS LINHAS FIXAS no desenho, não por wrap automático. */ .heroi h1 span { display: block; } .heroi .texto-apoio { margin: 0 auto 2rem; } .heroi-acoes { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ===== manifesto ===== */ .pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2.5rem; } .pilar { background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--raio-lg); padding: 1.6rem 1.5rem; box-shadow: var(--sombra-sm); } .pilar h3 { font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--texto); } .pilar p { font-size: 0.88rem; color: var(--texto-suave); } /* ===== como funcionam as turmas ===== */ .turmas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 2.5rem; } .turma-card { background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--raio-lg); padding: 1.5rem; box-shadow: var(--sombra-sm); } .turma-card .rotulo { display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pe-cyan-text); background: color-mix(in srgb, var(--pe-cyan-fill) 14%, transparent); padding: 3px 10px; border-radius: var(--raio-pill); margin-bottom: 0.7rem; } .turma-card p { font-size: 0.86rem; color: var(--texto-suave); } /* ===== FAQ ===== */ .faq { max-width: 760px; margin: 2.5rem auto 0; } .faq details { background: var(--superficie); border: 1px solid var(--fio); border-radius: var(--raio-md); margin-bottom: 0.6rem; overflow: hidden; } .faq summary { padding: 1.05rem 1.25rem; cursor: pointer; font-weight: 600; font-size: 0.92rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--pe-cyan-text); font-size: 1.2rem; flex-shrink: 0; } .faq details[open] summary::after { content: '−'; } .faq details p { padding: 0 1.25rem 1.2rem; font-size: 0.88rem; color: var(--texto-suave); border-top: 1px solid var(--fio); padding-top: 1rem; margin-top: -1px; } /* ===== CTA do aluno ===== */ .cta-aluno { background: var(--pe-navy); color: #fff; border-radius: var(--raio-lg); padding: 2.5rem 2rem; text-align: center; } .cta-aluno .eyebrow { color: var(--pe-amber-on-navy); } .cta-aluno h2 { font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.7rem; font-weight: 600; margin: 0.6rem 0 0.4rem; } .cta-aluno p { color: #c9d6e8; font-size: 0.92rem; margin-bottom: 1.6rem; } .cta-aluno .btn { background: var(--pe-cyan-fill); color: var(--pe-navy); } .cta-aluno .btn:hover { background: var(--pe-cyan-on-navy); } /* ===== rodapé ===== */ .rodape { position: relative; z-index: 1; background: var(--pe-navy); color: #c9d6e8; padding: 3rem 0 2rem; } /* Quatro colunas desde que a coluna Legal voltou (as paginas agora existem). A primeira e o dobro porque carrega a marca; auto-fit nao serve aqui, a ordem das colunas e semantica. */ .rodape-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } @media (max-width: 960px) { .rodape-grid { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; } } .rodape .marca img { width: 150px; } .rodape-sub { font-size: 0.82rem; margin-top: 0.7rem; color: #9fb2ca; } .rodape h4 { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pe-amber-on-navy); margin-bottom: 0.9rem; } .rodape ul { list-style: none; } .rodape li { margin-bottom: 0.5rem; } .rodape a { font-size: 0.85rem; color: #c9d6e8; text-decoration: none; } .rodape a:hover { color: var(--pe-cyan-on-navy); } .rodape-legal { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.76rem; color: #9fb2ca; } .rodape-legal strong { color: #c9d6e8; } .rodape-copy { margin-top: 1rem; font-size: 0.76rem; color: #8ba0ba; } /* ===== páginas de documento (privacidade, termos, aviso legal) ===== Texto longo tem exigências que landing não tem: a linha precisa terminar antes de o olho se perder na volta. Daí a largura fixa em rem (não % da tela) e o line-height mais alto. A medida abaixo dá ~70 caracteres por linha no desktop — parágrafo de 200 caracteres numa linha só é ilegível. */ .doc { position: relative; z-index: 1; padding: 3rem 0 4.5rem; } .doc-inner { max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; } .doc h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--texto); } /* CNPJ e data da última atualização — identificam o documento, não são leitura. */ .doc-meta { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.7; color: var(--pe-label); } .doc-meta strong { color: var(--texto); font-weight: 600; } .doc h2 { font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.5rem; font-weight: 600; line-height: 1.25; color: var(--texto); margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--fio); } .doc h3 { font-size: 0.95rem; font-weight: 600; color: var(--texto); margin-top: 1.75rem; } /* 1rem, nao 0,95: o corpo do site pode ser menor porque sao frases soltas; aqui sao paginas inteiras de leitura corrida. Com esta medida e a largura acima, a linha fica em ~68 caracteres — dentro da faixa confortavel de 45 a 75. */ .doc p, .doc li { font-size: 1rem; line-height: 1.8; color: var(--texto-suave); } .doc p { margin-top: 1rem; } .doc ul { margin-top: 1rem; padding-left: 1.15rem; } .doc li { margin-bottom: 0.55rem; } .doc li::marker { color: var(--pe-cyan-text); } .doc strong { color: var(--texto); font-weight: 600; } .doc a { color: var(--pe-cyan-text); text-decoration: underline; text-underline-offset: 2px; } /* Tabela rola dentro da própria caixa: numa tela de 320px ela não cabe, e é a tabela que deve rolar, nunca a página inteira. */ .tabela-rolagem { overflow-x: auto; margin-top: 1.25rem; -webkit-overflow-scrolling: touch; } .doc table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.87rem; } .doc th, .doc td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--fio); line-height: 1.6; color: var(--texto-suave); vertical-align: top; } .doc th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pe-label); border-bottom-color: var(--fio-forte); white-space: nowrap; } .doc tbody tr:last-child td { border-bottom: none; } @media (max-width: 720px) { .doc { padding: 2rem 0 3rem; } .doc h2 { margin-top: 2.25rem; font-size: 1.3rem; } } /* Tabela vira lista empilhada no celular. Rolar na horizontal funciona, mas corta a segunda coluna do campo de visao — e documento legal e lido no celular. Aqui cada linha vira um bloco e o nome da coluna reaparece antes do valor, via data-rotulo. O continua sendo tabela no HTML: quem usa leitor de tela nao perde nada. */ @media (max-width: 560px) { .doc table { min-width: 0; } .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .doc tbody tr { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--fio); } .doc tbody tr:last-child { border-bottom: none; } .doc td { display: block; padding: 0; border: none; } .doc td + td { margin-top: 0.5rem; } .doc td::before { content: attr(data-rotulo); display: block; margin-bottom: 0.15rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pe-label); } .tabela-rolagem { overflow-x: visible; } } /* ===== caixa de contato ===== */ .caixa-fundo { position: fixed; inset: 0; z-index: 50; display: none; background: rgba(8, 43, 77, 0.55); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 1.25rem; } .caixa-fundo[data-aberta="1"] { display: flex; } .caixa { background: var(--superficie); border-radius: var(--raio-lg); width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 1.75rem; box-shadow: var(--sombra-md); } .caixa-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .caixa h2 { font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.4rem; font-weight: 600; color: var(--texto); } .caixa-fechar { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--texto-suave); padding: 0.2rem 0.4rem; flex-shrink: 0; } .caixa-sub { font-size: 0.86rem; color: var(--texto-suave); margin: 0.4rem 0 1.4rem; } .campo { margin-bottom: 1.1rem; } /* Filho DIRETO, de propósito: como descendente (`.campo label`) esta regra pegava também os