/* ========================================================================== Trycol UI — base visual dos sites (tokens, botão 3D, animações GSAP). Vale igual para HTML puro (Claude Designer) e para Next.js (cole em app/globals.css). Troque SÓ as variáveis de :root para mudar a marca. Não invente outro estilo de botão. ========================================================================== */ :root { /* Café D'oro — calçada paulista: basalto da placa, calcário, ouro do D'oro */ --bg: #1a1214; --surface: #211718; --card: #2a1e1f; --border: rgba(239, 230, 214, 0.11); --text: #f3ebdf; --muted: #c2b3a0; --accent: #d4ae5a; /* ouro: só para escolha, preço em destaque e marca */ --accent-2: #b8862f; --stone: #efe6d6; /* calcário */ --ink: #1a1214; /* basalto sobre o calcário */ --ink-muted: #5c4a42; --grad-brand: linear-gradient(120deg, var(--accent), var(--accent-2)); --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --radius: 18px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; max-width: 100%; } /* nada pode vazar para o lado no celular */ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } img, video, canvas, svg { max-width: 100%; } section[id], [id].anchor { scroll-margin-top: 88px; } /* a âncora não fica escondida atrás do menu fixo */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--accent); color: var(--ink); } /* ---------- animações (GSAP) — estado inicial ---------- O script inline do (ver motion.js / Motion.tsx) põe data-motion="on" só quando pode animar (sem "reduzir movimento", fora do editor). Sem JS ou com erro, o conteúdo aparece normal. */ html[data-motion="on"] [data-anim] { visibility: hidden; } /* ---------- botão 3D ---------- Estrutura (não mude): Texto Só `transform` e `opacity` se movem => 60 fps (nada de animar box-shadow, width, top...). Variantes: btn3d--primary (padrão), btn3d--light, btn3d--ghost, btn3d--whatsapp. Tamanhos: btn3d--sm, btn3d--lg. */ .btn3d { --depth: 6px; --face: var(--accent); --face-2: var(--accent-2); --edge: color-mix(in srgb, var(--accent-2) 55%, #000); --glow: color-mix(in srgb, var(--accent) 55%, transparent); --on: #06101f; position: relative; display: inline-block; padding: 0 0 var(--depth); border: 0; background: none; font: inherit; text-decoration: none; cursor: pointer; border-radius: 999px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; isolation: isolate; } .btn3d__edge { /* a "lateral" grossa: fica parada embaixo */ position: absolute; left: 0; right: 0; bottom: 0; top: var(--depth); border-radius: inherit; background: var(--edge); z-index: -1; } .btn3d::after { /* brilho colorido embaixo (só opacity muda) */ content: ""; position: absolute; left: -4%; right: -4%; bottom: -14px; height: 70%; background: radial-gradient(closest-side, var(--glow), transparent); /* gradiente, não filter: blur (blur é caro de desenhar) */ opacity: 0.55; z-index: -2; pointer-events: none; transition: opacity 0.25s; } .btn3d__face { /* a "tampa" que sobe no hover e afunda no clique */ position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: inherit; color: var(--on); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; background: linear-gradient(120deg, var(--face), var(--face-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.14); /* realce de luz no topo */ will-change: transform; transform: translate3d(0, 0, 0); } @media (hover: hover) and (pointer: fine) { .btn3d:hover::after { opacity: 0.85; } } .btn3d--sm .btn3d__face { padding: 10px 20px; font-size: 14px; } .btn3d--sm { --depth: 4px; } .btn3d--lg .btn3d__face { padding: 18px 38px; font-size: 17px; } .btn3d--lg { --depth: 7px; } .btn3d--light { --face: #fff; --face-2: #eef2ff; --edge: #b8c2e0; --glow: rgba(255, 255, 255, 0.35); --on: #0a1a3a; } .btn3d--whatsapp { --face: #34e27b; --face-2: #16b855; --edge: #0b7a38; --glow: rgba(37, 211, 102, 0.55); --on: #04210f; } .btn3d--ghost { --edge: rgba(255, 255, 255, 0.14); --glow: transparent; --on: var(--text, #f5f7ff); } .btn3d--ghost .btn3d__face { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); } .btn3d--ghost::after { display: none; } .btn3d[disabled], .btn3d[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } @media (max-width: 720px) { .fc-grid { grid-template-columns: 1fr !important; } } /* formulário: 1 coluna no celular */ .fc-btn { width: 100%; } .fc-btn .btn3d__face { width: 100%; } /* botão de enviar do formulário ocupa a linha toda */ /* sem GSAP (ou com "reduzir movimento") o botão ainda reage, com CSS simples e curto */ @media (hover: hover) { html:not([data-motion="on"]) .btn3d:hover .btn3d__face { transform: translate3d(0, -2px, 0); } } html:not([data-motion="on"]) .btn3d:active .btn3d__face { transform: translate3d(0, calc(var(--depth) - 1px), 0); } .btn3d__face { transition: transform 0.12s; } html[data-motion="on"] .btn3d__face { transition: none; } /* com GSAP, quem move é o GSAP */ /* ---------- pequenos blocos reutilizáveis ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; } .grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section { padding: clamp(64px, 9vw, 112px) 0; } .card3d { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.6); will-change: transform; } .grid-2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 56px); align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } } @media (min-width: 861px) and (max-width: 1080px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* botão flutuante do WhatsApp (o anel que pulsa é feito pelo GSAP: data-anim="pulse") */ .fab-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; border-radius: 999px; } .fab-wa .btn3d__face { padding: 16px; border-radius: 999px; } .fab-wa svg { width: 26px; height: 26px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }