/* ========================================================================== SOLAR FAZ · Página de links (bio / QR code) Página independente, pensada primeiro para o celular: uma coluna, alvos grandes, sem menu e sem scroll horizontal. Não importa o style.css do site para não carregar 2.600 linhas de layout que esta página não usa: os tokens da marca são repetidos aqui, iguais aos do site. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS · mesmos valores do css/style.css -------------------------------------------------------------------------- */ :root { --color-black: #161616; --color-orange: #FF7B02; --color-yellow: #FFB30B; --color-white: #FFFFFF; --ink-deep: #0C0A07; --ink-soft: #554D41; --gradient-sunrise: linear-gradient(135deg, #FFB30B 0%, #FF7B02 100%); --gradient-title: linear-gradient(135deg, #FF9A1F 0%, #FF7B02 100%); --font-display: "Chakra Petch", "Saira", system-ui, sans-serif; --font-body: "Inter", "Space Grotesk", system-ui, -apple-system, sans-serif; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; --glow-orange: 0 10px 26px rgba(255,123,2,.30); --ease: cubic-bezier(.22, .61, .36, 1); /* largura da coluna: um cartão de celular, mesmo quando aberto no desktop */ --col: 460px; /* respiro lateral e as áreas seguras do iPhone (notch e barra inferior) */ --pad: 20px; --safe-l: max(var(--pad), env(safe-area-inset-left)); --safe-r: max(var(--pad), env(safe-area-inset-right)); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* o corte lateral mora aqui, no , e não só no : a foto do fundo é ampliada (`scale`) para esconder a franja do desfoque, e essa sobra de ~6% de cada lado ficava arrastável no celular — a página deslizava e aparecia uma faixa preta na direita. `clip` em vez de `hidden` por dois motivos: `hidden` transforma o elemento em caixa de rolagem (só escondendo a barra, o arrasto continua valendo) e força o eixo vertical a `auto`; `clip` corta de vez, não cria rolagem nenhuma e convive com o `visible` do eixo Y, então a página continua rolando normal. o `hidden` fica antes como reserva para navegadores sem suporte a `clip` (Safari < 16) */ html { -webkit-text-size-adjust: 100%; color-scheme: dark; overflow-x: hidden; overflow-x: clip; /* sem isto o iOS ainda deixa a página "balançar" na horizontal */ overscroll-behavior-x: none; } body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--ink-deep); color: rgba(255,255,255,.82); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; overscroll-behavior: none; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; touch-action: manipulation; } button { font: inherit; color: inherit; touch-action: manipulation; } img, svg { display: block; max-width: 100%; } img { height: auto; } h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.1; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--color-yellow); color: var(--color-black); } :focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 3px; border-radius: var(--radius-md); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .grad { background: var(--gradient-title); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- 3. FUNDO · a mesma foto do banner sob o mesmo filtro escuro do hero -------------------------------------------------------------------------- */ /* as duas camadas dividem a mesma caixa: presa ao topo do documento e com a altura travada em `100lvh`, a altura da viewport grande. `absolute`, não `fixed`: no celular a barra de endereço recolhe e volta durante a rolagem, e a cada mudança dessas o navegador reancora os elementos fixos à nova viewport — animando o reposicionamento. Era daí que vinha o deslocamento da foto ao arrastar a página. Presa ao documento, a caixa rola junto com o conteúdo e não sobra movimento relativo nenhum. a foto sair de cena ao rolar não muda o que se vê: o filtro abaixo já termina opaco no pé da primeira tela, então dali para baixo a página só continua preta. o `translateZ(0)` manda as duas para uma camada própria da GPU: pintadas uma vez e só recompostas, em vez de repintadas a cada frame de rolagem */ .bg, .bg__scrim { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; transform: translateZ(0); pointer-events: none; } /* o desfoque aqui é `filter`, não `backdrop-filter`: a camada é estática, então a GPU desfoca uma vez e guarda o resultado, sem refazer a cada rolagem. o `scale` existe por causa do desfoque: o blur puxa transparência de fora da caixa e deixaria as quatro bordas esmaecidas, então a foto é ampliada até a franja sobrar para fora da tela. a ampliação cresce a partir da base (`transform-origin`) para não passar do pé da caixa: sobrando por baixo, ela esticaria a altura rolável da página em telas altas. a máscara resolve a emenda no pé: o filtro abaixo só fica opaco de vez no último pixel, então sobrava uns 3% de foto até a borda e ali a imagem terminava de faca — uma linha reta atravessando a tela na altura de `100lvh`. com a máscara a própria foto chega ao fim transparente, bem antes da borda, e a máscara vem depois do `filter`, então também apaga a franja que o desfoque joga para fora da caixa */ /* a foto ampliada mora no pseudo-elemento, não na `.bg`: a `.bg` fica do tamanho exato da tela e corta (`overflow: hidden`) a sobra da ampliação. antes o `scale` estava na própria `.bg` e os ~6% que passavam de cada lado viravam área rolável do documento — a página arrastava para o lado e abria uma faixa preta na direita. cortada aqui dentro, a sobra continua fazendo o seu trabalho (esconder a franja do desfoque) sem existir para a rolagem */ .bg { z-index: -2; overflow: hidden; } .bg::before { content: ""; position: absolute; inset: 0; background-image: url("../img/banner-web.jpg"); background-image: image-set( url("../img/banner-web-sm.webp") type("image/webp"), url("../img/banner-web.jpg") type("image/jpeg")); background-size: cover; background-position: 55% 35%; filter: blur(10px); transform: scale(1.12) translateZ(0); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 92%); } /* o último passo do filtro é o preto cheio da página, não mais um 97%: é ele que apaga a emenda entre o pé da caixa e o fundo do body quando a foto rola para fora da tela */ .bg__scrim { z-index: -1; background: radial-gradient(120% 60% at 50% 0%, rgba(255,179,11,.20) 0%, rgba(255,123,2,.06) 40%, transparent 72%), linear-gradient(180deg, rgba(22,22,22,.80) 0%, rgba(22,22,22,.88) 40%, rgba(12,10,7,.97) 84%, var(--ink-deep) 100%); } @media (min-width: 700px) { .bg::before { background-image: url("../img/banner-web.jpg"); background-image: image-set( url("../img/banner-web.webp") type("image/webp"), url("../img/banner-web.jpg") type("image/jpeg")); } } /* -------------------------------------------------------------------------- 4. ESTRUTURA -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--col) + var(--safe-l) + var(--safe-r)); margin-inline: auto; padding: clamp(28px, 7vw, 48px) var(--safe-r) 0 var(--safe-l); padding-bottom: calc(40px + env(safe-area-inset-bottom)); } /* -------------------------------------------------------------------------- 5. IDENTIDADE -------------------------------------------------------------------------- */ .id { display: grid; justify-items: center; text-align: center; gap: 14px; } .id__logo { height: 62px; width: auto; filter: drop-shadow(0 6px 18px rgba(12,10,7,.55)); } .id__name { font-size: clamp(23px, 6.4vw, 27px); color: var(--color-white); letter-spacing: .005em; } .id__lead { max-width: 30ch; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.76); } /* -------------------------------------------------------------------------- 6. LISTA DE LINKS -------------------------------------------------------------------------- */ .links { display: grid; gap: 12px; margin-top: clamp(26px, 6vw, 34px); } /* amarelo nos rótulos de grupo: mesma regra do site, o amarelo é o acento sobre o preto. em branco esmaecido eles competiam com o subtítulo dos próprios botões; em amarelo viram divisória e param de parecer texto de leitura */ .links__label { margin: 10px 2px 0; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-yellow); } .links__label:first-child { margin-top: 0; } /* cartão de link: alvo alto o bastante para o polegar (>=64px), translúcido para o fundo preto continuar aparecendo. sem `backdrop-filter`: eram sete cartões pedindo à GPU um recorte desfocado do que está atrás, refeito a cada frame de rolagem: era daí que vinha o travamento no celular. o filtro escuro do fundo já é quase opaco, então o desfoque quase não aparecia: um branco translúcido um pouco mais forte entrega o mesmo cartão sem custo nenhum */ .lnk { position: relative; display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 14px; min-height: 68px; padding: 13px 16px; border-radius: var(--radius-lg); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); color: var(--color-white); text-align: left; width: 100%; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } .lnk:active { transform: scale(.985); background: rgba(255,255,255,.2); } .lnk__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.12); color: var(--color-white); flex: none; } .lnk__ico svg { width: 21px; height: 21px; } .lnk__txt { display: grid; gap: 2px; min-width: 0; } .lnk__title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.25; letter-spacing: .01em; } .lnk__sub { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.66); } /* selo de novidade, dentro do próprio título: em laranja cheio sobre preto, é o único ponto da lista que grita, e some sozinho quando o serviço deixar de ser novo — basta apagar o */ .lnk__tag { display: inline-block; margin-left: 6px; padding: 1px 7px 2px; border-radius: var(--radius-full); background: var(--gradient-sunrise); color: var(--color-black); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; vertical-align: 1.5px; } .lnk__chev { width: 20px; height: 20px; color: rgba(255,255,255,.45); transition: transform .18s var(--ease); } .lnk:active .lnk__chev { transform: translateX(2px); } /* ------------------------------------------------------------ variações */ /* destaque laranja: o CTA principal da página, o mesmo botão do site */ .lnk--hero { background: var(--gradient-sunrise); border-color: transparent; color: var(--color-white); box-shadow: 0 8px 22px rgba(255,123,2,.32); } .lnk--hero .lnk__ico { background: rgba(255,255,255,.22); color: var(--color-white); } .lnk--hero .lnk__sub { color: rgba(255,255,255,.92); } .lnk--hero .lnk__chev { color: rgba(255,255,255,.75); } .lnk--hero:active { transform: scale(.985); filter: brightness(.96); } /* novidade: serviço da casa, não plataforma de terceiro, então puxa o degradê da marca em vez de uma cor emprestada. o cartão ganha um fundo e uma borda levemente amarelados para se destacar sem empatar com o laranja cheio do CTA principal, que continua sendo o primeiro da fila */ .lnk--evp { background: rgba(255,179,11,.11); border-color: rgba(255,179,11,.32); } .lnk--evp .lnk__ico { background: linear-gradient(135deg, rgba(255,179,11,.34), rgba(255,123,2,.28)); color: var(--color-yellow); } .lnk--evp:active { background: rgba(255,179,11,.2); } /* redes e contato guardam a cor da própria plataforma só no ícone: a página continua preto e laranja, sem virar um mosaico de marcas */ /* o site oficial usa o cartão translúcido padrão, como os demais: só o ícone puxa o laranja da marca para marcar que é o destino da casa */ .lnk--site .lnk__ico { background: rgba(255,123,2,.20); color: #FFA352; } .lnk--wa .lnk__ico { background: rgba(37,211,102,.18); color: #4BE38A; } .lnk--ig .lnk__ico { background: linear-gradient(135deg, rgba(255,179,11,.28), rgba(214,36,159,.30)); color: #FFC9EA; } .lnk--fone .lnk__ico { background: rgba(255,179,11,.18); color: var(--color-yellow); } /* e-mail nao tem cor de marca: fica no vidro neutro da propria pagina */ .lnk--mail .lnk__ico { background: rgba(255,255,255,.12); color: #EDE9E2; } .lnk--mapa .lnk__ico { background: rgba(46,138,214,.22); color: #8FC6F2; } /* placa branca: o "G" colorido do Google só tem contraste sobre fundo claro */ .lnk--nota .lnk__ico { background: var(--color-white); } .lnk--nota .lnk__ico svg { width: 19px; height: 19px; } /* -------------------------------------------------------------------------- 7. AÇÕES SECUNDÁRIAS · salvar contato e compartilhar, lado a lado -------------------------------------------------------------------------- */ .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .act { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 12px 10px; border-radius: var(--radius-lg); background: transparent; border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.88); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: .01em; cursor: pointer; transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); } .act svg { width: 17px; height: 17px; flex: none; } .act:active { transform: scale(.97); background: rgba(255,255,255,.12); } .act.is-done { border-color: var(--color-yellow); color: var(--color-yellow); } /* -------------------------------------------------------------------------- 8. ENDEREÇO E HORÁRIO -------------------------------------------------------------------------- */ .info { display: grid; gap: 12px; margin-top: 26px; padding: 18px; border-radius: var(--radius-lg); background: rgba(12,10,7,.42); border: 1px solid rgba(255,255,255,.12); } .info__row { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; } .info__row svg { width: 18px; height: 18px; margin-top: 2px; color: var(--color-yellow); } .info__row b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--color-white); font-size: 13.5px; } .info__row a { color: rgba(255,255,255,.78); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.28); } /* -------------------------------------------------------------------------- 9. RODAPÉ -------------------------------------------------------------------------- */ .foot { display: grid; justify-items: center; gap: 16px; margin-top: 28px; text-align: center; } .foot__mark { height: 34px; width: auto; opacity: .5; } .foot__copy { font-size: 11.5px; color: rgba(255,255,255,.45); } /* colado no copyright: os dois formam um bloco só, longe do símbolo acima */ .foot__credit { margin-top: -10px; font-size: 11.5px; color: rgba(255,255,255,.45); } .foot__credit a { color: rgba(255,255,255,.72); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.28); } .foot__credit a:hover { color: var(--color-yellow); text-decoration-color: currentColor; } /* -------------------------------------------------------------------------- 10. ENTRADA · escalonada de cima para baixo -------------------------------------------------------------------------- */ .js .reveal { opacity: 0; animation: rise .5s var(--ease) both; animation-delay: var(--d, 0s); } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 11. AJUSTES DE TELA E PREFERÊNCIAS -------------------------------------------------------------------------- */ /* telas muito estreitas (≤360px): o subtítulo do cartão é o primeiro a sair */ @media (max-width: 360px) { .lnk { grid-template-columns: 40px 1fr 18px; gap: 12px; padding: 12px 13px; } .lnk__ico { width: 40px; height: 40px; } .lnk__title { font-size: 14.5px; } .lnk__sub { font-size: 11.5px; } .lnk__tag { margin-left: 5px; padding-inline: 6px; font-size: 9px; } .act { font-size: 12.5px; gap: 7px; } } /* telefone deitado e telas baixas: menos respiro vertical para o primeiro link continuar visível sem rolagem */ @media (max-height: 620px) and (orientation: landscape) { .wrap { padding-top: 22px; } .id__logo { height: 46px; } .id__lead { display: none; } } /* ponteiro fino (mouse): só aí o hover existe */ @media (hover: hover) and (pointer: fine) { .lnk:hover { transform: translateY(-2px); background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); } .lnk--hero:hover { background: var(--gradient-sunrise); filter: brightness(1.05); box-shadow: var(--glow-orange); border-color: transparent; } .lnk--evp:hover { background: rgba(255,179,11,.2); border-color: rgba(255,179,11,.46); } .lnk:hover .lnk__chev { transform: translateX(3px); } .act:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); } } @media (prefers-reduced-motion: reduce) { .js .reveal { animation: none; opacity: 1; } * { transition-duration: .01ms !important; } }