/* ============================================================================ LB CREATIVE — styles.css Direção de arte: editorial fashion, preto e branco, grid suíço, muito espaço em branco, hierarquia por escala. ÍNDICE 00. Tokens (variáveis) 01. Reset e base 02. Utilitários (container, eyebrow, botões, reveal) 03. Navbar 04. Hero 05. Quem é Laís 06. Nossas especialidades 07. CTA final 08. Footer 09. Banner de cookies (LGPD) 10. Página de privacidade 11. Acessibilidade / motion reduzido ============================================================================ */ /* ============================================================================ 00. TOKENS ============================================================================ */ :root { /* Paleta — estritamente preto e branco */ --black: #0a0a0a; --white: #ffffff; --grey-100: #f2f2f2; /* fundos sutis */ --grey-200: #e4e4e4; /* filetes do grid e fundo de imagem carregando */ --grey-400: #b3b3b3; /* traços e detalhes */ --grey-600: #6e6e6e; /* texto secundário */ /* Tipografia --font-display: troque aqui se identificar a família exata do concept (alternativas: 'Archivo Expanded', 'Oswald', 'Bebas Neue'). */ --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Ritmo vertical e gutters */ --pad-x: 20px; /* respiro lateral (mobile) */ --max-w: 1440px; /* largura máxima do grid */ --section-y: 88px; /* espaçamento vertical das seções */ --nav-h: 64px; /* altura da navbar */ /* HERO — ajuste fino da composição (desktop) Altere estes valores para casar exatamente com o concept do Figma. */ --hero-wordmark-size: 23.4vw; /* fallback do wordmark (JS calcula o exato) */ --hero-wordmark-bottom: 26vh; /* distância do wordmark até a base */ --hero-photo-h: 80vh; /* altura da foto recortada */ --hero-photo-x: 50%; /* eixo horizontal da foto */ /* Movimento */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 768px) { :root { --pad-x: 40px; --section-y: 128px; --nav-h: 76px; } } @media (min-width: 1200px) { :root { --pad-x: 56px; --section-y: 168px; } } /* ============================================================================ 01. RESET E BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Sem scroll-behavior: smooth aqui de propósito — quem suaviza a rolagem agora é o Lenis (script.js, bloco 04), e as duas coisas juntas brigam (a rolagem nativa "puxa" a página enquanto o Lenis interpola). Com prefers-reduced-motion o Lenis não é inicializado e a rolagem volta a ser a nativa instantânea, que é o comportamento correto nesse caso. */ scroll-padding-top: var(--nav-h); /* compensa a navbar fixa */ } /* --- Regras exigidas pelo Lenis --- Equivalem ao lenis.css da lib, embutidas aqui para não custar mais uma requisição. O Lenis adiciona/remove as classes no sozinho. */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } /* Foco visível e consistente em todos os elementos interativos */ :focus-visible { outline: 2px solid var(--black); outline-offset: 3px; } /* Títulos display */ .hero__wordmark, .about__title, .services__title, .cta__title, .footer__brand, .legal__title { font-family: var(--font-display); font-weight: 400; /* Anton só tem um peso, o mais pesado */ letter-spacing: -0.01em; line-height: 0.92; /* espaço para os acentos (Í, Ó) */ text-transform: uppercase; } /* ============================================================================ 02. UTILITÁRIOS ============================================================================ */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); } /* Rótulo pequeno em caixa alta (kicker) */ .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-600); } .eyebrow--light { color: var(--grey-400); } /* --- Botões --- */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; padding: 12px 24px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .btn--dark { background: var(--black); color: var(--white); border-color: var(--black); } .btn--dark:hover { background: var(--white); color: var(--black); } .btn--light { background: var(--white); color: var(--black); border-color: var(--white); } .btn--light:hover { background: transparent; color: var(--white); } .btn--ghost { background: transparent; color: var(--black); border-color: var(--grey-400); } .btn--ghost:hover { border-color: var(--black); } /* --- Micro-animação de entrada (Intersection Observer em script.js) --- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Atalho de teclado para o conteúdo */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--black); color: var(--white); padding: 12px 20px; font-size: 13px; } .skip-link:focus { left: 8px; top: 8px; } /* ============================================================================ 03. NAVBAR ============================================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--white); transition: box-shadow 0.4s var(--ease); } /* Sombra discreta só depois de rolar (classe aplicada via JS) */ .nav.is-scrolled { box-shadow: 0 1px 0 var(--grey-200); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad-x); } .nav__brand { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; } /* --- Hambúrguer (mobile) --- */ .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; margin-right: -8px; padding: 0; background: none; border: 0; cursor: pointer; } .nav__toggle-bar { display: block; width: 22px; height: 1.5px; margin-inline: auto; background: var(--black); transition: transform 0.35s var(--ease), opacity 0.2s linear; } /* Vira "X" quando aberto */ .nav__toggle[aria-expanded='true'] .nav__toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); } .nav__toggle[aria-expanded='true'] .nav__toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* --- Menu (drawer no mobile) --- */ .nav__menu { position: fixed; inset: var(--nav-h) 0 auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px var(--pad-x) 40px; background: var(--white); border-top: 1px solid var(--grey-200); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s linear; } .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; } .nav__link { padding: 10px 0; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; text-decoration: none; } .nav__cta { margin-top: 20px; } /* Variação usada na privacidade.html: menu sempre visível, sem hambúrguer */ .nav__menu--simple { position: static; flex-direction: row; align-items: center; padding: 0; border: 0; opacity: 1; visibility: visible; transform: none; } .nav__menu--simple .nav__link { padding: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } /* Navbar horizontal a partir do tablet */ @media (min-width: 900px) { .nav__toggle { display: none; } .nav__menu { position: static; flex-direction: row; align-items: center; gap: 36px; padding: 0; border: 0; background: none; opacity: 1; visibility: visible; transform: none; } .nav__link { padding: 0; font-size: 13px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; position: relative; } /* Sublinhado que cresce no hover */ .nav__link::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .nav__link:hover::after { transform: scaleX(1); } .nav__cta { margin-top: 0; } } /* ============================================================================ 04. HERO Mobile: fluxo vertical (wordmark -> foto sobreposta -> frase -> scroll). Desktop: composição absoluta, foto NA FRENTE do wordmark. ============================================================================ */ .hero { position: relative; z-index: 1; /* fica ABAIXO da .about, que passa por cima no pin */ overflow: hidden; /* clipa as sobras laterais do wordmark */ padding-top: calc(var(--nav-h) + 20px); /* Sem padding lateral: o wordmark tem de encostar nas bordas. O respiro lateral é aplicado item por item (frase e SCROLL). */ } /* --- Wordmark gigante, de borda a borda --- O valor de font-size abaixo é só o ponto de partida (antes do JS rodar ou se o JS estiver desativado). O tamanho definitivo é calculado em script.js -> fitWordmark(), que mede o texto e faz as letras encostarem exatamente nas duas laterais em qualquer largura de tela. */ .hero__wordmark { margin: 0; width: 100%; font-size: var(--hero-wordmark-size); line-height: 0.8; /* Alinhado à esquerda de propósito: como o texto é mais largo que a janela (ele sangra), "center" faria cada navegador distribuir a sobra de um jeito diferente. Alinhado à esquerda o ponto de partida é sempre x = 0 e o deslocamento fica todo a cargo do NUDGE em script.js. */ text-align: left; white-space: nowrap; /* nunca quebra: é sempre uma única linha */ } .hero__wordmark-fit { display: inline-block; } /* --- Foto recortada --- */ .hero__photo { position: relative; z-index: 2; width: 100%; max-width: 620px; /* no mobile a foto também sangra de ponta a ponta */ margin: -16vw auto 0; /* negativo = sobrepõe as letras */ } /* --- Filete + frase --- */ .hero__statement { position: relative; z-index: 3; max-width: 34ch; margin-top: 8px; padding-inline: var(--pad-x); font-size: 14px; line-height: 1.5; color: var(--black); } .hero__rule { display: block; width: 56px; height: 1px; margin-bottom: 16px; background: var(--black); } /* --- Rótulo SCROLL --- */ .hero__scroll { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 40px 0 48px; padding-inline: var(--pad-x); } .hero__scroll-line { position: relative; display: block; width: 1px; height: 48px; background: var(--grey-200); overflow: hidden; } /* Traço preto que desce em loop, sugerindo a rolagem */ .hero__scroll-line::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 40%; background: var(--black); animation: scroll-hint 2.2s var(--ease) infinite; } @keyframes scroll-hint { 0% { transform: translateY(-100%); } 60% { transform: translateY(250%); } 100% { transform: translateY(250%); } } .hero__scroll-label { font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--grey-600); } /* --- Composição do desktop --- */ @media (min-width: 1024px) { .hero { min-height: 100vh; min-height: 100svh; padding: 0; } /* Wordmark ancorado na base, ocupando 100% da largura da janela */ .hero__wordmark { position: absolute; left: 0; bottom: var(--hero-wordmark-bottom); z-index: 1; } /* Foto ancorada na base, centralizada, à frente do wordmark */ .hero__photo { position: absolute; left: var(--hero-photo-x); bottom: 0; z-index: 2; width: auto; max-width: none; height: var(--hero-photo-h); margin: 0; transform: translateX(-50%); } /* Frase no canto inferior direito */ .hero__statement { position: absolute; right: 0; bottom: 15vh; /* acima da altura típica do banner de cookies */ z-index: 3; max-width: calc(26ch + var(--pad-x) * 2); /* 26ch de texto + o respiro */ margin: 0; font-size: 15px; line-height: 1.45; } /* SCROLL no canto inferior esquerdo */ .hero__scroll { position: absolute; left: 0; bottom: 40px; z-index: 3; margin: 0; } .hero__scroll-line { height: 64px; } } /* No desktop o banner de cookies fica exatamente sobre o rótulo SCROLL (ambos ancorados na base da janela). Enquanto o banner estiver visível, o rótulo — que é só um indicativo — some com um fade e volta depois da escolha do visitante. A classe .cookies-open é aplicada ao em script.js. No mobile o hero rola normalmente, então nada muda. */ @media (min-width: 1024px) { .hero__scroll { transition: opacity 0.4s var(--ease); } .cookies-open .hero__scroll { opacity: 0; pointer-events: none; } } /* Telas muito largas e baixas (ultrawide): o wordmark cresce junto com a largura, então a foto e o wordmark ganham um pouco menos de altura para a composição não estourar a janela. */ @media (min-width: 1800px) and (max-height: 900px) { :root { --hero-wordmark-bottom: 22vh; --hero-photo-h: 72vh; } } /* ============================================================================ 05. QUEM É LAÍS ============================================================================ */ /* A .about entra deslizando da direita (script.js, bloco 06), começando fora da tela. O overflow-x: hidden do body já impede a barra de rolagem horizontal, mas a área rolável continua existindo por baixo. O clip aqui zera isso de vez: nada além da largura da janela entra na conta da rolagem — o que também protege contra Safari/iOS arrastando de lado e contra rolagem programática (navegação por teclado). Em navegadores sem suporte a overflow: clip, o body cobre o caso. */ main { overflow-x: clip; } .about { position: relative; /* Passa por cima do hero durante o pin (bloco 06). O fundo branco é o que faz a seção "cobrir" de verdade: sem ele o hero apareceria por baixo. O z-index vale também fora do efeito e não muda nada no resto. */ z-index: 2; background: var(--white); overflow: hidden; padding-block: var(--section-y); } /* Recuo que deita a .about por cima do espaço do hero — é o que faz o fim do pin cair exatamente no fluxo normal, sem vão branco nem emenda (a conta está explicada no bloco 06 do script.js). A classe é posta e removida pelo JS, então no mobile e no reduced-motion este recuo simplesmente não existe. IMPORTANTE: este valor tem de ser IGUAL à altura do hero. Ele usa a mesma unidade do min-height do .hero de propósito — se você mudar a altura do hero lá em cima, mude aqui também, senão a emenda desalinha. */ .about--overlay { margin-top: -100vh; margin-top: -100svh; } /* Borda de cima dissolvida ENQUANTO a seção sobe: sem isso a margem superior entra como uma linha reta dura atravessando a tela. A classe é posta e retirada pelo JS (bloco 06) — ela sai quando a seção assenta, para a máscara não pesar nem interferir na leitura do conteúdo depois. --about-mask-size é a altura da dissolvida (o JS anima esse valor até 0% no fim do percurso, então a máscara já sai sem "pulo"). Aumente para uma passagem mais esfumada, diminua para uma borda mais definida. */ .about--masked { --about-mask-size: 14%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--about-mask-size)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--about-mask-size)); } /* Textura tipográfica ao fundo: "LAÍS" gigante em cinza translúcido */ .about__backdrop { position: absolute; top: 50%; left: 50%; z-index: 0; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: min(34vw, 460px); line-height: 1; letter-spacing: -0.02em; color: rgba(10, 10, 10, 0.05); pointer-events: none; user-select: none; white-space: nowrap; } .about__grid { position: relative; z-index: 1; display: grid; gap: 40px; } /* Retrato — o quadro segue a proporção da foto (1100x1600 = 0,6875), só um pouquinho mais baixo (0,7) para o corte comer os ~30px de faixa escura que existem no rodapé da imagem original. Ancorado no topo, nada é cortado do rosto. Se trocar por uma foto com outra proporção, ajuste o aspect-ratio (4 / 5 dá um quadro mais fechado, que o object-fit: cover recorta sozinho). O grayscale mantém a paleta estritamente preto e branco: remova a linha do filter se algum dia quiser a foto em cores. */ .about__portrait { width: 100%; aspect-ratio: 0.7; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.06); background: var(--grey-200); /* fundo enquanto a imagem carrega */ } .about__title { margin: 16px 0 24px; font-size: clamp(48px, 13vw, 96px); } .about__text { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--black); max-width: 58ch; } .about__signature { margin-top: 32px; font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--grey-600); } @media (min-width: 900px) { /* No desktop a textura fica atrás da coluna de texto (o retrato é opaco e cobriria as primeiras letras se ela ficasse centralizada). */ .about__backdrop { left: 44%; font-size: min(30vw, 400px); transform: translate(0, -50%); } .about__grid { grid-template-columns: 5fr 6fr; /* retrato + texto */ gap: 80px; align-items: center; } .about__title { font-size: clamp(72px, 7vw, 112px); } .about__text { font-size: 17px; } } /* ============================================================================ 06. NOSSAS ESPECIALIDADES ============================================================================ */ .services { padding-block: var(--section-y); border-top: 1px solid var(--grey-200); } .services__head { margin-bottom: 56px; } .services__title { margin-top: 16px; font-size: clamp(44px, 11vw, 88px); } .services__grid { display: grid; gap: 1px; /* filetes do grid suíço */ background: var(--grey-200); /* aparece pelos gaps */ border-block: 1px solid var(--grey-200); } /* --- Card --- */ .card { display: flex; flex-direction: column; gap: 12px; background: var(--white); padding: 36px 4px 44px; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); } .card__num { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--grey-400); transition: color 0.4s var(--ease); } .card__title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; } .card__text { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--grey-600); transition: color 0.4s var(--ease); } .card__tags { margin-top: auto; padding-top: 20px; font-size: 12px; letter-spacing: 0.02em; color: var(--grey-400); transition: color 0.4s var(--ease); } /* Inversão de cor no hover — só onde há ponteiro real */ @media (hover: hover) and (min-width: 900px) { .card { padding-inline: 28px; } .card:hover { background: var(--black); color: var(--white); } .card:hover .card__num, .card:hover .card__text, .card:hover .card__tags { color: var(--grey-400); } } @media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .services__grid { grid-template-columns: repeat(3, 1fr); } .card { padding-block: 44px 52px; } } /* --- MODO TRILHO HORIZONTAL (desktop) ------------------------------------- BREAKPOINT: 1024px, o mesmo do pin do hero (script.js, bloco 06). A classe .services--rail é posta e removida pelo JS (script.js, bloco 08), nunca no HTML. Isso é deliberado: o layout horizontal só passa a existir se o GSAP carregou e vai animá-lo. Sem GSAP, com prefers-reduced-motion ou abaixo de 1024px a classe nunca aparece, o grid de colunas acima segue valendo e os 6 cards continuam todos visíveis e alcançáveis — nunca ficam clipados fora da tela. Mesmo padrão do .about--overlay (bloco 06). KNOBS DE LAYOUT: são as custom properties abaixo. Mexa AQUI, não no JS — o JS mede o trilho já montado (scrollWidth) em vez de recalcular a soma das larguras, então largura e gap têm uma única fonte de verdade. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { .services--rail { --rail-card-w: 420px; /* largura de cada card (confortável: 380–460px) */ --rail-gap: 0px; /* 0 = emenda suíça de 1px pelo border-left dos cards. Se subir isto, tire o border-left. */ --rail-card-pad: 36px; /* padding lateral dentro do card */ --rail-head-top: 40px; /* folga entre a navbar e o eyebrow */ --rail-head-gap: 40px; /* folga entre o head e o trilho */ /* Respiros das pontas = meia tela menos meio card. NÃO é decoração: é o que faz o card 01 NASCER centralizado e o 06 MORRER centralizado, de modo que os seis passem pelo mesmo ponto de foco (o centro da tela) e ganhem destaque sempre na mesma posição — é isso que permite ler card a card. Com as folgas antigas (--pad-x) o 01 já começava colado na margem esquerda e o 06 acabava na direita: nenhum dos dois chegava ao centro. Efeito colateral desejado: o percurso do trilho deixa de ser (largura da fileira − tela) e passa a ser exatamente 5 × --rail-card-w, o mesmo em qualquer largura de tela — some o 100vw na conta. O pin fica proporcionalmente mais longo, que é o custo de cada card ter sua vez. O 50vw conta a barra de rolagem clássica, enquanto o JS mede o clientWidth (que não a conta). A diferença é a largura da barra — 0 no macOS com barras sobrepostas — e só desloca o ponto de foco por alguns pixels, sem quebrar nada. */ --rail-lead: calc(50vw - var(--rail-card-w) / 2); --rail-trail: calc(50vw - var(--rail-card-w) / 2); /* --- KNOBS DO DESTAQUE (card ativo) --- --rail-active-scale: quanto o card em foco cresce. Acima de ~1.06 ele come demais os vizinhos e o texto borra no reescalonamento. --rail-idle-opacity: o quanto os cards fora de foco recuam. 1 desliga o escurecimento e deixa só a escala + sombra. --rail-lift-room: folga vertical DENTRO da janela para o card crescido e a sombra caberem. A janela tem overflow: clip; sem esta folga o topo e a base do card ativo seriam decepados. Deixe >= metade do crescimento (altura × (escala − 1) / 2) mais o desfoque da sombra. --rail-lift-shadow: a elevação em si. Discreta de propósito: o resto da página é plana, de filete de 1px. */ --rail-active-scale: 1.045; --rail-idle-opacity: 0.45; --rail-lift-room: 30px; --rail-lift-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.28); /* Altura exata da viewport: durante o pin a seção ocupa a tela inteira, sem cortar nada embaixo nem deixar o CTA aparecer por trás. Mesma unidade do min-height do .hero, de propósito. O padding-top desconta a navbar fixa: no início do pin o topo da seção encosta no topo da tela, e sem isso o título ficaria atrás da navbar. */ height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-block: calc(var(--nav-h) + var(--rail-head-top)) 0; } .services--rail .services__head { margin-bottom: var(--rail-head-gap); } /* A janela: clipa a fileira e nada mais. overflow: clip (e não hidden) de propósito — clip NÃO cria scrollport, então não nasce barra de rolagem nem existe rolagem lateral programática ou por teclado que possa desalinhar o trilho durante o pin. Mesmo raciocínio do main { overflow-x: clip } lá em cima. */ .services--rail .services__viewport { max-width: none; padding-inline: 0; /* A folga vertical é o "teto e chão" do card em destaque: ele cresce e projeta sombra, e o clip abaixo decepa qualquer coisa que passe da caixa. Como o trilho tem height: 100%, isto encurta os cards no mesmo tanto — a fileira continua encaixada na tela, sem estourar o 100svh. */ padding-block: var(--rail-lift-room); overflow: clip; flex: 1 1 auto; min-height: 0; /* sem isto o flex item estoura a altura e ignora o clip */ min-width: 0; } /* O trilho: fileira flex mais larga que a tela. width: max-content deixa a largura real mensurável pelo JS, sem depender de o pai clipar. height: 100% faz os cards ocuparem a altura toda — e o margin-top: auto das tags (acima) alinha todas na base. */ .services--rail .services__grid { display: flex; width: max-content; height: 100%; gap: var(--rail-gap); grid-template-columns: none; /* desarma o grid de 3 colunas */ background: var(--white); /* não mais --grey-200: ver nota abaixo */ padding-inline: var(--rail-lead) var(--rail-trail); } /* O padding-inline é declarado aqui, e NÃO só na query (hover: hover) acima: num notebook com tela de toque aquela query não casa e os cards do trilho ficariam com os 4px de padding base. */ .services--rail .card { flex: 0 0 var(--rail-card-w); padding-inline: var(--rail-card-pad); /* position + z-index: o card em destaque cresce e invade os vizinhos. Sem contexto de empilhamento ele passaria POR BAIXO dos que vêm depois na ordem do DOM, e a borda do vizinho cortaria o card em foco ao meio. */ position: relative; z-index: 0; opacity: var(--rail-idle-opacity); /* Repete background-color e color porque esta declaração SUBSTITUI a transition da .card lá em cima — sem elas a inversão do :hover voltaria a ser instantânea. A duração é maior que a do hover (0.4s) de propósito: o destaque acompanha o scroll e um corte seco chamaria atenção demais. */ transition: transform 0.55s var(--ease), opacity 0.55s var(--ease), box-shadow 0.55s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease); } /* O card em foco. A classe entra e sai pelo JS (script.js, bloco 08), um ScrollTrigger por card amarrado ao trilho por containerAnimation; quem anima é a transition acima, não o GSAP. Assim não há estilo inline brigando com o :hover e todo o visual do destaque mora aqui. A escala é só transform: não reflui nada, não desloca os vizinhos e não altera a medida do trilho que o JS usa para calcular o percurso. */ .services--rail .card--active { z-index: 2; opacity: 1; transform: scale(var(--rail-active-scale)); box-shadow: var(--rail-lift-shadow); } /* O ponteiro parado vira um segundo "foco" enquanto a fileira desliza por baixo dele. Sem isto o card sob o cursor inverteria para preto ainda escurecido pela opacidade de repouso, e o texto branco sumiria no cinza. */ @media (hover: hover) { .services--rail .card:hover { opacity: 1; } } /* Os filetes suíços passam a ser borda do card, em vez do gap de 1px sobre fundo cinza. Motivo: com o fundo cinza no trilho, os respiros de lead e trail virariam duas faixas cinzas nas pontas da fileira. Com border-left o trilho fica branco e as emendas continuam idênticas — agora de altura cheia, o que reforça o desenho editorial. */ .services--rail .card + .card { border-left: 1px solid var(--grey-200); } } /* ============================================================================ 07. CTA FINAL ============================================================================ */ .cta { /* KNOB do tamanho da chamada — mexa só aqui. Como ler o clamp: o 3º valor (o teto) é o que manda de ~990px para cima, onde 8.5vw já passou dele; o 1º (o piso) manda no celular, onde 8.5vw ficaria pequeno demais; o do meio só governa a faixa do tablet. O teto era 132px, o mesmo do .footer__brand — ou seja, o maior tipo da página. Isso punha a chamada final ACIMA do título de "Nossas especialidades" (88px) na hierarquia visual, e num monitor grande a frase ocupava a tela quase inteira. Em 84px ela fica logo abaixo dele: continua sendo o clímax da página pelo bloco preto e pelo botão, não pelo berro. */ --cta-title-size: clamp(38px, 8.5vw, 84px); background: var(--black); color: var(--white); padding-block: calc(var(--section-y) * 1.1); } .cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; } .cta__title { /* Em ch, e não px: a medida acompanha o tamanho da fonte, então a quebra de linha da frase continua caindo no mesmo lugar depois do ajuste acima. */ max-width: 18ch; font-size: var(--cta-title-size); letter-spacing: -0.02em; } .cta__btn { margin-top: 8px; } @media (min-width: 900px) { .cta__inner { align-items: center; text-align: center; } .cta__title { max-width: 22ch; } } /* ============================================================================ 08. FOOTER ============================================================================ */ .footer { padding-block: 64px 40px; border-top: 1px solid var(--grey-200); } .footer__brand { font-size: clamp(40px, 13vw, 132px); margin-bottom: 48px; } .footer__grid { display: grid; gap: 32px; padding-top: 32px; border-top: 1px solid var(--grey-200); } .footer__label { margin-bottom: 12px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-600); } .footer__item { font-size: 15px; font-weight: 300; } .footer__link { text-decoration: none; border-bottom: 1px solid var(--grey-400); padding-bottom: 1px; transition: border-color 0.3s var(--ease); } .footer__link:hover { border-color: var(--black); } .footer__copy { margin-top: 56px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-400); } @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } } /* ============================================================================ 09. BANNER DE COOKIES (LGPD) ============================================================================ */ .cookies { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--white); border-top: 1px solid var(--black); transform: translateY(100%); transition: transform 0.5s var(--ease); } .cookies[hidden] { display: none; } .cookies.is-visible { transform: none; } .cookies__inner { display: flex; flex-direction: column; gap: 20px; max-width: var(--max-w); margin-inline: auto; padding: 24px var(--pad-x); } .cookies__title { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; } .cookies__text { font-size: 13px; font-weight: 300; line-height: 1.6; max-width: 68ch; color: var(--grey-600); } .cookies__link { color: var(--black); text-decoration: underline; } .cookies__actions { display: flex; flex-wrap: wrap; gap: 12px; } .cookies__actions .btn { flex: 1 1 auto; } @media (min-width: 768px) { .cookies__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } .cookies__actions { flex: 0 0 auto; } .cookies__actions .btn { flex: 0 0 auto; } } /* ============================================================================ 10. PÁGINA DE PRIVACIDADE (privacidade.html) ============================================================================ */ .legal { padding-top: calc(var(--nav-h) + var(--section-y)); padding-bottom: var(--section-y); } .legal__title { margin: 16px 0 12px; font-size: clamp(40px, 11vw, 96px); } .legal__updated { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-400); padding-bottom: 40px; border-bottom: 1px solid var(--grey-200); } .legal__body { max-width: 72ch; } .legal__body h2 { margin: 56px 0 16px; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; } .legal__body h3 { margin: 32px 0 12px; font-size: 16px; font-weight: 600; } .legal__body p, .legal__body li { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--grey-600); } .legal__body p { margin-bottom: 16px; } .legal__body ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; } .legal__body li { margin-bottom: 8px; } .legal__body a { color: var(--black); text-decoration: underline; } .legal__body strong { color: var(--black); font-weight: 500; } .legal__body code { background: var(--grey-100); padding: 2px 6px; font-size: 0.9em; color: var(--black); } /* ============================================================================ 11. MOTION REDUZIDO Respeita a preferência do sistema do usuário. Do lado do JS (script.js), a mesma preferência impede que o Lenis e o efeito da .about sejam iniciados — a rolagem volta a ser a nativa do navegador. ============================================================================ */ @media (prefers-reduced-motion: reduce) { /* Explícito, ainda que já seja o padrão: garante rolagem instantânea nas âncoras mesmo se alguém reintroduzir um scroll-behavior: smooth acima. */ html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .reveal { opacity: 1; transform: none; } }