/** * Godaa — site público * Set/2026 · tagline, projetos, vídeo e contato. * * Uma família só (Outfit). As cores vêm do admin (/admin/ajustes.php), * injetadas no depois deste arquivo — os valores abaixo são o fallback. * O único momento da página é a tagline: o peso cresce de "Crie." a "Converta.". * Redondo = ação (botões). O resto é tipografia, filete e espaço. */ /* ======================================================================== Base ======================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } :root { --bg: #f2f0ea; --fg: #0b0b0c; --fg-2: #3f3d37; --fg-3: #6f6d63; --rule: #d6d3c8; --accent: #c3a87e; --accent-emphasis: #c3a87e; --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --max: 1320px; --pad: clamp(1.25rem, 0.6rem + 3vw, 3rem); --header-h: 4.5rem; --ease: cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="dark"] { --bg: #0b0b0c; --fg: #f4f2ea; --fg-2: #bcbaae; --fg-3: #84827a; --rule: #292924; --accent: #bf94ff; --accent-emphasis: #ec4899; } body { font-family: var(--font); font-size: 1.0625rem; font-weight: 400; line-height: 1.55; color: var(--fg-2); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 4px; } ::selection { background: var(--accent); color: #0b0b0c; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); } /* ======================================================================== Header ======================================================================== */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); } .logo img { height: 1.625rem; width: auto; } .logo-dark { display: none; } [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .theme-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--fg-3); transition: color 0.2s ease; } .theme-toggle:hover { color: var(--fg); } .theme-toggle svg { width: 1.25rem; height: 1.25rem; } .icon-sun { display: none; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } /* ======================================================================== Botão de WhatsApp — a única ação do site ======================================================================== */ .btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; height: 3.25rem; padding: 0 1.625rem; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 1rem; font-weight: 500; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.35s var(--ease); } .btn-wa svg { width: 1.125rem; height: 1.125rem; flex: none; } .btn-wa:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); } .btn-wa:active { transform: translateY(0); } /* À noite o botão acende em vez de ganhar contorno */ [data-theme="dark"] .btn-wa:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 32px -6px var(--accent); } .btn-wa-sm { height: 2.5rem; padding: 0 1.125rem; font-size: 0.9375rem; } .btn-wa-lg { height: 3.75rem; padding: 0 2.125rem; font-size: 1.125rem; } @media (max-width: 640px) { .btn-wa-sm { width: 2.5rem; padding: 0; } .btn-wa-sm .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; } .cta-note { color: var(--fg-2); font-size: 1rem; } /* ======================================================================== Hero — a tagline é o título; o peso cresce palavra a palavra ======================================================================== */ .hero { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem); } /* No desktop o hero ocupa a tela, mas deixa a lista de projetos aparecer embaixo */ @media (min-width: 900px) { .hero { min-height: min(calc(100svh - var(--header-h) - 5rem), 56rem); padding-block: clamp(2.5rem, 7vh, 5rem) clamp(3rem, 8vh, 6rem); } } .tagline { margin-left: -0.05em; /* limitada também pela altura: o botão cabe na primeira tela de notebook */ font-size: min(clamp(3.25rem, 0.5rem + 13vw, 10rem), 18vh); line-height: 0.9; letter-spacing: -0.045em; color: var(--fg); } .tagline-word { display: block; } .tagline-word:nth-child(1) { font-weight: 200; } .tagline-word:nth-child(2) { font-weight: 450; } .tagline-word:nth-child(n+3) { font-weight: 800; } /* À noite as palavras acendem na mesma progressão */ [data-theme="dark"] .tagline-word:nth-child(2) { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent); } [data-theme="dark"] .tagline-word:nth-child(n+3) { text-shadow: 0 0 56px color-mix(in srgb, var(--accent) 34%, transparent); } .hero-range { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); font-size: clamp(1.3125rem, 1rem + 1.1vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-2); } /* Frases de duas partes: cada parte na sua linha, sem palavra pendurada */ .hero-range span, .usecases-title span, .facts-title span, .range-title span { display: block; text-wrap: balance; } .hero .cta { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); } /* Prova logo abaixo do botão: onde os sistemas já estão rodando */ .hero-proof { max-width: 56ch; margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); font-size: 0.9375rem; color: var(--fg-3); } /* ======================================================================== A conta do atendimento — os números são do visitante, nada inventado ======================================================================== */ .calc-row { max-width: 34ch; margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.6; color: var(--fg-2); } .calc-input { width: 4ch; padding: 0 0.15em; border: 0; border-bottom: 2px solid var(--accent); background: none; color: var(--fg); font: inherit; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; } .calc-input::-webkit-outer-spin-button, .calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-result { max-width: 24ch; margin-top: clamp(1.75rem, 1.5rem + 1.5vw, 3rem); font-size: clamp(1.625rem, 1.15rem + 2vw, 2.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; color: var(--fg); text-wrap: balance; } .calc-result strong { font-weight: 700; } .calc-note { margin-top: 0.875rem; color: var(--fg-2); } /* ======================================================================== Por que vende — dados com fonte, número grande à esquerda, frase à direita ======================================================================== */ /* Deixa claro de que lado a gente está: automação tira o repetitivo, não a pessoa */ .facts-sub { max-width: 44ch; margin-top: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--fg-2); } .fact-list { margin-top: clamp(1.5rem, 1.25rem + 1.5vw, 2.75rem); border-top: 1px solid var(--rule); } .fact { display: grid; grid-template-columns: minmax(max-content, 13rem) minmax(0, 1fr); align-items: baseline; gap: 0.5rem clamp(1.5rem, 1rem + 2.5vw, 3.5rem); padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); border-bottom: 1px solid var(--rule); } .fact-number { font-size: clamp(3rem, 1.5rem + 5vw, 6rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: var(--fg); } .fact-text { max-width: 34ch; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; } .fact-source { margin-top: 0.5rem; font-size: 0.875rem; color: var(--fg-3); } @media (max-width: 640px) { .fact { grid-template-columns: minmax(0, 1fr); } } /* ======================================================================== Onde funciona — tipos de negócio reais, cada um com o que o cliente resolve sozinho ======================================================================== */ .usecases-title, .facts-title, .range-title { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; color: var(--fg); } .usecase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .usecase { padding-top: clamp(1rem, 0.85rem + 0.6vw, 1.5rem); border-top: 1px solid var(--rule); } .usecase-where { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg); } .usecase-how { max-width: 34ch; margin-top: 0.625rem; color: var(--fg-2); } @media (max-width: 960px) { .usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .usecase-grid { grid-template-columns: minmax(0, 1fr); } } /* Dúvidas que travam a decisão — logo depois dos usos, com respiro próprio */ .section.faq-section { padding-top: clamp(0.5rem, 0.25rem + 1.5vw, 2rem); } .faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem); } .faq-q { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 500; line-height: 1.25; color: var(--fg); } .faq-a { margin-top: 0.625rem; color: var(--fg-2); } @media (max-width: 860px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .js:not(.is-ready) .tagline-word, .js:not(.is-ready) .hero-range, .js:not(.is-ready) .hero .cta { opacity: 0; } .is-ready .tagline-word { animation: tagline-in 1.3s var(--ease) both; } .is-ready .tagline-word:nth-child(2) { animation-delay: 0.2s; } .is-ready .tagline-word:nth-child(n+3) { animation-delay: 0.4s; } .is-ready .hero-range, .is-ready .hero .cta { animation: fade-in 0.9s ease 0.95s both; } } @keyframes tagline-in { from { opacity: 0; font-weight: 100; letter-spacing: -0.01em; } } @keyframes fade-in { from { opacity: 0; } } /* ======================================================================== Escala — contador ao vivo no ritmo real de um grande marketplace ======================================================================== */ .scale { padding-block: clamp(3rem, 2.25rem + 4vw, 6rem); background: var(--fg); color: var(--bg); } /* À noite a faixa não inverte: vira um painel levemente aceso */ [data-theme="dark"] .scale { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); color: var(--fg); border-block: 1px solid var(--rule); } .scale-label { max-width: 30ch; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; } .scale-number { display: block; margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); font-size: clamp(4rem, 1rem + 12vw, 12rem); font-weight: 700; line-height: 0.85; letter-spacing: -0.045em; /* número que muda a cada instante: dígitos de largura fixa pra não tremer */ font-variant-numeric: tabular-nums; color: var(--accent); } [data-theme="dark"] .scale-number { text-shadow: 0 0 48px color-mix(in srgb, var(--accent) 35%, transparent); } .scale-math { max-width: 44ch; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.35; opacity: 0.72; } .scale-source { max-width: 72ch; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); font-size: 0.8125rem; line-height: 1.5; opacity: 0.55; } .scale-punch { margin-top: clamp(3rem, 2rem + 4vw, 6rem); font-size: clamp(2rem, 1.1rem + 4vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; } /* ======================================================================== Projetos — índice tipográfico, cada linha na língua do cliente ======================================================================== */ /* Respiro entre blocos: apertado o suficiente pra página não virar rolagem infinita */ .section { padding-block: clamp(2.75rem, 2rem + 3.5vw, 5.5rem); } .section-title { margin-bottom: clamp(1rem, 0.75rem + 1vw, 1.75rem); font-size: 1.0625rem; font-weight: 500; color: var(--fg-3); } /* Rótulo da lista, abaixo da frase de amplitude */ .projects-label { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .project-list { border-top: 1px solid var(--rule); } .project { border-bottom: 1px solid var(--rule); } .project-row, .group-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 13rem; align-items: baseline; gap: 0.25rem 2rem; } .project-row { padding-block: clamp(1.1rem, 0.85rem + 0.9vw, 1.7rem); transition: opacity 0.4s var(--ease); } .project-name { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: var(--fg); } .project-what { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); color: var(--fg-2); } .project-site { display: inline-flex; align-items: center; justify-self: end; gap: 0.4rem; font-size: 0.9375rem; color: var(--fg-3); white-space: nowrap; transition: color 0.25s ease; } .project-site svg { width: 0.875em; height: 0.875em; transition: transform 0.35s var(--ease); } a.project-row:hover .project-site, a.project-row:focus-visible .project-site, .group-link:hover .project-site, .group-link:focus-visible .project-site { color: var(--fg); } a.project-row:hover .project-site svg, .group-link:hover .project-site svg { transform: translate(2px, -2px); } a.project-row:hover .project-host, .group-link:hover .project-host { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; } /* Passou o mouse numa linha, as outras recuam */ @media (hover: hover) { .project-list:has(.project-row:hover) .project-row:not(:hover) { opacity: 0.32; } } /* Grupo (portais): a linha abre e mostra os sites */ .project-group summary { list-style: none; cursor: pointer; } .project-group summary::-webkit-details-marker { display: none; } .project-toggle { position: relative; width: 0.875em; height: 0.875em; transition: transform 0.4s var(--ease); } .project-toggle::before, .project-toggle::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%); } .project-toggle::after { transform: translateY(-50%) rotate(90deg); } .project-group details[open] .project-toggle { transform: rotate(45deg); } .project-group summary:hover .project-site { color: var(--fg); } .group-list { padding-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); } .group-link { padding-block: 0.7rem; color: var(--fg); } .group-link .group-name { grid-column: 2; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); } .group-list li + li .group-link { border-top: 1px solid var(--rule); } @supports (interpolate-size: allow-keywords) { .project-group details { interpolate-size: allow-keywords; } .project-group details::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease), content-visibility 0.5s allow-discrete; } .project-group details[open]::details-content { height: auto; } } @media (max-width: 760px) { .project-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name site" "what what"; row-gap: 0.35rem; } .project-row .project-name { grid-area: name; } .project-row .project-what { grid-area: what; } .project-row .project-site { grid-area: site; } .group-link { grid-template-columns: minmax(0, 1fr) auto; } .group-link .group-name { grid-column: 1; } } @media (max-width: 420px) { .project-row .project-host { display: none; } } /* ======================================================================== Prova — um vídeo, uma frase ======================================================================== */ .proof-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); } .video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(0.625rem, 0.4rem + 0.6vw, 1.125rem); background: #000; } .video-frame video { width: 100%; height: 100%; object-fit: cover; } .video-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 55%); } .video-play-icon { display: grid; place-items: center; width: clamp(3.75rem, 3rem + 2vw, 5rem); height: clamp(3.75rem, 3rem + 2vw, 5rem); border-radius: 50%; background: #f4f2ea; color: #0b0b0c; transition: transform 0.35s var(--ease); } .video-play-icon svg { width: 38%; height: 38%; margin-left: 8%; } .video-play:hover .video-play-icon { transform: scale(1.06); } .video-frame.is-playing .video-play { display: none; } .video-quote { font-size: clamp(1.75rem, 1.15rem + 2.2vw, 3.125rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; color: var(--fg); } .video-by { display: block; margin-top: 1rem; color: var(--fg-3); } /* Depoimentos reais, curtos, ao lado da prova em vídeo */ .quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .quote { padding-top: clamp(1rem, 0.85rem + 0.6vw, 1.5rem); border-top: 1px solid var(--rule); } .quote-text { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.35; color: var(--fg); } .quote-by { display: block; margin-top: 0.75rem; font-size: 0.9375rem; font-style: normal; color: var(--fg-3); } @media (max-width: 760px) { .quotes { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .proof-inner { grid-template-columns: minmax(0, 1fr); } } /* ======================================================================== Contato ======================================================================== */ .contact { padding-block: clamp(4.5rem, 3rem + 7vw, 10rem); } .contact-title { text-wrap: balance; font-size: clamp(2.75rem, 1.2rem + 6vw, 6.5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; color: var(--fg); } .contact-sub { max-width: 38ch; margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.35; color: var(--fg-2); } /* Os três passos: o que acontece depois do clique, colado no botão */ .steps { max-width: 46ch; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--rule); } .step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.875rem; border-bottom: 1px solid var(--rule); color: var(--fg-2); } .step-num { font-size: 0.9375rem; font-weight: 600; color: var(--fg-3); } .contact .cta { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); } .founder { display: flex; align-items: center; gap: 0.875rem; margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); font-size: 0.9375rem; color: var(--fg-3); } .founder img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; filter: grayscale(1); } .founder strong { display: block; font-weight: 500; color: var(--fg); } /* ======================================================================== Rodapé ======================================================================== */ .site-footer { border-top: 1px solid var(--rule); padding-block: 1.75rem; font-size: 0.875rem; color: var(--fg-3); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; } .footer-inner .logo img { height: 1.25rem; } .footer-legal { margin-left: auto; } .site-footer a { transition: color 0.2s ease; } .site-footer a:hover { color: var(--fg); } @media (max-width: 640px) { .footer-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .footer-inner .logo { margin-bottom: 0.5rem; } .footer-legal { margin-left: 0; } } /* ======================================================================== Movimento reduzido ======================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }}