/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&family=Fraunces:opsz,wght@9..144,700;9..144,800&display=swap'); .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0} /* ----------------- Base (default = Inter + Plus Jakarta para títulos) ----------------- */ :root{ /* pares padrão: neo-grotesk clean */ --font-title: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; /* escala e ritmo */ --fs-h1: clamp(44px, 6.4vw, 68px); --fs-h2: clamp(28px, 4.2vw, 44px); --fs-h3: clamp(20px, 2.6vw, 28px); --fs-body: 17px; --lh-tight: 1.08; --lh-title: 1.15; --lh-body: 1.6; --track-tight: -0.015em; /* mais “premium” */ --track-body: 0.005em; } html{font-size:100%} body{ font-family:var(--font-text); font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--track-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-variant-numeric: lining-nums; } /* Títulos gerais (sem mexer nas tuas classes existentes) */ h1,h2,h3,.hero-title{ font-family:var(--font-title); font-weight:700; letter-spacing:var(--track-tight); } h1,.hero-title{font-size:var(--fs-h1); line-height:var(--lh-tight)} h2{font-size:var(--fs-h2); line-height:var(--lh-title)} h3{font-size:var(--fs-h3); line-height:1.2} .hero-subtitle{ font-family:var(--font-text); font-weight:500; font-size:clamp(18px,2.2vw,22px); line-height:1.5; opacity:.92; } .hero-bullets{font-size:17px; line-height:1.6} .hero-microcopy{font-size:14px; line-height:1.45; opacity:.8} .btn{font-family:var(--font-text); font-weight:600; letter-spacing:.01em} /* Utilitários */ .font-title{font-family:var(--font-title)!important} .font-text{font-family:var(--font-text)!important} .tracking-tight{letter-spacing:var(--track-tight)!important} .leading-tight{line-height:var(--lh-tight)!important} .text-balance{text-wrap:balance} /* ----------------- Tema 1: Neo-grotesk (Framer vibe) ----------------- */ /* Use para forçar esse tema explícito */ .typo-grotesk{ --font-title: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; --fs-h1: clamp(46px, 6.8vw, 72px); --lh-tight: 1.06; --track-tight: -0.02em; } /* ----------------- Tema 2: Display serif (headline com personalidade) ----------------- */ /* Use para títulos com Fraunces (estilo de muitos templates Framer) */ .typo-serif{ --font-title: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; --fs-h1: clamp(48px, 6.8vw, 76px); --lh-tight: 1.04; /* mais fechado para títulos serifados */ --track-tight: -0.02em; /* tracking ligeiramente mais apertado */ } /* Dark mode (só tipografia/contraste leve) */ @media (prefers-color-scheme: dark){ body{color:#E6E8EB} .hero-subtitle,.hero-bullets,.hero-microcopy{color:rgba(230,232,235,.92)} }