/* Tokki — site institucional (landing + privacidade). Tema escuro da marca. */ @font-face { font-family: "Quicksand"; src: url("/fonts/quicksand-latin-variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; } :root { --bg: #0a0c0e; --bg-2: #0f151c; --card: rgba(255, 255, 255, 0.045); --card-hover: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.09); --text: #f3f5f8; --muted: #9aa5b3; --muted-2: #6b7686; --yellow: #eab308; --yellow-bright: #facc15; --ink: #111821; --radius: 20px; --maxw: 1120px; } /* Tema claro — aplicado por data-theme="light" no (JS decide no load, respeitando localStorage e a preferência do sistema). O escuro é o padrão. */ :root[data-theme="light"] { --bg: #f5f6f8; --bg-2: #ffffff; --card: #ffffff; --card-hover: #f0f2f5; --border: rgba(16, 23, 32, 0.1); --text: #101720; --muted: #566072; --muted-2: #8a94a3; } :root[data-theme="light"] .brand b { background: linear-gradient(135deg, #1a2230, #46536a); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] header.site { background: rgba(255, 255, 255, 0.78); } :root[data-theme="light"] .glow::before { opacity: 0.35; } :root[data-theme="light"] .glow::after { opacity: 0.16; } :root[data-theme="light"] .feature, :root[data-theme="light"] .dl { box-shadow: 0 1px 2px rgba(16, 23, 32, 0.04); } :root[data-theme="light"] .cta-band .box { background: linear-gradient(135deg, rgba(234, 179, 8, 0.16), rgba(80, 120, 255, 0.05)); } /* Logo do cabeçalho/rodapé: a "tinta" (arco escuro + olhos) acompanha o tema. O arco amarelo é gradiente e não muda. O avatar dentro do celular NÃO é afetado (está em .chat-top, não em .brand) e segue branco de propósito. */ :root[data-theme="light"] .brand svg [fill="#e9edf2"] { fill: #1a2230; } /* O celular permanece escuro de propósito — fica como um "product shot". */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* soft brand glow behind hero */ .glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .glow::before, .glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; } .glow::before { width: 520px; height: 520px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(234, 179, 8, 0.35), transparent 70%); } .glow::after { width: 460px; height: 460px; top: 120px; left: -160px; background: radial-gradient(circle, rgba(80, 120, 255, 0.14), transparent 70%); } /* ---------- Header ---------- */ header.site { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(14px); background: rgba(10, 12, 14, 0.72); border-bottom: 1px solid var(--border); } header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 20px; letter-spacing: 0.2px; } .brand svg { width: 30px; height: 30px; } .brand b { background: linear-gradient(135deg, #fff, #cfd6df); -webkit-background-clip: text; background-clip: text; color: transparent; } nav.top { display: flex; align-items: center; gap: 26px; } nav.top a { color: var(--muted); font-weight: 600; font-size: 15px; transition: color 0.15s; } nav.top a:hover { color: var(--text); } nav.top .btn { padding: 9px 18px; } @media (max-width: 720px) { nav.top a.hide-sm { display: none; } } /* Botão de alternar tema claro/escuro */ .theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; transition: background 0.15s, transform 0.12s; } .theme-btn:hover { background: var(--card-hover); } .theme-btn:active { transform: scale(0.94); } .theme-btn svg { width: 19px; height: 19px; } .theme-btn .ic-moon { display: none; } :root[data-theme="light"] .theme-btn .ic-sun { display: none; } :root[data-theme="light"] .theme-btn .ic-moon { display: block; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: linear-gradient(135deg, var(--yellow-bright), var(--yellow)); color: #1a1205; box-shadow: 0 10px 30px rgba(234, 179, 8, 0.28); } .btn-primary:hover { box-shadow: 0 14px 40px rgba(234, 179, 8, 0.4); } .btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--card-hover); } /* ---------- Hero ---------- */ .hero { position: relative; padding: 88px 0 72px; } .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--yellow-bright); background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.25); padding: 7px 14px; border-radius: 999px; } .hero h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; margin: 22px 0 18px; font-weight: 700; letter-spacing: -1px; } .hero h1 .hl { background: linear-gradient(135deg, var(--yellow-bright), var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { font-size: 19px; color: var(--muted); max-width: 520px; margin: 0 0 30px; } .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero .note { margin-top: 18px; color: var(--muted-2); font-size: 14px; font-weight: 600; } @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } .hero { padding: 56px 0 48px; } .phone-wrap { order: -1; } } /* ---------- Phone mockup ---------- */ .phone-wrap { display: flex; justify-content: center; } .phone { width: 300px; max-width: 82vw; border-radius: 40px; padding: 14px; background: linear-gradient(160deg, #1b232d, #0c1117); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03) inset; } .phone-screen { border-radius: 28px; background: #0b0e12; overflow: hidden; } .chat-top { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); } .chat-top .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #131b24; } .chat-top .av svg { width: 24px; height: 24px; } .chat-top .who { font-weight: 700; font-size: 15px; } .chat-top .st { font-size: 12px; color: #34c759; font-weight: 600; } .chat-top .call { margin-left: auto; color: var(--yellow); } .chat-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 300px; } .bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: 14px; font-weight: 500; line-height: 1.45; } .bubble.them { align-self: flex-start; background: #1a222c; border-bottom-left-radius: 6px; } .bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--yellow-bright), var(--yellow)); color: #1a1205; border-bottom-right-radius: 6px; font-weight: 600; } .bubble .rx { position: relative; display: inline-block; } .reaction { align-self: flex-start; margin-top: -4px; margin-left: 8px; background: #1a222c; border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 13px; } .typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #1a222c; border-radius: 18px; border-bottom-left-radius: 6px; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; animation: blink 1.2s infinite; } .typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } } .call-pill { align-self: center; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.3); color: var(--yellow-bright); font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; } /* ---------- Sections ---------- */ section { position: relative; padding: 72px 0; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section-head h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.6px; margin: 0 0 14px; } .section-head p { color: var(--muted); font-size: 18px; margin: 0; } /* Features grid */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } } .feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; transition: background 0.2s, transform 0.2s, border-color 0.2s; } .feature:hover { background: var(--card-hover); transform: translateY(-3px); border-color: rgba(234,179,8,0.25); } .feature .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; background: rgba(234, 179, 8, 0.12); color: var(--yellow-bright); } .feature .ic svg { width: 24px; height: 24px; } .feature h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; } .feature p { margin: 0; color: var(--muted); font-size: 15px; } /* Download section */ .downloads { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02)); } .dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .dl-grid { grid-template-columns: 1fr; } } .dl { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: background 0.2s, border-color 0.2s, transform 0.2s; } .dl:hover { background: var(--card-hover); border-color: rgba(234,179,8,0.25); transform: translateY(-2px); } .dl.soon { opacity: 0.62; cursor: default; } .dl.soon:hover { transform: none; border-color: var(--border); background: var(--card); } .dl .pi { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); flex: none; } .dl .pi svg { width: 30px; height: 30px; } .dl .meta strong { display: block; font-size: 16px; font-weight: 700; } .dl .meta small { color: var(--muted); font-size: 13px; } .badge-soon { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--yellow-bright); background: rgba(234,179,8,0.12); border: 1px solid rgba(234,179,8,0.25); padding: 4px 9px; border-radius: 999px; } .dl .arrow { margin-left: auto; color: var(--muted); } /* CTA band */ .cta-band { text-align: center; } .cta-band .box { background: linear-gradient(135deg, rgba(234,179,8,0.14), rgba(80,120,255,0.06)); border: 1px solid rgba(234,179,8,0.22); border-radius: 28px; padding: 56px 32px; } .cta-band h2 { font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 12px; letter-spacing: -0.5px; } .cta-band p { color: var(--muted); font-size: 18px; margin: 0 0 26px; } /* ---------- Legal / prose ---------- */ .legal { padding: 56px 0 40px; } .legal .wrap { max-width: 820px; } .legal h1 { font-size: clamp(30px, 4.5vw, 44px); letter-spacing: -0.8px; margin: 0 0 8px; } .legal .updated { color: var(--muted-2); font-weight: 600; font-size: 14px; margin-bottom: 34px; } .legal h2 { font-size: 22px; margin: 38px 0 12px; letter-spacing: -0.3px; } .legal p, .legal li { color: var(--muted); font-size: 16px; } .legal p { margin: 0 0 14px; } .legal ul { margin: 0 0 16px; padding-left: 22px; } .legal li { margin: 0 0 8px; } .legal a.link { color: var(--yellow-bright); font-weight: 600; } .legal a.link:hover { text-decoration: underline; } .legal strong { color: var(--text); } .legal .toc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 32px; } .legal .toc b { display: block; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-2); } .legal .toc a { color: var(--text); font-weight: 600; font-size: 15px; } .legal .toc a:hover { color: var(--yellow-bright); } /* ---------- Footer ---------- */ footer.site { border-top: 1px solid var(--border); padding: 40px 0; margin-top: 40px; } footer.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } footer.site .brand { font-size: 17px; } footer.site nav { display: flex; gap: 22px; flex-wrap: wrap; } footer.site nav a { color: var(--muted); font-weight: 600; font-size: 14px; } footer.site nav a:hover { color: var(--text); } footer.site .copy { color: var(--muted-2); font-size: 13px; width: 100%; margin-top: 8px; }