/* /para-homens — estilos da página. Mesmos tokens da /relacionamento-sugar: * Marcellus nos títulos, Figtree no corpo, paleta rubi sobre fundo quente. * Mobile-first: os grids usam auto-fit e colapsam sozinhos. */ :root { --ph-fundo: #faf7f2; --ph-branco: #fff; --ph-grafite: #2a2224; --ph-texto: #5f5557; --ph-texto-2: #6a5f61; --ph-texto-3: #8a7f81; --ph-rubi: #c22b3a; --ph-rubi-fundo: #8e1f2c; --ph-dourado: #c9a24b; /* SÓ o selo de verificação */ --ph-hairline: #eadfd8; --ph-rosa-suave: #fbedec; --ph-rosa-chip: #fbe3e8; --ph-rosa-borda: #f0d6cf; --ph-creme: #fdf8ee; --ph-gradiente: linear-gradient(135deg, #c22b3a, #8e1f2c); --ph-raio-btn: 10px; --ph-raio-card: 16px; --ph-sombra-cta: 0 12px 30px -12px rgba(194, 43, 58, 0.7); --ph-sombra-card: 0 14px 30px -20px rgba(42, 34, 36, 0.4); --ph-pad-secao: clamp(48px, 8vh, 92px); --ph-pad-lateral: clamp(18px, 4vw, 40px); --ph-nav-h: 66px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.ph { margin: 0; background: var(--ph-fundo); color: var(--ph-grafite); font-family: Figtree, system-ui, -apple-system, sans-serif; font-weight: 400; overflow-x: hidden; } /* Sem cor aqui de propósito: `.ph a` (0,1,1) venceria as classes de componente (0,1,0) e sobrescreveria a cor dos botões. Cada componente declara a própria; quem não declara herda o grafite do body. */ .ph a { text-decoration: none; } .ph ::selection { background: rgba(194, 43, 58, 0.18); color: var(--ph-grafite); } .ph-wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--ph-pad-lateral); padding-right: var(--ph-pad-lateral); } .ph-wrap--estreito { max-width: 1100px; } .ph h1, .ph h2 { font-family: Marcellus, Georgia, serif; font-weight: 400; color: var(--ph-grafite); } /* ---------- Reveal no scroll ---------- * Degradação segura OBRIGATÓRIA: o conteúdo é visível por padrão. O opacity:0 * só passa a valer depois que o JS marca `reveal-ready` no , então sem * JS (ou com ele quebrado) nada some. Há ainda um timer de segurança no JS. */ @media (prefers-reduced-motion: no-preference) { .reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; } } /* ---------- Nav ---------- */ .ph-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 242, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ph-hairline); } .ph-nav { height: var(--ph-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .ph-marca { display: flex; align-items: center; gap: 11px; color: var(--ph-grafite); } .ph-marca:hover { color: var(--ph-grafite); } .ph-marca svg { display: block; flex: none; } .ph-wordmark { font-family: Marcellus, Georgia, serif; font-size: 15.5px; letter-spacing: 0.22em; white-space: nowrap; } .ph-nav-cta { font-size: 13.5px; font-weight: 600; color: #fff; background: var(--ph-rubi); border-radius: 8px; padding: 11px 18px; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(194, 43, 58, 0.7); transition: background 0.2s, transform 0.2s; } .ph-nav-cta:hover { background: var(--ph-rubi-fundo); color: #fff; transform: translateY(-1px); } /* ---------- Botões ---------- */ .ph-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 16.5px; font-weight: 600; border-radius: var(--ph-raio-btn); padding: 18px 34px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .ph-btn--rubi { color: #fff; background: var(--ph-rubi); box-shadow: var(--ph-sombra-cta); } .ph-btn--rubi:hover { background: var(--ph-rubi-fundo); color: #fff; transform: translateY(-2px); } /* Sobre o gradiente rubi o botão é branco com texto rubi (nunca o inverso). */ .ph-btn--branco { color: var(--ph-rubi); background: #fff; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.45); } .ph-btn--branco:hover { color: var(--ph-rubi); transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.5); } /* ---------- S1 · Hero ---------- */ .ph-hero { background: var(--ph-gradiente); } .ph-hero .ph-wrap { padding-top: clamp(38px, 6vh, 76px); padding-bottom: clamp(34px, 5vh, 60px); } .ph-hero-inner { max-width: 760px; } .ph-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 7px 15px; margin-bottom: 22px; } .ph-hero h1 { margin: 0 0 18px; line-height: 1.06; font-size: clamp(32px, 5.4vw, 60px); color: #fff; } .ph-hero h1 .ph-suave { color: rgba(255, 255, 255, 0.78); } .ph-hero-sub { margin: 0 0 30px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 54ch; } .ph-confianca { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font-size: 13px; color: rgba(255, 255, 255, 0.85); } .ph-confianca span { display: flex; align-items: center; gap: 6px; } .ph-confianca b { color: #fff; font-weight: 400; } /* ---------- S2 · Perfis ---------- */ .ph-perfis { background: var(--ph-branco); border-top: 1px solid var(--ph-hairline); scroll-margin-top: var(--ph-nav-h); } .ph-perfis .ph-wrap { padding-top: var(--ph-pad-secao); padding-bottom: var(--ph-pad-secao); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; } .ph-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); } .ph-galeria-col { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px); } /* O deslocamento da coluna B é o que cria o escalonamento (masonry). */ .ph-galeria-col--b { margin-top: clamp(28px, 4vw, 52px); } .ph-card { background: #fff; border: 1px solid var(--ph-hairline); border-radius: var(--ph-raio-card); overflow: hidden; box-shadow: var(--ph-sombra-card); } .ph-card-foto { position: relative; } /* Alturas e object-position são por card (enquadramento do rosto ajustado à mão no design) — vêm inline no HTML, não aqui. */ .ph-card-foto img { width: 100%; object-fit: cover; display: block; } /* Selo de identidade verificada. Aparece só nos cards marcados no HTML. */ .ph-selo { position: absolute; bottom: 8px; right: 8px; display: inline-flex; width: 24px; height: 24px; background: #fff; border-radius: 50%; align-items: center; justify-content: center; color: var(--ph-dourado); font-size: 13px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .ph-card-info { padding: 12px 14px; } .ph-card-info p { margin: 0; } .ph-card-role { font-size: 14.5px; font-weight: 600; color: var(--ph-grafite); margin-bottom: 2px !important; } .ph-card-city { font-size: 12.5px; color: var(--ph-texto-3); } .ph-perfis h2 { margin: 0 0 22px; font-size: clamp(28px, 3.6vw, 44px); } .ph-perfis h2 .ph-destaque { color: var(--ph-rubi); } .ph-perfis-texto p { margin: 0 0 18px; font-size: 16px; line-height: 1.7; color: var(--ph-texto); max-width: 52ch; } .ph-perfis-texto p:last-of-type { margin-bottom: 30px; } .ph-dourado { color: var(--ph-dourado); font-weight: 600; } .ph-discricao { margin: 16px 0 0 !important; font-size: 13px !important; line-height: 1.55; color: var(--ph-texto-3) !important; max-width: 52ch; } /* ---------- S3 · A prova ---------- */ .ph-prova { background: var(--ph-rosa-suave); border-top: 1px solid var(--ph-hairline); } .ph-prova .ph-wrap, .ph-passos .ph-wrap, .ph-privacidade .ph-wrap { padding-top: var(--ph-pad-secao); padding-bottom: var(--ph-pad-secao); } .ph-secao-titulo { margin-bottom: clamp(28px, 4vh, 44px); } .ph-secao-titulo h2 { margin: 0; font-size: clamp(26px, 3.6vw, 44px); } .ph-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(18px, 2.6vw, 28px); } .ph-prova-card { background: #fff; border: 1px solid var(--ph-rosa-borda); border-radius: var(--ph-raio-card); padding: clamp(22px, 2.6vw, 30px); } .ph-prova-card h3 { margin: 0 0 10px; font-family: Marcellus, Georgia, serif; font-weight: 400; font-size: clamp(19px, 2vw, 23px); line-height: 1.25; color: var(--ph-rubi); } .ph-prova-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ph-texto); } /* ---------- S4 · Como funciona ---------- */ .ph-passos { background: var(--ph-branco); border-top: 1px solid var(--ph-hairline); } .ph-passos .ph-secao-titulo { text-align: center; margin-bottom: clamp(30px, 4.5vh, 48px); } .ph-grid-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 34px); } .ph-passo { text-align: center; } .ph-passo-n { display: inline-flex; width: 56px; height: 56px; background: var(--ph-rosa-chip); border-radius: 50%; align-items: center; justify-content: center; font-family: Marcellus, Georgia, serif; font-size: 23px; color: var(--ph-rubi); margin-bottom: 16px; } .ph-passo h3 { margin: 0 0 8px; font-size: 18.5px; font-weight: 600; color: var(--ph-grafite); } .ph-passo p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ph-texto-2); } /* Destaque em ouro: o único ponto da página que fala de custo. */ .ph-linha-ouro { margin: clamp(26px, 4vh, 38px) auto 0; border: 1px solid var(--ph-dourado); border-radius: 14px; background: var(--ph-creme); padding: clamp(20px, 2.6vw, 28px); display: flex; gap: 14px; align-items: flex-start; max-width: 780px; } .ph-linha-ouro span { flex: none; color: var(--ph-dourado); font-size: 17px; line-height: 1.4; } .ph-linha-ouro p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ph-grafite); } .ph-linha-ouro strong { font-weight: 600; } /* ---------- S5 · Privacidade ---------- */ .ph-privacidade { background: var(--ph-fundo); border-top: 1px solid var(--ph-hairline); } .ph-grid-priv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 22px); } .ph-priv-card { background: #fff; border: 1px solid var(--ph-hairline); border-radius: var(--ph-raio-card); padding: clamp(22px, 2.6vw, 28px); } .ph-priv-icone { display: inline-flex; width: 42px; height: 42px; background: var(--ph-rosa-chip); border-radius: 12px; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; } .ph-priv-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--ph-grafite); } .ph-priv-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ph-texto-2); } /* ---------- S6 · CTA final ---------- */ .ph-final { background: var(--ph-gradiente); } .ph-final-inner { max-width: 820px; margin: 0 auto; padding: clamp(52px, 9vh, 104px) var(--ph-pad-lateral); text-align: center; } .ph-final h2 { margin: 0 0 30px; font-size: clamp(30px, 4.8vw, 54px); color: #fff; } .ph-final-nota { margin: 22px auto 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: 52ch; } /* ---------- Footer ---------- */ .ph-footer { background: var(--ph-fundo); border-top: 1px solid var(--ph-hairline); } .ph-footer .ph-wrap { padding-top: clamp(40px, 6vh, 64px); padding-bottom: 40px; } .ph-footer-topo { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; padding-bottom: 26px; border-bottom: 1px solid var(--ph-hairline); } .ph-footer-nav { display: flex; flex-wrap: wrap; gap: 18px 28px; } .ph-footer-nav a { font-size: 13.5px; color: var(--ph-texto-2); } .ph-footer-nav a:hover { color: var(--ph-rubi-fundo); } .ph-footer-copy { margin: 22px 0 0; font-size: 12.5px; color: var(--ph-texto-3); } .ph-footer-legal { margin: 18px 0 0; padding: 16px 20px; border: 1px solid var(--ph-hairline); border-radius: 10px; background: #fff; font-size: 12.5px; line-height: 1.6; color: var(--ph-texto-2); max-width: 80ch; } /* A galeria vira coluna única no mobile e o escalonamento perde o sentido. */ @media (max-width: 560px) { .ph-galeria { grid-template-columns: 1fr; } .ph-galeria-col--b { margin-top: 0; } }