/* Sora self-hospedada, variável (100-800 num @font-face só, não 7 arquivos por peso). Mesmos woff2 do website-reversa — copiados aqui, não gerados. Os woff2 são o ÚNICO asset sem `?v=`: o preload do só casa com a requisição do @font-face se a URL for idêntica. */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../fonts/sora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../fonts/sora-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Tokens — mesmos nomes/valores do website-reversa (public/css/styles.css), pra que nav flutuante, seletor de idioma e toggle de tema sejam idênticos nos dois sites, tema claro incluído. Cores de produto (macros/reps/personal) são acréscimo deste site, não existem lá. */ :root { color-scheme: dark; --bg: #0a0b0d; --bg-alt: #0d0e11; --surface: #111318; --border: #1A1B21; --border-strong: #282A2F; --text: #ffffff; --text-muted: #9CA3AF; --text-faint: #6B7280; --text-secondary: #D1D5DB; --nav-bg: rgba(10, 11, 13, .85); --green: #10B981; --green-light: #34D399; --red: #F87171; --amber: #FBBF24; --blue: #60A5FA; --ease: cubic-bezier(.22, 1, .36, 1); --duration-fast: .25s; --duration-base: .7s; --font-sans: 'Sora', system-ui, sans-serif; --font-brand: var(--font-sans); --weight-medium: 500; --weight-semibold: 600; --text-body-size: 16px; --text-section-label-size: 11px; --text-section-label-weight: 600; --text-section-label-tracking: 0.5px; --radius-m: 12px; --radius-card: 14px; --radius-pill: 20px; --radius-button: 24px; } /* LIGHT THEME — mesma paleta do website-reversa (reversa_ui/color_scheme.dart) */ :root[data-theme="light"] { color-scheme: light; --bg: #F9FAFB; --bg-alt: #F3F4F6; --surface: #FFFFFF; --border: #E5E7EB; --border-strong: #D1D5DB; --text: #111827; --text-muted: #6B7280; --text-faint: #9CA3AF; --text-secondary: #374151; --nav-bg: rgba(249, 250, 251, .85); --green-light: #059669; } * { box-sizing: border-box; } body { margin: 0; padding-top: 96px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--font-sans); min-height: 100vh; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } a { color: var(--green); text-decoration: none; transition: color var(--duration-fast) var(--ease); } a:hover { color: var(--green-light); } ::selection { background: var(--green); color: #0a0b0d; } .container { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .icon { flex-shrink: 0; } /* -------------------------------------------------------------- nav */ .nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 20; background: var(--nav-bg); backdrop-filter: blur(10px); border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 0; box-shadow: none; transition: background-color var(--duration-fast) var(--ease), width var(--duration-base) var(--ease), top var(--duration-base) var(--ease), border-radius var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); } /* Só na chegada da página, igual ao website-reversa: sem isto a barra troca de tamanho ANIMANDO na cara do visitante quando a posição de scroll ainda não assentou (F5 no meio da página). */ .nav--instant { transition: none; } html.nav-preset-floating .nav, .nav--floating { top: 16px; width: min(920px, calc(100% - 32px)); border-radius: 16px; border-color: var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .nav__inner { padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .nav__brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav__logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; } .nav__wordmark { height: 20px; width: auto; object-fit: contain; flex-shrink: 0; } /* O arquivo é branco (feito pro fundo escuro). No tema claro inverte pra preto — sem isso o wordmark some contra o fundo claro do nav. */ :root[data-theme="light"] .nav__wordmark { filter: brightness(0); } .nav__links { display: flex; align-items: center; gap: 28px; flex-shrink: 0; } .nav__links a { font: 600 13.5px 'Sora'; color: var(--text-secondary); white-space: nowrap; } .nav__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; } .nav__controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav__cta { background: var(--green); color: #0a0b0d; font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: var(--radius-button); white-space: nowrap; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .nav__cta:hover { color: #0a0b0d; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(16, 185, 129, .3); } /* HAMBÚRGUER — só existe visualmente em telas estreitas (media query lá embaixo), onde .nav__links vira painel dropdown. Mesmo padrão do website-reversa. */ .nav__burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; flex: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; transition: border-color var(--duration-fast) var(--ease); } .nav__burger-bar { width: 16px; height: 2px; border-radius: 1px; background: var(--text-muted); transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease); } .nav.is-menu-open .nav__burger { border-color: var(--green); } .nav.is-menu-open .nav__burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav.is-menu-open .nav__burger-bar:nth-child(2) { opacity: 0; } .nav.is-menu-open .nav__burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* CTA duplicado dentro do painel mobile: fora dali quem aparece é o .nav__cta do canto direito. */ .nav__links .nav__links-cta { display: none; } /* SELETOR DE IDIOMA — mesmo componente do website-reversa. Só PT por enquanto (este hub ainda não tem conteúdo en/es de verdade); o dropdown já fica pronto pra quando entrar. */ .lang-select { position: relative; } .lang-select__trigger { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); cursor: pointer; font: 700 11.5px 'Sora'; line-height: 1; transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } .lang-select__trigger:hover { color: var(--text); } .lang-select__trigger svg { width: 14px; height: 14px; flex: none; } .lang-select__trigger .chevron { transition: transform var(--duration-fast) var(--ease); } .lang-select.is-open .lang-select__trigger .chevron { transform: rotate(180deg); } .lang-select.is-open .lang-select__trigger { color: var(--text); border-color: var(--green); } .lang-select__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; list-style: none; margin: 0; padding: 6px; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility var(--duration-fast) var(--ease); } .lang-select.is-open .lang-select__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-select__option { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap; font: 600 13px 'Sora'; color: var(--text-secondary); transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease); } .lang-select__option:hover { background: var(--bg-alt); color: var(--text); } .lang-select__option.is-active { color: var(--green); } /* TOGGLE DE TEMA — mesmo componente do website-reversa. */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); cursor: pointer; flex: none; transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease); } .theme-toggle:hover { color: var(--text); transform: translateY(-2px); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle__moon { display: none; } :root[data-theme="light"] .theme-toggle__sun { display: none; } :root[data-theme="light"] .theme-toggle__moon { display: block; } /* -------------------------------------------------------------- hero */ .hero { padding-top: 88px; padding-bottom: 96px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill); padding: 6px 14px 6px 10px; margin-bottom: 24px; } .hero__badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); } .hero__badge-label { font-size: var(--text-section-label-size); font-weight: var(--text-section-label-weight); letter-spacing: var(--text-section-label-tracking); color: var(--text-secondary); text-transform: uppercase; } .hero h1 { font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 20px; } .hero__lead { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 36px; max-width: 520px; } .waitlist-form { max-width: 440px; margin-bottom: 14px; } .waitlist-form__row { display: flex; gap: 10px; } .waitlist-form input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 0 16px; height: 48px; color: var(--text); font-family: var(--font-sans); font-size: 15px; outline: none; } .waitlist-form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: none; border-radius: var(--radius-button); background: var(--green); color: #0a0b0d; font-family: var(--font-sans); font-size: var(--text-body-size); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; } .waitlist-form button:disabled { opacity: .75; cursor: default; } /* Vazio ele já tem altura zero, não precisa de display:none pra sumir; a margem só entra quando o desafio de fato aparece (sinal: o iframe). */ .waitlist-challenge:has(iframe) { margin-top: 10px; } .waitlist-msg { font-size: 13px; margin: 8px 0 0; } .waitlist-msg--ok { color: var(--green); } .waitlist-msg--error { color: var(--red); } .waitlist-msg[hidden] { display: none; } .hero__products { display: flex; flex-direction: column; gap: 14px; } /* Cor por produto — CSS de verdade, não style="" inline (CSP style-src 'self' bloqueia atributo style sem hash/nonce, então custom property inline nunca aplicava). */ .product--macros { --p-color: var(--green); --p-tint: rgba(16, 185, 129, .12); } .product--reps { --p-color: var(--amber); --p-tint: rgba(251, 191, 36, .12); } .product--personal { --p-color: var(--blue); --p-tint: rgba(96, 165, 250, .12); } .product-row { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--p-color); border-radius: var(--radius-card); padding: 18px 20px; display: flex; align-items: center; gap: 14px; } .product-row__logo { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; } .product-row__text { flex: 1; min-width: 0; } .product-row__name { font-weight: 700; font-size: 17px; color: var(--text); white-space: nowrap; } .product-row__name span { color: var(--p-color); } .product-row__tagline { font-size: 13px; color: var(--text-faint); white-space: nowrap; margin-top: 2px; } .product-row__link, .product-row__badge { white-space: nowrap; flex-shrink: 0; border-radius: var(--radius-pill); } .product-row__link { font-size: 13px; font-weight: 600; color: var(--p-color); border: 1px solid var(--p-color); padding: 6px 14px; } .product-row__badge { font-size: var(--text-section-label-size); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border); padding: 4px 10px; } /* -------------------------------------------------------------- section shared */ .section { padding-top: 96px; padding-bottom: 96px; } .section--dim { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section__head { text-align: center; margin-bottom: 56px; } .section__label { font-size: var(--text-section-label-size); font-weight: var(--text-section-label-weight); letter-spacing: var(--text-section-label-tracking); color: var(--text-faint); text-transform: uppercase; margin-bottom: 16px; } .section__label--primary { color: var(--green); } .section h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.3px; margin: 0; } /* -------------------------------------------------------------- sobre */ .about { max-width: 820px; margin: 0 auto; padding-top: 96px; padding-bottom: 96px; text-align: center; } .about h2 { margin: 0 0 24px; } .about p { font-size: 18px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 20px; } .about p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------- produtos */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .product-card { position: relative; background: var(--surface); border: 1.5px solid var(--p-color); border-radius: var(--radius-card); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; } .product-card__icon { width: 48px; height: 48px; border-radius: var(--radius-m); background: var(--p-tint); display: flex; align-items: center; justify-content: center; color: var(--p-color); } .product-card__icon svg { width: 26px; height: 26px; } .product-card__brand { display: flex; align-items: center; gap: 12px; } .product-card__logo { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; } .product-card__name { display: flex; align-items: baseline; gap: 6px; } .product-card__name b { font-weight: 800; font-size: 22px; color: var(--text); } .product-card__name span { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; color: var(--p-color); } .product-card__desc { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin: 0; flex: 1; } .product-card__domain { font-family: monospace; font-size: 12.5px; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 14px; } .product-card .product-row__link, .product-card .product-row__badge { position: absolute; top: 28px; right: 24px; } /* -------------------------------------------------------------- waitlist */ .waitlist { max-width: 640px; margin: 0 auto; padding-top: 88px; padding-bottom: 88px; text-align: center; } .waitlist h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 14px; } .waitlist__lead { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 32px; } .waitlist .waitlist-form { margin-left: auto; margin-right: auto; } .waitlist__note { font-size: 12.5px; color: var(--text-faint); margin: 14px 0 0; } /* -------------------------------------------------------------- contato */ .contact { padding-top: 88px; padding-bottom: 88px; text-align: center; } .contact h2 { font-size: 28px; font-weight: 600; margin: 0 0 14px; } .contact a { font-size: 18px; font-weight: 600; } /* -------------------------------------------------------------- footer */ .footer { border-top: 1px solid var(--border); } .footer__inner { padding-top: 32px; padding-bottom: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer__brand { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .footer__logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .footer__wordmark { font-family: var(--font-brand); font-size: 18px; font-weight: 700; color: var(--text); white-space: nowrap; } .footer__links { display: flex; gap: 24px; } .footer__links a { font-size: 13px; color: var(--text-faint); } .footer__copy { font-size: 13px; color: var(--text-faint); } /* -------------------------------------------------------------- confirmação da waitlist */ /* Os dois estados moram na mesma página; `#invalido` liga o de erro via `:target`. O bloco de erro vem primeiro no HTML — `~` só alcança irmão posterior — mesmo truque do website-reversa. */ .confirm { text-align: center; padding: 140px 24px 100px; max-width: 640px; } .confirm__state h1 { font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0 0 14px; } .confirm__state p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto 28px; max-width: 420px; } .confirm__state--fail { display: none; } .confirm__state--fail:target { display: block; } .confirm__state--fail:target ~ .confirm__state--ok { display: none; } /* -------------------------------------------------------------- responsivo */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hero h1 { font-size: 36px; } .about h2, .waitlist h2 { font-size: 26px; } /* Em coluna o eixo principal do flex vira vertical: `flex-basis` passa a valer pra ALTURA, não largura. `flex:1 1 100%` (tentativa anterior) forçava a altura a 100% de um container sem altura definida — piorou o que ia corrigir. Correto é `flex:none` (tira o item do cálculo de flex-basis) + `width:100%` explícito, com a altura de 48px intocada. `font-size:16px` evita o zoom automático do Safari iOS ao focar campo abaixo de 16px, que também dá a impressão de o campo "mudar de tamanho". */ .waitlist-form__row { flex-direction: column; } .waitlist-form input, .waitlist-form button { flex: none; width: 100%; height: 48px; } .waitlist-form input { font-size: 16px; } /* NAV MOBILE — a barra só cabe logo + idioma + tema + hambúrguer; o CTA da barra reaparece dentro do painel de links. Mesmo padrão do website-reversa. */ .nav__inner { padding: 12px 16px; gap: 10px; } .nav__cta { display: none; } .nav__burger { display: flex; } .nav__links { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; z-index: 25; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility var(--duration-fast) var(--ease); } .nav.is-menu-open .nav__links { opacity: 1; visibility: visible; transform: translateY(0); } .nav__links a { padding: 12px; border-radius: 10px; font-size: 14.5px; } .nav__links .nav__links-cta { display: block; text-align: center; margin-top: 6px; } .nav__links-cta:hover { transform: none; } /* Alvos de toque — 32px é abaixo do mínimo confortável de dedo. */ .theme-toggle { width: 40px; height: 40px; } .lang-select__trigger { height: 40px; } .lang-select__option { padding: 12px; } } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }