/* ========================================================================== Doin Labs — landing institucional Ordem: tokens · base · primitivos · 01 hero · 02 essência · 03 serviços 04 posicionamento · 05 rodapé · movimento · responsivo ========================================================================== */ :root{ /* --- cor ------------------------------------------------------------- */ --cream: #FAF8F3; /* fundo institucional, igual ao creme das fotos */ --cream-warm: #F2EBE0; /* medalhões de ícone */ --card: #F1EBE2; /* cartões flutuantes do processo */ --ink: #24110A; /* títulos sobre creme, marca */ --ink-soft: #4E3A30; /* texto corrido sobre creme */ --brown: #2A170C; /* painel escuro da essência */ --brown-deep: #1F130B; /* painel escuro do posicionamento */ --terra: #9E3C28; /* terracota da marca: botões, traços */ --terra-lit: #B14A2F; /* terracota iluminada: parede, realces */ --on-dark: #F6EEE4; --on-dark-soft:#C6B1A2; --hair: rgba(36,17,10,.14); --hair-dark: rgba(246,238,228,.20); /* --- tipografia ------------------------------------------------------ */ --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --script: "Caveat", "Segoe Script", "Bradley Hand", cursive; /* --- ritmo ------------------------------------------------------------ */ --gutter: clamp(22px, 5vw, 96px); --shell: 1560px; /* O hero é uma composição colada na foto, não um conteúdo centrado: sua margem e sua medida acompanham a viewport para o texto nunca alcançar o ponto mais estreito da onda (37,6% da largura). */ --gutter-hero: clamp(22px, 5vw, 220px); --measure: min(30vw, 600px); /* --- movimento -------------------------------------------------------- */ /* Uma curva governa a página inteira: desaceleração exponencial, chegada confiante, sem quique. De um gesto para o outro muda a duração, nunca a personalidade. */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.22, .7, .3, 1); } /* -------------------------------------------------------------------------- base -------------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:clamp(1rem, .5vw + .88rem, 1.125rem); line-height:1.62; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,p,dl,dd,ol,ul,figure{ margin:0; } ol,ul{ padding:0; list-style:none; } img,svg{ display:block; max-width:100%; } img{ height:auto; } a{ color:inherit; } /* Nenhum asset é conteúdo interativo: não arrasta, não seleciona e não intercepta clique. As camadas decorativas saem de vez do alcance do mouse; ícones dentro de botões deixam o clique passar para o próprio botão. */ img, svg{ -webkit-user-drag:none; user-select:none; } .hero__scene, .hero__scene > img, .hero__blob, .essence__photo, .essence__veil, .services__corner, .services__leaf, .stance__art, .stance__leaf, .btn__arrow, .flow__icon, .offer__badge svg, .flourish{ pointer-events:none; } .sprite{ position:absolute; width:0; height:0; overflow:hidden; } ::selection{ background:var(--terra); color:var(--cream); } :focus-visible{ outline:2px solid var(--terra); outline-offset:4px; border-radius:3px; } .stance :focus-visible, .essence :focus-visible{ outline-color:var(--on-dark); } .skip-link{ position:fixed; z-index:99; top:12px; left:12px; transform:translateY(-200%); background:var(--ink); color:var(--cream); padding:12px 20px; border-radius:999px; font-size:.85rem; font-weight:500; text-decoration:none; } .skip-link:focus-visible{ transform:none; } /* -------------------------------------------------------------------------- primitivos tipográficos -------------------------------------------------------------------------- */ .display{ font-family:var(--serif); font-weight:400; font-size:clamp(2.45rem, 4.9vw, 4.3rem); line-height:1.045; letter-spacing:-.018em; text-wrap:balance; } .display--light{ color:var(--on-dark); } .eyebrow{ display:flex; align-items:center; gap:14px; margin:0 0 clamp(20px, 2.4vw, 34px); font-size:.705rem; font-weight:500; letter-spacing:.235em; text-transform:uppercase; color:var(--ink-soft); } .eyebrow::after{ content:""; flex:0 0 clamp(28px, 3vw, 46px); height:1px; background:var(--terra); opacity:.75; } .eyebrow--light{ color:var(--on-dark-soft); } .eyebrow--light::after{ background:var(--on-dark-soft); opacity:.6; } .rule{ display:block; width:38px; height:2px; background:var(--terra); border-radius:2px; } /* -------------------------------------------------------------------------- botões -------------------------------------------------------------------------- */ /* O hover escreve em --lift e o clique em --press: um transform composto evita que os dois gestos briguem pela mesma propriedade. Aqui já houve um ímã que puxava o botão na direção do cursor. Saiu porque estava quebrado: a posição era lida com getBoundingClientRect, que devolve o retângulo JÁ transformado. O botão andava, a leitura seguinte saía da posição nova, o deslocamento mudava e ele andava de novo — realimentação pura, tremor garantido. Um botão que treme custa mais confiança do que o truque devolve, então o lugar dele é fora. */ .btn{ --arrow: 0px; --lift: 0px; --press: 1; display:inline-flex; align-items:center; gap:13px; font-size:.735rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transform:translate3d(0, var(--lift), 0) scale(var(--press)); transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .45s ease, transform .4s var(--ease); } .btn:active{ --press:.976; } .btn__arrow{ width:18px; height:18px; flex:none; transform:translateX(var(--arrow)); transition:transform .35s cubic-bezier(.2,.8,.3,1); } .btn:hover{ --arrow:4px; } .btn--solid{ padding:1.22em 2.15em; border-radius:999px; background:var(--terra); color:var(--cream); box-shadow:0 14px 30px -18px rgba(158,60,40,.85); } /* o gesto é do botão, não do cursor: ele se levanta dois pixels e a sombra se abre junto, sempre igual, venha o ponteiro de onde vier */ .btn--solid:hover{ background:#8C321F; --lift:-2px; box-shadow:0 22px 40px -20px rgba(158,60,40,.95); } .btn--wide{ width:100%; justify-content:center; padding-inline:1.6em; } .btn--quiet{ position:relative; padding:1.22em 0; color:var(--ink); } .btn--quiet::after{ content:""; position:absolute; left:0; right:0; bottom:1em; height:1px; background:var(--terra); transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.3,1); } .btn--quiet:hover::after{ transform:scaleX(.72); } .btn--underline{ padding:0 0 16px; color:var(--on-dark); border-bottom:1px solid var(--on-dark); } .btn--underline:hover{ border-color:var(--terra-lit); color:#F9F3EA; } /* -------------------------------------------------------------------------- navegação mínima — vive só sobre o hero, sem barra fixa -------------------------------------------------------------------------- */ .topbar{ position:absolute; z-index:5; top:0; left:0; display:flex; align-items:center; gap:clamp(18px, 2.6vw, 40px); padding:clamp(22px, 2.6vw, 38px) var(--gutter-hero); } /* Área de toque: o desenho fica do tamanho que o design pede e a área de clique cresce por baixo dele, sem mexer em uma linha do layout. O piso da WCAG 2.2 AA é 24x24 e a marca do topo estava em 22x22 no celular; 44 é o tamanho confortável, então é o que usamos. */ .topbar__mark, .topbar__nav a, .btn--underline{ position:relative; } .topbar__mark::before, .topbar__nav a::before, .btn--underline::before{ content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%); } .topbar__mark{ display:block; } .topbar__mark svg{ width:clamp(22px, 2vw, 28px); height:auto; fill:var(--terra); transition:opacity .3s ease; } .topbar__mark:hover svg{ opacity:.7; } .topbar__nav{ display:flex; gap:clamp(16px, 2vw, 30px); } .topbar__nav a{ position:relative; font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; padding-block:4px; } /* entra pela esquerda, sai pela direita: o traço acompanha a leitura em vez de recuar por onde veio */ .topbar__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--terra); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); } .topbar__nav a:hover::after, .topbar__nav a:focus-visible::after{ transform:none; transform-origin:left; } /* ========================================================================== 01 — HERO ========================================================================== */ .hero{ position:relative; isolation:isolate; display:flex; align-items:stretch; min-height:min(100svh, 56.3vw); background:var(--cream); overflow:hidden; } .hero__scene{ position:absolute; inset:0; z-index:0; } .hero__scene > img{ width:100%; height:100%; object-fit:cover; object-position:right center; } /* A cena é opaca de propósito. Já foi recortada com alpha, mas máscara alguma acompanha uma sombra difusa: o recorte comia o esfumado embaixo do notebook. Como `cover` cobre o hero inteiro nas duas composições (aqui e no mobile, onde a foto tem 172% de largura dentro de overflow:hidden), a transparência nunca decidia o que aparece — só qual creme. Então o creme da foto foi corrigido para o --cream da marca e a sombra ficou inteira. */ .hero__scene > img{ object-position:center; } /* Sol da tarde atravessando a parede de barro. Não é enfeite solto: é a mesma luz que já desenha as sombras de folhagem na fotografia, agora viva. Só roda com a seção em cena — o laço é ligado por .is-near, lá em "movimento". */ .hero__scene::after{ content:""; position:absolute; inset:-12% -22%; background:radial-gradient(42% 54% at 30% 10%, rgba(255,209,152,.34) 0%, rgba(255,190,132,.13) 44%, transparent 72%); opacity:0; } .hero__blob{ position:absolute; inset:0; width:100%; height:100%; } .hero__blob path{ fill:var(--cream); } .hero__blob--h{ display:none; } .hero__inner{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:100%; padding:clamp(100px, 12vh, 140px) var(--gutter-hero) clamp(56px, 8vh, 92px); } .hero__lockup{ margin:0; font-weight:400; } .lockup{ width:clamp(190px, 27vw, 396px); height:auto; fill:var(--ink); } .hero__headline{ display:block; margin-top:clamp(24px, 2.8vw, 42px); max-width:var(--measure); font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem, 4.3vw, 4rem); line-height:1.04; letter-spacing:-.018em; color:var(--ink); } .hero__lead{ margin-top:clamp(18px, 2vw, 28px); max-width:min(var(--measure), 29vw, 480px); color:var(--ink-soft); line-height:1.66; text-wrap:pretty; } .hero__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(6px, 1.9vw, 30px); margin-top:clamp(26px, 3vw, 44px); } /* O manuscrito mora num bolso de creme que o recorte só abre embaixo: entre 88% e 97% da altura a parede livre vai de 46% a 49% da largura, enquanto na faixa dos botões o beiral do notebook avança até 35,8%. Por isso ele é posicionado pela base — e só aparece quando há bolso de verdade: largura suficiente para passar dos botões, e proporção que não corte o pé da cena. */ .hero__script{ display:none; /* Coluna flex por causa da caneta: cada linha precisa de caixa maior que a entrelinha para a máscara não decepar a perna do "l" nem o rabo do "g", e a margem negativa que devolve esse espaço só fecha a conta onde não há colapso de margem. Ver .wl em "movimento". */ flex-direction:column; align-items:flex-start; --pen-pad:.42em; position:absolute; left:calc(var(--gutter-hero) + var(--measure) + .8vw); bottom:clamp(14px, 2.4vh, 36px); margin:0; font-family:var(--script); font-weight:600; font-size:clamp(1.15rem, 1.35vw, 1.5rem); line-height:1.05; color:var(--terra); transform:rotate(-8deg); transform-origin:left bottom; pointer-events:none; } /* Há dois jeitos de existir um bolso de creme de verdade. O primeiro é a proporção: até 2,09 a cena não é recortada demais na vertical e o pé da composição continua na tela. O segundo é a largura pura. Acima de ~2360px a medida do texto já travou em 600px e a calha em 220px, então a borda direita do manuscrito fica em (925 + 0,008·w)/w da largura — conta que cai abaixo dos 40% onde a foto começa. Ou seja: em tela ultrawide o bolso não encolhe, ele cresce. Medido: de 2400px para cima o fundo atrás do manuscrito fica 100% limpo de 750 a 1440 de altura; em 2300 ainda suja 4,7%. */ @media (min-width: 1360px) and (max-aspect-ratio: 209/100), (min-width: 2400px){ .hero__script{ display:flex; } } /* ========================================================================== 02 — ESSÊNCIA / PROCESSO ========================================================================== */ .essence{ display:grid; grid-template-columns:minmax(0, 45fr) minmax(0, 55fr); background:var(--brown); color:var(--on-dark); } .essence__text{ position:relative; background:radial-gradient(120% 90% at 92% 18%, rgba(177,74,47,.12) 0%, rgba(42,23,12,0) 62%); display:flex; flex-direction:column; justify-content:center; padding:clamp(72px, 8.5vw, 140px) clamp(26px, 4.4vw, 84px); } .essence .display{ font-size:clamp(2.3rem, 4.4vw, 3.95rem); } .essence__body{ margin-top:clamp(22px, 2.4vw, 34px); max-width:min(100%, 27rem); font-family:var(--serif); font-size:clamp(1.06rem, 1.18vw, 1.32rem); line-height:1.62; color:#E4D6C9; text-wrap:pretty; } .stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:clamp(40px, 5vw, 76px); } .stats__item{ padding-right:clamp(13px, 1.9vw, 32px); } .stats__item:last-child{ padding-right:0; } .stats__item + .stats__item{ padding-left:clamp(13px, 1.9vw, 32px); border-left:1px solid var(--hair-dark); } .stats dt{ font-family:var(--serif); font-size:clamp(1.9rem, 2.7vw, 2.75rem); line-height:1; color:var(--on-dark); } .stats dd{ margin:10px 0 0; font-size:clamp(.72rem, .82vw, .83rem); line-height:1.4; color:var(--on-dark-soft); } /* --- palco fotográfico com o fluxo de trabalho ---------------------------- */ .essence__stage{ position:relative; overflow:hidden; min-height:clamp(520px, 52vw, 840px); perspective:1500px; perspective-origin:64% 50%; } .essence__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% center; } .essence__veil{ position:absolute; inset:0; background: linear-gradient(90deg, var(--brown) 0%, rgba(42,23,12,.88) 7%, rgba(38,21,11,.34) 38%, rgba(38,21,11,.22) 100%); } .flow{ position:absolute; z-index:1; left:47%; top:50%; /* a pilha inteira deita num plano inclinado, como na referência */ transform:translate(-50%, -50%) rotateY(-9deg) rotateX(2.5deg); transform-style:preserve-3d; width:min(330px, 52%); --flow-gap:clamp(13px, 1.6vw, 21px); display:grid; gap:var(--flow-gap); } /* O trilho corre inteiro por trás da pilha. Os cartões são opacos e estão à frente em Z, então ele só aparece nos vãos: uma linha só, sem emendas. */ .flow::before{ content:""; position:absolute; z-index:0; left:50%; top:11%; bottom:11%; margin-left:-1px; width:2px; background:rgba(255,226,206,.15); } /* Em repouso o fio liga as quatro etapas, como na arte original: sem JS a pilha continua sendo o desenho que o autor entregou. */ .flow__step + .flow__step::after{ content:""; position:absolute; z-index:2; left:50%; bottom:100%; margin-left:-1px; width:2px; height:var(--flow-gap); background:#BB5B3C; transform-origin:top; transition:transform .5s var(--ease); } /* Com JS, o mesmo fio passa a contar progresso: vazio à frente do passo atual, cheio atrás dele. */ .js .flow__step + .flow__step::after{ transform:scaleY(0); } .flow__step{ position:relative; z-index:1; display:flex; align-items:center; gap:clamp(16px, 2.3vw, 34px); padding:clamp(20px, 2.1vw, 29px) clamp(18px, 2vw, 26px); border-radius:15px; transform:translateZ(0); background:linear-gradient(168deg, #FDFAF6 0%, #F3ECE2 58%, #E9E0D3 100%); color:var(--ink); font-size:clamp(.94rem, 1.02vw, 1.06rem); /* volume: aresta de luz em cima, contato curto embaixo, sombra longa no fundo */ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(120,80,55,.16), 0 1px 2px rgba(28,14,7,.32), 0 10px 16px -6px rgba(28,14,7,.48), 0 36px 54px -22px rgba(18,9,4,.78); transition:box-shadow .5s ease, color .4s ease, transform .7s var(--ease), opacity .7s var(--ease); } .flow__step > *{ position:relative; z-index:1; } .flow__icon{ width:clamp(26px, 2.1vw, 30px); height:auto; flex:none; transition:transform .55s var(--ease); } /* O barro do passo ativo é uma camada própria, não o fundo do cartão: gradiente não interpola em transição, opacidade sim. A aresta de luz vem na mesma camada — no cartão ela ficaria por baixo do barro e sumiria. */ .flow__step::before{ content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; background:linear-gradient(168deg, #C0603F 0%, #A6472B 58%, #92371F 100%); box-shadow: inset 0 1px 0 rgba(255,214,192,.42), inset 0 -1px 0 rgba(58,16,5,.42); opacity:0; transition:opacity .5s ease; } .flow__step--active{ color:#FDF6EF; box-shadow: 0 1px 2px rgba(28,14,7,.36), 0 14px 22px -6px rgba(92,28,12,.55), 0 44px 64px -22px rgba(74,22,9,.85); transform:translateZ(30px); } .flow__step--active::before{ opacity:1; } .flow__step--active .flow__icon{ transform:scale(1.09); } /* Preenchido até o passo atual, inclusive. O seletor repete `.js` e o irmão de propósito: sem isso a regra que esvazia o fio tem especificidade maior e o trilho nunca acende. */ .js .flow__step + .flow__step--done::after, .js .flow__step + .flow__step--active::after{ transform:scaleY(1); } .essence__script{ position:absolute; z-index:1; display:flex; flex-direction:column; align-items:flex-start; --pen-pad:.42em; right:clamp(20px, 4vw, 74px); top:26%; margin:0; font-family:var(--script); font-weight:600; font-size:clamp(1.3rem, 1.75vw, 1.95rem); line-height:1.16; color:#EFE2D6; transform:rotate(-13deg); transform-origin:right center; pointer-events:none; } .flourish{ width:clamp(90px, 8vw, 132px); height:14px; margin-top:10px; color:#EFE2D6; } /* ========================================================================== 03 — SERVIÇOS ========================================================================== */ .services{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(110px, 14vw, 210px) 0 clamp(108px, 13vw, 200px); background:var(--cream); } /* canto orgânico de barro, recortado pelo clip-path do sprite */ .services__corner{ position:absolute; top:0; right:0; z-index:0; width:min(38%, 700px); height:clamp(150px, 12.5vw, 200px); clip-path:url(#clip-corner); } .services__corner img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* sombra de folhagem na parede, canto inferior esquerdo */ .services__leaf{ position:absolute; z-index:0; left:clamp(-80px, -5vw, -34px); bottom:clamp(-210px, -15vw, -110px); width:clamp(250px, 28vw, 420px); mix-blend-mode:multiply; /* base branca: só a sombra marca a parede */ opacity:1; pointer-events:none; } .services__inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 37fr) minmax(0, 63fr); gap:clamp(34px, 3.4vw, 58px); align-items:start; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); } .services .display{ font-size:clamp(2.15rem, 3.85vw, 3.6rem); } .services__head .display{ max-width:14ch; } .offer{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); padding-top:clamp(2px, .6vw, 10px); } .offer__item{ padding-inline:clamp(14px, 1.7vw, 30px); padding-block:clamp(2px, .5vw, 8px); } .offer__item + .offer__item{ border-left:1px solid var(--hair); } .offer__item:first-child{ padding-left:0; } .offer__item:last-child{ padding-right:0; } /* Medalhão de barro: o esmalte terracota sobe do fundo como peça mergulhada, e o ícone vira creme no instante em que a cor chega nele. */ .offer__badge{ position:relative; overflow:hidden; isolation:isolate; display:grid; place-items:center; width:clamp(70px, 5.4vw, 94px); aspect-ratio:1; margin:0 auto clamp(26px, 3vw, 46px); border-radius:50%; background:var(--cream-warm); color:var(--ink); transition:color .3s ease .08s, transform .55s var(--ease), box-shadow .55s ease; } .offer__badge::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:50%; background:radial-gradient(128% 104% at 50% 122%, var(--terra-lit) 0%, var(--terra) 56%, #8C321F 100%); /* 102%: em repouso o esmalte fica inteiro fora do círculo. A 80% sobrava um arco terracota no pé de cada medalhão. */ transform:translateY(102%); transition:transform .62s var(--ease); } .offer__badge svg{ position:relative; z-index:1; width:clamp(26px, 2vw, 34px); height:auto; } .offer__item:hover .offer__badge{ color:var(--cream); transform:translateY(-5px); box-shadow:0 20px 34px -20px rgba(158,60,40,.85); } .offer__item:hover .offer__badge::before{ transform:none; } .offer h3{ margin:0 0 clamp(14px, 1.4vw, 20px); min-height:2.32em; /* 2 linhas: alinha o corpo das quatro colunas */ font-family:var(--serif); font-weight:400; font-size:clamp(1.08rem, 1.36vw, 1.45rem); line-height:1.16; letter-spacing:-.01em; text-wrap:balance; } .offer p{ font-size:clamp(.9rem, .92vw, .985rem); line-height:1.56; color:var(--ink-soft); text-wrap:pretty; } /* ========================================================================== 04 — POSICIONAMENTO ========================================================================== */ .stance{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(540px, 52vw, 820px); background:var(--brown-deep); } .stance__art{ position:relative; overflow:hidden; } .stance__art img{ width:100%; height:100%; object-fit:cover; object-position:center; } .stance__panel{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; padding:clamp(76px, 8.5vw, 132px) clamp(26px, 5vw, 96px); background:var(--brown-deep); color:var(--on-dark); } .stance__leaf{ position:absolute; z-index:0; right:clamp(-150px, -10vw, -60px); top:-14%; width:clamp(300px, 33vw, 540px); mix-blend-mode:screen; /* base preta: só a folha clareia o painel */ opacity:.42; pointer-events:none; } .stance__tag{ position:absolute; z-index:1; top:clamp(46px, 7vw, 108px); right:clamp(26px, 4vw, 72px); margin:0; font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.9; color:var(--on-dark-soft); } .stance__tag::after{ content:""; display:block; width:30px; height:1px; margin-top:14px; background:var(--on-dark-soft); opacity:.6; } .stance .display{ font-size:clamp(2.3rem, 4.5vw, 4rem); } .stance__body{ position:relative; z-index:1; max-width:min(100%, 32rem); } .stance__text{ margin:clamp(22px, 2.4vw, 34px) 0 clamp(34px, 4vw, 54px); font-family:var(--serif); font-size:clamp(1.06rem, 1.18vw, 1.3rem); line-height:1.6; color:#E4D6C9; text-wrap:pretty; } /* ========================================================================== 05 — RODAPÉ / CTA FINAL ========================================================================== */ .footer{ background:var(--cream); padding:clamp(80px, 9vw, 140px) var(--gutter) clamp(38px, 4.5vw, 62px); } .footer__cta{ display:grid; grid-template-columns:minmax(0, 27fr) minmax(0, 40fr) minmax(0, 33fr); align-items:center; gap:clamp(30px, 4vw, 66px); max-width:var(--shell); margin-inline:auto; } .footer__brand{ display:flex; align-items:center; gap:clamp(14px, 1.6vw, 26px); } .footer__mark{ width:clamp(54px, 5vw, 82px); height:auto; fill:var(--terra); flex:none; } .footer__word{ width:clamp(112px, 11vw, 178px); height:auto; fill:var(--ink); } .footer__pitch{ padding-inline:clamp(26px, 3.6vw, 62px); border-inline:1px solid var(--hair); } .footer__ask{ font-family:var(--serif); font-size:clamp(1.55rem, 2.3vw, 2.35rem); line-height:1.14; letter-spacing:-.015em; text-wrap:balance; } .footer__pitch .rule{ margin:clamp(16px, 1.6vw, 22px) 0; } .footer__sub{ font-size:clamp(.92rem, .95vw, 1.01rem); line-height:1.55; color:var(--ink-soft); max-width:min(100%, 22rem); text-wrap:pretty; } .footer__action{ justify-self:end; width:min(100%, 430px); } .footer__base{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px, 5vw, 70px); max-width:var(--shell); margin:clamp(56px, 7vw, 104px) auto 0; padding-top:clamp(26px, 3vw, 44px); border-top:1px solid var(--hair); } .footer__legal{ font-size:.86rem; color:var(--ink-soft); } .footer__creed{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; } .footer__words{ text-align:left; font-size:.72rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase; line-height:1.95; color:var(--ink); } .footer__creed .rule{ margin:14px 0 14px auto; width:30px; height:1.5px; } .footer__origin{ font-size:.86rem; color:var(--ink-soft); } /* ========================================================================== movimento -------------------------------------------------------------------------- Uma tese só, e ela é a própria frase da marca: ideias que ganham forma. O hero é o momento autoral — o título sai de desfocado para nítido, a marca se assenta como carimbo no barro e o botão é pincelado da esquerda. Tudo em CSS puro: não espera JS, não atrasa o LCP, não some se algo quebrar. Abaixo da dobra o movimento para de se exibir e passa a explicar: os cartões do processo se empilham em profundidade e o passo ativo caminha junto com a rolagem, porque ali a rolagem é o processo. Nenhuma seção repete a entrada da outra. Todo estado escondido é escrito pelo main.js (.rv, .rv-lines, .rv-flow…). Se o script não rodar, nada some — animação é enfeite, conteúdo escondido é defeito. ========================================================================== */ /* -------------------------------------------------------------------------- 1 — o momento autoral: o hero -------------------------------------------------------------------------- */ @keyframes rise{ from{ opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } @keyframes stamp{ /* a marca se assenta como carimbo no barro */ from{ opacity:0; transform:translateY(16px) scale(1.035); filter:blur(7px); } to { opacity:1; transform:none; filter:blur(0); } } /* O título, literalmente, ganha forma: cada linha sobe de trás da própria entrelinha saindo de desfocada para nítida. Sem opacidade — quem revela é a máscara, e é isso que separa um reveal caro de um fade. */ @keyframes line-in{ from{ transform:translateY(108%); filter:blur(9px); } to { transform:none; filter:blur(0); } } @keyframes brush{ /* pincelada: a pílula de barro é puxada da esquerda */ from{ opacity:0; clip-path:inset(0 100% 0 0 round 999px); } to { opacity:1; clip-path:inset(0 0 0 0 round 999px); } } /* A CANETA ------------------------------------------------------------------------- Escrever não é revelar um retângulo. O que corre sobre cada linha é uma máscara em gradiente, inclinada como a pena e com a borda macia: a tinta aparece por uma frente difusa, da esquerda para a direita, uma linha de cada vez, com uma pausa entre elas — a caneta levantando do papel. A duração de cada linha acompanha quantas letras ela tem (~52ms por letra), que é o que separa escrita de varredura: numa varredura a linha curta demora o mesmo que a longa, e o olho percebe. Em repouso a máscara está em 0% — texto inteiro visível. Quem esconde é a animação, com fill-mode backwards; se mask-image não existir no navegador, a regra inteira é ignorada e o texto simplesmente fica lá. */ @keyframes write{ from{ -webkit-mask-position:100% 0; mask-position:100% 0; } to { -webkit-mask-position:0 0; mask-position:0 0; } } @keyframes draw{ /* o floreio é traço de verdade: desenha-se */ from{ stroke-dashoffset:1; } to { stroke-dashoffset:0; } } .wl{ display:block; /* A máscara só pinta dentro da caixa do elemento — vale também para uma máscara totalmente opaca. E manuscrita transborda a caixa nos quatro lados: a perna do "l" passa da largura de avanço da letra, o "g" passa da entrelinha. Sem folga, a máscara come essas sobras. O padding cresce a caixa, a margem negativa devolve o espaço — a linha fica exatamente onde estava, só que agora cabe inteira. Em coluna flex não há colapso de margem, então a conta fecha certinho. */ padding:var(--pen-pad, 0px); margin:calc(var(--pen-pad, 0px) * -1); /* 90deg, não inclinado: num gradiente torto as paradas se projetam também na vertical, então caixa mais alta = cantos passando do limiar opaco = letra comida. Horizontal, a conta independe da altura da linha. */ -webkit-mask-image:linear-gradient(90deg, #000 0 47%, rgba(0,0,0,.5) 50%, transparent 53%); mask-image:linear-gradient(90deg, #000 0 47%, rgba(0,0,0,.5) 50%, transparent 53%); -webkit-mask-size:240% 100%; mask-size:240% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } .flourish path{ stroke-dasharray:1; stroke-dashoffset:0; } @keyframes sun{ /* a luz cruza a parede de barro, devagar */ 0% { opacity:0; transform:translate3d(-6%, -3%, 0) scale(1); } 20% { opacity:.9; } 80% { opacity:.72; } 100%{ opacity:.34; transform:translate3d(15%, 6%, 0) scale(1.12); } } .topbar, .lockup, .hero__lead, .hero__actions .btn--solid, .hero__actions .btn--quiet{ animation-duration:1s; animation-timing-function:var(--ease); animation-fill-mode:backwards; } .topbar { animation-name:rise; animation-delay:.06s; animation-duration:.8s; } .lockup { animation-name:stamp; animation-delay:.10s; animation-duration:1.05s; } /* as linhas do hero não passam pelo sistema .rv-lines: ali quem anima é uma keyframe com fill-mode backwards, que funciona sem JS nenhum */ .hero__headline .ln__i{ transform:none; animation:line-in 1.2s var(--ease) backwards; } .hero__headline .ln:nth-child(1) .ln__i{ animation-delay:.30s; } .hero__headline .ln:nth-child(2) .ln__i{ animation-delay:.42s; } .hero__lead { animation-name:rise; animation-delay:.54s; animation-duration:.9s; } .hero__actions .btn--solid { animation-name:brush; animation-delay:.70s; animation-duration:.85s; } .hero__actions .btn--quiet { animation-name:rise; animation-delay:.84s; animation-duration:.8s; } /* "Mais Brasil / em grandes / ideias." — 11, 10 e 7 letras. Quase linear de propósito: uma curva de saída forte transformaria a caneta em cortina de novo. Só o fim de cada linha desacelera, como a mão. */ .hero__script .wl{ animation-name:write; animation-timing-function:cubic-bezier(.4, .05, .55, .98); animation-fill-mode:backwards; } .hero__script .wl:nth-child(1){ animation-duration:.58s; animation-delay:.85s; } .hero__script .wl:nth-child(2){ animation-duration:.52s; animation-delay:1.51s; } .hero__script .wl:nth-child(3){ animation-duration:.38s; animation-delay:2.11s; } /* -------------------------------------------------------------------------- 2 — entradas abaixo da dobra -------------------------------------------------------------------------- */ .rv{ opacity:0; transform:translateY(var(--rv-y, 20px)); } .rv.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease-soft) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); } /* Linhas: o título sobe de trás da própria entrelinha, uma por vez. Sem opacidade — máscara pura, que é o que separa um reveal caro de um fade. */ .ln{ display:block; overflow:hidden; padding-block:.04em .18em; margin-block:-.04em -.18em; } .ln__i{ display:block; transform:translateY(112%); } .rv-lines.is-in .ln__i{ transform:none; transition:transform 1s var(--ease) var(--d, 0ms); } /* Fios de cabelo que se desenham: o traço do eyebrow e as réguas terracota. É o detalhe que ninguém nota e que faz a página parecer desenhada. */ .rv-hair::after{ transform:scaleX(0); transform-origin:left; } .rv-hair.is-in::after{ transform:none; transition:transform .9s var(--ease) calc(var(--d, 0ms) + 200ms); } .rv-draw{ transform:scaleX(0); transform-origin:left; } .rv-draw.is-in{ transform:none; transition:transform .9s var(--ease) var(--d, 0ms); } /* Os números não contam de zero: os dígitos que já são verdade sobem para o lugar, desfocados, e assentam. Instrumento de precisão, não contador. */ .rv-digits .dg{ display:inline-block; opacity:0; transform:translateY(.44em); filter:blur(7px); } .rv-digits.is-in .dg{ opacity:1; transform:none; filter:blur(0); transition:opacity .5s ease var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), filter .65s ease var(--d, 0ms); } /* O manuscrito da essência espera a seção chegar. Em CSS puro, como o do hero, ele já teria sido escrito e apagado da memória muito antes de alguém rolar até ali — escrita que ninguém vê é escrita perdida. */ .js .essence__script.rv-write .wl{ -webkit-mask-position:100% 0; mask-position:100% 0; } .js .essence__script.rv-write .flourish path{ stroke-dashoffset:1; } .js .essence__script.rv-write.is-in .wl{ animation-name:write; animation-timing-function:cubic-bezier(.4, .05, .55, .98); animation-fill-mode:forwards; } /* "Tecnologia / que liberta / pessoas." — 10, 11 e 8 letras */ .js .essence__script.rv-write.is-in .wl:nth-child(1){ animation-duration:.56s; animation-delay:.12s; } .js .essence__script.rv-write.is-in .wl:nth-child(2){ animation-duration:.60s; animation-delay:.78s; } .js .essence__script.rv-write.is-in .wl:nth-child(3){ animation-duration:.44s; animation-delay:1.46s; } /* e o floreio fecha a frase, como quem risca embaixo depois de escrever */ .js .essence__script.rv-write.is-in .flourish path{ animation:draw .62s cubic-bezier(.3, .1, .5, 1) 2s forwards; } /* -------------------------------------------------------------------------- 3 — o processo: a continuidade que a seção precisa -------------------------------------------------------------------------- */ /* Os cartões vêm de trás, do fundo do palco, e assentam no plano inclinado. Depois disso quem manda é a rolagem: o main.js move --active de etapa em etapa, e as regras de cor/sombra já escritas lá em cima fazem o resto. */ .rv-flow{ opacity:0; transform:translateZ(-90px) translateY(26px); } .rv-flow.is-in{ opacity:1; transform:translateZ(0); } .flow__step--active.rv-flow.is-in{ transform:translateZ(30px); } /* -------------------------------------------------------------------------- 4 — laços vivos, e só em cena -------------------------------------------------------------------------- */ /* Brisa: a mesma folhagem que já é sombra na fotografia respira na parede. Fases diferentes para as duas folhas — vento não é metrônomo. */ @keyframes breeze{ 0% { transform:translate3d(0, 0, 0) rotate(0deg); } 50% { transform:translate3d(1.1%, -1.5%, 0) rotate(.85deg); } 100%{ transform:translate3d(-.6%, .7%, 0) rotate(-.5deg); } } .hero.is-near .hero__scene::after{ animation:sun 34s var(--ease-soft) 1.1s infinite alternate; } .services.is-near .services__leaf{ transform-origin:22% 0; animation:breeze 19s ease-in-out infinite alternate; } .stance.is-near .stance__leaf{ transform-origin:78% 0; animation:breeze 26s ease-in-out -8s infinite alternate; } /* -------------------------------------------------------------------------- 5 — profundidade sob o ponteiro e sob a rolagem -------------------------------------------------------------------------- */ /* A transição longa é o amortecedor: o main.js reaponta o alvo a cada quadro e a curva faz o resto, sem biblioteca de mola. */ @media (min-width: 961px){ /* a camada viva acompanha a foto pixel a pixel: mesma caixa, mesma origem, mesmo transform. Sem isso ela descolaria da tela ao mexer o ponteiro. */ .hero.has-parallax .hero__scene > img, .hero.has-parallax .hero__fx{ transform:translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.025); transition:transform .9s var(--ease-soft); } } .js .stance__art img{ transform:translate3d(0, var(--par, 0px), 0) scale(1.07); } /* -------------------------------------------------------------------------- 6 — a tela do notebook -------------------------------------------------------------------------- Uma interface de verdade encaixada em perspectiva sobre a tela fotografada, e que acende quando a página acende. A caixa tem 1600x1000 — 16:10, a proporção real do aparelho — e a matriz vem do main.js. Tudo aqui é dimensionado em px dessa caixa, nunca em rem: a caixa inteira é projetada, então o que vale é a proporção interna. O que o visitante vê varia de ~360px de largura num laptop a ~720px num ultrawide. -------------------------------------------------------------------------- */ .hero__fx{ position:absolute; opacity:0; visibility:hidden; pointer-events:none; } /* Uma camada com filtro e sombras custa composição. Ela vive no topo da página, então sai de cena — de verdade, não só transparente — assim que o hero se afasta. Mesma regra do sol na parede e da brisa nas folhagens. O painel NÃO espera: ele cobre a tela da foto no instante em que a matriz chega. Quem entra em cascata é só o conteúdo. Se o painel atrasasse, o visitante veria por um segundo a interface antiga da fotografia e depois ela trocaria — que é exatamente a troca que esta camada existe para evitar. Os 160ms são para a chegada não piscar, não para esperar. */ .hero__fx.is-ready{ opacity:1; visibility:visible; transition:opacity .16s ease; } /* A saída de cena é por is-far, não pela ausência de is-near: ausência é o estado inicial, e exigir is-near para aparecer faria a camada esperar o IntersectionObserver disparar — tempo em que a tela antiga fica à mostra. Assim ela nasce visível e só se recolhe quando o hero realmente vai embora. */ .hero.is-far .hero__fx{ opacity:0; visibility:hidden; } /* A maquete é outra superfície: um produto dentro de uma foto, com paleta própria. Mas a tinta é a mesma da marca, então ela usa os tokens da casa; só o que é exclusivo da tela vira token local. */ .fxs{ --scr-card:#FFFDF9; --scr-soft:#6E5D53; --scr-pill:#EDE2D5; position:absolute; left:0; top:0; width:1600px; height:1000px; transform-origin:0 0; display:flex; overflow:hidden; border-radius:14px; background:#FAF7F1; color:var(--ink); font-family:var(--sans); /* Aqui já houve um filter:blur para imitar profundidade de campo. Saiu por duas razões. A primeira é medida: qualquer raio de blur nesta camada custava ~10ms no p99 da rolagem e dezenas de quadros lentos, porque um elemento filtrado é refiltrado a cada composição. A segunda é de design: a tela é o ponto de foco da fotografia, a parte mais nítida dela — o desfoque perseguia um realismo que a própria imagem não tem ali. */ will-change:transform; } .fxs svg{ overflow:visible; } .fxs__side svg, .fxs__top svg, .fxs__ico, .fxs__cta svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* --- barra lateral ------------------------------------------------------- */ .fxs__side{ flex:0 0 340px; padding:44px 0 0 54px; } .fxs .fxs__logo{ width:152px; height:auto; fill:var(--ink); stroke:none; } .fxs__rule{ display:block; width:54px; height:5px; margin:18px 0 0; border-radius:3px; background:var(--terra); } .fxs__nav{ display:flex; flex-direction:column; margin-top:52px; } .fxs__item{ display:flex; align-items:center; gap:22px; height:74px; padding-left:22px; margin-left:-22px; width:278px; border-radius:20px; font-size:33px; color:var(--scr-soft); } .fxs__item svg{ width:38px; height:38px; flex:none; } .fxs__item.is-on{ background:var(--scr-pill); color:var(--ink); } /* --- cabeçalho ----------------------------------------------------------- */ .fxs__main{ position:relative; flex:1 1 auto; padding:44px 60px 0; } .fxs__top{ display:flex; align-items:center; gap:34px; } .fxs__search{ flex:1 1 auto; max-width:700px; height:72px; padding:0 34px; display:flex; align-items:center; border:2px solid rgba(36,17,10,.09); border-radius:36px; font-size:30px; color:#A99A90; } .fxs__bell{ width:42px; height:42px; color:var(--ink-soft); margin-left:auto; } .fxs__me{ display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:var(--scr-pill); color:var(--ink-soft); } .fxs__me svg{ width:40px; height:40px; } /* --- chamada principal --------------------------------------------------- */ .fxs__h{ margin:76px 0 0; font-family:var(--serif); font-weight:400; font-size:78px; line-height:1.1; letter-spacing:-.02em; max-width:640px; } .fxs__ln{ display:block; overflow:hidden; padding-block:.03em .14em; margin-block:-.03em -.14em; } .fxs__ln i{ display:block; font-style:normal; transform:translateY(110%); } .is-ready .fxs__ln i{ transform:none; transition:transform .95s var(--ease) var(--d, 0ms); } .fxs__h .fxs__ln:nth-child(2) i{ --d:110ms; } .fxs__p{ margin:30px 0 0; font-size:35px; line-height:1.42; color:var(--scr-soft); } .fxs__cta{ display:inline-flex; align-items:center; gap:22px; margin-top:46px; padding:0 44px; height:88px; border-radius:46px; background:#2E1A0E; color:#FAF7F1; font-size:33px; } .fxs__cta svg{ width:34px; height:34px; } /* --- cartão de resultado -------------------------------------------------- */ .fxs__kpi{ position:absolute; right:56px; top:186px; width:470px; padding:38px 40px 34px; border-radius:30px; background:var(--scr-card); box-shadow:0 18px 40px -26px rgba(36,17,10,.28); } .fxs__lab{ display:block; font-size:30px; color:var(--scr-soft); } .fxs__big{ display:block; margin:16px 0 14px; font-size:76px; font-weight:500; letter-spacing:-.03em; line-height:1; } .fxs__spark{ position:absolute; right:44px; bottom:38px; width:118px; height:74px; } .fxs__bar{ fill:var(--terra-lit); transform-box:fill-box; transform-origin:bottom; } .fxs__bar:nth-child(1){ fill:#E8A48C; } .fxs__bar:nth-child(2){ fill:#D4795C; } /* --- quatro números ------------------------------------------------------- */ .fxs__grid{ position:absolute; left:60px; right:60px; bottom:62px; display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; } .fxs__grid li{ position:relative; height:224px; padding:34px 30px; border-radius:26px; background:var(--scr-card); box-shadow:0 14px 32px -24px rgba(36,17,10,.26); } .fxs__grid span{ display:block; font-size:28px; line-height:1.3; color:var(--scr-soft); } .fxs__grid em{ position:absolute; left:30px; bottom:30px; font-style:normal; font-size:60px; font-weight:500; letter-spacing:-.02em; } .fxs__ico{ position:absolute; right:30px; bottom:32px; width:50px; height:50px; color:var(--ink); } .fxs__ico--t{ color:var(--terra); stroke-width:2.1; } .fxs__ico--f{ fill:var(--ink); stroke:none; } /* -------------------------------------------------------------------------- a tela acorda -------------------------------------------------------------------------- Um produto ligando, em camadas: primeiro o painel, depois a moldura da interface, depois a fala, por fim os números. Nada entra junto com tudo — é a ordem que faz parecer um sistema carregando, e não um slide surgindo. Tudo é transição disparada por .is-ready, nunca keyframe solto: transição só começa quando a classe chega, então a coreografia fica em sincronia com o instante em que o JS encaixou a perspectiva, aconteça o que acontecer com o carregamento. -------------------------------------------------------------------------- */ /* 1 — a moldura da interface sobe de baixo, em cascata */ .fxs__logo, .fxs__item, .fxs__search, .fxs__bell, .fxs__me, .fxs__p, .fxs__kpi, .fxs__grid li{ opacity:0; transform:translateY(16px); } .is-ready .fxs__logo, .is-ready .fxs__item, .is-ready .fxs__search, .is-ready .fxs__bell, .is-ready .fxs__me, .is-ready .fxs__p, .is-ready .fxs__kpi, .is-ready .fxs__grid li{ opacity:1; transform:none; transition:opacity .5s ease var(--d, 0ms), transform .85s var(--ease) var(--d, 0ms); } /* o menu entra pela esquerda, como uma lista que se preenche */ .fxs__item{ transform:translateX(-18px); } .fxs__logo{ --d:190ms; } .fxs__item:nth-child(1){ --d:250ms; } .fxs__item:nth-child(2){ --d:305ms; } .fxs__item:nth-child(3){ --d:360ms; } .fxs__item:nth-child(4){ --d:415ms; } .fxs__item:nth-child(5){ --d:470ms; } .fxs__item:nth-child(6){ --d:525ms; } .fxs__search{ --d:330ms; } .fxs__bell { --d:390ms; } .fxs__me { --d:430ms; } .fxs__p { --d:800ms; } .fxs__kpi { --d:900ms; } /* o traço terracota sob a marca se desenha */ .fxs__rule{ transform:scaleX(0); transform-origin:left; } .is-ready .fxs__rule{ transform:none; transition:transform .7s var(--ease) 330ms; } /* 2 — a fala: cada linha sobe de trás da própria entrelinha */ .fxs__ln i{ transform:translateY(112%); } .is-ready .fxs__ln i{ transform:none; transition:transform .95s var(--ease) var(--d, 500ms); } .fxs__h .fxs__ln:nth-child(2) i{ --d:610ms; } /* o botão é pincelado da esquerda, como a pílula do hero */ .fxs__cta{ clip-path:inset(0 100% 0 0 round 46px); opacity:0; } .is-ready .fxs__cta{ clip-path:inset(0 0 0 0 round 46px); opacity:1; transition:clip-path .8s var(--ease) 970ms, opacity .1s linear 970ms; } /* 3 — os números assentam desfocados no lugar, como os da seção de essência: uma página, um jeito de contar */ .fxs b{ display:inline-block; opacity:0; transform:translateY(.42em); filter:blur(7px); } .is-ready .fxs b{ opacity:1; transform:none; filter:blur(0); transition:opacity .5s ease var(--d, 0ms), transform .85s var(--ease) var(--d, 0ms), filter .6s ease var(--d, 0ms); } .fxs__big b:nth-child(1){ --d:1170ms; } .fxs__big b:nth-child(2){ --d:1240ms; } .fxs__big b:nth-child(3){ --d:1310ms; } .fxs__big b:nth-child(4){ --d:1380ms; } .fxs__big b:nth-child(5){ --d:1450ms; } /* as barras crescem da linha de base, uma atrás da outra */ .fxs__bar{ transform:scaleY(0); } .is-ready .fxs__bar{ transform:none; transition:transform .8s var(--ease) var(--d, 0ms); } .fxs__bar:nth-child(1){ --d:1330ms; } .fxs__bar:nth-child(2){ --d:1440ms; } .fxs__bar:nth-child(3){ --d:1550ms; } /* os quatro cartões chegam em sequência, e o número de cada um assenta depois que o cartão dele pousou — --base desce por herança até os dígitos */ .fxs__grid li:nth-child(1){ --base:1430ms; } .fxs__grid li:nth-child(2){ --base:1525ms; } .fxs__grid li:nth-child(3){ --base:1620ms; } .fxs__grid li:nth-child(4){ --base:1715ms; } .fxs__grid li{ --d:var(--base); } .fxs__grid em b:nth-child(1){ --d:calc(var(--base) + 320ms); } .fxs__grid em b:nth-child(2){ --d:calc(var(--base) + 380ms); } /* --- a mesma luz que cai na cena cai na tela ------------------------------ */ .fxs__light{ position:absolute; inset:0; background: linear-gradient(116deg, rgba(255,243,226,.62) 0%, rgba(255,250,240,.14) 38%, rgba(255,255,255,0) 58%), radial-gradient(118% 104% at 99% 106%, rgba(108,64,34,.20) 0%, rgba(0,0,0,0) 62%), linear-gradient(200deg, rgba(0,0,0,0) 58%, rgba(96,58,32,.09) 100%); } /* -------------------------------------------------------------------------- 7 — grão -------------------------------------------------------------------------- */ /* Um grão fino costura a cor chapada à fotografia: sem ele o creme parece impresso e a foto parece colada por cima. Estático de propósito — grão animado repinta a viewport inteira e não devolve nada em troca. */ body::after{ content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-size:170px 170px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 8 — menos movimento -------------------------------------------------------------------------- */ /* O