/* Member AI — base styles */ @font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Thin.otf") format("opentype"); font-weight: 100 300; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Bold.otf") format("opentype"); font-weight: 600 800; font-style: normal; font-display: swap; } :root { /* dark base — graphite */ --bg: #0A0A0A; --bg-1: #0E0E0E; --surface: #141414; --surface-2: #1A1A1A; --surface-3: #242424; --border: rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16); --fg: #F5F5F4; --fg-2: rgba(245,245,244,0.72); --fg-3: rgba(245,245,244,0.52); --fg-muted: rgba(245,245,244,0.36); /* single accent — blue (default) · lime disponível via Tweaks */ --accent: #1C80FA; --accent-fg: #FFFFFF; --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent); --accent-glow: color-mix(in oklch, var(--accent) 35%, transparent); /* density */ --section-pad-y: 140px; --container: 1280px; --gutter: 88px; --font-display: "PP Neue Montreal", "Inter", system-ui, sans-serif; /* monospace removida do site — toda referência a --font-mono usa a fonte * da marca agora (kickers, números, depoimentos). */ --font-mono: "PP Neue Montreal", "Inter", system-ui, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-density="compact"] { --section-pad-y: 96px; --gutter: 64px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); } /* IMPORTANTE: NÃO botar overflow-x: hidden no — em Chrome * isso muda o root do scroll do pro , o que quebra * IntersectionObserver({ root: null }) usado pra reveal-on-scroll * (app.jsx:37). Mantemos overflow-x apenas no body. */ body { font-family: var(--font-display); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; max-width: 100vw; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } @media (max-width: 900px) { :root { --gutter: 24px; --section-pad-y: 80px; } } /* Typography */ .t-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: inline-flex; align-items: center; gap: 8px; } .t-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; } h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 500; } h2 { font-size: clamp(28px, 3.4vw, 46px); } h3 { font-size: clamp(24px, 2.2vw, 32px); } p { margin: 0; color: var(--fg-2); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; transition: transform 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); } .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 60%, black), 0 10px 30px var(--accent-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), 0 16px 42px var(--accent-glow); } .btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: var(--surface); } /* Section shell */ section { padding: var(--section-pad-y) 0; position: relative; } /* Divider line */ .hairline { height: 1px; background: var(--border); width: 100%; } /* Grid background utility */ .bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ============ HERO WORDMARK (decorativo) ============ * Gigante "MEMBER AI" atrás do conteúdo do hero, ancorado na base. * MEMBER (esquerda) com outline branco sutil; AI (direita) com * outline na cor da marca. .hero precisa ter overflow: hidden e * .hero-inner z-index: 2 (já garantidos em components.css). */ /* Wrapper relativo que ancora o wordmark ao topo da janela do produto. */ .hero-screen-wrap { position: relative; } .hero-wordmark { position: absolute; left: 50%; top: 0; /* sobe pra metade do wordmark espiar acima da janela; o resto fica * escondido ATRÁS da tela (z-index menor que .hero-loop). */ transform: translate(-50%, -48%); z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 12vw, 188px); line-height: 0.82; letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09); text-stroke: 1px rgba(255, 255, 255, 0.09); pointer-events: none; user-select: none; } /* "AI" no azul da marca */ .hero-wordmark span { -webkit-text-stroke: 1px var(--accent); text-stroke: 1px var(--accent); opacity: 0.8; } @media (max-width: 900px) { .hero-wordmark { font-size: clamp(46px, 16vw, 116px); transform: translate(-50%, -50%); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07); text-stroke: 1px rgba(255, 255, 255, 0.07); } } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============ SCROLLBAR (marca Member AI) ============ * Track preto que se mistura com o bg do site, thumb com gradient * accent (#1C80FA → fade), borda interna do bg pra criar respiro. * Suportado nativamente em Chromium/WebKit; Firefox cai no * scrollbar-color (cor sólida, sem gradient). * * IMPORTANTE: scrollbar HORIZONTAL fica completamente desligada — * height: 0 + display: none + visibility: hidden pra cobrir todos * os engines. A scrollbar azul "fantasma" que aparecia no rodapé * era essa horizontal disparada por um element absolute (provavelmente * .hero-wordmark ou .footer-xl em viewports estreitos). Body já tem * overflow-x: clip + max-width: 100vw como cinto-suspensórios. */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar:horizontal { height: 0 !important; width: 0 !important; display: none !important; visibility: hidden !important; } ::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--border); } ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 70%, transparent) 100% ); border-radius: 999px; border: 3px solid var(--bg); background-clip: padding-box; transition: background 200ms var(--ease); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 90%, var(--fg)) 100% ); background-clip: padding-box; } ::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: var(--bg); } /* Firefox — sem gradient, mas a cor da marca aparece */ html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }