/* ============================================================================ SuperDB Docs — Tema CLARO (light mode) Ativa-se em . Carregar DEPOIS de site.css. Mantém o header sticky escuro (identidade) mas inverte o body pra leitura confortável e acolhedora, estilo Stripe/Linear/Vercel docs. ============================================================================ */ body.docs-light { --bg: #ffffff; --surface: #f9fafb; --surface-2: #f3f4f6; --border: #e5e7eb; --border-strong: #d4d4d8; --text: #18181b; --muted: #525252; --subtle: #71717a; --primary: #059669; --primary-dim: #047857; --primary-soft: rgba(5,150,105,.08); --primary-soft-2: rgba(5,150,105,.18); --accent: #7c3aed; --window: #d97706; --danger: #dc2626; --code-bg: #0f172a; --code-bg-2: #1e293b; --code-border: #1e293b; background: var(--bg); color: var(--text); } /* Remove o radial gradient verde do fundo dark — fundo claro limpo */ body.docs-light::before { display: none; } /* Header permanece dark (identidade) — sobrepor para garantir */ body.docs-light header.site { background: rgba(10,10,10,.92); border-bottom: 1px solid #18181b; color: #e5e5e5; } body.docs-light header.site .logo, body.docs-light header.site nav.primary a, body.docs-light header.site .btn-ghost { color: #d4d4d8; } body.docs-light header.site nav.primary a:hover, body.docs-light header.site nav.primary a.active { color: #fff; } body.docs-light header.site .btn-ghost { border-color: #2a2a2a; } body.docs-light header.site .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } body.docs-light header.site .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 0 0 1px rgba(5,150,105,.35), 0 8px 24px -8px rgba(5,150,105,.45); } body.docs-light header.site .btn-primary:hover { background: var(--primary-dim); } body.docs-light header.site .menu-toggle { color: #d4d4d8; } /* Tipografia clarinha — line-height confortável pra leitura longa */ body.docs-light { font-size: 16px; line-height: 1.65; } body.docs-light h1, body.docs-light h2, body.docs-light h3, body.docs-light h4 { color: #0a0a0f; } body.docs-light .lead, body.docs-light p { color: var(--muted); } body.docs-light strong { color: var(--text); } body.docs-light a { color: var(--primary); } body.docs-light a:hover { color: var(--primary-dim); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* Eyebrow pill (acolhedor, não estridente) */ body.docs-light .eyebrow { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-soft-2); } /* Page hero — fundo branco com gradient sutil */ body.docs-light .page-hero { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #fafafa, #fff 70%); } body.docs-light .page-hero::before { display: none; } /* Breadcrumb */ body.docs-light .breadcrumb { color: var(--subtle); } body.docs-light .breadcrumb a { color: var(--subtle); } body.docs-light .breadcrumb a:hover { color: var(--primary); text-decoration: none; } body.docs-light .breadcrumb .current { color: var(--text); } /* Botões — manter padrão mas reforçar contraste */ body.docs-light .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 16px -4px rgba(5,150,105,.35); } body.docs-light .btn-primary:hover { background: var(--primary-dim); } body.docs-light .btn-ghost { background: #fff; color: var(--text); border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(0,0,0,.04); } body.docs-light .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } /* ---------------------------------------------------------------------------- Cards e superfícies ---------------------------------------------------------------------------- */ body.docs-light .card, body.docs-light .hub-card, body.docs-light .step, body.docs-light .feature, body.docs-light .plan { background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s, transform .15s; } body.docs-light .card:hover, body.docs-light .hub-card:hover, body.docs-light .step:hover, body.docs-light .feature:hover { border-color: var(--primary-soft-2); box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(5,150,105,.08); transform: translateY(-2px); } body.docs-light .hub-card h3, body.docs-light .card h3 { color: var(--text); } body.docs-light .hub-card p, body.docs-light .card p { color: var(--muted); } body.docs-light .hub-card .ico, body.docs-light .feature .ico, body.docs-light .step .num { background: var(--primary-soft); border-color: var(--primary-soft-2); color: var(--primary); } /* ---------------------------------------------------------------------------- Sidebar de docs ---------------------------------------------------------------------------- */ body.docs-light .docs-sidebar h4 { color: var(--subtle); } body.docs-light .docs-sidebar a { color: var(--muted); border-radius: 6px; } body.docs-light .docs-sidebar a:hover { color: var(--text); background: var(--surface-2); } body.docs-light .docs-sidebar a.active { color: var(--primary); background: var(--primary-soft); font-weight: 600; } /* Search box do sidebar */ body.docs-light .docs-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 24px; cursor: pointer; font-size: .85rem; color: var(--subtle); transition: border-color .15s; width: 100%; } body.docs-light .docs-search:hover { border-color: var(--primary); } body.docs-light .docs-search svg { flex-shrink: 0; } body.docs-light .docs-search-kbd { margin-left: auto; font-family: var(--mono); font-size: .72rem; padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--subtle); } /* ---------------------------------------------------------------------------- Docs content — tipografia generosa ---------------------------------------------------------------------------- */ body.docs-light .docs-content { color: var(--muted); } body.docs-light .docs-content h1 { font-size: 2.2rem; color: var(--text); margin-bottom: 8px; } body.docs-light .docs-content > p:first-of-type, body.docs-light .docs-content .lead { font-size: 1.1rem; color: var(--subtle); margin-bottom: 24px; line-height: 1.6; } body.docs-light .docs-content h2 { font-size: 1.5rem; color: var(--text); margin: 56px 0 14px; padding-top: 32px; border-top: 1px solid var(--border); scroll-margin-top: 90px; } body.docs-light .docs-content h2:first-of-type { border-top: 0; padding-top: 8px; margin-top: 16px; } body.docs-light .docs-content h3 { font-size: 1.125rem; color: var(--text); margin: 32px 0 10px; scroll-margin-top: 90px; } body.docs-light .docs-content p { color: var(--muted); line-height: 1.7; margin-bottom: 16px; } body.docs-light .docs-content ul, body.docs-light .docs-content ol { color: var(--muted); padding-left: 1.5rem; margin: 0 0 16px; } body.docs-light .docs-content li { margin: 6px 0; line-height: 1.65; } body.docs-light .docs-content li::marker { color: var(--primary); } body.docs-light .docs-content strong { color: var(--text); } body.docs-light .docs-content code { background: var(--surface-2); border: 1px solid var(--border); color: #0f172a; font-size: .88em; padding: 1px 6px; border-radius: 4px; } body.docs-light .docs-content a { color: var(--primary); } body.docs-light .docs-content a:hover { color: var(--primary-dim); } /* Anchor links (#) ao lado dos H2/H3 */ body.docs-light .docs-content h2, body.docs-light .docs-content h3 { position: relative; } body.docs-light .docs-content .anchor { position: absolute; left: -1.4rem; top: 50%; transform: translateY(-50%); opacity: 0; font-weight: 400; color: var(--subtle); text-decoration: none; transition: opacity .15s, color .15s; font-size: 1rem; } body.docs-light .docs-content h2:hover .anchor, body.docs-light .docs-content h3:hover .anchor { opacity: 1; } body.docs-light .docs-content .anchor:hover { color: var(--primary); } /* ---------------------------------------------------------------------------- Code blocks — manter DARK pra contraste e estilo profissional ---------------------------------------------------------------------------- */ body.docs-light .code-block, body.docs-light .code-window { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); margin: 16px 0 24px; } body.docs-light .code-block-head { background: var(--code-bg-2); border-bottom: 1px solid var(--code-border); color: #cbd5e1; padding: 10px 16px; font-size: .78rem; font-family: var(--mono); } body.docs-light .code-block pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #e2e8f0; font-family: var(--mono); font-size: .88rem; line-height: 1.7; } body.docs-light .code-block code, body.docs-light .code-window code { background: transparent; border: 0; padding: 0; color: inherit; } /* Tabs dentro de code-window */ body.docs-light .code-tabs { background: var(--code-bg-2); border-bottom: 1px solid var(--code-border); } body.docs-light .code-tab { color: #94a3b8; border-right: 1px solid var(--code-border); } body.docs-light .code-tab:hover { color: #e2e8f0; background: rgba(255,255,255,.04); } body.docs-light .code-tab.active { color: var(--primary); background: var(--code-bg); border-bottom-color: var(--primary); } body.docs-light .code-pane { background: var(--code-bg); color: #e2e8f0; } /* Syntax highlight tokens */ body.docs-light .code-pane .kw, body.docs-light .code-block .kw { color: #f472b6; } body.docs-light .code-pane .fn, body.docs-light .code-block .fn { color: #93c5fd; } body.docs-light .code-pane .str, body.docs-light .code-block .str { color: #86efac; } body.docs-light .code-pane .num, body.docs-light .code-block .num { color: #fbbf24; } body.docs-light .code-pane .com, body.docs-light .code-block .com { color: #94a3b8; font-style: italic; } /* Code foot (status) */ body.docs-light .code-foot { background: var(--code-bg-2); border-top: 1px solid var(--code-border); color: #cbd5e1; } /* Inline code já tratado acima */ /* ---------------------------------------------------------------------------- Callouts (note / tip / warn / danger) ---------------------------------------------------------------------------- */ body.docs-light .callout { background: var(--primary-soft); border: 1px solid var(--primary-soft-2); border-left: 3px solid var(--primary); color: var(--text); } body.docs-light .callout-body { color: var(--muted); } body.docs-light .callout-body strong { color: var(--text); } body.docs-light .callout.tip { background: var(--primary-soft); border-color: rgba(5,150,105,.25); border-left-color: var(--primary); } body.docs-light .callout.tip .callout-icon { color: var(--primary); } body.docs-light .callout.warn { background: #fffbeb; border-color: #fde68a; border-left-color: #d97706; } body.docs-light .callout.warn .callout-icon { color: #d97706; } body.docs-light .callout.note { background: #eff6ff; border-color: #bfdbfe; border-left-color: #2563eb; } body.docs-light .callout.note .callout-icon { color: #2563eb; } body.docs-light .callout.danger { background: #fef2f2; border-color: #fecaca; border-left-color: #dc2626; } body.docs-light .callout.danger .callout-icon { color: #dc2626; } /* ---------------------------------------------------------------------------- TOC (Table of Contents) lateral direita ---------------------------------------------------------------------------- */ body.docs-light .docs-layout.with-toc { grid-template-columns: 240px 1fr 200px; gap: 48px; } @media (max-width: 1180px) { body.docs-light .docs-layout.with-toc { grid-template-columns: 220px 1fr; } body.docs-light .docs-toc { display: none; } } @media (max-width: 980px) { body.docs-light .docs-layout.with-toc { grid-template-columns: 1fr; } } body.docs-light .docs-toc { position: sticky; top: 90px; align-self: start; font-size: .85rem; padding-left: 16px; border-left: 1px solid var(--border); } body.docs-light .docs-toc-label { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--subtle); font-weight: 600; margin-bottom: 12px; } body.docs-light .docs-toc ul { list-style: none; padding: 0; margin: 0; } body.docs-light .docs-toc li { margin: 4px 0; } body.docs-light .docs-toc a { display: block; color: var(--subtle); padding: 4px 0; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; transition: color .15s, border-color .15s; line-height: 1.4; } body.docs-light .docs-toc a:hover { color: var(--text); text-decoration: none; } body.docs-light .docs-toc a.active { color: var(--primary); border-left-color: var(--primary); font-weight: 500; } body.docs-light .docs-toc li.level-3 a { padding-left: 22px; font-size: .8rem; } /* ---------------------------------------------------------------------------- "Próximo passo" / "Anterior" no rodapé do conteúdo ---------------------------------------------------------------------------- */ body.docs-light .docs-next-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); } @media (max-width: 720px) { body.docs-light .docs-next-prev { grid-template-columns: 1fr; } } body.docs-light .docs-nav-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; text-decoration: none; transition: border-color .15s, transform .15s; } body.docs-light .docs-nav-card:hover { border-color: var(--primary); transform: translateY(-2px); text-decoration: none; } body.docs-light .docs-nav-card .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--subtle); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } body.docs-light .docs-nav-card .title { color: var(--text); font-weight: 600; font-size: .98rem; } body.docs-light .docs-nav-card.prev { text-align: left; } body.docs-light .docs-nav-card.next { text-align: right; } body.docs-light .docs-nav-card.next .label { justify-content: flex-end; } /* ---------------------------------------------------------------------------- "Esta página ajudou?" feedback ---------------------------------------------------------------------------- */ body.docs-light .docs-feedback { display: flex; align-items: center; gap: 12px; padding: 16px 0; margin-top: 48px; border-top: 1px solid var(--border); font-size: .9rem; color: var(--muted); } body.docs-light .docs-feedback-btn { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: .85rem; color: var(--muted); cursor: pointer; transition: all .15s; } body.docs-light .docs-feedback-btn:hover { border-color: var(--primary); color: var(--primary); } /* ---------------------------------------------------------------------------- Hub grid (docs/index) ---------------------------------------------------------------------------- */ body.docs-light .hub-grid { gap: 20px; } /* ---------------------------------------------------------------------------- FAQ ---------------------------------------------------------------------------- */ body.docs-light .faq { border-top-color: var(--border); } body.docs-light .faq details { border-bottom-color: var(--border); } body.docs-light .faq summary { color: var(--text); } body.docs-light .faq summary:hover { color: var(--primary); } body.docs-light .faq summary::after { color: var(--primary); } body.docs-light .faq .answer { color: var(--muted); } /* ---------------------------------------------------------------------------- Tabela ---------------------------------------------------------------------------- */ body.docs-light .compare { background: #fff; border: 1px solid var(--border); } body.docs-light table.compare-tbl th, body.docs-light table.compare-tbl td { border-bottom-color: var(--border); } body.docs-light table.compare-tbl thead th { background: var(--surface); color: var(--subtle); } body.docs-light table.compare-tbl thead th.col-superdb { color: var(--primary); } body.docs-light table.compare-tbl tr:hover td { background: var(--surface); } body.docs-light .yes { color: var(--primary); font-weight: 600; } body.docs-light .no { color: var(--subtle); } body.docs-light .partial { color: var(--window); } /* ---------------------------------------------------------------------------- CTA strip — verde sutil no claro ---------------------------------------------------------------------------- */ body.docs-light .cta-strip { background: linear-gradient(135deg, var(--primary-soft) 0%, #f5f3ff 100%); border: 1px solid var(--border); } /* ---------------------------------------------------------------------------- Footer permanece dark (identidade) ---------------------------------------------------------------------------- */ body.docs-light footer.site { background: #0a0a0a; color: #e5e5e5; border-top: 1px solid #18181b; } body.docs-light footer.site .footer-brand p, body.docs-light footer.site .footer-col a, body.docs-light footer.site .footer-col h4, body.docs-light footer.site .footer-bottom { color: #d4d4d8; } body.docs-light footer.site .footer-col h4 { color: #71717a; } body.docs-light footer.site .footer-col a:hover { color: var(--primary); } body.docs-light footer.site .footer-bottom { color: #71717a; border-top-color: #18181b; } body.docs-light footer.site .socials a:hover { color: var(--primary); } /* ---------------------------------------------------------------------------- Showcase window (fake browser) — reutilizado nas docs E páginas de produto Inspirado no print do index original ---------------------------------------------------------------------------- */ .showcase-window { background: #0f0f12; border: 1px solid #27272a; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset; margin: 24px 0; } /* Showcase grande na hero (.showcase-window.lg) */ .showcase-window.lg { box-shadow: 0 60px 120px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 80px -20px rgba(62,207,142,.15); border-radius: 16px; } /* Tabs nas showcase windows (tipo pílulas acima do browser) */ .showcase-pill-tabs { display: inline-flex; gap: 4px; background: rgba(20,20,20,.6); border: 1px solid #27272a; border-radius: 999px; padding: 4px; margin-bottom: 16px; flex-wrap: wrap; } .showcase-pill-tab { background: transparent; border: 0; color: #999; padding: 8px 18px; border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: color .15s, background .15s; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; } .showcase-pill-tab:hover { color: #fff; } .showcase-pill-tab.active { background: #3ecf8e; color: #062014; } .showcase-pill-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .showcase-pill-tab.active .dot { background: #062014; opacity: 1; } /* Painéis trocáveis dentro do showcase-window */ .showcase-pane { display: none; } .showcase-pane.active { display: block; } .showcase-titlebar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, #161616, #111); border-bottom: 1px solid #27272a; font-family: var(--mono); font-size: .78rem; color: #999; } .showcase-titlebar .traffic { display: flex; gap: 6px; } .showcase-titlebar .traffic span { width: 11px; height: 11px; border-radius: 50%; } .showcase-titlebar .traffic span:nth-child(1) { background: #ff5f57; } .showcase-titlebar .traffic span:nth-child(2) { background: #febc2e; } .showcase-titlebar .traffic span:nth-child(3) { background: #28c840; } .showcase-titlebar .url { background: #0a0a0a; border: 1px solid #27272a; border-radius: 6px; padding: 4px 10px; color: #999; font-size: .75rem; flex: 1; text-align: center; } .showcase-version { color: #666; font-size: .72rem; } .showcase-app { display: grid; grid-template-columns: 200px 1fr; min-height: 380px; background: #0a0a0a; } @media (max-width: 720px) { .showcase-app { grid-template-columns: 1fr; } .showcase-sidebar { display: none; } } .showcase-sidebar { background: #0a0a0a; border-right: 1px solid #27272a; padding: 16px 12px; } .showcase-sb-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: #666; padding: 6px 10px; margin-top: 8px; } .showcase-sb-label:first-child { margin-top: 0; } .showcase-sb-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; color: #d4d4d8; font-size: .85rem; font-family: var(--mono); } .showcase-sb-item.active { background: rgba(62,207,142,.1); color: #3ecf8e; font-weight: 600; } .showcase-sb-item .count { margin-left: auto; font-size: .7rem; color: #666; } .showcase-sb-item.active .count { color: #3ecf8e; } .showcase-content { background: #0a0a0a; font-family: var(--mono); font-size: .85rem; line-height: 1.65; color: #d4d4d8; } .showcase-tabs { display: flex; background: #141414; border-bottom: 1px solid #27272a; font-size: .78rem; } .showcase-tab { padding: 10px 14px; color: #999; border-right: 1px solid #27272a; display: inline-flex; align-items: center; gap: 6px; } .showcase-tab.active { color: #3ecf8e; background: #0a0a0a; border-bottom: 2px solid #3ecf8e; margin-bottom: -1px; } .showcase-tab .x { opacity: .4; font-size: .9em; } .showcase-code { padding: 18px 20px; } .showcase-code .ln { display: grid; grid-template-columns: 24px 1fr; gap: 16px; } .showcase-code .num { color: #444; user-select: none; text-align: right; } .showcase-code .kw { color: #ff7a93; } .showcase-code .fn { color: #82aaff; } .showcase-code .str { color: #c3e88d; } .showcase-code .typ { color: #82aaff; } .showcase-code .com { color: #546e7a; font-style: italic; } .showcase-code .id { color: #d6deeb; } .showcase-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #141414; border-top: 1px solid #27272a; font-family: var(--mono); font-size: .75rem; color: #999; } .showcase-footer .ok { color: #3ecf8e; display: inline-flex; align-items: center; gap: 6px; } .showcase-footer .ok .dot { width: 7px; height: 7px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 8px #3ecf8e; animation: pulse 1.6s ease-in-out infinite; } /* ---------------------------------------------------------------------------- Search overlay (cmd+K) ---------------------------------------------------------------------------- */ .search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: flex-start; justify-content: center; z-index: 200; padding-top: 12vh; } .search-overlay.open { display: flex; } .search-box { width: 90%; max-width: 560px; background: #fff; border-radius: 12px; box-shadow: 0 30px 60px -10px rgba(0,0,0,.3); overflow: hidden; max-height: 70vh; display: flex; flex-direction: column; } .search-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; } .search-input-row svg { color: #71717a; flex-shrink: 0; } .search-input { flex: 1; background: transparent; border: 0; outline: 0; font-size: 1rem; font-family: inherit; color: #18181b; } .search-results { flex: 1; overflow-y: auto; padding: 8px; } .search-result { display: block; padding: 10px 14px; border-radius: 6px; text-decoration: none; color: #18181b; } .search-result:hover, .search-result.selected { background: var(--primary-soft, rgba(5,150,105,.08)); text-decoration: none; } .search-result-title { font-weight: 600; color: #18181b; font-size: .92rem; } .search-result-section { font-size: .78rem; color: #71717a; margin-top: 2px; } .search-result-empty { padding: 24px; text-align: center; color: #71717a; font-size: .9rem; } .search-footer { padding: 10px 16px; background: #f9fafb; border-top: 1px solid #e5e7eb; font-size: .75rem; color: #71717a; display: flex; gap: 16px; } .search-footer kbd { font-family: var(--mono); background: #fff; border: 1px solid #e5e7eb; border-radius: 3px; padding: 1px 5px; font-size: .72rem; margin: 0 2px; } /* ============================================================================ Layout fixo estilo Supabase — sidebar fixed à esquerda cobrindo viewport ============================================================================ */ /* Quando body.docs-light tem .docs-layout (páginas internas com sidebar) */ body.docs-light .docs-sidebar { position: fixed; left: 0; top: 64px; /* abaixo do header sticky */ bottom: 0; width: 280px; padding: 28px 22px 60px 32px; overflow-y: auto; border-right: 1px solid var(--border); background: #fff; z-index: 5; font-size: .88rem; } /* Scroll customizado leve */ body.docs-light .docs-sidebar::-webkit-scrollbar { width: 6px; } body.docs-light .docs-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } body.docs-light .docs-sidebar::-webkit-scrollbar-thumb:hover { background: var(--subtle); } /* Sidebar items mais compactos e legíveis */ body.docs-light .docs-sidebar h4 { margin: 22px 0 8px; font-size: .68rem; } body.docs-light .docs-sidebar h4:first-of-type { margin-top: 0; } body.docs-light .docs-sidebar a { padding: 5px 10px; font-size: .86rem; border-radius: 4px; } /* Sidebar search button (já existe) — alinhamento dentro da sidebar fixed */ body.docs-light .docs-search { margin: 0 0 22px; } /* O
inteiro ganha padding-left pra empurrar TODO conteúdo (hero, sections) pra direita da sidebar fixed — assim hero não fica escondida atrás dela */ body.docs-light:has(.docs-sidebar) main { padding-left: 280px; } /* Wrap interno: escalável até 1500px pra usar bem monitores grandes */ body.docs-light:has(.docs-sidebar) main > .wrap, body.docs-light:has(.docs-sidebar) main > section > .wrap, body.docs-light:has(.docs-sidebar) .docs-layout-wrap { max-width: 1500px; padding: 0 56px; } /* docs-layout vira grid content + toc, sem padding-left extra (já tem no
) */ body.docs-light .docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 0 80px; max-width: none; } body.docs-light .docs-layout.with-toc { grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; } /* TOC sticky, com altura controlada */ body.docs-light .docs-toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; padding-left: 18px; } body.docs-light .docs-toc::-webkit-scrollbar { width: 4px; } body.docs-light .docs-toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* Conteúdo central — responsivo ao viewport, usa mais espaço em monitor grande mas limita pra leitura confortável (linha não passa de ~90ch) */ body.docs-light .docs-content { max-width: clamp(680px, 60vw, 1040px); width: 100%; font-size: 16px; line-height: 1.7; color: var(--muted); justify-self: start; } body.docs-light .docs-content h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--text); line-height: 1.15; } body.docs-light .docs-content > p:first-of-type, body.docs-light .docs-content .lead { font-size: 1.125rem; color: var(--subtle); line-height: 1.6; margin-bottom: 28px; } body.docs-light .docs-content h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 56px 0 14px; padding-top: 0; border-top: 0; scroll-margin-top: 90px; } body.docs-light .docs-content h2:first-of-type { margin-top: 24px; } body.docs-light .docs-content h3 { font-size: 1.18rem; font-weight: 700; color: var(--text); margin: 36px 0 10px; scroll-margin-top: 90px; } body.docs-light .docs-content p { color: var(--muted); line-height: 1.7; margin-bottom: 18px; font-size: 1rem; } body.docs-light .docs-content ul, body.docs-light .docs-content ol { color: var(--muted); padding-left: 1.5rem; margin: 0 0 18px; font-size: 1rem; } body.docs-light .docs-content li { margin: 7px 0; line-height: 1.7; } /* Breaks responsivo: a partir de 1100px, sidebar empilha (mobile/tablet) */ @media (max-width: 1100px) { body.docs-light:has(.docs-sidebar) main { padding-left: 0; } body.docs-light .docs-sidebar { position: static; width: 100%; height: auto; top: auto; bottom: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 24px 24px 16px; overflow: visible; } body.docs-light:has(.docs-sidebar) main > .wrap, body.docs-light:has(.docs-sidebar) main > section > .wrap, body.docs-light:has(.docs-sidebar) .docs-layout-wrap { padding: 0 24px; max-width: 1200px; } body.docs-light .docs-layout { padding: 0 0 64px; grid-template-columns: 1fr; } body.docs-light .docs-layout.with-toc { grid-template-columns: 1fr; gap: 0; } body.docs-light .docs-toc { display: none; } } /* ============================================================================ Quickstart 2-col — texto à esquerda + code à direita (Supabase-style) ============================================================================ */ body.docs-light .qs-step { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.3fr); gap: 40px; padding: 48px 0; border-bottom: 1px solid var(--border); align-items: start; } body.docs-light .qs-step:last-child { border-bottom: 0; } @media (max-width: 980px) { body.docs-light .qs-step { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; } } body.docs-light .qs-step-text { padding-top: 4px; } body.docs-light .qs-step-text h2 { display: flex; align-items: center; gap: 14px; font-size: 1.25rem; margin: 0 0 12px; padding: 0; border: 0; scroll-margin-top: 90px; color: var(--text); } body.docs-light .qs-step-text h2 .num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--text); font-size: .92rem; font-weight: 700; flex-shrink: 0; } body.docs-light .qs-step-text p { color: var(--muted); font-size: .95rem; line-height: 1.65; } body.docs-light .qs-step-text ul { color: var(--muted); font-size: .92rem; padding-left: 1.25rem; } body.docs-light .qs-step-text li { margin: 6px 0; } body.docs-light .qs-step-code { position: sticky; top: 90px; } @media (max-width: 980px) { body.docs-light .qs-step-code { position: static; } } /* ---------------------------------------------------------------------------- AI Tools sidebar (lado direito do docs) ---------------------------------------------------------------------------- */ body.docs-light .docs-toc-helpful { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } body.docs-light .docs-toc-helpful-label { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--subtle); font-weight: 600; margin-bottom: 10px; } body.docs-light .docs-toc-helpful-btns { display: flex; gap: 6px; } body.docs-light .docs-toc-helpful-btn { width: 28px; height: 28px; border-radius: 6px; background: #fff; border: 1px solid var(--border); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; font-size: .85rem; } body.docs-light .docs-toc-helpful-btn:hover { border-color: var(--primary); color: var(--primary); } body.docs-light .docs-toc-ai { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } body.docs-light .docs-toc-ai-label { text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--subtle); font-weight: 600; margin-bottom: 10px; } body.docs-light .docs-toc-ai-list { list-style: none; padding: 0; margin: 0; } body.docs-light .docs-toc-ai-list li { margin: 2px 0; } body.docs-light .docs-toc-ai-list a { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--muted); font-size: .84rem; text-decoration: none; transition: color .15s; } body.docs-light .docs-toc-ai-list a:hover { color: var(--primary); } body.docs-light .docs-toc-ai-list svg { flex-shrink: 0; opacity: .65; } body.docs-light .docs-toc-ai-list a:hover svg { opacity: 1; } /* ---------------------------------------------------------------------------- Hub category section (page docs/index) ---------------------------------------------------------------------------- */ body.docs-light .docs-category { margin-bottom: 56px; } body.docs-light .docs-category-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } body.docs-light .docs-category-head h2 { font-size: 1.25rem; margin: 0; padding: 0; border: 0; color: var(--text); } body.docs-light .docs-category-head .all { font-size: .85rem; color: var(--primary); }