/* Vuno 2026 — estilos do site. Cores, fontes e regras seguem o Manual de Identidade Visual. */ @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); } :root { --azul: #041122; --azul-apoio: #19324A; --bege: #F4F1E8; --cinza: #8E98A9; --amarelo: #FFC629; --ambar: #FFE39A; --branco: #FFFFFF; --linha-escura: rgba(244, 241, 232, .14); --linha-clara: rgba(4, 17, 34, .12); --sombra: 0 0 0 1px rgba(4,17,34,.1); --sombra-forte: 0 0 0 1px var(--azul), 0 20px 28px -22px rgba(4,17,34,.45); /* Aptos não pode ser distribuída com o site: usa a instalada no aparelho e cai para Arial (previsto no manual). */ --f-texto: "Aptos", "Segoe UI", Arial, Helvetica, sans-serif; --f-mono: "IBM Plex Mono", "Courier New", monospace; --largura: 1200px; --gutter: clamp(20px, 5vw, 56px); --raio: 0; --raio-p: 0; --ease: cubic-bezier(.2, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.55; color: var(--azul); background: var(--bege); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } :focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; } .skip { position: absolute; left: -999px; top: 0; background: var(--amarelo); color: var(--azul); padding: 10px 16px; z-index: 100; font-weight: 600; } .skip:focus { left: 8px; top: 8px; } .wrap { max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Ícones ---------- */ .ic { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic-sm { width: 18px; height: 18px; } .ic-lg { width: 30px; height: 30px; } .ibox { width: 56px; height: 56px; border-radius: 0; display: grid; place-items: center; flex: none; background: var(--azul); color: var(--amarelo); transition: transform .35s var(--ease), background .25s ease; } .escuro .ibox, .ibox--escuro { background: rgba(255,198,41,.1); box-shadow: inset 0 0 0 1px rgba(255,198,41,.4); } .ibox--amarelo { background: var(--amarelo) !important; color: var(--azul) !important; box-shadow: none !important; } /* ---------- Tipografia ---------- */ h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); } h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.015em; line-height: 1.2; } p { margin: 0; } strong { font-weight: 600; } /* destaque de texto: só a cor da fonte */ .dest { color: var(--amarelo); } /* caixa amarela: exclusiva para números */ mark { background: var(--amarelo); color: var(--azul); padding: .02em .2em .07em; border-radius: 0; margin-inline: .02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .rotulo { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-texto); font-size: .9rem; font-weight: 500; color: var(--azul-apoio); } .rotulo::before { content: ""; width: 28px; height: 2px; background: var(--amarelo); flex: none; } .escuro .rotulo, .hero .rotulo, .final .rotulo { color: var(--cinza); } .hero--clara .rotulo { color: var(--azul-apoio); } .rotulo .n { color: var(--amarelo); } .claro .rotulo .n, .branco .rotulo .n { color: var(--azul); } .lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; max-width: 62ch; } .texto { max-width: 66ch; } .mono { font-family: var(--f-texto); } .mini { font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); } .escuro .mini { color: var(--cinza); } /* ---------- Cabeçalho ---------- */ .topo { position: sticky; top: 0; z-index: 50; background: var(--azul); border-bottom: 1px solid var(--linha-escura); transition: box-shadow .3s ease; } .topo.rolou { box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); } .topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; } .logo { display: block; flex: none; } .logo img { height: 26px; width: auto; } .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); } .nav a { color: var(--bege); text-decoration: none; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s ease; } .nav a:hover { border-bottom-color: var(--cinza); } .nav a[aria-current="page"] { border-bottom-color: var(--amarelo); } .nav a.btn { color: var(--azul); border-bottom: 0; padding: 11px 20px; font-size: .95rem; } .nav a.btn[aria-current="page"] { border-bottom: 0; } .menu-btn { display: none; background: none; border: 1px solid var(--linha-escura); color: var(--bege); font-family: var(--f-texto); font-size: .9rem; padding: 10px 14px; border-radius: 0; cursor: pointer; } @media (max-width: 880px) { .menu-btn { display: inline-block; } .nav { display: none; position: absolute; left: 0; right: 0; top: 72px; background: var(--azul); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; border-bottom: 1px solid var(--linha-escura); } .nav.aberto { display: flex; } .nav a { padding: 16px 0; border-bottom: 1px solid var(--linha-escura); font-size: 1.05rem; } .nav a.btn { margin-top: 18px; text-align: center; border: 0; padding: 16px; } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; border: 0; background: var(--amarelo); color: var(--azul); font-family: var(--f-texto); font-weight: 600; font-size: 1rem; letter-spacing: -0.005em; padding: 16px 28px; border-radius: 0; transition: background .2s ease, transform .2s var(--ease), box-shadow .2s ease; } .btn:hover { background: var(--ambar); } .btn .ic { transition: transform .25s var(--ease); } .btn:hover .ic { transform: translateX(4px); } /* ---------- Seções ---------- */ .sec { padding-block: clamp(64px, 9vw, 120px); position: relative; } .claro { background: var(--bege); color: var(--azul); } .branco { background: var(--branco); color: var(--azul); } .escuro { background: var(--azul); color: var(--bege); } .sec-cab { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 60px); } .sec-cab--centro { justify-items: center; text-align: center; } .sec-cab .lead { opacity: .86; } .sec-cta { margin-top: clamp(32px, 4vw, 52px); } .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; } .split--topo { align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--azul) center right / cover no-repeat; color: var(--bege); padding-block: clamp(80px, 13vw, 168px); isolation: isolate; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--azul) 0%, rgba(4,17,34,.94) 28%, rgba(4,17,34,.5) 58%, rgba(4,17,34,.12) 100%); } .hero .wrap { display: grid; gap: 28px; } .hero h1 { max-width: 18ch; } .hero .lead { opacity: .9; } .hero--pagina { padding-block: clamp(72px, 10vw, 136px); } .hero--pagina h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 20ch; } .hero .wrap > * { animation: subir .9s var(--ease) both; } .hero .wrap > *:nth-child(2) { animation-delay: .12s; } .hero .wrap > *:nth-child(3) { animation-delay: .24s; } .hero .wrap > *:nth-child(4) { animation-delay: .36s; } @keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .hero::before { background: linear-gradient(180deg, rgba(4,17,34,.9), rgba(4,17,34,.82)); } } .hero--clara { background-color: var(--bege); color: var(--azul); } .hero--clara::before { background: linear-gradient(90deg, var(--bege) 0%, var(--bege) 34%, rgba(244,241,232,.55) 52%, rgba(244,241,232,0) 70%); } .hero--clara .lead { opacity: .86; max-width: 36ch; } @media (max-width: 760px) { .hero--clara::before { background: linear-gradient(180deg, rgba(244,241,232,.94), rgba(244,241,232,.9)); } } /* Banner da Home: mais baixo, deixando o conteúdo seguinte aparecer na primeira tela */ .hero--home { padding-block: clamp(48px, 6vw, 80px); } .hero--home h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); max-width: 22ch; } .hero--home .lead { max-width: 56ch; } /* ---------- Grades e cartões ---------- */ .grade { display: grid; gap: 20px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1040px) { .g4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .g2, .g4 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .g2.fixo { grid-template-columns: repeat(2, 1fr); gap: 14px; } .g2.fixo .pessoa h3 { font-size: 1.05rem; } } .card { position: relative; background: var(--branco); border-radius: 0; padding: 30px 28px 32px; box-shadow: var(--sombra); display: grid; gap: 18px; align-content: start; transition: transform .4s var(--ease), box-shadow .4s var(--ease); overflow: hidden; text-decoration: none; color: inherit; } .card:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); } .card:hover .ibox { transform: scale(1.12); } .card p { color: var(--azul-apoio); } .card .num { font-family: var(--f-texto); font-weight: 500; font-size: .9rem; color: var(--azul-apoio); } .card-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .escuro .card { background: var(--azul-apoio); box-shadow: inset 0 0 0 1px var(--linha-escura); } .escuro .card:hover { box-shadow: inset 0 0 0 1px rgba(255,198,41,.45), 0 24px 48px -20px rgba(0,0,0,.8); } .escuro .card p { color: var(--cinza); } .escuro .card .num { color: var(--cinza); } .card--bege { background: var(--bege); box-shadow: none; } .branco .card { background: var(--bege); box-shadow: none; } .branco .card:hover { box-shadow: var(--sombra-forte); } /* cartão de "se falta / a Vuno entra em" */ .entra { gap: 14px; } .entra .se { font-size: 1.15rem; font-weight: 600; line-height: 1.25; min-height: 2.6em; } .entra .vai { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px dashed var(--linha-escura); font-weight: 600; font-size: 1.05rem; } .entra .seta { margin-left: auto; color: var(--amarelo); transition: transform .3s var(--ease); } .entra:hover .seta { transform: translateX(6px); } /* V · U · N · O */ .vcard { background: var(--azul); color: var(--bege); border-radius: 0; padding: 28px 26px 30px; position: relative; overflow: hidden; transition: transform .4s var(--ease); display: grid; gap: 14px; align-content: start; } .vcard:hover { transform: translateY(-6px); } .vcard .letra { font-size: clamp(4.2rem, 8vw, 6.4rem); font-weight: 600; letter-spacing: -0.05em; line-height: .9; color: var(--amarelo); display: block; } .vcard h3 { font-size: 1.2rem; } .vcard p { color: var(--cinza); font-size: .98rem; } .vcard p + p { margin-top: 6px; } .escuro .vcard { background: var(--azul-apoio); box-shadow: inset 0 0 0 1px var(--linha-escura); } /* ---------- Números ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { display: grid; gap: 16px; align-content: start; } .stat mark { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; padding: .06em .22em .1em; justify-self: start; } .stat p { color: var(--cinza); max-width: 22ch; } .claro .stat p, .branco .stat p { color: var(--azul-apoio); } .stat-cartao { background: var(--azul-apoio); border-radius: 0; padding: 28px; box-shadow: inset 0 0 0 1px var(--linha-escura); } .claro .stat-cartao, .branco .stat-cartao { background: var(--azul); color: var(--bege); } .claro .stat-cartao p, .branco .stat-cartao p { color: var(--cinza); } /* ---------- Faixa de nomes (movimento contínuo) ---------- */ .faixa { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .faixa-trilho { display: flex; gap: 14px; width: max-content; animation: correr 38s linear infinite; } .faixa:hover .faixa-trilho { animation-play-state: paused; } @keyframes correr { to { transform: translateX(-50%); } } .chip { font-family: var(--f-texto); font-size: .9rem; padding: 16px 26px; border-radius: 0; border: 1px solid var(--linha-escura); color: var(--bege); white-space: nowrap; background: rgba(255,255,255,.03); } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chips .chip { padding: 9px 16px; font-size: .72rem; color: var(--azul); border-color: var(--linha-clara); background: var(--bege); } .escuro .chips .chip { color: var(--bege); border-color: var(--linha-escura); background: rgba(255,255,255,.04); } /* ---------- Logos de clientes e parceiros ---------- */ /* Padrão: quadro bege, logos em cinza e cor original no hover. */ .logo-tile { background: var(--bege); height: 84px; display: grid; place-items: center; padding: 10px 18px; border: 1px solid var(--linha-clara); } .escuro .logo-tile { border-color: transparent; } /* Cada logo recebe uma largura (--w) para que a altura visual seja parecida. */ .logo-tile img { width: calc(var(--w, 100) * var(--esc, 1) * 1px); max-width: 100%; height: auto; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .3s ease, opacity .3s ease; } .logo-tile:hover img { filter: none; opacity: 1; } .logo-tile--texto { font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); border-style: dashed; border-color: var(--cinza); text-align: center; line-height: 1.3; } .logos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; --esc: .72; } .logos-grid .logo-tile { padding-inline: 12px; } /* Faixa da Home (fundo azul): logos brancos sem quadro; no hover o quadro clareia e a cor original aparece. */ .faixa { --esc: 1.08; } .faixa .logo-tile { width: 230px; height: 96px; flex: none; background: transparent; border-color: transparent; transition: background .3s ease; } .faixa .logo-tile img { max-height: 60px; filter: brightness(0) invert(1); opacity: .88; } .faixa .logo-tile:hover { background: var(--bege); } .faixa .logo-tile:hover img { filter: none; opacity: 1; } /* ---------- Placeholder de imagem ---------- */ .ph { position: relative; border-radius: 0; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); display: grid; place-items: center; text-align: center; padding: 24px; background: repeating-linear-gradient(135deg, rgba(4,17,34,.035) 0 14px, rgba(4,17,34,.07) 14px 28px), var(--branco); border: 2px dashed rgba(4,17,34,.28); color: var(--azul-apoio); } .ph-in { display: grid; gap: 10px; justify-items: center; } .ph .ic { width: 40px; height: 40px; opacity: .8; } .ph b { font-family: var(--f-texto); font-size: .9rem; font-weight: 500; color: var(--azul); } .ph span { font-size: .92rem; max-width: 28ch; } .ph small { font-family: var(--f-texto); font-size: .9rem; opacity: .7; } .escuro .ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 14px, rgba(255,255,255,.055) 14px 28px), var(--azul-apoio); border-color: rgba(244,241,232,.3); color: var(--cinza); } .escuro .ph b { color: var(--bege); } .ph--retrato { --ar: 4 / 5; } .ph--wide { --ar: 16 / 9; } .ph--quadrado { --ar: 1 / 1; } .ph--capa { --ar: 16 / 9; border-radius: 0; border-width: 0 0 2px 0; } .ph--pessoa .ic { width: 64px; height: 64px; } /* Espaço de imagem preenchido com foto */ .ph--img { padding: 0; border: 0; background: var(--azul); display: block; } .ph--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph--img.ph--capa { border-width: 0; } /* ---------- Estágios (Território Vuno) ---------- */ .estagios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: e; } @media (max-width: 1040px) { .estagios { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .estagios { grid-template-columns: 1fr; } } .estagio { background: var(--azul-apoio); border-radius: 0; padding: 24px 22px 26px; box-shadow: inset 0 0 0 1px var(--linha-escura); display: grid; gap: 14px; align-content: start; position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .estagio:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgba(255,198,41,.5); } .estagio:hover .ibox { transform: scale(1.12); } .estagio .num { font-family: var(--f-texto); font-size: 1.6rem; font-weight: 500; color: var(--amarelo); line-height: 1; } .estagio .topo-e { display: flex; align-items: center; justify-content: space-between; } .estagio h3 { font-size: 1.15rem; } .estagio p { font-size: .95rem; color: var(--cinza); } .estagio .nota { font-family: var(--f-texto); font-size: .9rem; color: var(--amarelo); border: 1px solid rgba(255,198,41,.4); padding: 4px 9px; border-radius: 0; justify-self: start; } /* barra de cobertura por BU */ html.js .rv.in .cobre i.on { transform: scaleX(1); } .dado { display: grid; gap: 6px; } .dado b { font-family: var(--f-texto); font-weight: 500; font-size: .9rem; color: var(--azul-apoio); } /* ---------- Frentes ---------- */ .indice { display: flex; flex-wrap: wrap; gap: 10px; } .indice a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-texto); font-size: .9rem; text-decoration: none; padding: 11px 18px; border: 1px solid var(--linha-escura); color: var(--bege); border-radius: 0; background: rgba(4,17,34,.5); transition: border-color .2s ease, background .2s ease, transform .2s var(--ease); } .indice a:hover { border-color: var(--amarelo); transform: translateY(-2px); } .frente { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; } .frente .intro { display: grid; gap: 22px; align-content: start; position: sticky; top: 104px; } .frente .intro h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); } .frente .intro > p { opacity: .88; } @media (max-width: 980px) { .frente { grid-template-columns: 1fr; } .frente .intro { position: static; } } .ofertas { display: grid; gap: 20px; } .oferta { background: var(--azul-apoio); border-radius: 0; padding: 30px 28px 14px; box-shadow: inset 0 0 0 1px var(--linha-escura); } .claro .oferta { background: var(--branco); box-shadow: var(--sombra); } .oferta-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; } .itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .itens li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 16px 0; align-items: start; } .itens li + li { border-top: 1px dashed var(--linha-escura); } .claro .itens li + li { border-top-color: var(--linha-clara); } .itens .ic { width: 22px; height: 22px; color: var(--amarelo); margin-top: 2px; } .claro .itens .ic { color: var(--azul); } .itens span { color: var(--cinza); } .claro .itens span { color: var(--azul-apoio); } .itens strong { color: var(--bege); font-weight: 600; } .claro .itens strong { color: var(--azul); } .card--capa { padding: 0; } .card-corpo { padding: 26px 28px 30px; display: grid; gap: 14px; } html:not(.js) .abas { display: none; } .painel + .painel { margin-top: 56px; } .tabs-on .painel + .painel { margin-top: 0; } .resolve { display: flex; align-items: center; gap: 12px; background: rgba(255,198,41,.1); border: 1px solid rgba(255,198,41,.35); border-radius: 0; padding: 12px 16px; font-size: .95rem; } .claro .resolve { background: rgba(4,17,34,.05); border-color: var(--linha-clara); } .resolve .ic { color: var(--amarelo); } .claro .resolve .ic { color: var(--azul); } .destaque-box { background: var(--amarelo); color: var(--azul); border-radius: 0; padding: 22px 26px; font-weight: 600; display: flex; gap: 16px; align-items: center; } /* ---------- Jornada (abas) ---------- */ .painel-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .painel-cab h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); } .painel-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 800px) { .painel-grade { grid-template-columns: 1fr; } } .painel .col { border-radius: 0; padding: 26px 24px 12px; } .col--sinal { background: var(--bege); } .col--ganho { background: var(--azul); color: var(--bege); } .col h4 { font-family: var(--f-texto); font-weight: 500; font-size: .9rem; margin-bottom: 8px; color: var(--azul-apoio); } .col--ganho h4 { color: var(--amarelo); } .col ul { list-style: none; padding: 0; margin: 0; } .col li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 14px 0; align-items: start; } .col li + li { border-top: 1px dashed var(--linha-clara); } .col--ganho li + li { border-top-color: var(--linha-escura); } .col li .ic { width: 22px; height: 22px; margin-top: 1px; } .col--sinal li .ic { color: var(--azul-apoio); } .col--ganho li .ic { color: var(--amarelo); } .col--ganho li { font-weight: 600; } html.js .tabs-on .painel[hidden] { display: none; } .painel.entrando { animation: subir .5s var(--ease) both; } /* ---------- Timeline ---------- */ .tl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .tl::before, .tl::after { content: ""; position: absolute; top: 27px; left: 28px; height: 2px; border-radius: 0; } .tl::before { right: calc((100% - 60px) / 4 - 28px); background: repeating-linear-gradient(90deg, rgba(4,17,34,.25) 0 8px, transparent 8px 16px); } .tl::after { width: 0; background: var(--amarelo); transition: width 2.2s var(--ease) .3s; } .tl.in::after { width: calc(75% + 15px); } .tl-item { position: relative; padding-top: 84px; } .tl-no { position: absolute; top: 0; left: 0; width: 56px; height: 56px; border-radius: 0; background: var(--azul); color: var(--amarelo); display: grid; place-items: center; z-index: 1; box-shadow: 0 0 0 6px var(--branco); transition: transform .4s var(--ease); } .tl-item:hover .tl-no { transform: scale(1.1); } .tl-card { background: var(--bege); border-radius: 0; padding: 24px 22px 26px; display: grid; gap: 12px; height: 100%; position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .tl-card::before { content: ""; position: absolute; top: -9px; left: 22px; width: 18px; height: 18px; background: var(--bege); transform: rotate(45deg); border-radius: 0; } .tl-item:hover .tl-card { transform: translateY(-5px); box-shadow: var(--sombra); } .tl-ano { font-family: var(--f-texto); font-weight: 500; font-size: 1.5rem; } .tl-card p { color: var(--azul-apoio); font-size: .98rem; } .tl-card h3 { font-size: 1.2rem; } .tl-item--aberto .tl-no { background: var(--branco); color: var(--azul-apoio); box-shadow: 0 0 0 6px var(--branco), inset 0 0 0 2px var(--cinza); } .tl-item--aberto .tl-card { background: transparent; outline: 2px dashed var(--cinza); outline-offset: -2px; } .tl-item--aberto .tl-card::before { display: none; } .tl-tag { font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); border: 1px dashed var(--cinza); padding: 4px 10px; border-radius: 0; justify-self: start; } .tl-item--final .tl-no { background: var(--amarelo); color: var(--azul); } @media (max-width: 960px) { .tl { grid-template-columns: 1fr; gap: 24px; } .tl::before, .tl::after { display: none; } .tl-item:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: -24px; width: 2px; background: var(--amarelo); } .tl-item { padding-top: 0; padding-left: 84px; } .tl-card::before { top: 22px; left: -9px; } } /* ---------- Pessoas ---------- */ .pessoa { display: grid; gap: 14px; } .pessoa h3 { font-size: 1.4rem; } .pessoa .papel { font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); } .citacao { background: var(--azul); color: var(--bege); border-radius: 0; padding: 32px 30px; display: grid; gap: 18px; position: relative; overflow: hidden; } .citacao p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; position: relative; } .citacao .fonte { font-family: var(--f-texto); font-size: .9rem; color: var(--amarelo); display: flex; align-items: center; gap: 10px; } /* ---------- Formulário e contato ---------- */ .contato-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; } @media (max-width: 900px) { .contato-grid { grid-template-columns: 1fr; } } .form-card { background: var(--branco); border-radius: 0; padding: clamp(24px, 4vw, 40px); box-shadow: var(--sombra); } form { display: grid; gap: 22px; } .campo { display: grid; gap: 8px; } .campo label { font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); } .campo input { font: inherit; padding: 15px 16px; border: 1px solid #c9cdd6; background: var(--bege); color: var(--azul); border-radius: 0; width: 100%; transition: border-color .2s, box-shadow .2s, background .2s; } .campo input:focus { outline: 0; border-color: var(--azul); background: var(--branco); box-shadow: 0 0 0 3px rgba(255,198,41,.55); } .campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 560px) { .campos-2 { grid-template-columns: 1fr; } } .form-ok { display: none; border-radius: 0; background: rgba(255,198,41,.2); padding: 16px 18px; font-weight: 600; } .form-ok.visivel { display: block; } .contatos { display: grid; gap: 16px; } .contato-item { display: flex; gap: 18px; align-items: center; background: var(--branco); border-radius: 0; padding: 22px; box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } a.contato-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); } a.contato-item:hover .ibox { transform: scale(1.12); } .contato-item .mini { display: block; margin-bottom: 4px; } .contato-item address { font-style: normal; } .contato-item strong { font-size: 1.05rem; } /* ---------- Blog: listagem ---------- */ .filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; } html:not(.js) .filtros { display: none; } .filtro { font-family: var(--f-texto); font-size: .9rem; padding: 11px 18px; border-radius: 0; border: 1px solid var(--linha-clara); background: var(--branco); color: var(--azul); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease); } .filtro:hover { border-color: var(--azul); transform: translateY(-2px); } .filtro[aria-pressed="true"] { background: var(--azul); color: var(--bege); border-color: var(--azul); } .tag-cat { font-family: var(--f-texto); font-size: .9rem; font-weight: 500; padding: 5px 11px; border-radius: 0; background: rgba(4,17,34,.07); color: var(--azul); justify-self: start; display: inline-block; } .meta-post { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); } .post .card-corpo h3 { font-size: 1.3rem; } .post .ler { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 4px; } .post .ler .ic { transition: transform .25s var(--ease); } .post:hover .ler .ic { transform: translateX(5px); } .post .ph--capa { border-radius: 0; } .post[hidden] { display: none; } .post.entrando { animation: subir .5s var(--ease) both; } .post-destaque { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--azul); color: var(--bege); border-radius: 0; overflow: hidden; margin-bottom: 24px; text-decoration: none; box-shadow: var(--sombra); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .post-destaque:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); } .post-destaque .ph { border-radius: 0; border: 0; aspect-ratio: auto; min-height: 340px; height: 100%; } .post-destaque .corpo { padding: clamp(28px, 4vw, 52px); display: grid; gap: 18px; align-content: center; } .post-destaque h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } .post-destaque p { color: var(--cinza); } .post-destaque .tag-cat { background: rgba(255,198,41,.14); color: var(--amarelo); } .post-destaque .meta-post { color: var(--cinza); } .ph--escuro { background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 14px, rgba(255,255,255,.055) 14px 28px), var(--azul-apoio); border-color: rgba(244,241,232,.3); color: var(--cinza); } .ph--escuro b { color: var(--bege); } .post-destaque.sem-capa { grid-template-columns: 1fr; } @media (max-width: 860px) { .post-destaque { grid-template-columns: 1fr; } .post-destaque .ph { min-height: 220px; } } /* ---------- Blog: artigo (template) ---------- */ .progresso { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--amarelo); z-index: 60; } .crumbs { font-family: var(--f-texto); font-size: .9rem; color: var(--cinza); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--amarelo); } .hero-artigo h1 { max-width: 22ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); } .autor-linha { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; } .autor-linha .quem { display: flex; align-items: center; gap: 12px; } .autor-linha .quem b { display: block; font-weight: 600; } .autor-linha .quem span { font-size: .85rem; color: var(--cinza); } .avatar { width: 48px; height: 48px; border-radius: 0; background: var(--azul-apoio); color: var(--amarelo); display: grid; place-items: center; border: 2px dashed rgba(244,241,232,.35); flex: none; } .artigo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 80px); align-items: start; } @media (max-width: 980px) { .artigo-grid { grid-template-columns: 1fr; } } .artigo { max-width: 70ch; font-size: 1.125rem; line-height: 1.7; } .artigo > * + * { margin-top: 1.3em; } .artigo h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 2em; scroll-margin-top: 100px; } .artigo h3 { font-size: 1.3rem; margin-top: 1.8em; } .artigo .lead-art { font-size: 1.3rem; line-height: 1.55; font-weight: 500; } .artigo ul, .artigo ol { padding-left: 0; list-style: none; display: grid; gap: 12px; } .artigo ul li { padding-left: 28px; position: relative; } .artigo ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 12px; border-radius: 0; background: var(--amarelo); } .artigo ol { counter-reset: o; } .artigo ol li { counter-increment: o; padding-left: 44px; position: relative; } .artigo ol li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-family: var(--f-texto); font-size: .9rem; font-weight: 500; color: var(--azul-apoio); } .artigo blockquote { margin-inline: 0; padding: 30px 32px; background: var(--azul); color: var(--bege); border-radius: 0; font-size: 1.3rem; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; } .artigo blockquote cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--f-texto); font-size: .9rem; color: var(--amarelo); } .artigo figure { margin-inline: 0; } .artigo figcaption { margin-top: 10px; font-size: .9rem; color: var(--azul-apoio); } .callout { display: grid; grid-template-columns: auto 1fr; gap: 18px; background: var(--branco); border-radius: 0; padding: 26px; box-shadow: var(--sombra); } .callout h3 { margin: 0 0 6px !important; font-size: 1.15rem; } .callout p { font-size: 1rem; line-height: 1.55; color: var(--azul-apoio); margin: 0; } .lateral { position: sticky; top: 104px; display: grid; gap: 20px; } @media (max-width: 980px) { .lateral { position: static; } } .toc { background: var(--branco); border-radius: 0; padding: 24px; box-shadow: var(--sombra); } .toc ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: t; } .toc a { display: flex; gap: 12px; text-decoration: none; padding: 9px 10px; border-radius: 0; font-size: .95rem; transition: background .2s ease; } .toc a:hover, .toc a.ativo { background: var(--bege); } .toc a.ativo { font-weight: 600; } .toc a::before { counter-increment: t; content: counter(t, decimal-leading-zero); font-family: var(--f-texto); font-size: .9rem; color: var(--azul-apoio); padding-top: .2em; } .cta-lateral { background: var(--azul); color: var(--bege); border-radius: 0; padding: 26px; display: grid; gap: 14px; } .cta-lateral h3 { font-size: 1.25rem; } .cta-lateral p { color: var(--cinza); font-size: .95rem; } .autor-box { display: flex; gap: 20px; align-items: center; background: var(--branco); border-radius: 0; padding: 26px; box-shadow: var(--sombra); margin-top: 3em; } .autor-box .avatar { width: 72px; height: 72px; background: var(--bege); color: var(--azul-apoio); border-color: var(--cinza); } .autor-box h3 { font-size: 1.15rem; margin-bottom: 4px; } .autor-box p { font-size: .98rem; color: var(--azul-apoio); line-height: 1.5; } /* ---------- Chamada final ---------- */ .final { background: var(--azul) center right / cover no-repeat; position: relative; isolation: isolate; color: var(--bege); padding-block: clamp(80px, 11vw, 150px); overflow: hidden; } .final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,17,34,.96) 0%, rgba(4,17,34,.82) 45%, rgba(4,17,34,.35) 100%); } .final .wrap { display: grid; gap: 32px; justify-items: start; } .final h2 { max-width: 16ch; font-size: clamp(2.2rem, 5vw, 3.8rem); } /* ---------- Rodapé ---------- */ .rodape { background: var(--azul); color: var(--bege); border-top: 1px solid var(--linha-escura); padding: 64px 0 40px; } .rodape .grade-rodape { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .rodape .logo img { height: 30px; } .rodape .slogan { margin-top: 18px; font-family: var(--f-texto); font-size: .9rem; color: var(--cinza); } .rodape h4 { font-family: var(--f-texto); font-weight: 500; font-size: .9rem; color: var(--cinza); margin-bottom: 18px; } .rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rodape a { text-decoration: none; } .rodape a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--amarelo); } .rodape address { font-style: normal; font-size: .95rem; opacity: .88; } .rodape .legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linha-escura); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--f-texto); font-size: .9rem; color: var(--cinza); } @media (max-width: 800px) { .rodape .grade-rodape { grid-template-columns: 1fr; } } /* ---------- Redes sociais no rodapé ---------- */ .ic-fill { width: 22px; height: 22px; fill: currentColor; stroke: none; flex: none; } .redes { margin-top: 30px; display: grid; gap: 14px; } .redes .mini { color: var(--cinza); } .redes-icones { display: flex; gap: 10px; } .redes-icones a { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--linha-escura); color: var(--bege); text-decoration: none !important; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease); } .redes-icones a:hover { background: var(--amarelo); color: var(--azul); border-color: var(--amarelo); } /* ---------- Tipografia em movimento ---------- */ /* 1) Tipografia em movimento: palavras do título sobem de dentro de uma máscara */ html.js [data-palavras] .pw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; } html.js [data-palavras] .pw-i { display: inline-block; transform: translateY(115%); transition: transform .95s var(--ease) calc(var(--i) * .075s + .1s); } html.js [data-palavras].pw-on .pw-i { transform: none; } .hero .wrap > h1[data-palavras] { animation: none; } /* ---------- Ajustes de layout ---------- */ .stat mark { text-align: center; } .split--estica { align-items: stretch; } .citacao { align-content: center; } /* Frentes: resumo das 4 frentes com linhas alinhadas entre os cartões */ .frente-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; } .resolve-linha { display: grid; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--linha-clara); align-content: start; } .resolve-cab { display: flex; align-items: center; gap: 10px; font-family: var(--f-texto); font-size: .9rem; font-weight: 500; color: var(--azul); } .resolve-cab .ic { width: 18px; height: 18px; } /* Frentes: cartão de ofertas alinhado ao texto e à imagem da esquerda */ .frente { align-items: stretch; } .frente .intro { position: static; } .frente .ofertas { grid-template-rows: 1fr; } .frente .ofertas > .oferta { display: flex; flex-direction: column; } .frente .oferta .itens { flex: 1; grid-auto-rows: 1fr; } .frente .oferta .itens li { align-items: center; } .oferta-rodape { padding: 8px 0 18px; } /* Território Vuno: número em caixa amarela, sem ícone; o estágio 08 em destaque */ .estagio { gap: 18px; } .estagio .num { display: inline-block; justify-self: start; background: var(--amarelo); color: var(--azul); font-size: 1.25rem; line-height: 1; padding: .32em .6em .36em; } /* Jornada: indicação clara de que o conteúdo muda conforme o card */ /* Blog: categorias como filtro */ .cat { text-align: left; font: inherit; cursor: pointer; border: 0; width: 100%; } .cat[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--azul); } .cat .ver { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-texto); font-size: .9rem; font-weight: 500; } html:not(.js) .cat .ver { display: none; } /* Sobre: bloco "Nosso time" em três cartões iguais */ .stat-card { align-content: center; } /* Contato: fundo azul, formulário e contatos com a mesma altura */ .contato-grid { align-items: stretch; } .contato-item { align-items: center; } .escuro .form-card { background: var(--bege); box-shadow: none; } .escuro .form-card .campo input { background: #fff; } .escuro .contato-item { background: var(--azul-apoio); box-shadow: inset 0 0 0 1px var(--linha-escura); color: var(--bege); } .escuro .contato-item .mini { color: var(--cinza); } .escuro a.contato-item:hover { box-shadow: inset 0 0 0 1px rgba(255,198,41,.5); } /* ---------- Rodada de ajustes ---------- */ /* Texto secundário em fundo azul: branco bege (não azul-acinzentado) */ .escuro, .hero, .final, .rodape { --cinza: rgba(244, 241, 232, .8); } /* Colunas com mesma altura: imagem acompanha o bloco de texto (topo e base alinhados) */ .split--estica > .ph { aspect-ratio: auto; height: 100%; min-height: 260px; } /* Fundadores: foto e nome formam um quadro só, alinhado ao quadro do Abradisti */ .pessoa { display: flex; flex-direction: column; gap: 0; height: 100%; background: var(--branco); box-shadow: var(--sombra); } .pessoa .ph { flex: 1; aspect-ratio: auto; min-height: 280px; border-radius: 0; } .pessoa-nome { padding: 16px 18px 18px; display: grid; gap: 4px; } .pessoa-nome h3 { font-size: 1.15rem; } /* Cartões V U N O: linha ao redor no hover, como nos cartões de ícones */ .vcard { transition: transform .4s var(--ease), box-shadow .3s ease; } .vcard:hover { box-shadow: inset 0 0 0 2px var(--amarelo); } /* Território: só o selo "Fica com o cliente" em amarelo */ .estagio .nota { background: var(--amarelo); color: var(--azul); border: 0; padding: 5px 10px; } /* Jornada do cliente: trilha com 4 estações ligadas por uma linha que avança */ .abas { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 44px; --pf: 0; } .abas::before, .abas::after { content: ""; position: absolute; top: 27px; left: 12.5%; height: 2px; } .abas::before { right: 12.5%; background: repeating-linear-gradient(90deg, rgba(4,17,34,.28) 0 8px, transparent 8px 16px); } .abas::after { width: calc(75% * var(--pf)); background: var(--amarelo); transition: width .6s var(--ease); } .aba { background: none; border: 0; padding: 0; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; cursor: pointer; position: relative; z-index: 1; font: inherit; color: var(--azul); } .aba-no { width: 56px; height: 56px; display: grid; place-items: center; background: var(--branco); color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); transition: transform .3s var(--ease), background .3s ease, color .3s ease; } .aba:hover .aba-no { transform: scale(1.12); } .aba.feito .aba-no { background: var(--azul); color: var(--amarelo); box-shadow: none; } .aba[aria-selected="true"] .aba-no { background: var(--amarelo); color: var(--azul); box-shadow: none; transform: scale(1.12); } .aba .mini { margin-top: 6px; } .aba b { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; max-width: 16ch; } .aba[aria-selected="false"] b { opacity: .72; } .painel-cab { align-items: center; } .painel-grade { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; } .painel-seta { display: grid; place-items: center; width: 48px; height: 48px; background: var(--amarelo); color: var(--azul); align-self: center; } @media (max-width: 800px) { .painel-grade { grid-template-columns: 1fr; } .painel-seta { justify-self: center; transform: rotate(90deg); } } .col li { align-items: center; } .painel-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--linha-clara); } /* Jornada: cabeçalho do painel centralizado e versão para celular */ .painel-cab { flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 28px; } @media (max-width: 560px) { .abas { margin-bottom: 32px; } .abas::before, .abas::after { top: 23px; } .aba-no { width: 48px; height: 48px; } .aba .mini { display: none; } .aba b { font-size: .74rem; max-width: 10ch; margin-top: 4px; } .painel .col { padding: 20px 18px 8px; } .painel-rodape { flex-direction: column; align-items: stretch; text-align: center; } .painel-rodape .btn { justify-content: center; } } /* Mapa dentro do cartão de endereço (Contato) */ .contatos { grid-template-rows: auto 1fr 1fr; } .contato-item--mapa { display: grid; gap: 16px; align-items: start; } .contato-linha { display: flex; align-items: center; gap: 18px; } .mapa-quadro { position: relative; height: 210px; background: var(--azul-apoio); box-shadow: inset 0 0 0 1px var(--linha-escura); overflow: hidden; } /* o filtro deixa o mapa em tons escuros, combinando com o fundo azul; no hover volta ao normal para facilitar a leitura */ .mapa-quadro iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25) invert(.9) hue-rotate(180deg) contrast(.92); transition: filter .4s ease; } .mapa-quadro:hover iframe { filter: none; } .btn--p { padding: 10px 16px; font-size: .9rem; justify-self: start; } .form-card { display: grid; align-content: center; } .quem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .quem .lead { margin-top: 0; } @media (max-width: 900px) { .quem { grid-template-columns: 1fr; } } .form-intro { margin: 0 0 22px; font-size: 1.05rem; font-weight: 600; color: var(--azul); line-height: 1.45; } /* Altura padrão dos banners: todas as páginas internas têm a mesma altura; a Home é um pouco mais alta. O conteúdo fica centralizado na vertical. Em telas estreitas o texto empilha e a altura segue o conteúdo. */ .hero--pagina { min-height: clamp(400px, 34vw, 500px); display: flex; align-items: center; padding-block: 56px; } .hero--home { min-height: clamp(480px, 40vw, 580px); display: flex; align-items: center; } .hero--pagina > .wrap, .hero--home > .wrap { width: 100%; } /* ---------- Animações de entrada (só quando o JavaScript está ativo) ---------- */ html.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); } html.js .rv.in { opacity: 1; transform: none; } html.js .rv-esq { transform: translateX(-32px); } html.js .rv-dir { transform: translateX(32px); } html.js .rv-zoom { transform: scale(.94); } html.js .rv.in.rv-esq, html.js .rv.in.rv-dir, html.js .rv.in.rv-zoom { transform: none; } /* Depois que a animação de entrada termina (classe .pronto, colocada pelo JavaScript), o hover volta a funcionar: a regra da entrada (transform: none) tinha prioridade e impedia o cartão de subir. */ html.js .rv.pronto { transition: opacity .8s var(--ease), transform .35s var(--ease), box-shadow .3s ease, outline-color .3s ease, background .3s ease; } html.js .card.rv.in:hover, html.js .vcard.rv.in:hover, html.js .post-destaque.rv.in:hover { transform: translateY(-6px); } html.js .estagio.rv.in:hover { transform: translateY(-5px); } html.js a.contato-item.rv.in:hover { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.js .rv { opacity: 1; transform: none; } .tl::after { width: calc(75% + 15px); } } /* ---------- Jornada: linha vertical com marcos ---------- */ .marcos { list-style: none; margin: 0; padding: 0; } .marco { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); position: relative; padding-bottom: clamp(40px, 5vw, 64px); } .marco:last-child { padding-bottom: 0; } .marco::before { content: ""; position: absolute; left: 27px; top: 64px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, rgba(4,17,34,.28) 0 8px, transparent 8px 16px); } .marco:last-child::before { display: none; } .marco-no .aba-no { background: var(--amarelo); color: var(--azul); box-shadow: none; position: relative; z-index: 1; } .marco-corpo .painel-cab { flex-direction: row; align-items: baseline; text-align: left; justify-content: flex-start; gap: 14px; margin: 0 0 22px; } .marco-corpo .painel-cab { display: grid; gap: 10px; } .marco-corpo .painel-grade { grid-template-columns: 1fr auto 1fr; } @media (max-width: 800px) { .marco { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; } .marco .aba-no { width: 44px; height: 44px; } .marco::before { left: 21px; top: 52px; } .marco-corpo .painel-grade { grid-template-columns: 1fr; } } .marco-corpo .col { padding: 26px 24px 12px; } @media (max-width: 800px) { .marco-corpo .col { padding: 20px 18px 8px; } } /* ---------- Jornada: quatro colunas lado a lado (versão compacta) ---------- */ .marcos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; } .marco { display: flex; flex-direction: column; gap: 18px; padding-bottom: 0; } .marco::before { left: 56px; right: -20px; top: 27px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(4,17,34,.28) 0 8px, transparent 8px 16px); } .marco:last-child::before { display: none; } .marco-no { align-self: flex-start; position: relative; z-index: 1; } .marco-corpo { display: flex; flex-direction: column; gap: 16px; flex: 1; } .marco-corpo .painel-cab { margin: 0; min-height: 5.2em; align-content: start; } .marco-corpo .painel-cab h3 { font-size: 1.22rem; line-height: 1.2; } .marco-corpo .painel-grade { grid-template-columns: 1fr; gap: 12px; flex: 1; } .marco-corpo .painel-seta { display: none; } .marco-corpo .col { padding: 18px 16px 6px; } .marco-corpo .col li { grid-template-columns: 22px 1fr; gap: 10px; padding: 11px 0; font-size: .92rem; line-height: 1.4; } .marco-corpo .col li .ic { width: 18px; height: 18px; } .marco-corpo .col h4 { font-size: .66rem; } @media (max-width: 1100px) { .marcos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } .marco::before { display: none; } .marco-corpo .painel-cab { min-height: 0; } } @media (max-width: 700px) { .marcos { grid-template-columns: 1fr; } } .marco-corpo .painel-cab { min-height: 116px; } @media (max-width: 1100px) { .marco-corpo .painel-cab { min-height: 0; } } /* ---------- Jornada: etapas clicáveis (versão final) ---------- */ [data-abas] .abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 0; --pf: 0; position: relative; padding-bottom: 24px; } [data-abas] .abas::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 4px; background: rgba(4,17,34,.12); } [data-abas] .abas::after { content: ""; position: absolute; left: 0; bottom: 0; top: auto; height: 4px; width: calc(25% + 75% * var(--pf)); background: var(--amarelo); transition: width .6s var(--ease); } [data-abas] .aba { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 14px; padding: 16px 18px; text-align: left; background: var(--bege); color: var(--azul); border: 0; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s var(--ease); } [data-abas] .aba:hover { transform: translateY(-3px); } [data-abas] .aba-txt { display: grid; gap: 4px; min-width: 0; } [data-abas] .aba .mini { margin: 0; } [data-abas] .aba b { max-width: none; font-size: 1.02rem; opacity: 1; line-height: 1.2; } [data-abas] .aba-no { width: 48px; height: 48px; transform: none; background: var(--branco); box-shadow: none; } [data-abas] .aba:hover .aba-no { transform: none; } [data-abas] .aba.feito .aba-no { background: var(--azul); color: var(--amarelo); } [data-abas] .aba[aria-selected="true"] { background: var(--azul); color: var(--bege); } [data-abas] .aba[aria-selected="true"] .mini { color: var(--amarelo); } [data-abas] .aba[aria-selected="true"] .aba-no { background: var(--amarelo); color: var(--azul); transform: none; } [data-abas] .aba[aria-selected="false"] b { opacity: 1; } [data-abas] .painel { padding-top: 36px; } [data-abas] .painel-cab { flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; margin-bottom: 26px; } [data-abas] .painel-cab h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); } .btn--vazio { background: transparent; box-shadow: inset 0 0 0 2px var(--azul); } .btn--vazio:hover { background: var(--azul); color: var(--bege); } .btn--vazio .ic-volta { transform: rotate(180deg); } .btn--vazio:hover .ic-volta { transform: rotate(180deg) translateX(4px); } @media (max-width: 900px) { [data-abas] .abas { gap: 8px; } [data-abas] .aba { grid-template-columns: 1fr; justify-items: center; padding: 12px 6px; } [data-abas] .aba-txt { display: none; } [data-abas] .aba-no { width: 44px; height: 44px; } } @media (max-width: 560px) { [data-abas] .painel-rodape { flex-direction: column-reverse; align-items: stretch; } [data-abas] .painel-rodape .btn { justify-content: center; } } @media (min-width: 901px) { .quem > .sec-cab:last-child { padding-top: 44px; } } .rotulo:empty { margin-bottom: -8px; } .sec-cab.quem { display: grid; grid-template-columns: 1fr; } .sec-cab.quem .lead { max-width: 80ch; } /* Blog: capas e especificação de imagem */ .post .ph--capa { aspect-ratio: 16 / 9; border-width: 0 0 2px 0; } .post-destaque .ph--escuro { min-height: 300px; aspect-ratio: auto; } .capa-artigo { margin: 0 0 clamp(32px, 5vw, 56px); } .capa-artigo .ph, .artigo figure .ph { aspect-ratio: 16 / 9; width: 100%; } .ph--img-spec .ph-in { max-width: 56ch; } .ph--img-spec span, .ph--img-spec small { max-width: none; } /* Jornada em fundo escuro, com setas entre as etapas */ .escuro [data-abas] .abas { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; } .escuro [data-abas] .abas::before { background: rgba(244,241,232,.16); } .escuro [data-abas] .aba { background: var(--azul-apoio); color: var(--bege); } .escuro [data-abas] .aba .mini { color: var(--cinza); } .escuro [data-abas] .aba-no { background: var(--azul); color: var(--amarelo); } .escuro [data-abas] .aba.feito .aba-no { background: var(--amarelo); color: var(--azul); } .escuro [data-abas] .aba[aria-selected="true"] { background: var(--amarelo); color: var(--azul); } .escuro [data-abas] .aba[aria-selected="true"] .mini { color: var(--azul); opacity: .75; } .escuro [data-abas] .aba[aria-selected="true"] .aba-no { background: var(--azul); color: var(--amarelo); } .aba-seta { display: grid; place-items: center; width: 40px; color: var(--amarelo); } .aba-seta .ic { width: 22px; height: 22px; } .escuro .painel-cab h3 { color: var(--bege); } .escuro .col--ganho { background: var(--azul-apoio); } .escuro .painel-rodape { border-top-color: var(--linha-escura); } .escuro .btn--vazio { box-shadow: inset 0 0 0 2px var(--bege); color: var(--bege); } .escuro .btn--vazio:hover { background: var(--bege); color: var(--azul); } @media (max-width: 900px) { .aba-seta { width: 20px; } .aba-seta .ic { width: 16px; height: 16px; } } .escuro .col--sinal { color: var(--azul); --cinza: rgba(4,17,34,.78); } .escuro .col--sinal li + li { border-top-color: var(--linha-clara); } /* Formulário externo (Ramper, em iframe) */ .form-embed { display: none; position: relative; min-height: 400px; } .form-embed.ativo { display: block; } .form-embed iframe { display: block; width: 100%; min-height: 400px; border: 0; background: transparent; opacity: 0; transition: opacity .4s ease; color-scheme: light; } .form-embed.pronto iframe { opacity: 1; } .form-embed-carga { position: absolute; inset: 0; display: grid; align-content: start; gap: 18px; padding-top: 4px; transition: opacity .3s ease; } .form-embed-carga span { display: block; height: 52px; background: linear-gradient(90deg, rgba(4,17,34,.06) 0 40%, rgba(4,17,34,.12) 50%, rgba(4,17,34,.06) 60% 100%) 0 0 / 250% 100%; animation: carga 1.4s linear infinite; } .form-embed-carga span:last-child { width: 40%; height: 52px; background-color: rgba(255,198,41,.5); animation: none; } .form-embed.pronto .form-embed-carga { opacity: 0; pointer-events: none; } @keyframes carga { to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .form-embed-carga span { animation: none; } } /* Jornada: setas para passar de uma etapa para a outra */ [data-abas] .painel-cab { position: relative; padding-right: 130px; min-height: 56px; } .painel-nav { position: absolute; top: 0; right: 0; display: flex; gap: 10px; } .seta-nav { width: 52px; height: 52px; display: grid; place-items: center; border: 0; cursor: pointer; background: var(--amarelo); color: var(--azul); transition: background .25s ease, color .25s ease, transform .25s var(--ease); } .seta-nav .ic { width: 22px; height: 22px; } .seta-nav:hover:not(:disabled) { background: var(--ambar); transform: translateY(-2px); } .seta-nav--volta { background: transparent; box-shadow: inset 0 0 0 2px var(--azul); } .seta-nav--volta .ic { transform: rotate(180deg); } .seta-nav--volta:hover:not(:disabled) { background: var(--azul); color: var(--amarelo); } .seta-nav:disabled { opacity: .28; cursor: default; } .seta-nav:focus-visible { outline: 3px solid rgba(255,198,41,.7); outline-offset: 2px; } @media (max-width: 560px) { [data-abas] .painel-cab { padding-right: 0; padding-top: 66px; } .painel-nav { top: 0; right: auto; left: 0; } .seta-nav { width: 48px; height: 48px; } } html:not(.js) .painel-nav { display: none; } /* Resumo das frentes: só o bloco "Resolve" em fundo escuro */ .frente-card .resolve-linha { background: var(--azul); color: var(--bege); border-top: 0; padding: 18px 20px; align-content: center; gap: 10px; } .frente-card .resolve-cab { color: var(--amarelo); } .frente-card .resolve-cab .ic { color: var(--amarelo); } .frente-card .resolve-linha { align-content: start; } .col--sinal li .ic { color: var(--azul); } #form-contato[hidden], [hidden] { display: none !important; } /* Rodapé: contatos com ícones */ .rodape-contato { display: grid; gap: 14px; } .rodape-contato p { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 0; } .rodape-contato .ic { width: 20px; height: 20px; color: var(--amarelo); margin-top: 2px; } /* Frase acima do formulário, em destaque */ .form-intro { margin: 0 0 30px; font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.22; color: var(--azul); } .form-intro::before { content: ""; display: block; width: 28px; height: 2px; background: var(--amarelo); margin-bottom: 18px; } /* "Resolve" encosta nas bordas do card (sem moldura branca) */ .frente-card { padding-bottom: 0; row-gap: 16px; } .frente-card .resolve-linha { margin: 0 -28px; padding: 22px 28px 28px; } /* Jornada: ícone das etapas sempre em azul com símbolo amarelo (a etapa aberta fica amarela) */ [data-abas] .aba-no { background: var(--azul); color: var(--amarelo); } [data-abas] .aba.feito .aba-no { background: var(--azul); color: var(--amarelo); } [data-abas] .aba[aria-selected="true"] .aba-no { background: var(--amarelo); color: var(--azul); } /* Template de artigo: especificação visível da capa dentro do banner */ .hero-artigo { position: relative; } .capa-spec { position: absolute; right: max(24px, calc((100vw - 1088px) / 2)); top: 50%; transform: translateY(-50%); width: min(380px, 38vw); display: grid; gap: 8px; justify-items: start; padding: 22px 24px; background: rgba(4,17,34,.72); box-shadow: inset 0 0 0 2px var(--amarelo); color: var(--bege); } .capa-spec .ic { width: 26px; height: 26px; color: var(--amarelo); } .capa-spec b { font-family: var(--f-texto); font-size: .9rem; font-weight: 500; color: var(--amarelo); } .capa-spec span { font-size: .88rem; line-height: 1.45; color: var(--cinza); } @media (max-width: 900px) { .capa-spec { display: none; } } /* Aviso para a equipe de design: faixa centralizada na base do banner do template */ .capa-spec { top: auto; bottom: 18px; right: auto; left: 50%; transform: translateX(-50%); width: min(780px, calc(100% - 48px)); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; justify-items: start; text-align: left; padding: 16px 20px; } .capa-spec > div { display: grid; gap: 6px; } .capa-spec span { font-size: .84rem; } .capa-spec strong { color: var(--bege); font-weight: 600; } @media (max-width: 900px) { .capa-spec { display: none; } } .hero-artigo .capa-spec { left: 0; right: 0; margin-inline: auto; transform: none; width: min(780px, 100%); } /* Logos da Home: carrossel que a pessoa pode arrastar ou avançar e voltar pelas setas */ html.js .faixa[data-carrossel] { overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; overscroll-behavior-x: contain; } html.js .faixa[data-carrossel]::-webkit-scrollbar { display: none; } html.js .faixa[data-carrossel] .faixa-trilho { animation: none; } html.js .faixa[data-carrossel] img { pointer-events: none; -webkit-user-drag: none; } .faixa.arrastando { cursor: grabbing; } .faixa-nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; } .escuro .faixa-nav .seta-nav--volta { box-shadow: inset 0 0 0 2px var(--bege); color: var(--bege); } .escuro .faixa-nav .seta-nav--volta:hover:not(:disabled) { background: var(--bege); color: var(--azul); } html:not(.js) .faixa-nav { display: none; } .logos-grid .logo-tile { padding-inline: 8px; } /* Imagens: o clique passa para o elemento de trás, então o menu do mouse não oferece "Salvar imagem como" */ img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; } .hero, .final { -webkit-touch-callout: none; } .logos-grid .logo-tile { padding-inline: 4px; } /* Índice das frentes no banner: duas linhas de dois botões */ .indice { display: grid; grid-template-columns: repeat(2, 1fr); width: fit-content; max-width: 100%; gap: 10px; } @media (max-width: 560px) { .indice { grid-template-columns: 1fr; width: 100%; } } /* Revenue Activation: ofertas em abas, uma por vez */ .escuro [data-abas] .abas.abas--ofertas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .abas-ofertas .painel { padding-top: 28px; } .abas-ofertas .painel-nav--base { position: static; justify-content: flex-end; margin-top: 18px; } .abas-ofertas .oferta { margin: 0; } @media (max-width: 900px) { .escuro [data-abas] .abas.abas--ofertas { gap: 8px; } } /* Logos da Home: mesma distância entre um logo e o próximo, qualquer que seja a largura do logo */ .faixa .logo-tile { width: auto; padding-inline: clamp(28px, 3.4vw, 52px); } .faixa-trilho { gap: 0; } .entra .se { display: flex; align-items: center; } /* Fundadores: título e texto na mesma coluna das fotos; citação alinhada ao topo das fotos */ .fundadores-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 88px); row-gap: clamp(28px, 4vw, 44px); align-items: stretch; } .fundadores-grade > .sec-cab { grid-column: 1; grid-row: 1; margin: 0; } .fundadores-grade > .fixo { grid-column: 1; grid-row: 2; } .fundadores-grade > .citacao { grid-column: 2; grid-row: 2; } @media (max-width: 900px) { .fundadores-grade { grid-template-columns: 1fr; } .fundadores-grade > .sec-cab, .fundadores-grade > .fixo, .fundadores-grade > .citacao { grid-column: 1; grid-row: auto; } } /* Abas (jornada e ofertas) em telas menores: ícone e nome, em duas colunas, nunca só o ícone */ @media (max-width: 900px) { [data-abas] .abas, .escuro [data-abas] .abas.abas--ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } [data-abas] .aba { grid-template-columns: auto minmax(0, 1fr); justify-items: start; padding: 12px 14px; gap: 12px; } [data-abas] .aba-txt { display: grid; } [data-abas] .aba b { font-size: .92rem; } [data-abas] .aba-no { width: 44px; height: 44px; } } @media (max-width: 560px) { [data-abas] .aba { grid-template-columns: 1fr; gap: 10px; } } /* Território Vuno: "Você sai com" em faixa azul no pé do cartão, igual ao "Resolve" */ .grade > .card:has(> .dado) { align-content: stretch; padding-bottom: 0; } .card > .dado:last-child { background: var(--azul); color: var(--bege); margin: auto -28px 0; padding: 22px 28px 28px; } .card > .dado:last-child b { color: var(--amarelo); } .card > .dado:last-child span { color: var(--bege); } /* Número em destaque no lugar do ícone (caixa amarela, como nos demais números do site) */ .num-destaque { display: inline-grid; place-items: center; justify-self: start; min-width: 56px; height: 56px; padding: 0 14px; background: var(--amarelo); color: var(--azul); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } /* Nosso time: o nome fica na mesma linha do ícone */ .card-topo--nome { justify-content: flex-start; gap: 16px; } .card-topo--nome h3 { margin: 0; } .num-destaque { background: var(--azul); color: var(--amarelo); } /* Seta de voltar sempre visível em fundo escuro */ .escuro .seta-nav--volta { background: transparent; color: var(--bege); box-shadow: inset 0 0 0 2px var(--bege); } .escuro .seta-nav--volta:hover:not(:disabled) { background: var(--bege); color: var(--azul); } .escuro .seta-nav--volta:disabled { opacity: .3; } /* Território Vuno: linhas alinhadas entre os quatro cartões, para a faixa azul ter a mesma altura em todos */ .grade.g4 > .card:has(> .dado:last-child) { grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; } .grade.g4 > .card:has(> .dado:last-child) > .dado:last-child { margin: 6px -28px 0; align-content: start; } /* ---------- Consistência tipográfica (auditoria) ---------- */ /* Título principal da Home com o mesmo tamanho dos banners das demais páginas */ .hero--home h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); } /* Escala de títulos de cartão: 23,2 px (cartão), 20,8 px (artigo), 19,2 px (compacto) */ .estagio h3, .pessoa-nome h3, .pessoa h3 { font-size: 1.2rem; } /* Textos pequenos de cartão: um único tamanho (15,68 px) */ .estagio p, .vcard p, .tl-card p { font-size: .98rem; } /* Texto dos cartões escuros V-U-N-O igual em todas as páginas */ .vcard p { color: rgba(244, 241, 232, .8); } /* Rodapé: links de navegação e de contato no mesmo tamanho */ .rodape ul a, .rodape address, .rodape address a { font-size: .95rem; } /* Botões: mesma altura de linha em e