perf(movimento): sem tempo morto, vídeos regravados e 3D sem React Three Fiber
Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
f8545cd442
commit
6ac87824f3
68 files changed
+5735
-3300
No files matched your search
+94
-389
@@ -52,6 +52,12 @@
|
||||
--shell: clamp(1240px, 76vw, 1760px);
|
||||
--fs-section-title: min(max(clamp(24px, 4vw, 44px), 3.05vw), 68px);
|
||||
--fs-lead: min(max(15px, 1.05vw), 19px);
|
||||
/* Piso do texto corrido em qualquer tela. Só os rótulos mono curtos (.ds-eyebrow, .ds-kicker, .ds-tag,
|
||||
.ds-metric) descem a 12 px. */
|
||||
--fs-body: 15px;
|
||||
/* Dois pesos de título, e só: seção (h1 e h2) e cartão (h3 e menores). */
|
||||
--fw-section: 700;
|
||||
--fw-card: 600;
|
||||
--font-display: var(--font-space-grotesk), sans-serif;
|
||||
--font-mono: var(--font-geist-mono), monospace;
|
||||
--font-body: var(--font-display);
|
||||
@@ -72,6 +78,20 @@
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* O preflight deixa os títulos herdarem o peso do corpo (400); aqui cada um nasce num dos dois pesos. Fica na
|
||||
camada base: classes e utilitários de um componente ainda mandam. */
|
||||
h1,
|
||||
h2 {
|
||||
font-weight: var(--fw-section);
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: var(--fw-card);
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -93,39 +113,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.site-header-nav,
|
||||
.site-header-cv,
|
||||
.site-header-version {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-header-menu-toggle,
|
||||
.site-header-mobile-panel {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.site-header-menu-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex: 0 0 44px;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.site-header-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.site-header-cv,
|
||||
.site-header-version {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.site-header-menu-toggle,
|
||||
.site-header-mobile-panel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
@@ -157,6 +144,12 @@ html {
|
||||
box-shadow: 0 0 0 6px var(--slash);
|
||||
}
|
||||
|
||||
/* O contêiner da página só recebe foco por código (o link "Pular" e a troca de página, em app/template.tsx): ele
|
||||
não é um controle, então não desenha anel em volta do conteúdo inteiro. */
|
||||
#main-content:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.film-grain {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -195,7 +188,7 @@ body {
|
||||
color: var(--ink);
|
||||
/* sans por padrão: a mono é só dos rótulos (.ds-eyebrow, .ds-kicker, .ds-tag...), que a pedem à parte */
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
@@ -212,15 +205,7 @@ svg {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
:where(
|
||||
.ds-eyebrow,
|
||||
.ds-kicker,
|
||||
.ds-tag,
|
||||
.ds-metric,
|
||||
.quality-code,
|
||||
.quality-hint,
|
||||
.quality-disclaimer
|
||||
) {
|
||||
:where(.ds-eyebrow, .ds-kicker, .ds-tag, .ds-metric) {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
@@ -243,24 +228,6 @@ textarea {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.bg-grid {
|
||||
background-image:
|
||||
linear-gradient(rgba(10, 10, 10, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
.bg-grid-light {
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
.ds-main {
|
||||
/* no top padding needed */
|
||||
}
|
||||
|
||||
.ds-section {
|
||||
padding: clamp(72px, 9vw, 112px) clamp(24px, 6vw, 64px);
|
||||
background: var(--paper);
|
||||
@@ -348,7 +315,7 @@ textarea {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--fs-section-title);
|
||||
line-height: 1.02;
|
||||
font-weight: 800;
|
||||
font-weight: var(--fw-section);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
@@ -359,51 +326,26 @@ textarea {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.ds-grid-2,
|
||||
.ds-grid-4 {
|
||||
.ds-grid-2 {
|
||||
display: grid;
|
||||
gap: var(--sp-6);
|
||||
}
|
||||
|
||||
.ds-grid-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
/* Colunas automáticas: sem breakpoint. Cabem 2 até ~1360px de largura útil e 3 acima disso. */
|
||||
.ds-grid-fluid {
|
||||
display: grid;
|
||||
gap: var(--sp-6);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
|
||||
}
|
||||
|
||||
.ds-grid-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.ds-card,
|
||||
.ds-panel {
|
||||
.ds-card {
|
||||
border: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ds-card {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
padding: clamp(20px, 3vw, 28px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ds-panel {
|
||||
background: rgba(10, 10, 10, 0.03);
|
||||
padding: var(--sp-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ds-card-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(16px, 2.4vw, 30px);
|
||||
line-height: 1.08;
|
||||
font-weight: var(--fw-card);
|
||||
letter-spacing: -0.025em;
|
||||
margin-top: var(--sp-4);
|
||||
}
|
||||
@@ -544,15 +486,26 @@ textarea {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
/* O preflight do Tailwind zera o list-style de ul/ol: o marcador volta aqui. Na cor do texto (o lima sobre o
|
||||
creme some); no fundo escuro, o lima. Uma lista numerada (list-decimal) ou outra marca vence por vir depois. */
|
||||
.ds-list {
|
||||
margin-top: var(--sp-5);
|
||||
padding-left: 18px;
|
||||
list-style: disc outside;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
ol.ds-list {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.ds-list li::marker {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.ds-section-dark .ds-list li::marker {
|
||||
color: var(--slash);
|
||||
}
|
||||
|
||||
@@ -566,8 +519,7 @@ textarea {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.ds-section-dark .ds-card,
|
||||
.ds-section-dark .ds-panel {
|
||||
.ds-section-dark .ds-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
@@ -606,135 +558,6 @@ textarea {
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee-reverse {
|
||||
from {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-velocity-text {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.scroll-velocity-viewport {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll-velocity-track,
|
||||
.scroll-velocity-group {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.scroll-velocity-group {
|
||||
flex-shrink: 0;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
.scroll-velocity-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(3rem, 10vw, 8rem);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.scroll-velocity-dot {
|
||||
margin-inline: var(--sp-8);
|
||||
color: var(--slash);
|
||||
}
|
||||
|
||||
.animate-marquee {
|
||||
animation: marquee 40s linear infinite;
|
||||
}
|
||||
|
||||
.animate-marquee-reverse {
|
||||
animation: marquee-reverse 45s linear infinite;
|
||||
}
|
||||
|
||||
.scroll-velocity-text:hover .scroll-velocity-track,
|
||||
.scroll-velocity-text:focus-within .scroll-velocity-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.scroll-velocity-control {
|
||||
position: absolute;
|
||||
top: var(--sp-2);
|
||||
right: var(--sp-3);
|
||||
z-index: 1;
|
||||
min-height: 44px;
|
||||
border: 1px solid rgba(244, 242, 237, 0.5);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding-inline: var(--sp-3);
|
||||
font-family: var(--font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scroll-velocity-text {
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.scroll-velocity-track {
|
||||
animation: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.scroll-velocity-viewport {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.scroll-velocity-track,
|
||||
.scroll-velocity-group {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-velocity-group {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.scroll-velocity-group[aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scroll-velocity-item {
|
||||
display: block;
|
||||
padding: var(--sp-6);
|
||||
font-size: clamp(2rem, 8vw, 4rem);
|
||||
line-height: 1.1;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.scroll-velocity-dot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
@@ -751,35 +574,17 @@ textarea {
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.site-header-nav,
|
||||
.site-header-cv,
|
||||
.site-header-version {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-header-menu-toggle,
|
||||
.site-header-mobile-panel {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ds-section-header {
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.ds-grid-2,
|
||||
.ds-grid-4 {
|
||||
.ds-grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* texto corrido de no mínimo 15 px no celular (o que não traz tamanho próprio herda daqui); só os rótulos mono
|
||||
curtos (.ds-eyebrow, .ds-tag, .ds-metric) ficam em 12 */
|
||||
body {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ds-section {
|
||||
padding: clamp(52px, 13vw, 64px) 20px;
|
||||
}
|
||||
@@ -817,129 +622,6 @@ textarea {
|
||||
CINEMATIC STYLES - Awwwards Level
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
/* Section divider animations */
|
||||
@keyframes shimmerDivider {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseDot {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-divider-gradient {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-divider-gradient span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, var(--slash), transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.section-divider-gradient span:last-child {
|
||||
animation: shimmerDivider 3s ease-in-out infinite;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.section-divider-pulse {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-2);
|
||||
padding-block: var(--sp-8);
|
||||
}
|
||||
|
||||
.section-divider-pulse span {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: var(--slash);
|
||||
animation: pulseDot 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.section-divider-pulse span:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.section-divider-pulse span:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.section-divider-pulse span:nth-child(4) {
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
.section-divider-pulse span:nth-child(5) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.section-divider-waveform {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
color: var(--slash);
|
||||
}
|
||||
|
||||
.section-divider-waveform svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.section-divider-waveform path {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.section-divider-waveform path:nth-child(1) {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.section-divider-waveform path:nth-child(2) {
|
||||
opacity: 0.07;
|
||||
}
|
||||
|
||||
.section-divider-waveform path:nth-child(3) {
|
||||
opacity: 0.04;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.section-divider-gradient span:last-child,
|
||||
.section-divider-pulse span {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero: brilho de fundo e entrada em CSS (so posicao; o texto ja nasce visivel para o LCP) */
|
||||
.hero-glow {
|
||||
position: absolute;
|
||||
@@ -970,6 +652,14 @@ textarea {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Abaixo de 1024 px o palco tem a altura do conteúdo: sem faixa vazia sob os botões e a faixa de clientes (o
|
||||
mergulho, mais abaixo, só roda onde a tela é larga o bastante e dá ao palco 100svh por conta própria). */
|
||||
@media (max-width: 1023px) {
|
||||
.hero-stage {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Máscara dos fundos ambientes do hero (cena 3D e malha estática): transparente no miolo, onde ficam o título
|
||||
e as molduras da direita, e opaca nas bordas e cantos. Com o mergulho (--hero-open 0 → 1) o miolo some e o
|
||||
fundo aparece inteiro, quando o texto e a coluna da direita já saíram de cena. */
|
||||
@@ -1044,6 +734,10 @@ textarea {
|
||||
|
||||
/* Entrada: as palavras do título já pintam no primeiro quadro (sem opacity:0, bom para o LCP) e sobem em cascata
|
||||
(só deslocamento: desfocar texto grande a cada quadro obriga a redesenhá-lo) */
|
||||
.hero-title {
|
||||
font-weight: var(--fw-section);
|
||||
}
|
||||
|
||||
.hero-word {
|
||||
display: inline-block;
|
||||
animation: hero-word 1.1s var(--ease-out) both;
|
||||
@@ -1117,15 +811,16 @@ textarea {
|
||||
}
|
||||
|
||||
@media (min-height: 700px) and (prefers-reduced-motion: no-preference) {
|
||||
/* O palco (100svh, preso) fica parado durante o mergulho e mais uma tela: nela Projetos sobe sobre ele, com
|
||||
margin-top de -100svh. A cena acaba de frente para os dados e Projetos a cobre: nunca uma tela vazia entre o
|
||||
mergulho e a seção seguinte (HeroField.tsx usa a mesma conta: o progresso acaba quando Projetos começa a subir). */
|
||||
/* O palco (100svh, preso) fica parado durante o mergulho e por mais 70svh: nesse trecho Projetos sobe sobre ele, com
|
||||
margin-top de -70svh. A cena acaba de frente para os dados, a última legenda fica até Projetos cobri-la, e
|
||||
nunca há uma tela vazia entre o mergulho e a seção seguinte (HeroField.tsx usa a mesma conta: o progresso
|
||||
acaba quando Projetos começa a subir, 1,7 tela antes do fim do hero). */
|
||||
.hero[data-dive] {
|
||||
height: calc(200svh + var(--hero-dive));
|
||||
height: calc(170svh + var(--hero-dive));
|
||||
|
||||
& + .ds-section {
|
||||
position: relative;
|
||||
margin-top: -100svh;
|
||||
margin-top: -70svh;
|
||||
box-shadow: 0 -32px 64px -24px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
@@ -1139,11 +834,13 @@ textarea {
|
||||
padding: 0 var(--sp-6) 11svh;
|
||||
list-style: none;
|
||||
pointer-events: none;
|
||||
/* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena */
|
||||
/* faixa escura atrás da legenda, como em legenda de cinema, sem cobrir o centro da cena. O bloco entra
|
||||
enquanto o texto do hero sai e nunca sai sozinho: ao fim do mergulho a legenda dos dados fica até Projetos
|
||||
subir e cobri-la (nenhuma janela de meia tela sem texto). */
|
||||
background: linear-gradient(0deg, rgba(10, 10, 10, 0.75), transparent 38%);
|
||||
opacity: clamp(
|
||||
0,
|
||||
min((var(--hero-p) - 0.24) * 14, (0.94 - var(--hero-p)) * 14),
|
||||
min((var(--hero-p) - 0.08) * 14, (1.1 - var(--hero-p)) * 14),
|
||||
1
|
||||
);
|
||||
|
||||
@@ -1152,7 +849,9 @@ textarea {
|
||||
grid-area: 1 / 1;
|
||||
max-width: 26ch;
|
||||
color: #f4f2ed;
|
||||
font: 600 clamp(24px, 2.8vw + 12px, 48px) / 1.12 var(--font-display);
|
||||
font:
|
||||
var(--fw-card) clamp(24px, 2.8vw + 12px, 48px) / 1.12
|
||||
var(--font-display);
|
||||
letter-spacing: -0.035em;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 40px rgba(10, 10, 10, 0.9);
|
||||
@@ -1169,20 +868,22 @@ textarea {
|
||||
translate: 0 calc((var(--hero-p) - var(--mid)) * -160px);
|
||||
}
|
||||
|
||||
/* mesmos intervalos em que a câmera enquadra cada camada (cameraFrames em HeroFieldScene.tsx) */
|
||||
/* Intervalos em que a câmera enquadra cada camada (cameraFrames em HeroFieldScene.tsx), com folga: cada
|
||||
legenda entra um pouco antes de a câmera chegar e sai um pouco depois de ela partir, para o intervalo sem
|
||||
texto entre uma e outra ser de uns 80 px de rolagem. A última passa de 1 para ficar em cena até o fim. */
|
||||
& li:nth-child(1) {
|
||||
--from: 0.26;
|
||||
--to: 0.46;
|
||||
--from: 0.18;
|
||||
--to: 0.49;
|
||||
}
|
||||
|
||||
& li:nth-child(2) {
|
||||
--from: 0.52;
|
||||
--to: 0.71;
|
||||
--from: 0.51;
|
||||
--to: 0.75;
|
||||
}
|
||||
|
||||
& li:nth-child(3) {
|
||||
--from: 0.76;
|
||||
--to: 0.92;
|
||||
--from: 0.79;
|
||||
--to: 1.07;
|
||||
}
|
||||
|
||||
& .hero-caption-title {
|
||||
@@ -1210,12 +911,6 @@ textarea {
|
||||
opacity: calc(1 - var(--hero-p) * 5);
|
||||
}
|
||||
|
||||
/* a coluna da direita (molduras) sai junto com o texto: o fundo 3D se abre sem passar atrás dela */
|
||||
& .hero-aside {
|
||||
transform: translate3d(0, calc(var(--hero-p) * -10vh), 0);
|
||||
opacity: calc(1 - var(--hero-p) * 4.2);
|
||||
}
|
||||
|
||||
& .hero-scrim {
|
||||
opacity: calc(1 - var(--hero-p) * 1.4);
|
||||
}
|
||||
@@ -1285,7 +980,19 @@ html.lenis {
|
||||
}
|
||||
|
||||
/* Navegação entre páginas (app/template.tsx liga as transições de visualização do React): a página atual
|
||||
recua e desfoca, a nova chega de baixo. O cabeçalho tem nome próprio e fica parado durante a troca. */
|
||||
recua e some, a nova chega de baixo. Sem desfoque e sem sobreposição (a nova só começa quando a antiga acabou de
|
||||
sumir), e o fundo (html e body) fica escuro (--ink) enquanto dura a troca: cada página some e vem de um fundo só,
|
||||
nunca de uma mistura de creme com preto. O cabeçalho tem nome próprio e fica parado durante a troca. */
|
||||
/* biome-ignore lint/correctness/noUnknownPseudoClass: :active-view-transition é do CSS de transições de visualização (Chrome 134+); Biome ainda não o conhece */
|
||||
html:active-view-transition {
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownPseudoClass: idem */
|
||||
html:active-view-transition body {
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
view-transition-name: site-header;
|
||||
}
|
||||
@@ -1301,19 +1008,18 @@ html.lenis {
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-old(page) {
|
||||
animation: page-out 280ms cubic-bezier(0.7, 0, 0.84, 0) both;
|
||||
animation: page-out 240ms cubic-bezier(0.7, 0, 0.84, 0) both;
|
||||
}
|
||||
|
||||
/* biome-ignore lint/correctness/noUnknownTypeSelector: page é um nome de view-transition, não um elemento */
|
||||
::view-transition-new(page) {
|
||||
animation: page-in 640ms var(--ease-out) 160ms both;
|
||||
animation: page-in 600ms var(--ease-out) 240ms both;
|
||||
}
|
||||
|
||||
@keyframes page-out {
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.97);
|
||||
filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1321,7 +1027,6 @@ html.lenis {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(40px) scale(1.015);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user