/* ============================================================================= Léo Nicolazzi — link-in-bio (Bootstrap 5.3 como base) ARQUITETURA DE TEMA ------------------- Nenhuma cor pode ficar cravada nas regras: os esfumaçados (hero, banners, fotos) precisam dissolver na cor do tema, então usam --bg-rgb / --page-rgb. Um tema = só um bloco de tokens (theme-*.css). A geometria mora aqui. A PALETA OFICIAL — cinco tons, de Midnight a Arctic. Eles são o BOTÃO, não a superfície: MIDNIGHT #07101B · SOLSTICE #1C2B38 · POLAR #38506A ICICLE #446983 · ARCTIC #7991A8 O FUNDO É SEMPRE PRETO. Isso não é um tema, é a marca: o link.me/hillerfit crava --customBackgroundColor:#000000, e é dele que vem a leitura desta página. Nenhum theme-*.css toca em --bg-rgb ou --page-rgb; eles trocam só a cor do botão e o que decorre dela. Por isso cada arquivo de tema é curto: um tema aqui É uma cor. TRÊS COISAS QUE SÃO MEDIDAS, E NÃO ESCOLHIDAS: 1. O texto do botão. Branco em quatro dos cinco tons; escuro só no Arctic, onde branco daria 3,3:1 e reprovaria. 2. O CONTORNO do botão. Esta paleta é escura: o Midnight separa do preto por 1,10:1 e o Solstice por 1,45:1 — a cor está certa e a FORMA da barra some no fundo. Abaixo de 3:1 de separação, o tema ganha --gold-border, um fio da mesma cor clareada. É o princípio do botão outline, e resolve sem mexer no preenchimento que você escolheu. 3. A cor de TEXTO. Só o Arctic passa 4,5:1 sobre o preto (6,4:1); os outros quatro ficam entre 1,1 e 3,6. O --accent de cada tema é a cor clareada até cruzar 4,5:1 — não o --gold puro. A rampa de cinza do texto é neutra (branco -> #B9C2CC -> #93A0AD -> #6E7C8A): nenhum tom desta paleta sustenta texto pequeno sobre preto, exceto o Arctic. O token que PREENCHE o CTA se chama --gold em todos os temas — aqui ele não é dourado em nenhum. O nome vem do projeto irmão (EricMatheus) e é mantido de propósito: assim os dois repositórios continuam comparáveis e uma correção lá porta para cá sem tradução. ============================================================================= */ :root{ /* ---- Superfícies: PRETO, em todos os temas ------------------------------ O cartão é #000000, como no link.me/hillerfit (lá o token é `--customBackgroundColor: #000000`). NENHUM theme-*.css mexe nisto: eles trocam só a cor do botão. O fundo não é uma escolha por tema — é a marca. */ --page-rgb:0,0,0; --bg-rgb:0,0,0; --page:rgb(var(--page-rgb)); --bg:rgb(var(--bg-rgb)); --page-bg:var(--page); --card-bg:var(--bg); --sheen:none; --grain:0; /* No desktop quem faz a moldura é a FOTO DESFOCADA (.bg-blur), não uma cor — por isso página e cartão podem ser o mesmo preto sem o cartão sumir. */ /* Vidro cinza-azulado neutro a baixa opacidade */ --glass-bg:rgba(185,194,204,.07); --glass-bg-2:rgba(185,194,204,.12); --glass-border:rgba(185,194,204,.15); --glass-blur:blur(14px) saturate(1.1); --glass-shadow:0 10px 24px -16px rgba(0,0,0,1); --surface:rgba(185,194,204,.07); --surface-2:rgba(185,194,204,.12); --hairline:rgba(185,194,204,.15); --shadow-card:0 30px 70px -30px rgba(0,0,0,1); /* ---- Texto (sobre o PRETO) ---------------------------------------------- Branco no principal, como no HillerFit, e uma rampa de cinza NEUTRA abaixo dele. Os tons da paleta não entram aqui: sobre preto eles vão de 1,1:1 a 3,6:1 e nenhum sustenta texto pequeno — só o Arctic, que é o --accent do tema dele. */ --text:#FFFFFF; /* 21,0:1 */ --text-2:#B9C2CC; /* 12,1:1 */ --muted:#93A0AD; /* 7,7:1 */ --muted-2:#6E7C8A; /* 4,6:1 */ /* DOIS papéis diferentes, que antes eram um só: --on-photo texto sobre a FOTO com véu escuro por baixo (título do banner). Branco sempre — atrás dele há um gradiente preto. --on-hero nome e @ no pé do hero, onde a foto já dissolveu no cartão. Segue o tema; com fundo preto, é branco. */ --on-photo:#fff; --on-hero:#fff; --on-hero-2:rgba(255,255,255,.75); /* o mesmo valor do link.me para o @ */ --on-hero-shadow:0 2px 20px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45); /* ---- Botão: BRASA (o padrão) — GERADO por gera-temas.mjs nome-exibido: Brasa -- */ --gold:#BF2737; /* Brasa — texto branco: 5,9:1 */ --gold-light:#D64D5B; --gold-dark:#A01D2B; --gold-grad:linear-gradient(135deg,#A01D2B 0%,#BF2737 45%,#D64D5B 100%); --gold-ring:rgba(191,39,55,.55); --gold-glow:rgba(191,39,55,.5); --on-gold:#FFFFFF; /* A barra separa do fundo preto por 3,6:1 — desenha-se sozinha. Sem contorno, como a barra chapada do link.me/hillerfit. */ --gold-border:transparent; --shine:#DA9BA1; /* Cor de TEXTO. NÃO é o --gold: sobre o preto ele dá 3,6:1. Esta é a cor clareada até cruzar 4,5:1 no pior fundo (o vidro #0D0E0E). */ --accent:#DA4959; /* 4,7:1 no vidro */ --accent-hover:#DB717C; /* Os --seal-* NÃO entram aqui. O selo de verificado é o do link.me/hillerfit e tem cor fixa (#C29AFF -> #4062FF, check branco), definida uma vez no :root do site.css. Selo é sinal reconhecível, não enfeite: recolorido a cada tema, deixaria de dizer o que diz. */ --ok:#5FD08A; --err:#F08A82; --wa:#25d366; /* ------------------------------------------------------------------ SELO -- Azul CHAPADO do Instagram, #0095F6. Não é o do link.me/hillerfit. DECIDIDO pelo Alexandre em 01/08/2026, depois de a cor ter ido e voltado: entre a rampa roxo→azul do HillerFit e o azul do Instagram, ele escolheu o do Instagram. Não trocar sem pedido explícito dele. Histórico, porque a diferença importa: primeiro o selo copiava a rampa do HillerFit (#C29AFF roxo -> #4062FF azul), medida no arquivo deles. Batia pixel a pixel — e a 21px o #4062FF domina os dois terços de cima, então ele lia como "azul escuro". O Alexandre pediu o do Instagram, que é mais claro e chapado. As duas pontas ficam iguais de propósito: o selo do Instagram não tem gradiente. Fica AQUI, abaixo do --wa, e não acima: o gera-temas.mjs reescreve tudo entre `/* ---- Botão:` e `--ok:`, e um token colocado ali some na próxima vez que alguém rodar o gerador. E fica fora dos theme-*.css porque o selo é um sinal que a pessoa reconhece de outros lugares — mudando de cor a cada tema, deixaria de ser selo. É o único elemento colorido que não segue o tema. */ --seal-a:#0095F6; --seal-b:#0095F6; --seal-c:#0095F6; --seal-stroke:transparent; /* o do Instagram não tem contorno */ --seal-check:#FFFFFF; --brand:var(--gold); --brand-hover:var(--gold-light); --link:var(--gold); --verified:var(--gold); --hero-filter:brightness(.9) contrast(1.03); /* 27rem cortava o corpo: a foto tem 1920px de altura e a janela mostrava só 74% dela no celular e 50% no desktop — sobrava a cabeça e o ombro. 35rem sobe para 96% e 65%. Não passa disso: acima de 100% a foto deixa de caber pela altura e o `cover` começa a cortar as LATERAIS, que é trocar um corte por outro. Medido nas duas larguras, não estimado. */ --hero-h:35rem; /* object-position da foto do hero. 22% era para a foto ANTERIOR, que era deitada (1600x1067); a atual é em pé (1280x1920) e o recorte muda por completo. Só o Y importa: a foto é mais estreita que qualquer container, então o `cover` escala pela largura e não sobra nada na horizontal para deslocar. 36% foi escolhido pelo DESKTOP, que é o caso apertado — a janela visível ali vale 37% da altura da foto, contra 74% no celular. A 44% ficava bonito no celular e cortava o topo da cabeça no desktop; a 20% entrava gente de fundo demais. Renderizado nas duas larguras antes de cravar. */ --hero-focus:50% 36%; --maxw:580px; /* Fundo desfocado (a foto do perfil borrada atrás do cartão, como no HillerFit). Só é PINTADO a partir de 768px — ver .bg-blur lá embaixo. brightness 1.3, e não 0.42. Medido no desktop, comparando a luz do fundo com a da borda do cartão: 0.42 fundo 0,0103 cartão 0,0358 o FUNDO é mais escuro que o cartão 1.00 fundo 0,0485 praticamente empatam — 1,15:1 1.30 fundo 0,0760 fundo mais claro — 1,47:1 1.70 fundo 0,1110 1,88:1, mas o laranja da foto passa a competir com o conteúdo Em 0,42 o fundo era mais escuro que o próprio cartão preto, então não havia moldura nenhuma: o cartão sumia dentro do fundo em vez de flutuar sobre ele. É a foto desfocada que faz a moldura aqui — ela precisa ser mais clara que o que emoldura. */ --blur-filter:blur(44px) saturate(1.25) brightness(1.3); --blur-scale:1.18; /* >1 para o blur não vazar borda clara */ } *{ -webkit-tap-highlight-color:transparent; } html,body{ overflow-x:hidden; } body{ /* Inter primeiro, fonte do sistema como rede. A troca é invisível porque as duas são grotescas de largura parecida — o texto não "pula" quando a Inter chega. */ font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--page-bg); background-attachment:fixed; min-height:100dvh; } /* --- As duas camadas que fazem o fundo parecer METAL (e não cor chapada) ----- sheen (::before, z=0): reflexo especular. Fica ATRÁS do cartão — só aparece nas margens do desktop. grão (::after, z=2): granulação de metal escovado. Fica POR CIMA do cartão. O grão PRECISA ficar por cima: se ele morar dentro do --card-bg, o cartão ganha textura e clareia ~4 pontos, enquanto o esfumaçado da foto continua liso — e aparece uma emenda dura exatamente na base do hero. Por cima de tudo, os dois lados recebem a MESMA textura e a emenda deixa de existir. z-index deles é 0 e 2; o modal (1055) e o backdrop (1050) do Bootstrap ficam acima dos dois. NÃO crie contexto de empilhamento no #site-chrome: o backdrop é filho do e passaria a cobrir o próprio modal. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--sheen); } body::after{ content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } a{ text-decoration:none; } ::selection{ background:var(--gold-ring); color:var(--text); } /* ------------------------------------------------------- Fundo desfocado --- A foto do perfil, borrada, atrás de tudo — a camada de ambiente do link.me/hillerfit. Fica em z-index:0, ao lado do sheen e ABAIXO do .wrap (z-index:1), então nunca disputa com conteúdo nem com modal. SÓ EXISTE A PARTIR DE 768px, e isso é decisão de desempenho, não de gosto: no celular o cartão ocupa a largura toda e cobre este fundo por inteiro. Renderizá-lo lá seria pagar um blur de 44px sobre uma imagem de tela cheia — caro num Android médio, e logo no primeiro paint — por pixel que ninguém vê. A página que converte é a do celular; ela não paga por enfeite de desktop. O transform:scale existe porque `filter:blur()` amostra para fora do elemento e devolve borda transparente: sem escalar, aparece um halo claro nas quatro bordas da viewport. */ .bg-blur{ display:none; } @media (min-width:768px){ .bg-blur{ display:block; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--blur-img,url("/assets/images/hero-blur.jpg")); background-size:cover; background-position:center 18%; filter:var(--blur-filter); transform:scale(var(--blur-scale)); transform-origin:center; } } /* Quem pediu menos movimento não pediu menos contraste — o blur fica, só não custa animação nenhuma (ele já é estático). Mas em telas que economizam dados, não faz sentido baixar imagem só para borrar. */ @media (prefers-reduced-data:reduce){ .bg-blur{ display:none !important; } } /* z-index:1 só aqui — levanta o cartão acima do sheen, sem tocar nos modais. */ .wrap{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:1; } /* Loader bar (topo) — varredura dourada */ .loader-bar{ display:none; height:.2rem; position:fixed; top:0; left:0; width:100%; z-index:9999; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light)); } /* MOBILE-FIRST: no celular a superfície é UMA SÓ, contínua do hero até o rodapé. Quem pinta é o .wrap — as seções ficam transparentes. Por que não deixar cada seção pintar o próprio --card-bg: nos metais esse token é um GRADIENTE com paradas próprias, e ele reinicia em cada elemento que o pinta. O cartão terminava num tom e os Resultados recomeçavam noutro → um degrau visível entre as duas seções. Com o .wrap pintando, o gradiente corre uma vez só, do topo ao rodapé. A faixa chapada é o que garante a emenda da foto: o hero dissolve em rgb(--bg-rgb) e a superfície embaixo dele precisa ser EXATAMENTE essa cor — não "quase". Como cada tema desenha o metal com stops próprios, essa garantia não pode depender do tema. */ .wrap{ background: linear-gradient(180deg, rgb(var(--bg-rgb)) 0, rgb(var(--bg-rgb)) calc(var(--hero-h) + 2.4rem), rgba(var(--bg-rgb),0) calc(var(--hero-h) + 13rem)), var(--card-bg); } .card-on-desktop, .results, .footer-clear{ background:transparent; } @media (min-width:768px){ /* DESKTOP: voltam a ser cartões flutuantes, cada um com a sua superfície. */ .wrap{ background:none; } .card-on-desktop{ background: linear-gradient(180deg, rgb(var(--bg-rgb)) 0, rgb(var(--bg-rgb)) calc(var(--hero-h) + 2.4rem), rgba(var(--bg-rgb),0) calc(var(--hero-h) + 13rem)), var(--card-bg); margin-top:4.5rem !important; border-radius:2rem !important; border:1px solid var(--hairline); box-shadow:var(--shadow-card); overflow:clip; } } /* ---------------------------------------------------------------- Hero ----- */ .profile-hero-container{ position:relative; width:100vw; margin-left:calc(-50vw + 50%); } @media (min-width:768px){ .profile-hero-container{ width:100%; max-width:768px; margin:0 auto; } } .hero-background{ position:relative; width:100%; height:var(--hero-h); overflow:hidden; } .hero-background img{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-focus); filter:var(--hero-filter,brightness(.86) contrast(1.03)); display:block; } .hero-background.no-img{ background:var(--card-bg); } /* ------------------------------------------- Foto escurece ao rolar -------- Como no link.me/hillerfit: conforme a pessoa desce, a foto vai apagando na cor do tema. Não é enfeite — é o que passa a atenção da foto para os links sem um corte seco, e é o que faz o topo "sair de cena" em vez de sumir de repente. É um véu com opacidade, e não `filter:brightness()` na imagem: filtro força o navegador a repintar a foto inteira a cada frame de rolagem; opacidade de uma camada já composta ele resolve na GPU. Num Android médio a diferença é entre rolar liso e rolar picotado. --hero-fade é escrito pelo site.js (0 no topo, 1 quando o hero saiu). Sem JS ele fica em 0 e a foto simplesmente não escurece — degradação limpa. */ .hero-veu{ position:absolute; inset:0; z-index:1; pointer-events:none; background:rgb(var(--bg-rgb)); opacity:calc(var(--hero-fade, 0) * .82); will-change:opacity; } /* Quem pediu menos movimento não pediu menos contraste: o véu fica, só não acompanha a rolagem — assume o valor cheio e para de mudar. */ @media (prefers-reduced-motion:reduce){ .hero-veu{ opacity:0; } } @media (min-width:768px){ .hero-image{ border-top-left-radius:2rem; border-top-right-radius:2rem; } } /* A foto DISSOLVE na cor do tema (mesma geometria em qualquer paleta). */ .hero-background::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:70%; pointer-events:none; background: linear-gradient(to top right, rgba(var(--bg-rgb),1) 0%, rgba(var(--bg-rgb),0) 30%), linear-gradient(to top left, rgba(var(--bg-rgb),1) 0%, rgba(var(--bg-rgb),0) 30%), linear-gradient(to top, rgba(var(--bg-rgb),.85) 0%, rgba(var(--bg-rgb),0) 25%), linear-gradient(to top, rgba(var(--bg-rgb),1) 0%, rgba(var(--bg-rgb),1) 10%, rgba(var(--bg-rgb),0) 100%); } .hero-icon{ position:absolute; top:1rem; z-index:2; } .hero-icon-left{ left:1rem; } .hero-icon-right{ right:1rem; } .hero-icon button, .hero-icon a{ outline:none!important; box-shadow:none!important; } /* O CÍRCULO continua com 32px (é o desenho); quem cresce para 44 é a ÁREA CLICÁVEL em volta dele. Aumentar o círculo deixaria o topo da foto pesado; aumentar só o alvo resolve o dedo sem mexer no visual. O padding negativo na margem mantém o ícone exatamente onde estava. */ .hero-icon a, .hero-icon button{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-6px; } .icon-circle{ display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.3); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:border-color .18s ease, color .18s ease; } .icon-circle i{ font-size:.9rem; color:#fff; } .hero-icon a:hover .icon-circle, .hero-icon button:hover .icon-circle{ border-color:var(--gold-ring); } .hero-icon a:hover .icon-circle i, .hero-icon button:hover .icon-circle i{ color:var(--accent); } /* ---------------------------------------- Identidade SOBRE a foto (hero) --- z-index:3 — acima do ::after (o esfumaçado) e dos .hero-icon (z-index:2). `pointer-events:none` no bloco, `auto` nos filhos clicáveis: sem isso, esta caixa cobriria a metade de baixo da foto e engoliria qualquer clique que passasse por ali. Os chips de rede continuam clicáveis porque são reativados um a um. */ .hero-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:3; pointer-events:none; /* gap:0 e cada vão declarado no próprio elemento. Com um gap uniforme aqui, as margens do @ e da fila de redes SOMAVAM a ele, e as medidas tiradas do link.me/hillerfit saíam 7px maiores do que o pedido — o erro era invisível em cada regra e visível na pilha inteira. */ display:flex; flex-direction:column; align-items:center; gap:0; padding:0 1rem 1.1rem; } .hero-overlay > *{ pointer-events:auto; } /* A linha do nome carrega o CORPO do nome. Só o selo se importa: ele é dimensionado em `em` (0,656× o nome, a proporção do HillerFit) e assim encolhe junto quando o nome encolhe, em vez de descolar. */ .hero-overlay .name-line{ display:flex; align-items:center; justify-content:center; gap:0; max-width:100%; font-size:2rem; line-height:1.14; } @media (max-width:360px){ .hero-overlay .name-line{ font-size:1.7rem; } } /* ------------------------------------------------------------- Perfil ------ */ /* Sobre a FOTO o nome é pesado e branco (não var(--text)): ele precisa funcionar mesmo que o esfumaçado falhe ou a foto seja trocada por uma clara. O text-shadow é rede de segurança, não decoração — por isso é largo e suave, e não um contorno duro. */ /* --------------------------------------------------------------------------- Os valores abaixo NÃO foram escolhidos a olho: foram lidos do CSS e do HTML do próprio link.me/hillerfit. Vale registrar porque o instinto erra para o mesmo lado — "parecer HillerFit" sugere mais peso e mais aperto, e a medição mostrou o contrário: nome 32px · peso 750 · letter-spacing +0,25px (POSITIVO) @handle 12px · peso 400 contador 14px · peso 500 título 16px · peso 600 · line-height 1,3 Antes daqui estava 900/-0,035em, e era essa a diferença que se via. O peso 750 exige a Inter VARIÁVEL (ver o no HTML): numa fonte de pesos fixos ele cai para 700 e o nome sai mais leve que o da referência. --------------------------------------------------------------------------- */ .profile-name{ font-weight:750; font-size:2rem; letter-spacing:.25px; color:var(--on-hero); margin:0; line-height:1.14; text-shadow:var(--on-hero-shadow); overflow-wrap:anywhere; } /* O link.me encolhe o nome por JS quando ele não cabe. Aqui a mesma coisa em CSS: abaixo de 360px, 32px estoura em nome comprido. */ @media (max-width:360px){ .profile-name{ font-size:1.7rem; } } /* Selo, @ e chips: as medidas abaixo foram TIRADAS DA PÁGINA do link.me/hillerfit com o mesmo viewport (390px), e não estimadas por print. O que estava aqui antes era plausível e uniformemente mais frouxo — o efeito somado é o que se via como "espaçado demais". selo 21px, a 3px do nome (aqui: 18,4px a 7,7px) @ 14px, a 1,6px do nome (aqui: 12,8px a 7,2px) chips 39,5px, vão de 1,9px (aqui: 44px, vão de 8,8px) chips a 11px do @ (aqui: 7,2px) O selo é 0,656× o corpo do nome; em `em` ele acompanha o nome quando a tela encolhe, em vez de descolar. */ /* SEM drop-shadow. O selo do link.me/hillerfit não tem nenhuma, e numa peça de 21px uma sombra preta a 50% não lê como profundidade: ela escurece o desenho inteiro, porque o borrão cai em cima da própria figura tanto quanto ao redor. Medido: com a sombra, o roxo do canto inferior saía visivelmente mais escuro que o deles; sem ela, os dois batem. */ .verified-badge{ width:.678em; height:.678em; flex:0 0 auto; margin-left:3px; } .profile-handle{ font-size:14px; font-weight:400; color:var(--on-hero-2); text-shadow:var(--on-hero-shadow); line-height:1.15; margin-top:1.6px; } /* ---------------------------------------------------- Redes (chips) -------- Círculos com a cor da MARCA, como no HillerFit — 44px, que é o alvo de toque recomendado. O ícone é branco em todos; os fundos vêm de --net-* logo abaixo, um por rede, e não de token de tema: a cor do Instagram é do Instagram, não nossa, e não pode mudar quando o tema muda. */ .social-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.9px; margin-top:11px; } /* 39,5px é a medida deles, e é MENOR que os 44px de alvo de toque recomendado. O círculo fica no tamanho pedido e o alvo é devolvido por um pseudo-elemento invisível de 44px: quem olha vê o desenho do HillerFit, quem toca com o polegar acerta assim mesmo. Encolher o alvo junto com o desenho seria trocar acerto de toque por semelhança visual, e dá para ter os dois. */ .social-chip{ position:relative; } .social-chip::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; } .social-chip{ width:39.5px; height:39.5px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; text-decoration:none; box-shadow:0 6px 18px -8px rgba(0,0,0,.85); transition:transform .18s ease, box-shadow .18s ease; } .social-chip:hover, .social-chip:focus-visible{ color:#fff; transform:translateY(-3px); box-shadow:0 10px 22px -8px rgba(0,0,0,.9); } .social-chip i{ pointer-events:none; } /* Redes de marca PRETA (TikTok, X) somem contra o hero escuro: só elas ganham aro. Sem o aro viram um buraco no meio da fileira. */ .social-chip[data-net="tiktok"], .social-chip[data-net="x"]{ background:#000; border:1px solid rgba(255,255,255,.28); } .social-chip[data-net="instagram"]{ background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); } .social-chip[data-net="youtube"]{ background:#FF0000; } .social-chip[data-net="facebook"]{ background:#1877F2; } .social-chip[data-net="linkedin"]{ background:#0A66C2; } .social-chip[data-net="whatsapp"]{ background:#25D366; } /* O site oficial não tem cor de marca — usa a do tema, e é o único chip que acompanha a troca de azul. */ .social-chip[data-net="website"]{ background:var(--gold); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); color:var(--on-gold); } .social-chip[data-net="website"]:hover{ color:var(--on-gold); } /* "Brasileiro" — a MESMA cor das credenciais logo abaixo (--text-2). Era --accent, a cor de destaque do tema. Funcionava enquanto o destaque era um azul discreto; com o Brasa virou vermelho, e três linhas vermelhas empilhadas competiam com o CTA vermelho a poucos pixels dali. Duas coisas gritando ao mesmo tempo é o mesmo que nenhuma gritar. O destaque agora é do CTA, sozinho. Este bloco é informação, e informação se lê melhor na cor de leitura. */ .profile-category{ color:var(--text-2); font-size:.9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; line-height:1.28; } /* Continua sendo um link, então continua reagindo — só que clareando, em vez de mudar de matiz. Sem nenhuma reação, deixa de parecer clicável. */ .profile-category:hover{ color:var(--text); } /* A bandeira acompanha o tamanho do texto (em, não px) e fica levemente acima da linha de base ótica, senão "afunda" ao lado da maiúscula. */ .flag-br{ width:1.15em; height:auto; flex:0 0 auto; display:block; margin-top:-.05em; border-radius:.14em; box-shadow:0 1px 2px rgba(0,0,0,.18); } .profile-bio{ font-size:.9rem; line-height:1.45; color:var(--text-2); margin-top:0; } /* IDENTIDADE: gruda no "Brasileiro" e agora na MESMA cor dele e das credenciais. O que mantém os dois blocos separados não é mais a cor — é o respiro do .bio-rest logo abaixo e a entrelinha apertada aqui (1.28), que faz as três linhas lerem como UM bloco em vez de uma lista. Espaço separa tão bem quanto cor, e não gasta o vermelho. */ .profile-bio .bio-lead{ color:var(--text-2); line-height:1.28; } /* Respiro evidente antes das CREDENCIAIS: é o que separa "quem ele é" de "o que ele tem". */ .profile-bio .bio-rest{ margin-top:.95rem; } /* Botões do cabeçalho — CTA liso; o metálico só no HOVER. min-height:44px NÃO é folga estética. Estes dois botões são a conversão inteira da página, e no projeto irmão eles ficaram com 35px de altura — abaixo do alvo de toque recomendado para o polegar, num site em que quase todo visitante chega pelo Instagram, no celular. Lá isso virou dívida registrada e nunca foi cobrado; aqui já nasce pago. */ .btn-header{ border-radius:.65rem; font-weight:600; font-size:.95rem; padding:.55rem .5rem; min-height:44px; /* O contorno é --gold-border, e não `transparent`: nesta paleta há tons que separam do fundo preto por 1,1:1 — a cor está certa e a FORMA do botão some. Nos temas em que a barra já se destaca, o token é `transparent` e nada muda. */ border:1px solid var(--gold-border,transparent); /* --cta-bg: a RAMPA, nos temas que têm uma. Nos temas de cor chapada o token nem existe e o fallback `none` mantém o botão exatamente como sempre foi — por isso os sete tons originais não mudaram um pixel quando os gradientes entraram. */ background-color:var(--gold); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); color:var(--on-gold); width:100%; transition:background-image .25s ease, box-shadow .2s ease, transform .15s ease; } .btn-header:hover, .btn-header:focus{ background-image:var(--gold-grad); color:var(--on-gold); box-shadow:0 8px 22px -10px var(--gold-glow); transform:translateY(-1px); } /* --------------------------------------------------------------------------- MOTION: o brilho do CTA SEGUE O CURSOR (não fica parado). shine.js escreve --mx/--my (a posição do ponteiro dentro do botão, em %) e o radial se ancora ali. Sem JS, --mx/--my caem no fallback 50%/50% e vira um metálico centrado — degradação limpa. Gateado por (hover:hover) and (pointer:fine): no CELULAR não existe hover, e sem o gate o Android/iOS "grudam" o estado de hover no último botão tocado. No toque, o metálico entra no :active (um sweep curto ao pressionar). --------------------------------------------------------------------------- */ .btn-shine{ --mx:50%; --my:50%; transition:background-image .25s ease, background-position .12s linear, box-shadow .2s ease, transform .15s ease; } @media (hover:hover) and (pointer:fine){ .btn-shine:hover{ background-image:radial-gradient(circle at var(--mx) var(--my), var(--shine) 0%, var(--gold) 42%, var(--gold-dark) 100%); /* o radial persegue o cursor: a transição do background-image ficaria "arrastando" a cada frame, então aqui ela é desligada */ transition:box-shadow .2s ease, transform .15s ease; } } .btn-shine:active{ background-image:var(--gold-grad); } @media (prefers-reduced-motion:reduce){ .btn-shine, .btn-shine:hover{ transition:none; background-image:var(--gold-grad); } } /* o secundário (Parcerias) é de vidro: não brilha */ .btn-header-secondary.btn-shine:hover, .btn-header-secondary.btn-shine:active{ background-image:none; } /* Secundário = VIDRO (painel translúcido, à la HWPO) */ .btn-header-secondary{ background-color:var(--glass-bg-2); background-image:none; color:var(--text); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); } .btn-header-secondary:hover, .btn-header-secondary:focus{ background-color:var(--glass-bg-2); background-image:none; color:var(--accent); border-color:var(--gold-ring); box-shadow:none; transform:none; } /* (As redes ficam no .hero-overlay, como .social-chip — ver a seção "Perfil". A antiga fileira de ícones chapados abaixo dos botões não existe mais.) */ /* ============================================================================ VITRINE DE PRODUTOS — a faixa que passa sozinha ========================================================================== A faixa SANGRA até a borda do cartão (sem margem lateral) para os produtos saírem de cena pelos lados. O respiro que as margens dariam é devolvido por dentro, no padding da fila: assim o primeiro cartão nasce alinhado com o resto da página, mas a faixa continua correndo de ponta a ponta. ========================================================================== */ .produtos{ margin:1.15rem 0 .25rem; } .produtos:empty{ display:none; } .pv-janela{ overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; /* As máscaras esfumaçam as duas pontas na cor do cartão: sem elas, o produto aparece e some com um corte reto, e a faixa lê como conteúdo cortado em vez de conteúdo em movimento. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); } .pv-janela.pv-pegando{ cursor:grabbing; } /* Um produto só: nada a rolar. Fica parado e centrado, sem máscara. */ .pv-janela.pv-parada{ cursor:default; -webkit-mask-image:none; mask-image:none; } .pv-janela.pv-parada .pv-fila{ justify-content:center; } .pv-fila{ display:flex; gap:.9rem; width:max-content; padding:.35rem 1rem .5rem; will-change:transform; } @media (min-width:768px){ .pv-fila{ padding-left:3rem; padding-right:3rem; } } .pv-card{ /* Legenda e preço CENTRADOS sob a capa. Alinhados à esquerda, um nome curto como "Pull-up" ficava encostado na borda enquanto a arte do cartão era simétrica — o desencontro entre um e outro é o que se lê como torto. */ flex:0 0 auto; width:10rem; display:flex; flex-direction:column; gap:.45rem; padding:0; border:0; background:none; text-align:center; align-items:center; cursor:pointer; color:inherit; } .pv-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:.9rem; } /* ---------------------------------------------------- CAPA DO PRODUTO ------- A capa usa OS MESMOS tokens do botão: --gold de fundo, --cta-bg quando o tema é rampa ou trama, --on-gold para tudo que é traço e letra. Antes ela era um JPEG com a cor cozida dentro, e a vitrine ficava azul-escura nos 24 temas enquanto as barras logo acima trocavam de cor. Onze imagens não acompanham vinte e quatro paletas; tokens acompanham. */ .pv-capa{ position:relative; display:block; width:100%; aspect-ratio:3/4; border-radius:.85rem; overflow:hidden; background-color:var(--gold); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); border:1px solid var(--glass-border); transition:transform .28s ease, border-color .28s ease, filter .45s ease, box-shadow .35s ease; /* Cor do foco do hover: derivada de --gold-light, que TODO tema tem e que é, por construção, mais clara que o preenchimento. A primeira tentativa usou --on-gold (a cor do rótulo). Funcionava nos temas escuros e falhava nos claros pelo motivo óbvio depois de ver: nos claros o rótulo é ESCURO, então o foco virava uma mancha suja seguindo o cursor, e não uma luz. Luz tem de clarear em qualquer tema — daí --gold-light. */ --pv-brilho:rgba(255,255,255,.30); } @supports (color:color-mix(in srgb, red, blue)){ .pv-capa{ --pv-brilho:color-mix(in srgb, var(--gold-light) 82%, white); } } @media (hover:hover) and (pointer:fine){ .pv-card:hover .pv-capa{ transform:translateY(-3px); border-color:var(--gold-ring); filter:saturate(1.14) brightness(1.07); box-shadow:0 14px 30px -16px var(--gold-glow); } .pv-card:hover .pv-capa::before{ opacity:1; } .pv-card:hover .pv-arte{ opacity:.46; } } /* O pictograma entra como MÁSCARA: o PNG dá só a forma, a cor vem do tema. Um ficaria branco e sumiria nos temas claros. E ele se APAGA sozinho para baixo, por uma segunda máscara sobreposta à primeira. Antes havia um VÉU pintado por cima do cartão, de transparente até `--gold`, para o texto assentar. Isso partia o cartão ao meio — e nos temas de rampa `--gold` é a MÉDIA das paradas, uma cor que não existe em ponto nenhum do gradiente: a metade de baixo ficava de um tom que não combinava com a de cima. Apagando o DESENHO em vez de pintar por cima, o fundo continua uma cor contínua só, em qualquer um dos 24 temas. */ .pv-arte{ position:absolute; inset:0; display:block; opacity:.34; background-color:var(--on-gold); -webkit-mask:var(--m) center/contain no-repeat, linear-gradient(to bottom,#000 42%,transparent 68%); -webkit-mask-composite:source-in; mask:var(--m) center/contain no-repeat, linear-gradient(to bottom,#000 42%,transparent 68%); mask-composite:intersect; transition:opacity .4s ease; } /* Foco de luz que SEGUE o ponteiro dentro do cartão. As coordenadas chegam em --mx/--my (por cento), escritas pelo site.js a cada quadro. É um radial, e não uma faixa diagonal, porque a faixa passava UMA vez e acabava: o cartão voltava a ficar estático com o mouse ainda em cima dele. Um foco que acompanha responde enquanto a mão estiver ali — a luz existe por causa de onde a pessoa está olhando, que é o que dá sensação de material. A cor sai de --on-gold: branco fixo sumiria no Neon Aqua e no Sal, preto fixo mancharia o Dark Night e o Abissal. */ .pv-capa::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; /* GRADIENTE de luz, não um ponto de luz. O ângulo (--ang) aponta para o lado onde o cursor está, e a claridade decai atravessando o cartão inteiro — a leitura é de uma superfície iluminada de um lado, como metal ou vidro sob uma janela. O radial que estava aqui antes era um foco de lanterna: uma bolha viajando por cima da arte, que chamava atenção para si em vez de dar material ao cartão. A parada em -20% joga o pico do gradiente para FORA da borda: assim a claridade máxima fica na aresta do lado do cursor, e não numa faixa brilhante no meio do caminho. */ background:linear-gradient(var(--ang,135deg), var(--pv-brilho) -20%, transparent 58%); opacity:0; transition:opacity .3s ease; } /* Camadas, para o foco nunca lavar o texto: desenho embaixo, luz no meio, letras e moldura por cima. */ .pv-arte{ z-index:0; } .pv-capa-txt{ z-index:2; } .pv-capa::after{ z-index:3; } /* Moldura fina, como a das capas antigas — agora na cor do tema. */ .pv-capa::after{ content:""; position:absolute; inset:5.5%; border:1px solid var(--on-gold); opacity:.3; border-radius:.2rem; pointer-events:none; } .pv-capa-txt{ /* Ancorado pelo TOPO, não pelo pé. Preso embaixo, a régua subia nos títulos de duas linhas e a fileira de cartões ficava desalinhada — o mesmo defeito que já tinha aparecido quando as capas eram imagem. Com o topo fixo, régua e primeira linha caem na mesma altura nos onze e só o título comprido desce mais. */ /* O bloco tem TOPO E PÉ definidos, e o layout distribui o que está dentro: rótulo e título encostam no topo, a assinatura é empurrada para o pé por `margin-top:auto`. Posicionar os dois por conta própria — um pelo topo, a outra pelo pé — funcionava no título de uma linha e fazia o de duas linhas escrever por cima da assinatura. Aqui não há como colidir: é o mesmo espaço, repartido. */ position:absolute; left:8%; right:8%; top:56%; bottom:6.5%; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--on-gold); } .pv-olho{ font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; opacity:.72; padding-top:.42rem; border-top:1px solid currentColor; width:100%; margin-bottom:.2rem; } .pv-nome{ font-size:.98rem; font-weight:700; line-height:1.1; text-transform:uppercase; letter-spacing:.01em; } .pv-assin{ margin-top:auto; font-size:.44rem; letter-spacing:.16em; text-transform:uppercase; opacity:.55; } /* Quando houver FOTO do Léo executando o movimento, ela entra por cima e a máscara não é usada — mas o texto continua no tema, sobre um véu. */ .pv-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; pointer-events:none; } /* A capa dentro do pop-up: quando a imagem é MÁSCARA (o desenho branco sobre transparente), ela não pode entrar como — sairia branca e sumiria nos temas claros. A figure vira o cartão colorido e o é escondido; quem desenha é o mesmo par máscara + --on-gold usado na vitrine. */ .pm-capa.pm-capa-mascara{ position:relative; background-color:var(--gold); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); border-radius:.6rem; overflow:hidden; } .pm-capa.pm-capa-mascara img{ visibility:hidden; } .pm-capa.pm-capa-mascara::after{ content:""; position:absolute; inset:0; background-color:var(--on-gold); opacity:.55; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; } .pv-titulo{ font-size:.86rem; font-weight:600; color:var(--text); line-height:1.25; width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pv-preco{ font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; } .pv-dica{ font-size:.72rem; color:var(--muted-2); text-align:center; margin:.15rem 0 0; } @media (max-width:360px){ .pv-card{ width:8.75rem; } } /* ------------------------------------------------- Pop-up do produto ------ */ .pm-quem{ display:flex; align-items:center; gap:.6rem; } .pm-avatar{ width:2.2rem; height:2.2rem; border-radius:50%; object-fit:cover; object-position:center; flex:0 0 auto; } .pm-quem span{ display:flex; flex-direction:column; line-height:1.25; } .pm-quem small{ font-size:.72rem; color:var(--muted); } .pm-quem b{ font-size:.85rem; color:var(--text); font-weight:600; } .pm-titulo{ font-size:1.35rem; font-weight:800; letter-spacing:-.02em; color:var(--text); margin:.35rem 0 1rem; } .pm-sobre{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:.8rem; padding:.9rem 1rem; font-size:.86rem; color:var(--text-2); } .pm-sobre p:last-child{ margin-bottom:0 !important; } /* Uma coluna no celular, capa + compra lado a lado a partir de 576px. */ .pm-grade{ display:grid; gap:1rem; margin-top:1rem; } @media (min-width:576px){ .pm-grade{ grid-template-columns:1fr 1fr; align-items:start; } } .pm-capa{ margin:0; border-radius:.8rem; overflow:hidden; border:1px solid var(--glass-border); background:var(--glass-bg); } .pm-capa img{ width:100%; height:auto; display:block; } .pm-preco-cx{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:.8rem; padding:.85rem 1rem; } .pm-preco{ font-size:1.75rem; font-weight:800; color:var(--text); line-height:1.1; font-variant-numeric:tabular-nums; } .pm-preco-sub{ font-size:.75rem; color:var(--muted); } .pm-inclui{ list-style:none; padding:0; margin:0; font-size:.84rem; color:var(--text-2); } .pm-inclui li{ display:flex; align-items:flex-start; gap:.5rem; padding:.2rem 0; } .pm-inclui i{ color:var(--ok); margin-top:.2rem; flex:0 0 auto; } /* Sem link de checkout o botão fica visivelmente inerte — e não um link morto. */ .btn-header.disabled{ opacity:.5; pointer-events:none; font-size:.78rem; } .pm-share{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; min-height:44px; margin-top:.5rem; background:none; border:0; color:var(--muted); font-size:.82rem; cursor:pointer; } .pm-share:hover{ color:var(--accent); } .pm-arquivo{ display:flex; align-items:center; gap:.55rem; margin-top:1rem; padding:.7rem .9rem; border-radius:.7rem; background:var(--glass-bg); border:1px solid var(--glass-border); font-size:.82rem; color:var(--text-2); } .pm-arquivo .pm-arq-tam{ margin-left:auto; color:var(--muted); } /* ---------------------------------------------------------- Tabs galeria --- min-height:44px pelo mesmo motivo dos CTAs: são cinco alvos lado a lado num celular de 320px, o caso em que o dedo mais erra. */ .gallery-tabs{ border-bottom:none; gap:.25rem; } .gallery-tabs .nav-link{ color:var(--muted-2); border:none; border-bottom:2px solid transparent; padding:.5rem .75rem; min-height:44px; display:flex; align-items:center; justify-content:center; background:none; opacity:1; transition:color .15s ease, border-color .15s ease; } .gallery-tabs .nav-link:hover{ color:var(--text-2); } .gallery-tabs .nav-link.active{ color:var(--text); border-bottom-color:var(--accent); background:none; } .gallery-tabs .nav-link i, .gallery-tabs .nav-link svg{ font-size:1.05rem; } .tab-ico{ width:20px; height:20px; vertical-align:middle; } /* Cards de link (compartilhado) */ .shadow-link{ box-shadow:var(--glass-shadow); } .thumb{ background-size:cover; background-position:center; background-color:var(--surface); } .thumb.placeholder-thumb{ background:var(--card-bg); } /* O aviãozinho de compartilhar. 44x44 de ÁREA, ícone do mesmo tamanho de antes. Ele vive DENTRO do banner, que também é clicável — e é justamente por isso que precisa de área generosa: com 18px, metade dos toques cai no banner e a pessoa é levada para outro lugar em vez de compartilhar. O site.js já dá prioridade a ele no clique (stopImmediatePropagation), então a área maior não rouba banner: ela decide certo o toque que hoje decide errado. */ .link-ico{ color:#fff; opacity:.9; background:transparent; border:none; padding:0; cursor:pointer; line-height:0; font-size:1.1rem; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; } .link-ico:hover{ opacity:1; color:var(--accent); } .link-ico i{ pointer-events:none; } .hand-ico{ width:1.4rem; height:1.4rem; display:block; } /* ============================================================================ View: BARRAS — a leitura do HillerFit, e a visualização PADRÃO. ---------------------------------------------------------------------------- Barra inteira na cor da marca, miniatura quadrada à esquerda, título branco e pesado. É o oposto do banner 16:9 com foto: ali quem manda é a fotografia, aqui quem manda é a COR — a página vira uma pilha de blocos sólidos, que é o que faz o HillerFit parecer o HillerFit. O painel de vidro que existia aqui (herdado do projeto irmão) foi trocado por preenchimento sólido `--gold`: os cinco temas mudam a cor das barras junto, sem nenhuma regra nova. `.dots` (a mãozinha) sai desta visão: sobre o preenchimento sólido ela virava um borrão de baixo contraste no canto, e a barra inteira já é obviamente clicável — o ícone não estava dizendo nada que a cor não dissesse. ========================================================================== */ /* Vão de 8px entre as barras — MEDIDO no link.me/hillerfit, não estimado: um print da página deles, e a contagem dos pixels vermelhos numa coluna à direita do ícone. Deu barra de 76px com 8px de vão. Aqui estava .85rem (13,6px), e era o que fazia a pilha parecer mais solta que a de lá. O DOM deles não serve para isso: é gerado, aninhado e as classes trocam a cada deploy. A imagem não muda de nome. */ .v-bars .link-item{ display:block; margin-bottom:.5rem; } .v-bars .card{ /* --cta-bg: a RAMPA, nos temas que têm uma. Nos temas de cor chapada o token nem existe e o fallback `none` mantém o botão exatamente como sempre foi — por isso os sete tons originais não mudaram um pixel quando os gradientes entraram. */ background:var(--gold); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); border:1px solid var(--gold-border,transparent); box-shadow:none !important; height:4.75rem; border-radius:1rem; overflow:hidden; /* 76px, como a deles */ padding:.55rem; gap:.85rem; transition:transform .16s ease, box-shadow .2s ease, background-image .25s ease; } @media (hover:hover) and (pointer:fine){ .v-bars .link-item:hover .card{ transform:translateY(-2px); background-image:var(--gold-grad); box-shadow:0 10px 26px -12px var(--gold-glow); } } .v-bars .link-item:active .card{ transform:translateY(0) scale(.995); } /* A miniatura é um QUADRADO com respiro, não uma faixa colada na borda: é o detalhe que separa "bloco de cor com uma foto dentro" de "cartão com capa". */ .v-bars .thumb{ width:3.5rem; height:3.5rem; flex:0 0 3.5rem; border-radius:.7rem; background-color:rgba(0,0,0,.25); } /* 16px/600/1.3 — os valores do .middle-link-title do link.me. O 800 que estava aqui deixava a barra "gritando" ao lado da referência. */ .v-bars .title{ font-weight:600; font-size:1rem; letter-spacing:normal; color:var(--on-gold); line-height:1.3; white-space:normal; } .v-bars .sub{ font-size:.76rem; color:var(--on-gold); opacity:.72; } .v-bars .dots{ display:none; } @media (max-width:360px){ /* o próprio link.me cai para 14px nas telas estreitas */ .v-bars .title{ font-size:.875rem; } .v-bars .thumb{ width:3rem; height:3rem; flex:0 0 3rem; } } /* View: cards */ .v-cards .card{ background:var(--glass-bg); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-radius:.85rem; overflow:hidden; height:14rem; } .v-cards .thumb{ height:8rem; position:relative; } .v-cards .thumb .link-ico{ position:absolute; top:-.1rem; left:0; } .v-cards .title{ font-size:.8rem; font-weight:600; color:var(--text); } .v-cards .sub{ font-size:.72rem; color:var(--muted); } /* View: quadrado */ .v-square .thumb{ position:relative; aspect-ratio:1; border-radius:.85rem; border:1px solid var(--hairline); } .v-square .link-ico{ position:absolute; top:0; left:.05rem; font-size:1.15rem; } .v-square .dots{ position:absolute; top:.5rem; right:.6rem; color:#fff; } /* View: vertical 16:9 (padrão) */ .v-vertical .link-item{ margin-bottom:1.25rem; } .v-vertical .card{ position:relative; aspect-ratio:16/9; border:none; background:transparent; border-radius:1rem; overflow:hidden; box-shadow:none !important; } /* esfumaçado: a foto dissolve na cor do tema, sem borda dura */ .v-vertical .thumb{ position:absolute; inset:0; box-shadow:inset 0 0 14px 4px rgb(var(--bg-rgb)); } .v-vertical .overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 55%); } .v-vertical .title{ position:absolute; left:1rem; right:2.5rem; bottom:.9rem; color:var(--on-photo); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .v-vertical .link-ico{ position:absolute; bottom:.3rem; right:.35rem; } .v-vertical .dots{ position:absolute; top:.6rem; right:.8rem; color:#fff; } /* View: grid do Instagram */ .ig-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; } .ig-item{ position:relative; aspect-ratio:1; overflow:hidden; } .ig-item > a, .ig-item > .link-cta{ display:block; width:100%; height:100%; } .ig-item .thumb{ width:100%; height:100%; } .ig-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:6px 8px; background:linear-gradient(transparent, rgba(0,0,0,.7)); opacity:0; transition:opacity .2s ease; } .ig-item:hover .cap{ opacity:1; } .ig-item .cap span{ color:#fff; font-size:.7rem; font-weight:500; } /* --------------------------------------------------------- Rodapé fixo ----- Os botões daqui usam AS MESMAS classes do cabeçalho (.btn-header e .btn-header-secondary). Antes tinham estilo próprio (.btn-follow/.btn-signup) e o par derivou: um ganhou borda e o outro não, e ficaram com 34,3px e 36,3px de altura — visivelmente desalinhados. Reusar a mesma classe torna isso impossível por construção. .btn-follow/.btn-signup ficam só como gancho. O fundo tinge com --bg-rgb (a cor do CARTÃO), não --page-rgb: no celular o cartão ocupa a largura toda, então é ELE que está atrás desta barra. Com --page-rgb a barra virava uma faixa de cor destoando do conteúdo. A borda de cima é cinza NEUTRO a baixa opacidade, e não --hairline: este risco atravessa a tela inteira, então precisa ser o mais discreto que ainda se vê. O --hairline é calibrado para desenhar a silhueta do cartão contra a página — usado aqui, vira uma linha clara cortando o conteúdo ao meio. */ #fixedFooter{ background:rgba(var(--bg-rgb),.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid rgba(128,128,128,.28); box-shadow:none !important; } /* -------------------------------------------------------------- Modal ------ */ .modal-content-rounded{ position:relative; border-radius:1.1rem 1.1rem 0 0; background:var(--card-bg); border:1px solid var(--hairline); } @media (min-width:576px){ .modal-content-rounded{ border-radius:1.1rem; } } .modal-backdrop.show{ opacity:.75; } .close-x{ position:absolute; top:.85rem; right:1rem; z-index:5; background:transparent; border:none; color:var(--muted-2); padding:0; line-height:0; transition:color .15s ease; } .close-x:hover{ color:var(--accent); } .close-x i{ font-size:1.5rem; } .modal-header .modal-title{ padding-right:1.75rem; color:var(--text); } .avatar-initial{ width:30px; height:30px; border-radius:50%; background-image:var(--gold-grad); color:var(--on-gold); display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; } .form-hint{ font-size:.75rem; color:var(--muted); } .form-hint a{ color:var(--accent); } /* Aviso flutuante (link copiado) */ .toast-mini{ position:fixed; left:50%; bottom:5rem; transform:translateX(-50%); background:var(--glass-bg-2); color:var(--text); border:1px solid var(--glass-border); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); padding:.5rem .9rem; border-radius:.6rem; font-size:.85rem; z-index:2000; box-shadow:0 10px 30px -12px rgba(0,0,0,.6); } /* Painel de sucesso (após enviar o formulário) */ .form-success{ padding:1.4rem .5rem .5rem; } .success-check{ font-size:3.4rem; color:var(--wa); line-height:1; margin-bottom:.5rem; } .success-title{ font-weight:700; font-size:1.05rem; margin-bottom:.45rem; color:var(--text); } .success-text{ font-size:.85rem; color:var(--muted); line-height:1.5; margin-bottom:1.2rem; } /* O botão do WhatsApp é um DENTRO do .modal-body — e a regra `.modal-body a { color:var(--gold) }` tem especificidade (0,1,1), que VENCE `.btn-wa` (0,1,0). O texto saía DOURADO sobre verde: 1,2:1 (invisível) em 4 dos 5 temas. Passou despercebido no branco só porque lá o "dourado" é quase preto. Daí o seletor abaixo carregar o `.modal-body a` junto: ele precisa ganhar. */ .btn-wa{ background:var(--wa); font-weight:700; border-radius:.65rem; padding:.62rem; border:1px solid transparent; } .modal-body a.btn-wa, .btn-wa{ color:#0B0B0B; } /* 8.0:1 sobre o verde */ .modal-body a.btn-wa:hover, .modal-body a.btn-wa:focus, .btn-wa:hover, .btn-wa:focus{ background:#2ee07a; color:#0B0B0B; } .btn-continue{ background:var(--glass-bg-2); color:var(--text); font-weight:600; border-radius:.65rem; padding:.55rem; border:1px solid var(--glass-border); } .btn-continue:hover{ background:var(--glass-bg-2); color:var(--accent); border-color:var(--gold-ring); } /* =========================================================================== REGRA: --gold PREENCHE, --accent ESCREVE. --------------------------------------------------------------------------- O --gold é a cor do BOTÃO e não tem compromisso de contraste com o fundo da página — no tema Midnight ele é #07101B, que sobre o preto dá 1,10:1. Usá-lo como cor de texto produz letra invisível, e o pior é que ela some só em ALGUNS temas: passa despercebido em revisão feita num tema claro. O --accent existe justamente para isso: cada tema o define como a sua cor clareada até cruzar 4,5:1 sobre o cartão. Todo texto, ícone, marcador de lista e filete indicador lê --accent. Quem lê --gold é só quem PREENCHE: fundo de botão, fundo de checkbox, anel de foco. Foi assim que o rótulo "Sobre este produto" ficou ilegível no Midnight. =========================================================================== */ .section-label{ font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); } /* -------------------------------------------------- CTAs (labels longos) --- */ .btn-cta{ font-size:.82rem; line-height:1.15; padding-left:.35rem; padding-right:.35rem; white-space:normal; } @media (max-width:360px){ .btn-cta{ font-size:.74rem; } } /* ------------------------------------------- Campos no celular: 16px ------ O iOS DÁ ZOOM AUTOMÁTICO ao focar um campo com fonte menor que 16px — e não desfaz sozinho. A pessoa toca no "Site (opcional)", a página salta ampliada, e ela termina de preencher o formulário enxergando um pedaço da tela. Isso acontece no meio da única página que converte. 16px CRAVADO, e não `1rem`: se alguém mexer no font-size da raiz um dia, o rem acompanha e o problema volta calado. O tamanho aqui não é escolha estética; é o limiar que o navegador usa. */ @media (max-width:575.98px){ .form-control, .form-select, textarea.form-control, .input-group-text{ font-size:16px; } } /* --------------------------------------------------------- Campo WhatsApp -- */ .wa-group .form-select{ flex:0 0 auto; width:auto; min-width:92px; max-width:112px; } .wa-group input[name="waDdd"]{ flex:0 0 auto; width:72px; text-align:center; } /* Espaço para o rodapé fixo não cobrir o último banner. */ /* Fundo transparente nos DOIS: no celular quem pinta é o .wrap (superfície contínua); no desktop aqui é o respiro fora dos cartões. */ .footer-clear{ height:5.5rem; } /* ------------------------------------------------ Banner CTA (consultoria) - */ .link-cta{ cursor:pointer; } .link-cta:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; border-radius:1rem; } .info-address{ background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:.7rem; padding:.75rem .9rem; line-height:1.45; color:var(--text-2); } .info-address .info-map{ display:inline-block; margin-top:.55rem; color:var(--accent); font-weight:600; } .info-address .info-map:hover{ color:var(--accent-hover); } .info-list{ padding-left:1.15rem; margin-bottom:.7rem; color:var(--text-2); } .info-list li{ margin-bottom:.35rem; line-height:1.4; } .info-list li::marker{ color:var(--accent); } /* linha final discreta do pop-up (item { note: "..." } no config) */ .info-note{ font-size:.78rem; line-height:1.45; color:var(--muted-2); margin-top:1rem; } /* Bloco da consultoria DENTRO do pop-up do formulário (é um pop-up só). Vazio quando o modal é aberto pelo header/rodapé/sino. */ #athleteInfo:empty{ display:none; } #athleteInfo.has-info{ padding-bottom:1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--hairline); } /* --------------------------------------------- Resultados (carrossel) ------ */ /* No celular NÃO pinta fundo (a regra acima deixa transparente): quem pinta é o .wrap, e o metal corre contínuo. No desktop volta a ser um cartão flutuante. No celular a margem some: como a superfície é contínua, ela virava só um vão VAZIO. Somada ao padding daqui, ao margin-bottom do último banner e ao padding da galeria, empilhava ~89px de nada entre o banner e o título. Aqui o respiro é dado uma vez só, pelo padding-top. */ .results{ margin-top:0; color:var(--text); padding:1.5rem 1.15rem 1.9rem; } @media (min-width:768px){ /* No desktop são dois cartões flutuantes: aí a margem é a separação entre eles. */ .results{ background:var(--card-bg); max-width:768px; margin:2.6rem auto 0; border-radius:2rem; border:1px solid var(--hairline); box-shadow:var(--shadow-card); padding:2.2rem 2rem 2.4rem; } } /* Tipografia editorial/A+: título curto, peso leve, respiro */ .results-eyebrow{ font-size:.66rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); } .results-title{ font-size:1.3rem; font-weight:500; letter-spacing:-.01em; line-height:1.22; margin:.55rem 0 .4rem; color:var(--text); text-wrap:balance; } .results-sub{ font-size:.875rem; color:var(--accent); line-height:1.5; margin-bottom:1.35rem; max-width:34ch; text-wrap:pretty; } @media (min-width:768px){ .results-title{ font-size:1.45rem; } } /* Marquee: a "janela" (.results-track) fica PARADA e recorta; só a faixa interna (.results-lane) recebe o transform. */ .results-track{ overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; padding:4px 6px 6px; } .results-track.grabbing{ cursor:grabbing; } .results-lane{ display:flex; gap:.5rem; width:max-content; will-change:transform; } /* Card na proporção média das fotos (~0.95) + cover: todas ficam UNIFORMES. */ .results-card{ position:relative; flex:0 0 auto; width:16rem; height:16.8rem; background:var(--card-bg); border-radius:1.35rem; overflow:hidden; } .results-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 9px 1px rgba(var(--bg-rgb),.55); } .results-card img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; } @media (min-width:768px){ .results-card{ width:20rem; height:21rem; } } .results-hint{ font-size:.75rem; color:var(--muted-2); margin-top:.55rem; } /* ============================================================================ Overrides do Bootstrap (complementam data-bs-theme) ========================================================================== */ .modal-content{ background:var(--card-bg); border:1px solid var(--hairline); color:var(--text); } .modal-body{ color:var(--text-2); } .modal-body a{ color:var(--accent); } .modal-body a:hover{ color:var(--accent-hover); } .form-label{ color:var(--text-2); } .form-control, .form-select, textarea.form-control{ background-color:var(--glass-bg); border:1px solid var(--glass-border); color:var(--text); border-radius:.6rem; } .form-control:focus, .form-select:focus, textarea.form-control:focus{ background-color:var(--glass-bg); color:var(--text); border-color:var(--gold-ring); box-shadow:0 0 0 .2rem rgba(201,159,75,.18); } .form-control::placeholder{ color:var(--muted-2); opacity:1; } /* O POPUP NATIVO do