/* ========================================================================== Stack Brasil: sistema de movimento Regra: o movimento responde ao leitor (rolagem, ponteiro, foco). Nada se mexe sozinho. So transform e opacity. Reduce Motion honrado. ========================================================================== */ :root { --mo-fast: 140ms; --mo-base: 260ms; --mo-slow: 420ms; --mo-ease: cubic-bezier(.22, .61, .36, 1); --mo-rise: 10px; } /* -------------------------------------------------------------------------- 1. ENTRADA POR ROLAGEM O bloco sobe um degrau e ganha opacidade quando entra em cena. -------------------------------------------------------------------------- */ [data-mo] { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); transition: opacity var(--mo-slow) var(--mo-ease), transform var(--mo-slow) var(--mo-ease); will-change: opacity, transform; } [data-mo].mo-in { opacity: 1; transform: none; will-change: auto; } /* escalonamento: cada irmao entra um pouco depois do anterior */ [data-mo][style*="--mo-d"] { transition-delay: var(--mo-d, 0ms); } /* -------------------------------------------------------------------------- 2. BARRA DE LEITURA Fina, no topo, cresce conforme a pagina avanca. So em pagina de conteudo. -------------------------------------------------------------------------- */ .mo-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none; background: transparent; } .mo-progress__bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--wp--preset--color--carmim, #c0392b); transition: transform 90ms linear; } /* -------------------------------------------------------------------------- 3. CABECALHO QUE REAGE Ao descer, encosta: ganha filete e uma sombra tingida minima. Ao subir, volta a ficar solto. -------------------------------------------------------------------------- */ .sb-header { transition: box-shadow var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease), } .sb-header.mo-stuck { box-shadow: 0 1px 0 rgba(26, 26, 26, .06), 0 6px 20px -12px rgba(26, 26, 26, .22); } /* -------------------------------------------------------------------------- 4. HOVER COREOGRAFADO O hover sobe um degrau de contraste. Nunca e so cosmetico. -------------------------------------------------------------------------- */ .sb-card { transition: transform var(--mo-base) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease); } .sb-card:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 1px 2px rgba(26, 26, 26, .04), 0 10px 24px -14px rgba(26, 26, 26, .20); } .sb-card__title a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size var(--mo-base) var(--mo-ease); text-decoration: none; padding-bottom: 1px; } .sb-card:hover .sb-card__title a, .sb-card__title a:hover, .sb-card__title a:focus-visible { background-size: 100% 1px; } /* filete que cresce em qualquer link de conteudo */ .sb-article__body a:not(.sb-btn), .sb-doc a:not(.sb-btn), .sb-footer a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease); } .sb-article__body a:not(.sb-btn):hover, .sb-doc a:not(.sb-btn):hover, .sb-footer a:hover { background-size: 100% 1px; } /* navegacao do topo */ .sb-header__nav a { position: relative; transition: color var(--mo-fast) var(--mo-ease); } .sb-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--wp--preset--color--carmim, #c0392b); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mo-base) var(--mo-ease); } .sb-header__nav a:hover::after, .sb-header__nav a:focus-visible::after, .sb-header__nav a[aria-current]::after { transform: scaleX(1); } /* botoes */ .sb-btn { transition: transform var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease); } .sb-btn:hover { transform: translate3d(0, -1px, 0); } .sb-btn:active { transform: translate3d(0, 0, 0); } /* linha de tabela e item de lista respondem ao ponteiro */ .sb-article__body tbody tr, .sb-doc tbody tr { transition: background-color var(--mo-fast) var(--mo-ease); } .sb-article__body tbody tr:hover, .sb-doc tbody tr:hover { background-color: rgba(192, 57, 43, .04); } /* -------------------------------------------------------------------------- 5. FOCO DESENHADO Teclado e cidadao de primeira classe: o foco e visivel e tem forma. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--wp--preset--color--carmim, #c0392b); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 6. DETALHES QUE ABREM -------------------------------------------------------------------------- */ details summary { cursor: pointer; transition: color var(--mo-fast) var(--mo-ease); } details[open] > summary { color: var(--wp--preset--color--carmim, #c0392b); } /* -------------------------------------------------------------------------- 7. RESPEITO A PREFERENCIA DO SISTEMA Quem pediu menos movimento recebe zero movimento. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-mo] { opacity: 1 !important; transform: none !important; transition: none !important; } .mo-progress { display: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- CORRECAO DE CONTRASTE NO RODAPE O tema define `strong { color: var(--c-tinta) }` (#1a1a1a), que e a MESMA cor de fundo do rodape. Qualquer ali virava texto invisivel (contraste 1,14:1). Aqui o negrito volta a herdar a cor do bloco. -------------------------------------------------------------------------- */ .sb-footer strong, .sb-footer__aviso strong, .sb-footer__methodology strong, .sb-footer__col strong { color: inherit; } .sb-footer__col p { color: var(--c-300); } .sb-footer img { max-width: 200px; height: auto; } /* -------------------------------------------------------------------------- LOGO QUE HERDA A COR DO CONTEXTO Uma logo so para o site inteiro. O texto usa currentColor, entao no topo (fundo claro) sai escuro e no rodape (fundo escuro) sai claro. Acaba a classe de erro de "logo certa no fundo errado". -------------------------------------------------------------------------- */ .sb-logo { display: block; height: auto; aspect-ratio: 4 / 1; } .sb-header__logo { display: inline-flex; align-items: center; color: var(--c-tinta, #1a1a1a); } .sb-header__logo .sb-logo { width: 180px; } .sb-footer .sb-logo { width: 210px; color: var(--c-300, #d4d4d4); } .sb-footer__col > .sb-logo { margin-bottom: 16px; } @media (max-width: 768px) { .sb-header__logo .sb-logo { width: 150px; } .sb-footer .sb-logo { width: 180px; } } /* -------------------------------------------------------------------------- FIM DO PULO ENTRE PAGINAS Pagina curta (home) nao pede barra de rolagem; pagina longa (ranking) pede. Ao trocar de uma para outra, a barra some e o conteudo inteiro desloca cerca de 15px para o lado: e a "logo pulando de lugar". `scrollbar-gutter: stable` reserva esse espaco SEMPRE, tenha barra ou nao. O fallback (min-height) garante barra em navegador sem suporte. -------------------------------------------------------------------------- */ html { scrollbar-gutter: stable; overflow-y: scroll; /* fallback: barra sempre presente */ } body { overflow-x: hidden; } @supports (scrollbar-gutter: stable) { html { overflow-y: auto; } }