/* ========================================================================== SOU Consultoria — sistema visual da LP do Diagnóstico Organizacional -------------------------------------------------------------------------- Cor: as quatro cores do manual da marca, sem inventar nenhuma quinta. 01 verde escuro #2D3526 · 02 verde claro #525C44 03 bege #979682 · 04 branco gelo #DADFD9 O bege e o branco gelo do manual não passam em contraste como TEXTO pequeno sobre fundo claro (2,6:1 e 1,2:1). Por isso existem duas variações de uso — `--bege-texto` (escurecida) e `--gelo-texto` (clareada) — usadas só quando a cor precisa carregar letra. Nas superfícies, molduras e ícones as cores do manual entram puras. ========================================================================== */ :root{ --verde:#2D3526; /* 01 — texto, fundos escuros, CTA */ --verde-medio:#525C44; /* 02 — acento, hover, eyebrow */ --bege:#979682; /* 03 — molduras, ícones, detalhes */ --gelo:#DADFD9; /* 04 — fundo de respiro, texto sobre escuro */ --bege-texto:#6E6D5B; /* bege escurecido: 5,3:1 sobre o papel */ --gelo-texto:#C3CBC1; /* gelo suavizado p/ corpo sobre o verde */ --papel:#F7F8F5; /* fundo base */ --papel-2:#EFF1EC; /* seções alternadas */ --branco:#FDFDFC; /* cards sobre o papel */ --titulo:#232A1D; /* títulos: verde levado ao quase-preto */ --texto:#3E4636; /* parágrafos */ --apoio:#5A6151; /* textos de apoio */ --legenda:#6E7566; /* legendas e notas */ --linha:rgba(45,53,38,.13); --linha-forte:rgba(45,53,38,.22); --linha-clara:rgba(218,223,217,.20); /* espaço — 8 · 14 · 20 · 28 · 40 · 56 · 80 · 110 · 150 */ --e1:8px; --e2:14px; --e3:20px; --e4:28px; --e5:40px; --e6:56px; --e7:80px; --e8:110px; --e9:150px; --secao:112px; --largura:1160px; --margem:56px; --r-pill:999px; --r-card:14px; --r-painel:22px; --sombra:0 1px 2px rgba(35,42,29,.04), 0 10px 28px rgba(35,42,29,.06); --sombra-alta:0 2px 5px rgba(35,42,29,.06), 0 20px 46px rgba(35,42,29,.10); --micro:180ms; --hover:280ms; --entrada:700ms; --easing:cubic-bezier(.22,1,.36,1); } @media (max-width:900px){ :root{ --secao:72px; --margem:20px; --r-painel:18px; } } *,*::before,*::after{ box-sizing:border-box; } figure,blockquote,dl,dd{ margin:0; } /* O fundo do é o que aparece no "rubber band" — quando se puxa além do topo ou do fim da página no Mac/iPhone. Verde escuro para parecer que o hero e o rodapé continuam, e não uma tarja clara. O body mantém o papel. `overflow-x:clip` nos dois: o `hidden` só no body não segura o iOS Safari, e `clip` (ao contrário de `hidden`) não quebra `position:sticky`. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; background:var(--verde); overflow-x:hidden; overflow-x:clip; } body{ margin:0; background:var(--papel); color:var(--texto); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:400; font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; } img,svg{ max-width:100%; display:block; } ::selection{ background:var(--verde); color:var(--gelo); } :focus-visible{ outline:2px solid var(--verde-medio); outline-offset:3px; border-radius:4px; } /* --------------------------------------------------------------- tipografia */ .display,.h2,.h3,.citacao{ color:var(--titulo); margin:0; } .display,.h2,.citacao{ font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif; font-weight:300; } .display{ font-size:clamp(38px,5.2vw,62px); line-height:1.06; letter-spacing:-.015em; } .h2{ font-size:clamp(31px,3.8vw,47px); line-height:1.12; letter-spacing:-.01em; } .citacao{ font-size:clamp(23px,2.7vw,32px); line-height:1.34; } .citacao em{ font-style:italic; } /* h3 e títulos de card ficam na Inter: seguram o tom de negócio da página */ .h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:clamp(18px,1.6vw,20px); line-height:1.35; letter-spacing:-.01em; } .corpo{ font-size:17px; line-height:1.78; color:var(--texto); max-width:60ch; margin:0; } .apoio{ font-size:16px; line-height:1.72; color:var(--apoio); max-width:62ch; margin:0; } .legenda{ font-size:13.5px; line-height:1.6; color:var(--legenda); margin:0; } .forte{ color:var(--titulo); font-weight:600; } .eyebrow{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--bege-texto); margin:0; } /* ------------------------------------------------------------------- layout */ .wrap{ max-width:var(--largura); margin-inline:auto; padding-inline:var(--margem); } .secao{ padding-block:var(--secao); overflow-x:clip; } .secao--papel2{ background:var(--papel-2); } .centro{ text-align:center; } .centro .corpo,.centro .apoio,.centro .legenda{ margin-inline:auto; } /* px, e não ch: `ch` seria medido na Inter do contentor e não na serifada do título, o que espremia os H2 numa coluna de ~300px. */ .cab{ max-width:680px; } .centro .cab,.cab.centro{ margin-inline:auto; } .cab .h2{ margin-top:var(--e3); } .cab .corpo{ margin-top:var(--e3); } /* ---------------------------------------------------------- tema escuro */ .escuro{ background:var(--verde); color:var(--gelo-texto); } .escuro .display,.escuro .h2,.escuro .h3,.escuro .citacao{ color:var(--gelo); } .escuro .corpo,.escuro .apoio{ color:var(--gelo-texto); } .escuro .legenda{ color:#9AA396; } .escuro .forte{ color:var(--gelo); } .escuro .eyebrow{ color:var(--bege); } .escuro .badge{ border-color:var(--linha-clara); background:rgba(218,223,217,.06); color:var(--gelo); } .escuro .card{ background:rgba(218,223,217,.05); border-color:var(--linha-clara); box-shadow:none; } .escuro .card:hover{ border-color:rgba(151,150,130,.5); background:rgba(218,223,217,.08); } .escuro .card__icone{ border-color:var(--linha-clara); color:var(--bege); } .escuro .card p{ color:var(--gelo-texto); } /* ------------------------------------------------------------------ badge */ .badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border:1px solid var(--linha); border-radius:var(--r-pill); background:rgba(253,253,252,.7); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--bege-texto); font-weight:600; } .badge--solido{ background:var(--verde); border-color:var(--verde); color:var(--gelo); } /* ------------------------------------------------------------------ botões */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 var(--e5); font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; letter-spacing:.005em; border:1px solid var(--verde); border-radius:var(--r-pill); cursor:pointer; text-decoration:none; text-align:center; transition:background var(--hover) ease,color var(--hover) ease, border-color var(--hover) ease,transform var(--hover) var(--easing); } .btn:hover{ transform:translateY(-2px); } .btn--primario{ background:var(--verde); color:var(--gelo); } .btn--primario:hover{ background:var(--verde-medio); border-color:var(--verde-medio); } .btn--secundario{ background:transparent; color:var(--verde); } .btn--secundario:hover{ background:var(--verde); color:var(--gelo); } .btn--claro{ background:var(--gelo); color:var(--verde); border-color:var(--gelo); } .btn--claro:hover{ background:var(--branco); border-color:var(--branco); } .btn--pequeno{ min-height:44px; padding:0 var(--e4); font-size:13.5px; } .btn--largo{ width:100%; } .btn svg{ width:18px; height:18px; flex:none; } .btn[disabled]{ opacity:.55; pointer-events:none; } /* ------------------------------------------------------- cards e painéis */ .card{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-card); padding:var(--e4); box-shadow:var(--sombra); transition:transform var(--hover) var(--easing), box-shadow var(--hover) ease, border-color var(--hover) ease; } .card:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--linha-forte); } .card__icone{ width:40px; height:40px; display:grid; place-items:center; margin-bottom:var(--e3); border:1px solid var(--linha); border-radius:var(--r-pill); color:var(--verde-medio); } .card__icone svg{ width:18px; height:18px; } .card p{ margin:0; font-size:16px; line-height:1.66; color:var(--texto); } .card .h3 + p{ margin-top:10px; } .painel{ background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-painel); padding:clamp(26px,4vw,52px); box-shadow:var(--sombra); } .chip{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-pill); font-size:14px; color:var(--texto); } .chip svg{ width:15px; height:15px; flex:none; color:var(--verde-medio); } /* linha fina de assinatura da marca — eco do traço que liga o S ao O do logo */ .tracinho{ width:56px; height:1px; background:var(--bege); border:0; margin:0; } .centro .tracinho{ margin-inline:auto; } /* ---------------------------------------------------------------- movimento */ /* Entrada por revelação. `.sobe` é o padrão (sobe e aparece); as variações mudam só a direção de onde vem. O atraso é escalonado por classe d1..d6 ou, em listas geradas, pela variável --d que o JS escreve em cada item. */ .sobe{ opacity:0; transform:translateY(22px); transition:opacity var(--entrada) var(--easing), transform var(--entrada) var(--easing); transition-delay:var(--d, 0ms); will-change:opacity, transform; } .sobe--esq{ transform:translateX(-18px); } .sobe--dir{ transform:translateX(18px); } .sobe--zoom{ transform:scale(.96); } .sobe--nada{ transform:none; } .sobe.vis{ opacity:1; transform:none; } .sobe.vis{ will-change:auto; } .d1{ --d:80ms; } .d2{ --d:160ms; } .d3{ --d:240ms; } .d4{ --d:320ms; } .d5{ --d:400ms; } .d6{ --d:480ms; } /* Pulso do botão flutuante: um halo que sai do botão, sem mexer no layout. Fica em ::after para o hover do próprio botão continuar livre. */ @keyframes pulso{ 0% { box-shadow:0 0 0 0 rgba(45,53,38,.42); } 70% { box-shadow:0 0 0 16px rgba(45,53,38,0); } 100% { box-shadow:0 0 0 0 rgba(45,53,38,0); } } @keyframes pulso-claro{ 0% { box-shadow:0 0 0 0 rgba(218,223,217,.45); } 70% { box-shadow:0 0 0 16px rgba(218,223,217,0); } 100% { box-shadow:0 0 0 0 rgba(218,223,217,0); } } .pulsa{ animation:pulso 2.4s cubic-bezier(.66,0,0,1) infinite; } .pulsa--claro{ animation-name:pulso-claro; } /* o pulso pára enquanto o ponteiro está em cima: hover e halo competindo deixavam o botão inquieto na hora exata do clique */ .pulsa:hover{ animation-play-state:paused; } @keyframes surge{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } @keyframes aparece{ from{ opacity:0; } to{ opacity:1; } } .girando{ width:15px; height:15px; border-radius:50%; display:inline-block; border:2px solid currentColor; border-top-color:transparent; animation:girar .8s linear infinite; } @keyframes girar{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .sobe,.sobe.vis{ opacity:1; transform:none; transition:none; } .pulsa{ animation:none; } .btn:hover,.card:hover{ transform:none; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }