/* ═══════════════════════════════════════════════════════════════ GIRINO · site.css Tokens vindos do design-system.html v0.2 ═══════════════════════════════════════════════════════════════ */ /* ── TOKENS ──────────────────────────────────────────────────── */ :root{ /* neutros quentes — nunca cinza puro, suja ao lado do âmbar */ --n0:#FFFFFF; --n1:#F4F0E6; --n2:#EBE5D6; --n3:#E1D9C4; --n4:#C9C0AC; --n5:#9A9284; --n6:#6E6656; --n7:#423C33; --n8:#26231E; --n9:#121110; /* âmbar — a única cor de marca */ --a1:#FFE58A; --a2:#FCC000; --a3:#D9A400; /* Máscaras embutidas em base64 de propósito: com url() apontando pra arquivo, o mask-image não carrega quando a página é aberta por file:// — o Chrome trata cada arquivo local como origem isolada e o elemento some. Em data: URI funciona nos dois casos. */ --sig:url('data:image/png;base64,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'); --bg:var(--n1); --fg:var(--n9); --muted:var(--n6); --line:rgba(18,17,16,.16); --nav-h:70px; --pad:clamp(18px,4.4vw,56px); --ease:cubic-bezier(.2,.8,.2,1); } /* ── BASE ────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ background:var(--bg); color:var(--fg); font-family:"Familjen Grotesk",system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* Foco de teclado. Sem isto quem navega por Tab não enxerga onde está — e vários focáveis aqui (logo, links do menu, o "Role", os botões da sanfona) não têm indicação nenhuma por padrão. */ :where(a,button,input,select,[tabindex]):focus-visible{ outline:2px solid var(--a2); outline-offset:3px; border-radius:1px; } /* sobre o âmbar, o contorno âmbar sumiria */ .clients :focus-visible,.fala :focus-visible{outline-color:var(--n9)} .mono{ font-family:"Martian Mono","SFMono-Regular",monospace; font-size:10px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; } /* a marca como tinta chapada — recolore com currentColor */ .signature{ display:block; aspect-ratio:1258/439; background:currentColor; -webkit-mask:var(--sig) center/contain no-repeat; mask:var(--sig) center/contain no-repeat; } .btn{ display:inline-flex; align-items:center; gap:10px; font-family:"Martian Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; padding:13px 20px; border:1px solid transparent; transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease); white-space:nowrap; } .btn .arw{transition:transform .28s var(--ease)} .btn:hover .arw{transform:translateX(5px)} .btn--brand{background:var(--a2);color:var(--n9)} .btn--brand:hover{background:var(--a3)} /* ── MENU ────────────────────────────────────────────────────── */ .nav{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h); display:flex; align-items:center; gap:24px; padding:0 var(--pad); transition:background .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; } /* sólido depois que sai do hero */ .nav.is-stuck{ background:color-mix(in srgb, var(--n1) 88%, transparent); backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:var(--line); } .nav__logo{flex:none;width:104px;color:var(--n9)} .nav__logo .signature{width:100%} .nav__links{display:flex;gap:4px;margin-left:auto} .nav__links a{ position:relative; padding:9px 14px; font-family:"Martian Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--n6); transition:color .25s var(--ease), text-shadow .3s var(--ease); /* halo creme: mantém legível quando a tinta passa por trás */ text-shadow:0 0 10px rgba(244,240,230,.95), 0 0 3px rgba(244,240,230,.95); } .nav.is-stuck .nav__links a{text-shadow:none} .nav__links a::after{ content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px; background:var(--n9); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease); } .nav__links a:hover{color:var(--n9)} .nav__links a:hover::after{transform:scaleX(1)} .nav__end{display:flex;align-items:center;gap:12px} .nav__burger{ display:none; width:42px; height:42px; border:1px solid var(--line); background:transparent; cursor:pointer; position:relative; } .nav__burger span{ position:absolute; left:12px; right:12px; height:1.5px; background:var(--n9); transition:transform .34s var(--ease), opacity .2s linear; } .nav__burger span:nth-child(1){top:17px} .nav__burger span:nth-child(2){bottom:17px} /* as barras estão a 17px do topo e da base de um botão de 42px: precisam andar 3.25px cada pra se encontrarem no centro exato */ .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)} /* com o overlay escuro aberto, o menu fixo precisa inverter — senão logo e hambúrguer ficam pretos sobre preto */ .is-menu .nav__logo{color:var(--n1)} .is-menu .nav__burger{border-color:rgba(244,240,230,.28)} .is-menu .nav__burger span{background:var(--n1)} /* menu mobile em tela cheia */ .menu{ position:fixed; inset:0; z-index:55; background:var(--n9); color:var(--n1); display:flex; flex-direction:column; justify-content:center; padding:var(--nav-h) var(--pad) var(--pad); opacity:0; transition:opacity .32s var(--ease); } /* CRÍTICO. O atributo hidden só esconde porque a folha do navegador aplica display:none — e o display:flex acima ganha dele. Sem esta linha o menu fica invisível (opacity:0) mas continua fixo cobrindo a tela inteira em z-index 55, comendo todo clique e todo hover da página. Sanfona, hover das telas e do marquee: nada funcionava. */ .menu[hidden]{display:none} .menu.is-open{opacity:1} .menu__links{display:flex;flex-direction:column;gap:4px} .menu__links a{ display:flex; align-items:baseline; gap:16px; font-family:"Unbounded",sans-serif; font-weight:600; font-size:clamp(27px,8.2vw,56px); letter-spacing:-.05em; line-height:1.16; padding:6px 0; opacity:0; transform:translateY(18px); transition:opacity .4s var(--ease), transform .4s var(--ease), color .2s linear; } .menu.is-open .menu__links a{opacity:1;transform:none} .menu.is-open .menu__links a:nth-child(1){transition-delay:.06s} .menu.is-open .menu__links a:nth-child(2){transition-delay:.11s} .menu.is-open .menu__links a:nth-child(3){transition-delay:.16s} .menu.is-open .menu__links a:nth-child(4){transition-delay:.21s} .menu__links a:active{color:var(--a2)} .menu__n{ font-family:"Martian Mono",monospace; font-size:11px; font-weight:400; letter-spacing:.14em; color:var(--a2); } .menu__foot{ margin-top:auto; padding-top:32px; border-top:1px solid rgba(244,240,230,.17); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:"Martian Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--n5); } .menu__foot a{color:var(--a2)} /* ── HERO ────────────────────────────────────────────────────── */ /* .hero é a pista de scroll; .hero__stage é o que fica na tela */ /* 210svh: pista curta o bastante pra não ter rolagem morta. Era 280 e sobrava caminho sem nada acontecendo. */ .hero{height:210svh;position:relative} .hero__stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--n1); isolation:isolate; } .hero__canvas,.hero__fallback{ position:absolute; inset:0; width:100%; height:100%; display:block; } .hero__fallback{display:none} body[data-ink="fallback"] .hero__canvas{display:none} body[data-ink="fallback"] .hero__fallback{display:block} /* Scrims: garantem legibilidade do texto sobre qualquer frame. O da esquerda protege a coluna de texto e deixa o centro da tinta intacto — é onde mora o drama. */ .hero__stage::before, .hero__stage::after{content:'';position:absolute;z-index:2;pointer-events:none} .hero__stage::before{ inset:0 auto 0 0; width:56%; background:linear-gradient(to right, var(--n1) 0%, rgba(244,240,230,.90) 17%, rgba(244,240,230,.52) 34%, transparent 100%); } .hero__stage::after{ inset:auto 0 0 0; height:26%; background:linear-gradient(to top, rgba(244,240,230,.78) 0%, transparent 100%); } .hero__grain{ position:absolute; inset:0; pointer-events:none; opacity:.07; z-index:2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } /* a assinatura que emerge da tinta */ .hero__mark{ position:absolute; z-index:3; left:50%; top:43%; /* acima do centro: dá ar entre a marca e a manchete */ width:min(54vw,580px); color:var(--n9); translate:-50% -50%; opacity:0; will-change:opacity,filter,scale; } .hero__ui{ position:absolute; inset:0; z-index:4; pointer-events:none; display:flex; flex-direction:column; padding:calc(var(--nav-h) + 14px) var(--pad) var(--pad); } .hero__ui a{pointer-events:auto} /* scrim do topo: abre espaço pro menu respirar sobre a tinta */ .hero__ui::before{ content:''; position:absolute; inset:0 0 auto 0; height:17%; pointer-events:none; background:linear-gradient(to bottom, rgba(244,240,230,.88) 0%, rgba(244,240,230,.5) 52%, transparent 100%); } .hero__bottom{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; } /* largura fixa: como item flex ele encolhia até min-content e a manchete quebrava palavra por palavra */ .hero__pitch{flex:0 1 auto;width:min(660px,54vw);max-width:100%} .hero__pitch h1{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(30px,4.6vw,60px); line-height:1.0; letter-spacing:-.05em; } .hero__pitch p{ margin-top:16px; max-width:34ch; color:var(--n7); font-size:clamp(14px,1.5vw,17px); line-height:1.55; } .hero__cue{ display:flex; align-items:center; gap:12px; color:var(--n6); padding-bottom:6px; text-shadow:0 0 10px rgba(244,240,230,.95), 0 0 3px rgba(244,240,230,.95); } .hero__cue-line{ display:block; width:52px; height:1px; background:var(--n4); position:relative; overflow:hidden; } .hero__cue-line::after{ content:''; position:absolute; inset:0; background:var(--n9); transform:translateX(-100%); animation:cue 2.4s var(--ease) infinite; } @keyframes cue{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} } .hero__data{ display:flex; gap:clamp(14px,2.6vw,34px); flex-wrap:wrap; align-items:center; margin-top:26px; padding-top:16px; border-top:1px solid var(--line); color:var(--n6); opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .hero__data.is-in{opacity:1;transform:none} .hero__data b{color:var(--n9);font-weight:600} .hero__data--wide{margin-left:auto;color:var(--n5)} /* ── 02 · CLIENTES ───────────────────────────────────────────── */ .clients{ position:relative; background:var(--a2); color:var(--n9); /* respiro curto: o marquee agora é a última coisa da seção, e logo abaixo já começa a virada pro breu. Sobra amarelo demais aqui e o ritmo trava. */ padding:0 0 clamp(28px,4vw,56px); overflow:hidden; isolation:isolate; } /* a virada de cor: canvas fixo no topo da seção, creme → âmbar */ .clients__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } .clients__head{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:clamp(52px,7vw,92px) var(--pad) clamp(34px,4.6vw,54px); } .clients__eyebrow{color:rgba(18,17,16,.55);margin-bottom:clamp(18px,3vw,30px)} .clients__head h2{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(28px,5vw,66px); line-height:1.0; letter-spacing:-.05em; max-width:16ch; } .clients__head p{ margin-top:clamp(18px,2.4vw,26px); max-width:46ch; color:rgba(18,17,16,.68); font-size:clamp(14px,1.5vw,17px); line-height:1.6; } /* ── marquee ───────────────────────────────────────────────── Quatro faixas em direções alternadas. A velocidade base é lenta; o scroll acelera. Passar o mouse na faixa congela ela. */ .marquee{position:relative;z-index:2;display:flex;flex-direction:column;gap:1px; background:rgba(18,17,16,.16);border-block:1px solid rgba(18,17,16,.16)} .marquee__row{overflow:hidden} .marquee__track{display:flex;width:max-content;will-change:transform} .cli{ flex:none; width:clamp(132px,13vw,176px); aspect-ratio:12/5; display:grid; place-items:center; padding:10px 13px; border-right:1px solid rgba(18,17,16,.12); /* O âmbar fica NA CÉLULA, não na faixa. O transform do track cria contexto de empilhamento isolado — se o fundo estiver fora dele, o multiply da imagem mistura com o vazio e o branco não some. */ background:var(--a2); transition:background .3s var(--ease); } .cli img{ width:100%; height:100%; object-fit:contain; /* multiply mata o retângulo branco do JPEG sem precisar de recorte */ mix-blend-mode:multiply; filter:grayscale(1) contrast(1.2); opacity:.82; transition:filter .3s var(--ease), opacity .3s var(--ease); } .cli:hover{background:var(--n1)} .cli:hover img{filter:none;opacity:1} @media (max-width:880px){ .cli{width:clamp(118px,34vw,150px)} } @media (prefers-reduced-motion:reduce){ .marquee__track{transform:none!important} } /* ── 03 · TRABALHOS ──────────────────────────────────────────── */ .works{ position:relative; background:var(--n9); color:var(--n1); padding:0 0 clamp(52px,7vw,96px); overflow:hidden; isolation:isolate; } .works__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Sem min-height: a faixa de virada já cumpriu o papel de respiro, e a manchete agora nasce sobre a cor chapada da seção. */ .works__head{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:clamp(52px,7vw,92px) var(--pad) clamp(34px,4.6vw,54px); } .works__eyebrow{color:rgba(244,240,230,.5);margin-bottom:clamp(18px,3vw,30px)} .works__head h2{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(28px,5vw,66px); line-height:1.0; letter-spacing:-.05em; max-width:17ch; } .works__head p{ margin-top:clamp(18px,2.4vw,26px); max-width:48ch; color:rgba(244,240,230,.62); font-size:clamp(14px,1.5vw,17px); line-height:1.6; } .works__grid{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 var(--pad); display:grid; gap:clamp(9px,1.3vw,16px); grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); } .tela{ position:relative; overflow:hidden; aspect-ratio:600/414; background:var(--n8); border:1px solid rgba(244,240,230,.13); transition:border-color .4s var(--ease), box-shadow .4s var(--ease); } .tela img{ width:100%; height:100%; object-fit:cover; object-position:top center; /* dessaturado por padrão: 62 telas em cor cheia viram feira */ filter:saturate(.5) brightness(.86) contrast(1.04); transition:filter .45s var(--ease), transform .6s var(--ease); } /* Holofote. O que faz a tela escolhida parecer viva não é ela acender — é as vizinhas recuarem. Sozinho, o realce passa despercebido no meio de 62 cartões. Só onde existe mouse de verdade: no toque o :hover gruda e a grade ficaria apagada depois do tap. */ @media (hover:hover) and (pointer:fine){ .works__grid:hover .tela img{ filter:saturate(.26) brightness(.5) contrast(1.02); } .works__grid:hover .tela:hover img{ /* acima de 1: fica mais viva que o original, não só "normal" */ filter:saturate(1.12) brightness(1.06) contrast(1.05); transform:scale(1.06); } .works__grid .tela:hover{ border-color:var(--a2); z-index:3; box-shadow:0 22px 54px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(252,192,0,.45); } .works__grid:hover .tela--mais{opacity:.45;transition:opacity .45s var(--ease)} .works__grid:hover .tela--mais:hover{opacity:1} } .tela--mais{ display:grid; place-content:center; justify-items:center; text-align:center; gap:9px; background:var(--a2); border-color:var(--a2); color:var(--n9); padding:18px; } .tela--mais b{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(28px,3.4vw,46px); letter-spacing:-.055em; line-height:1; } .tela--mais .mono{color:rgba(18,17,16,.68);line-height:1.7} .tela--mais .btn{margin-top:8px;padding:11px 16px} .btn--breu{background:var(--n9);color:var(--a2)} .btn--breu:hover{background:#000} @media (max-width:880px){ .works__grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))} } /* ── 04 · CAPACIDADES ────────────────────────────────────────── */ .caps{ position:relative; background:var(--n1); color:var(--n9); padding:0 0 clamp(56px,8vw,110px); overflow:hidden; isolation:isolate; } .caps__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } .caps__head{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:clamp(52px,7vw,92px) var(--pad) clamp(34px,4.6vw,54px); } .caps__eyebrow{color:var(--n6);margin-bottom:clamp(18px,3vw,30px)} .caps__head h2{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(28px,5vw,66px); line-height:1.0; letter-spacing:-.05em; } .caps__head p{ margin-top:clamp(18px,2.4vw,26px); max-width:50ch; color:var(--n6); font-size:clamp(14px,1.5vw,17px); line-height:1.6; } /* ── lista expansível ─────────────────────────────────────── Não são cinco cards com ícone. É índice: a pessoa lê os cinco nomes em dois segundos e abre só o que interessa. */ .caps__lista{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 var(--pad); border-top:1px solid var(--line); } .cap{border-bottom:1px solid var(--line)} /* O

em volta do botão existe só pro esqueleto do documento: é ele que coloca "Criação de sites", "Desenvolvimento de sistemas" e o resto no índice de títulos que o Google e os motores de resposta leem como "os serviços daqui". Na tela não muda nada — por isso zera margem e herda a fonte do botão. */ .cap h3{margin:0;font:inherit} .cap__topo{ width:100%; background:none; border:0; cursor:pointer; text-align:left; display:grid; grid-template-columns:56px 1fr 32px; align-items:center; gap:14px; padding:clamp(20px,2.6vw,30px) 0; color:var(--n9); transition:color .3s var(--ease); } .cap__topo:hover{color:var(--n6)} .cap__n{color:var(--n5);transition:color .3s var(--ease)} .cap.aberto .cap__n{color:var(--a3)} .cap__nome{ font-family:"Unbounded",sans-serif; font-weight:600; font-size:clamp(19px,3.1vw,38px); letter-spacing:-.04em; line-height:1.1; } /* o sinal é feito com duas barras: a vertical some ao abrir */ .cap__sinal{position:relative;width:18px;height:18px;justify-self:end} .cap__sinal::before,.cap__sinal::after{ content:''; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--n9); transition:transform .4s var(--ease); } .cap__sinal::after{transform:rotate(90deg)} .cap.aberto .cap__sinal::after{transform:rotate(0deg)} /* grid-template-rows anima nos dois sentidos; height:auto não anima */ .cap__corpo{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); } .cap.aberto .cap__corpo{grid-template-rows:1fr} .cap__corpo > div{overflow:hidden} .cap__corpo p{ max-width:56ch; margin-left:70px; padding-bottom:clamp(20px,2.6vw,30px); color:var(--n6); font-size:clamp(14px,1.6vw,17.5px); line-height:1.62; } @media (max-width:880px){ .cap__topo{grid-template-columns:38px 1fr 24px;gap:10px} .cap__corpo p{margin-left:48px} } @media (prefers-reduced-motion:reduce){ .cap__corpo{transition:none} } /* ── 05 · ESTÚDIO ────────────────────────────────────────────── */ .studio{ position:relative; background:var(--n9); color:var(--n1); padding:clamp(56px,7.5vw,100px) 0 clamp(56px,8vw,104px); overflow:hidden; isolation:isolate; } .studio__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } .studio__head,.studio__corpo,.studio__tira{ position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 var(--pad); } .studio__eyebrow{color:rgba(244,240,230,.5);display:block;margin-bottom:clamp(18px,3vw,30px)} .studio__head h2{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(28px,5vw,66px); line-height:1.0; letter-spacing:-.05em; max-width:18ch; } /* texto e foto de destaque lado a lado */ .studio__corpo{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; margin-top:clamp(34px,4.6vw,60px); } .studio__texto p{ color:rgba(244,240,230,.68); font-size:clamp(14.5px,1.55vw,17.5px); line-height:1.68; margin-bottom:1.1em; max-width:46ch; } .studio__texto p b{color:var(--n1);font-weight:600} .studio__assina{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:clamp(22px,2.8vw,32px); padding-top:clamp(18px,2.2vw,26px); border-top:1px solid rgba(244,240,230,.17); } .studio__assina b{ font-family:"Unbounded",sans-serif; font-weight:600; font-size:clamp(17px,2vw,23px); letter-spacing:-.03em; color:var(--a2); } .studio__assina .mono{color:rgba(244,240,230,.5)} /* ── fotos ────────────────────────────────────────────────── Sem brilho: são fotos de celular, e um leve rebaixamento faz as cinco parecerem do mesmo lugar em vez de cinco registros soltos. O amarelo do escritório fica — é o que interessa. */ .studio figure{margin:0} .studio img{ width:100%; display:block; border:1px solid rgba(244,240,230,.14); filter:saturate(.94) contrast(1.04) brightness(.96); transition:filter .4s var(--ease); } .studio figcaption{ margin-top:11px; color:rgba(244,240,230,.46); line-height:1.6; } .studio__destaque img{aspect-ratio:16/9;object-fit:cover} .studio__tira{ display:grid; gap:clamp(10px,1.5vw,18px); margin-top:clamp(28px,4vw,52px); grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); } .studio__tira img{aspect-ratio:4/3;object-fit:cover} @media (hover:hover) and (pointer:fine){ .studio figure:hover img{filter:none} } @media (max-width:880px){ .studio__corpo{grid-template-columns:1fr} .studio__tira{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} } /* ── 06 · CONTATO ────────────────────────────────────────────── */ .fala{ position:relative; background:var(--a2); color:var(--n9); padding:clamp(56px,8vw,110px) 0 clamp(52px,7vw,96px); overflow:hidden; isolation:isolate; } .fala__grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } .fala__inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 var(--pad)} .fala__eyebrow{color:rgba(18,17,16,.55);display:block;margin-bottom:clamp(18px,3vw,30px)} .fala h2{ font-family:"Unbounded",sans-serif; font-weight:800; font-size:clamp(28px,5vw,66px); line-height:1.0; letter-spacing:-.05em; } /* ── o recado ──────────────────────────────────────────────── Não é formulário com rótulo e asterisco — é uma frase que a pessoa completa. O que ela escreve vira a mensagem do WhatsApp já pronta, então o primeiro contato chega escrito. */ .recado{margin-top:clamp(30px,4.4vw,56px)} .recado__isca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* line-height alto de propósito: cada campo tem sublinhado, e sem folga entre as linhas o texto vira pauta de caderno */ .recado__frase{ font-size:clamp(18px,2.2vw,28px); line-height:2.05; max-width:34ch; letter-spacing:-.015em; text-wrap:pretty; } @media (min-width:881px){ .recado__frase{max-width:72ch} } /* a linha da empresa é secundária: menor e mais apagada, pra ficar claro que dá pra pular sem prejuízo */ .recado__opc{font-size:.72em;color:rgba(18,17,16,.62)} .recado__opc input{font-size:1em} .recado input,.recado select{ font:inherit; color:var(--n9); background:transparent; border:0; border-bottom:2px solid rgba(18,17,16,.32); padding:0 2px 2px; margin:0 2px; transition:border-color .25s var(--ease), background .25s var(--ease); border-radius:0; } .recado input::placeholder{color:rgba(18,17,16,.38)} /* :focus-visible e não :focus — com :focus o select ficava com um retângulo claro grudado depois de escolher a opção com o mouse. Quem navega pelo teclado continua vendo o realce. */ .recado input:focus,.recado select:focus{outline:0;border-bottom-color:var(--n9)} .recado input:focus-visible,.recado select:focus-visible{background:rgba(18,17,16,.07)} .recado input:not(:placeholder-shown){border-bottom-color:var(--n9)} /* a seta do select precisa de espaço próprio */ .recado__sel{position:relative;display:inline-block} .recado select{appearance:none;padding-right:15px;cursor:pointer;max-width:86vw} .recado__sel::after{ content:'▾'; position:absolute; right:1px; bottom:5px; pointer-events:none; font-size:.52em; color:rgba(18,17,16,.5); } .recado__acoes{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:clamp(28px,3.6vw,46px); } .btn--linha{ background:transparent; color:var(--n9); border-color:rgba(18,17,16,.34); cursor:pointer; font-family:"Martian Mono",monospace; } .btn--linha:hover{background:var(--n9);color:var(--a2);border-color:var(--n9)} .recado__aviso{color:rgba(18,17,16,.7)} .recado__aviso.erro{color:#8C1D0E} /* ── dados ──────────────────────────────────────────────────── */ .fala__dados{ display:grid; gap:clamp(20px,3vw,40px); margin-top:clamp(44px,6vw,80px); padding-top:clamp(26px,3.4vw,40px); border-top:1px solid rgba(18,17,16,.22); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .fala__dados .mono{display:block;color:rgba(18,17,16,.55);margin-bottom:9px} .fala__dados a{ font-size:clamp(15px,1.7vw,19px); border-bottom:1px solid rgba(18,17,16,.3); transition:border-color .25s var(--ease); } .fala__dados a:hover{border-bottom-color:var(--n9)} .fala__dados p{font-size:clamp(14px,1.5vw,16.5px);line-height:1.62;color:rgba(18,17,16,.8)} /* ── rodapé ─────────────────────────────────────────────────── */ .rodape{background:var(--n9);color:var(--n1);padding:clamp(38px,5vw,64px) 0} .rodape__inner{ max-width:1240px; margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,40px); flex-wrap:wrap; } .rodape__logo{width:104px;color:var(--n1);flex:none} .rodape__logo .signature{width:100%} .rodape__links{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap} .rodape__links a{ font-family:"Martian Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:rgba(244,240,230,.6); transition:color .25s var(--ease); } .rodape__links a:hover{color:var(--a2)} .rodape__sep{width:1px;height:11px;background:rgba(244,240,230,.24);align-self:center} /* o Instagram é onde o portfólio vive de verdade — os posts que viraram as 62 telas saíram de lá. Vale um convite, não só um ícone perdido no rodapé. */ .works__insta{ display:inline-block; margin-top:14px; color:var(--a2); border-bottom:1px solid rgba(252,192,0,.4); transition:border-color .25s var(--ease); } .works__insta:hover{border-bottom-color:var(--a2)} .rodape__legal{color:rgba(244,240,230,.42);line-height:1.9;text-align:right} @media (max-width:880px){ .so-desktop{display:none} .rodape__inner{flex-direction:column;align-items:flex-start} .rodape__legal{text-align:left} } /* ── PLACEHOLDER DOS PRÓXIMOS BLOCOS ─────────────────────────── */ .stub{ min-height:70svh; display:grid; place-items:center; background:var(--n2); border-top:1px solid var(--line); color:var(--n5); } /* ── RESPONSIVO ──────────────────────────────────────────────── */ @media (max-width:880px){ .nav__links{display:none} .nav__burger{display:block} .nav__end .btn--brand{display:none} .nav__logo{width:88px} .hero__mark{width:74vw} .hero__data--wide{margin-left:0;width:100%} .hero__cue{display:none} .hero__pitch{width:100%} .nav__end{margin-left:auto} /* .nav__links sumiu, então é ele que empurra */ /* no celular a tinta é vertical: o scrim vira de baixo pra cima */ .hero__stage::before{inset:auto 0 0 0;width:auto;height:64%; background:linear-gradient(to top, var(--n1) 0%, rgba(244,240,230,.90) 26%, rgba(244,240,230,.45) 58%, transparent 100%)} .hero__stage::after{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero{height:100svh} .hero__cue-line::after{animation:none;transform:translateX(0)} .hero__mark{opacity:1!important;filter:none!important;scale:1!important} .hero__data{opacity:1;transform:none} }