/* * a11y.css — Overrides do SITE pro Kit de Acessibilidade. * Hooks no aplicados ANTES do paint (script inline no ): * data-theme="light|dark" — modo claro/escuro * data-a11y-font="0|1|2" — A− / A / A+ * .a11y-contrast — alto contraste * data-a11y-motion="reduced" — pausar animações * O widget (FAB + painel + skip-link) tem CSS próprio injetado por a11y.js. */ /* ===== DARK MODE ===== */ /* Inverte os tokens "neutros" do wrapper. Marca/cores de destaque ficam iguais. Seções já "on-dark" (hero/cta/numbers/cases on-dark da home) permanecem. */ html[data-theme="dark"] body { background: #0F0F17; color: #E8E8EE; color-scheme: dark; } html[data-theme="dark"] .aw-inst-pagina-home { --aw-bone: #0F0F17; --aw-mist: #181828; --aw-stone: #33324D; --aw-slate: #B8B7CC; --aw-ink: #E8E8EE; --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.06); background: #0F0F17; color: #E8E8EE; color-scheme: dark; } /* Textos que usavam midnight como cor de letra viram claros */ html[data-theme="dark"] .aw-inst-pagina-home h1, html[data-theme="dark"] .aw-inst-pagina-home h2, html[data-theme="dark"] .aw-inst-pagina-home h3, html[data-theme="dark"] .aw-inst-pagina-home h4, html[data-theme="dark"] .aw-inst-pagina-home p, html[data-theme="dark"] .aw-inst-pagina-home li, html[data-theme="dark"] .aw-inst-pagina-home blockquote, html[data-theme="dark"] .aw-inst-pagina-home figcaption { color: #E8E8EE; } html[data-theme="dark"] .aw-inst-pagina-home p strong, html[data-theme="dark"] .aw-inst-pagina-home li strong, html[data-theme="dark"] .aw-inst-pagina-home .legal-content p strong, html[data-theme="dark"] .aw-inst-pagina-home .legal-content li strong { color: #FFFFFF; } /* Cards de fundo claro → fundo escuro com borda. * Cobre TODAS as classes com `background:#fff` hardcoded mapeadas nos CSS de * página (home/servicos/sobre/cases/blog/contato). Mantém os shapes "design * dark" (.cta-card.on-dark, .hero.on-dark, .numbers.on-dark, .kase-cover) com * o midnight intencional. */ html[data-theme="dark"] .aw-inst-pagina-home .post-card, html[data-theme="dark"] .aw-inst-pagina-home .service-card, html[data-theme="dark"] .aw-inst-pagina-home .extra-card, html[data-theme="dark"] .aw-inst-pagina-home .value-card, html[data-theme="dark"] .aw-inst-pagina-home .team-card, html[data-theme="dark"] .aw-inst-pagina-home .bts-item, html[data-theme="dark"] .aw-inst-pagina-home .faq-item, html[data-theme="dark"] .aw-inst-pagina-home .stat-block, html[data-theme="dark"] .aw-inst-pagina-home .featured, html[data-theme="dark"] .aw-inst-pagina-home .sidebar-block, html[data-theme="dark"] .aw-inst-pagina-home .controls, html[data-theme="dark"] .aw-inst-pagina-home .contato-card, html[data-theme="dark"] .aw-inst-pagina-home .form-card, html[data-theme="dark"] .aw-inst-pagina-home .info-item, html[data-theme="dark"] .aw-inst-pagina-home .info-grid > *, html[data-theme="dark"] .aw-inst-pagina-home .blog-card, html[data-theme="dark"] .aw-inst-pagina-home .visual-laptop, html[data-theme="dark"] .aw-inst-pagina-home .visual-phone, html[data-theme="dark"] .aw-inst-pagina-home .visual-phone-screen, html[data-theme="dark"] .aw-inst-pagina-home .vp-post, html[data-theme="dark"] .aw-inst-pagina-home .visual-logo-card.bg-bone, html[data-theme="dark"] .aw-inst-pagina-home .kase, html[data-theme="dark"] .aw-inst-pagina-home .load-more-btn, html[data-theme="dark"] .aw-inst-pagina-home .srv, html[data-theme="dark"] .aw-inst-pagina-home .srv-a, html[data-theme="dark"] .aw-inst-pagina-home .srv-b, html[data-theme="dark"] .aw-inst-pagina-home .srv-c, html[data-theme="dark"] .aw-inst-pagina-home .right-card { background: #181828; border-color: rgba(255,255,255,0.08); color: #E8E8EE; } /* srv-d já é midnight por design — preserva */ /* Focus de input não pode flashar branco no dark */ html[data-theme="dark"] .aw-inst-pagina-home .field input:focus, html[data-theme="dark"] .aw-inst-pagina-home .field select:focus, html[data-theme="dark"] .aw-inst-pagina-home .field textarea:focus { background: rgba(255,255,255,0.06) !important; border-color: var(--accent) !important; } /* Texto interno dos cards que herdava midnight como cor — força claro */ html[data-theme="dark"] .aw-inst-pagina-home .kase-name, html[data-theme="dark"] .aw-inst-pagina-home .value-title, html[data-theme="dark"] .aw-inst-pagina-home .bts-name, html[data-theme="dark"] .aw-inst-pagina-home .team-name, html[data-theme="dark"] .aw-inst-pagina-home .blog-card-title, html[data-theme="dark"] .aw-inst-pagina-home .extra-card .title, html[data-theme="dark"] .aw-inst-pagina-home .extra-card-title, html[data-theme="dark"] .aw-inst-pagina-home .info-item-title, html[data-theme="dark"] .aw-inst-pagina-home .load-more-btn, html[data-theme="dark"] .aw-inst-pagina-home .srv-title, html[data-theme="dark"] .aw-inst-pagina-home .srv-mock-bar i { color: #E8E8EE; } /* Textos com `color: var(--aw-midnight)` hardcoded (não muda via tokens) que * ficam dentro de cards/seções que JÁ flipam pra escuro — viram brancos pra * não sumirem. NÃO incluímos pills/botões com bg lime/bone (text midnight é * proposital ali). */ html[data-theme="dark"] .aw-inst-pagina-home .service-features strong, html[data-theme="dark"] .aw-inst-pagina-home .vp-handle, html[data-theme="dark"] .aw-inst-pagina-home .vp-stat-num, html[data-theme="dark"] .aw-inst-pagina-home .vp-post-text, html[data-theme="dark"] .aw-inst-pagina-home .about-text strong, html[data-theme="dark"] .aw-inst-pagina-home .kase-result strong, html[data-theme="dark"] .aw-inst-pagina-home .featured-title, html[data-theme="dark"] .aw-inst-pagina-home .featured-author strong, html[data-theme="dark"] .aw-inst-pagina-home .post-card-title, html[data-theme="dark"] .aw-inst-pagina-home .post-card-cat, html[data-theme="dark"] .aw-inst-pagina-home .blog-card-title, html[data-theme="dark"] .aw-inst-pagina-home .blog-cat, html[data-theme="dark"] .aw-inst-pagina-home .blog-cover-q, html[data-theme="dark"] .aw-inst-pagina-home .cover-quote, html[data-theme="dark"] .aw-inst-pagina-home .legal-content p strong, html[data-theme="dark"] .aw-inst-pagina-home .legal-content li strong, html[data-theme="dark"] .aw-inst-pagina-home .legal-meta-item strong, html[data-theme="dark"] .aw-inst-pagina-home .data-cell strong, html[data-theme="dark"] .aw-inst-pagina-home .data-row.is-head .data-cell, html[data-theme="dark"] .aw-inst-pagina-home .warning-content strong, html[data-theme="dark"] .aw-inst-pagina-home .faq-q, html[data-theme="dark"] .aw-inst-pagina-home .sort-btn, html[data-theme="dark"] .aw-inst-pagina-home .srv-b .srv-meta b, html[data-theme="dark"] .aw-inst-pagina-home .field label, html[data-theme="dark"] .aw-inst-pagina-home .field input, html[data-theme="dark"] .aw-inst-pagina-home .field select, html[data-theme="dark"] .aw-inst-pagina-home .field textarea, html[data-theme="dark"] .aw-inst-pagina-home .search-input, html[data-theme="dark"] .aw-inst-pagina-home .filter-chip:hover, html[data-theme="dark"] .aw-inst-pagina-home .quick-nav-item:hover { color: #FFFFFF; } /* Sub-elementos dos mockups (visual-laptop/phone) que tinham gradient com #fff * ou bg light hardcoded — overrides. */ html[data-theme="dark"] .aw-inst-pagina-home .vl-content-right { background: linear-gradient(135deg, #181828, #25253A); border-color: rgba(255,255,255,0.08); } html[data-theme="dark"] .aw-inst-pagina-home .vl-nav-bar-dot { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); } html[data-theme="dark"] .aw-inst-pagina-home .vl-text { color: rgba(255,255,255,0.7); } html[data-theme="dark"] .aw-inst-pagina-home .vp-stat-label, html[data-theme="dark"] .aw-inst-pagina-home .vp-post span { color: rgba(255,255,255,0.6); } /* Quick-nav (sticky em servicos) — fundo claro translúcido vira escuro */ html[data-theme="dark"] .aw-inst-pagina-home .quick-nav { background: rgba(15,15,23,0.92); border-bottom-color: rgba(255,255,255,0.08); } html[data-theme="dark"] .aw-inst-pagina-home .quick-nav-item:hover { color: #E8E8EE; background: rgba(255,255,255,0.06); } html[data-theme="dark"] .aw-inst-pagina-home .quick-nav-item.is-active { background: rgba(255,255,255,0.92); color: #0F0F17; } html[data-theme="dark"] .aw-inst-pagina-home .quick-nav-item.is-active .num { color: var(--accent); } /* Process step dot (home) — pequeno, mas fica preto-em-preto se não inverter */ html[data-theme="dark"] .aw-inst-pagina-home .pstep-dot { background: #1F1F2E; border-color: rgba(255,255,255,0.12); color: #E8E8EE; } /* Timeline dot (sobre) */ html[data-theme="dark"] .aw-inst-pagina-home .timeline-step::before { background: #1F1F2E; box-shadow: 0 0 0 5px #181828; } /* svc-hero / about / stats-bar / values usam --aw-bone via token (já adapta) */ /* Filtros / chips (blog) */ html[data-theme="dark"] .aw-inst-pagina-home .filter-chip { background: rgba(255,255,255,0.04); color: #E8E8EE; border-color: rgba(255,255,255,0.08); } html[data-theme="dark"] .aw-inst-pagina-home .filter-chip.is-active { background: #FFFFFF; color: #0F0F17; } /* Inputs */ html[data-theme="dark"] .aw-inst-pagina-home input, html[data-theme="dark"] .aw-inst-pagina-home textarea, html[data-theme="dark"] .aw-inst-pagina-home select { background: rgba(255,255,255,0.04); color: #E8E8EE; border-color: rgba(255,255,255,0.12); } html[data-theme="dark"] .aw-inst-pagina-home input::placeholder, html[data-theme="dark"] .aw-inst-pagina-home textarea::placeholder { color: rgba(255,255,255,0.45); } /* Search box */ html[data-theme="dark"] .aw-inst-pagina-home .search-box { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); } /* Data tables nas legais */ html[data-theme="dark"] .aw-inst-pagina-home .data-table, html[data-theme="dark"] .aw-inst-pagina-home .data-table th, html[data-theme="dark"] .aw-inst-pagina-home .data-table td { background: #181828; border-color: rgba(255,255,255,0.08); color: #E8E8EE; } html[data-theme="dark"] .aw-inst-pagina-home .data-table thead { background: rgba(255,255,255,0.04); } /* ===== FONT SCALE ===== * Base no wrapper só pega quem herda; muitos textos usam clamp()/px absoluto. * Por isso aplicamos um multiplicador (em) explícito nos textos de leitura * (parágrafos/listas/labels/excertos/CTAs/sub-títulos), que escala relativo * ao parent. */ html[data-a11y-font="0"] .aw-inst-pagina-home { font-size: 15px; } html[data-a11y-font="2"] .aw-inst-pagina-home { font-size: 18px; } html[data-a11y-font="2"] .aw-inst-pagina-home p, html[data-a11y-font="2"] .aw-inst-pagina-home li, html[data-a11y-font="2"] .aw-inst-pagina-home blockquote, html[data-a11y-font="2"] .aw-inst-pagina-home label, html[data-a11y-font="2"] .aw-inst-pagina-home input, html[data-a11y-font="2"] .aw-inst-pagina-home textarea, html[data-a11y-font="2"] .aw-inst-pagina-home select, html[data-a11y-font="2"] .aw-inst-pagina-home .nav-links a, html[data-a11y-font="2"] .aw-inst-pagina-home .mobile-menu a, html[data-a11y-font="2"] .aw-inst-pagina-home .breadcrumbs, html[data-a11y-font="2"] .aw-inst-pagina-home .post-card-title, html[data-a11y-font="2"] .aw-inst-pagina-home .post-card-excerpt, html[data-a11y-font="2"] .aw-inst-pagina-home .post-card-meta-top, html[data-a11y-font="2"] .aw-inst-pagina-home .featured-excerpt, html[data-a11y-font="2"] .aw-inst-pagina-home .blog-hero-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .cta-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .nf-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .nf-links a, html[data-a11y-font="2"] .aw-inst-pagina-home .hero-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .svc-hero-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .cases-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .page-hero-sub, html[data-a11y-font="2"] .aw-inst-pagina-home .footer-pitch-desc, html[data-a11y-font="2"] .aw-inst-pagina-home .filter-chip, html[data-a11y-font="2"] .aw-inst-pagina-home .service-features li, html[data-a11y-font="2"] .aw-inst-pagina-home .service-desc, html[data-a11y-font="2"] .aw-inst-pagina-home .extra-card .desc, html[data-a11y-font="2"] .aw-inst-pagina-home .extra-card-desc, html[data-a11y-font="2"] .aw-inst-pagina-home .tldr-list li, html[data-a11y-font="2"] .aw-inst-pagina-home .contact-box-desc, html[data-a11y-font="2"] .aw-inst-pagina-home .legal-content p, html[data-a11y-font="2"] .aw-inst-pagina-home .legal-content li, html[data-a11y-font="2"] .aw-inst-pagina-home .legal-meta-item, html[data-a11y-font="2"] .aw-inst-pagina-home .timeline-desc, html[data-a11y-font="2"] .aw-inst-pagina-home .value-desc, html[data-a11y-font="2"] .aw-inst-pagina-home .bts-role, html[data-a11y-font="2"] .aw-inst-pagina-home .bts-bio, html[data-a11y-font="2"] .aw-inst-pagina-home .kase-result, html[data-a11y-font="2"] .aw-inst-pagina-home .faq-q, html[data-a11y-font="2"] .aw-inst-pagina-home .faq-a { font-size: 1.16em; line-height: 1.62; } html[data-a11y-font="0"] .aw-inst-pagina-home p, html[data-a11y-font="0"] .aw-inst-pagina-home li, html[data-a11y-font="0"] .aw-inst-pagina-home .post-card-excerpt, html[data-a11y-font="0"] .aw-inst-pagina-home .blog-hero-sub, html[data-a11y-font="0"] .aw-inst-pagina-home .cta-sub, html[data-a11y-font="0"] .aw-inst-pagina-home .legal-content p, html[data-a11y-font="0"] .aw-inst-pagina-home .legal-content li { font-size: 0.92em; } /* ===== HIGH CONTRAST ===== */ html.a11y-contrast .aw-inst-pagina-home { --aw-slate: #1A1A1A; --border: rgba(0,0,0,0.45); --border-soft: rgba(0,0,0,0.25); } /* Sublinha links (excluindo botões pra não estragar visual) */ html.a11y-contrast .aw-inst-pagina-home a:not(.btn):not(.btn-primary):not(.btn-glass):not(.btn-whats):not(.btn-line):not(.nav-cta):not(.m-cta):not(.btn-newsletter):not(.contact-box-cta):not(.kase-link):not(.filter-chip):not(.tag-link):not(.aw-a11y-skip) { text-decoration: underline !important; text-underline-offset: 2px !important; } /* Foco visível reforçado em todo lugar */ html.a11y-contrast :focus-visible { outline: 3px solid #FFE100 !important; outline-offset: 3px !important; border-radius: 4px; } /* Força textos secundários a 100% de opacidade (modo claro) */ html.a11y-contrast .aw-inst-pagina-home .post-card-excerpt, html.a11y-contrast .aw-inst-pagina-home .post-card-meta-top, html.a11y-contrast .aw-inst-pagina-home .blog-hero-sub, html.a11y-contrast .aw-inst-pagina-home .featured-excerpt, html.a11y-contrast .aw-inst-pagina-home .legal-content p, html.a11y-contrast .aw-inst-pagina-home .legal-content li, html.a11y-contrast .aw-inst-pagina-home .footer-pitch-desc, html.a11y-contrast .aw-inst-pagina-home .breadcrumbs, html.a11y-contrast .aw-inst-pagina-home .stat-label, html.a11y-contrast .aw-inst-pagina-home .post-card-bottom { color: #000 !important; } /* No on-dark, força textos secundários a #FFF */ html.a11y-contrast .aw-inst-pagina-home .cta-sub, html.a11y-contrast .aw-inst-pagina-home .tldr-list li, html.a11y-contrast .aw-inst-pagina-home .contact-box-desc, html.a11y-contrast .aw-inst-pagina-home .footer-info-label, html.a11y-contrast .aw-inst-pagina-home .footer-news-meta, html.a11y-contrast .aw-inst-pagina-home .nf-sub, html.a11y-contrast .aw-inst-pagina-home .nf-links a { color: #FFFFFF !important; opacity: 1 !important; } /* No dark mode + alto contraste, inverte: textos secundários ficam branco puro */ html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .post-card-excerpt, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .post-card-meta-top, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .blog-hero-sub, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .featured-excerpt, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .legal-content p, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .legal-content li, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .footer-pitch-desc, html[data-theme="dark"].a11y-contrast .aw-inst-pagina-home .breadcrumbs { color: #FFFFFF !important; } /* Negritos mais grossos */ html.a11y-contrast .aw-inst-pagina-home strong, html.a11y-contrast .aw-inst-pagina-home b { font-weight: 800 !important; } /* ===== REDUCED MOTION (toggle manual) ===== */ html[data-a11y-motion="reduced"] *, html[data-a11y-motion="reduced"] *::before, html[data-a11y-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Garante que reveals fiquem visíveis (sem depender da animação) */ html[data-a11y-motion="reduced"] [data-anim] { opacity: 1 !important; transform: none !important; visibility: visible !important; }