/* ==================================================================== UMANUT - base do site Camada compartilhada por TODAS as categorias de curso. Tokens, reset, escala tipografica, container, botoes, grao, rodape e os reveals. Nada aqui decide a aparencia de um tipo de pagina: quem faz isso e a folha da categoria, carregada depois desta. Ordem no : base.css -> .css -> nav.css Este arquivo e o dono unico dos tokens. Antes de 28/07/2026 eles viviam repetidos em cada pagina, e foi assim que --font-display ficou em Fraunces localmente enquanto o ar ja usava Inter. ==================================================================== */ /* ==================================================== DESIGN TOKENS - Manual da Marca Umanut ==================================================== */ :root { --azul-umanut: #143C8C; --azul-horizonte: #2878AA; --azul-sereno: #5096BE; --azul-manha: #BED2F0; --azul-nevoa: #E6F0FA; --areia-papel: #F7F4EC; --areia-quente: #EFE8D8; --tinta-profunda: #0A1530; --azul-abissal: #0E2B66; --branco: #FFFFFF; --texto-muted: #4B6280; /* Superficie escura. O site nasceu claro, entao os 76 rgba() dele sao todos escuro-sobre-claro e nenhum serve numa pagina de fundo preto. Em vez de espalhar rgba(255,255,255,x) por trinta lugares - que e o acumulo que a auditoria de 27/07 apontou como o desvio do sistema - os tres niveis usados ganham nome aqui. Texto Claro da 6,67:1 sobre Tinta Profunda. Estreou no Executive Education em 28/07/2026. */ --linha-clara: rgba(255,255,255,0.10); --linha-clara-forte: rgba(255,255,255,0.22); --texto-claro: rgba(190,210,240,0.72); --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; /* Menor que o das outras paginas (clamp(5rem,10vw,9rem)) de proposito: cada secao paga este respiro em cima E embaixo, entao entre duas secoes o vao e o dobro. Com 3 secoes isso e generoso; com 13, viram vazios de 256px. Aqui o vao entre secoes fica em ~166px. */ --section-py: clamp(3.75rem, 6.5vw, 6rem); --max-w: 1200px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); } /* --- RESET --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--tinta-profunda); background-color: var(--areia-papel); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a, a:hover, a:focus, a:active, a:visited { color: inherit; text-decoration: none !important; } ul { list-style: none; } button { font-family: inherit; } ::selection { background: var(--azul-umanut); color: var(--branco); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--areia-papel); } ::-webkit-scrollbar-thumb { background: var(--azul-sereno); border-radius: 6px; border: 2px solid var(--areia-papel); } ::-webkit-scrollbar-thumb:hover { background: var(--azul-umanut); } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; text-align: left !important; line-height: 1.15; letter-spacing: -0.015em; } h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); text-align: left !important; } p { font-size: 1rem; line-height: 1.75; } /* Quebra de linha otimizada: evita palavra órfã na última linha */ p, li, blockquote, figcaption, dt, dd, summary, .hero-tagline, .lead { text-wrap: pretty; /* prosa: sem palavra orfa na ultima linha */ } h1, h2, h3, h4, h5, h6 { text-wrap: balance; /* titulo: linhas de comprimento equilibrado */ } /* : mantem uma frase inteira na mesma linha. Serve para o caso em que o texto tem duas frases e a quebra natural cai no meio da segunda ("...de Sao Paulo, e recebeu a / bercha..."), em vez de cair no ponto final. Por que inline-block e nao
: o
quebra em toda largura, inclusive onde nao cabe e o texto precisa reflowar sozinho. O inline-block nao força quebra nenhuma - so impede que o browser parta a frase pelo meio. Se as duas frases couberem lado a lado, ficam lado a lado; se nao couberem, cada uma vai para a sua linha; e no celular, onde nem uma frase inteira cabe, ela quebra internamente como texto normal. Quebra continua sendo consequencia de falta de espaco. Usar so quando as frases forem de tamanho parecido: duas frases muito desiguais deixam um bloco torto. Medir antes. */ .frase { display: inline-block; } .kicker { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--azul-horizonte); display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .kicker::before { content: ''; display: block; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .container { width: min(var(--max-w), 100% - 3rem); margin-inline: auto; } section { padding-block: var(--section-py); position: relative; } /* --- GRÃO DE FILME --- */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9990; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { .grain { animation: grainShift 0.9s steps(4) infinite; } } @keyframes grainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1.5%); } 50% { transform: translate(1.5%, -1%); } 75% { transform: translate(-1%, -2%); } 100% { transform: translate(0, 0); } } /* O bloco do PRELOADER saiu daqui em 14/08/2026. A cortina de abertura ficou so na home, e a home nao linka este arquivo - o CSS dela e inline. Ou seja: as regras aqui nao vestiam mais nada, so pesavam nas tres paginas que carregam o base.css. Se algum dia outra pagina precisar de preloader, copiar da home (index.html), que tem a versao com o portao .fonte-pronta - o que segura a animacao ate a Inter carregar. */ /* --- BOTÕES --- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.95rem 2.2rem; border-radius: 50px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; position: relative; overflow: hidden; transition: color 300ms, border-color 300ms, box-shadow 300ms, background 300ms, transform 300ms var(--ease-smooth); } .btn:hover { transform: translateY(-2px); } .btn .btn-fill { position: absolute; inset: 0; border-radius: inherit; transform: translateY(101%); transition: transform 450ms var(--ease-out-expo); z-index: 0; } .btn:hover .btn-fill { transform: translateY(0); } .btn > span:not(.btn-fill), .btn > svg { position: relative; z-index: 1; } .btn-primary { background: var(--azul-umanut); color: var(--branco) !important; border-color: var(--azul-umanut); box-shadow: 0 4px 16px rgba(20,60,140,0.28); } .btn-primary .btn-fill { background: var(--azul-horizonte); } .btn-primary:hover { box-shadow: 0 10px 30px rgba(40,120,170,0.45); border-color: var(--azul-horizonte); } .btn-primary:focus-visible { outline: 2px solid var(--azul-umanut); outline-offset: 3px; } .btn-light { background: var(--branco); color: var(--azul-umanut) !important; border-color: var(--branco); box-shadow: 0 4px 16px rgba(10,21,48,0.25); } .btn-light .btn-fill { background: var(--azul-manha); } .btn-light:hover { box-shadow: 0 10px 30px rgba(190,210,240,0.4); } .btn-light:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; } .btn-ghost-white { background: transparent; color: var(--branco) !important; border-color: rgba(255,255,255,0.5); } .btn-ghost-white .btn-fill { background: var(--branco); } .btn-ghost-white:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; } .btn-ghost-white:hover, a.btn-ghost-white:hover { color: var(--tinta-profunda) !important; border-color: var(--branco); } .btn-outline { background: transparent; color: var(--azul-umanut) !important; border-color: rgba(20,60,140,0.35); } .btn-outline .btn-fill { background: var(--azul-umanut); } .btn-outline:hover, a.btn-outline:hover { color: var(--branco) !important; border-color: var(--azul-umanut); } .btn-outline:focus-visible { outline: 2px solid var(--azul-umanut); outline-offset: 3px; } .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease-smooth); } .btn:hover svg { transform: translateX(4px); } /* --- FOOTER --- */ .site-footer { background: var(--tinta-profunda); padding-block: 4rem 2rem; border-top: 1px solid rgba(190,210,240,0.1); position: relative; overflow: hidden; } .footer-watermark { position: absolute; left: 50%; bottom: -0.36em; transform: translateX(-50%); font-family: var(--font-display); font-weight: 900; font-size: clamp(7rem, 18vw, 15rem); letter-spacing: 0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(190,210,240,0.07); pointer-events: none; user-select: none; white-space: nowrap; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; position: relative; z-index: 1; } .footer-brand .logo-text { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--branco); letter-spacing: 0.1em; } .footer-brand .logo-sub { font-size: 0.52rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.52); display: block; margin-bottom: 1.1rem; } .footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.875rem; line-height: 1.7; max-width: 30ch; } .footer-col h3, .footer-col h4 { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.56); margin-bottom: 1.25rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0; } .footer-col a { color: rgba(255,255,255,0.68); font-size: 0.875rem; display: inline-block; transition: color 200ms, transform 250ms var(--ease-smooth); } .footer-col a:hover { color: var(--azul-manha); transform: translateX(5px); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; position: relative; z-index: 1; } /* Subido para passar em AA (4,5:1 sobre Tinta Profunda). Os valores antigos davam 4,04 e 3,19 - reprovavam em texto pequeno. */ .footer-bottom p { font-size: 0.76rem; color: rgba(255,255,255,0.62); } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); transition: background 250ms, color 250ms, border-color 250ms, transform 250ms; } .footer-social a:hover { background: var(--azul-horizonte); border-color: var(--azul-horizonte); color: var(--branco); transform: translateY(-3px); } .footer-social svg { width: 16px; height: 16px; fill: currentColor; } @media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-inner { grid-template-columns: 1fr; } } /* --- REVEALS --- */ @media (prefers-reduced-motion: no-preference) { .fade-up { opacity: 0; transform: translateY(32px); transition: opacity 800ms var(--ease-smooth), transform 800ms var(--ease-smooth); } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up[data-delay="1"] { transition-delay: 0.1s; } .fade-up[data-delay="2"] { transition-delay: 0.2s; } .fade-up[data-delay="3"] { transition-delay: 0.3s; } } /* ==================================================== IMPRESSAO O .fade-up acima nasce em opacity 0 e depende do observer, que so revela o que entrou na viewport. Ao imprimir, nada abaixo da dobra foi revelado ainda e a folha sai em branco. Aqui o reveal e neutralizado e o cromo que nao faz sentido no papel sai. ==================================================== */ @media print { .fade-up, .fade-up[data-delay] { opacity: 1 !important; transform: none !important; transition: none !important; } .scroll-progress, .grain, .site-header, .mobile-nav, .footer-watermark { display: none !important; } body { background: #FFFFFF !important; color: #000000 !important; } } /* ==================================================== ALVOS DE TOQUE Os links do rodape tinham 24px de altura. O WCAG 2.2 AA pede 24 como minimo absoluto; 44 e o tamanho confortavel para o dedo. O padding vertical cresce sem mexer no ritmo visual da coluna porque o line-height ja separava os itens. ==================================================== */ .footer-col ul li { margin: 0; } .footer-col ul a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.35rem; } .footer-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }