/*! * AICT Light-Mode Rescue v1.0 * -------------------------------- * Targeted overrides for users who manually toggle the theme to LIGHT * but whose OS still reports prefers-color-scheme: dark. Without this, * the dark-mode @media blocks in dark-mode-v11.css + the inline page * styles for /agents, /pricing, /agents/, /compare/-vs- * still apply and the page renders white-on-white or dark-on-dark. * * Strategy: scope a focused set of "force light" rules behind * [data-theme="light"] on . CSS specificity wins because we use * `html[data-theme="light"]` (specificity 0,1,1) on rules that the * @media block applied with lower specificity (0,0,1). * * Pages explicitly fixed by the manual browser audit on 2026-04-25: * - /agents and /agents/ (hero blackout, white nav text) * - /pricing (gradient missing in light, white CTA) * - /compare/-vs- (white cards on dark layout) * - Any blog detail page (already used vars, but cover edge) * * @since 4.16.42 */ /* ============================================================ 1. Page background + global text — restore light surfaces. ============================================================ */ html[data-theme="light"] body, html[data-theme="light"] .aict-blog-post, html[data-theme="light"] .aict-tool-faq, html[data-theme="light"] .aict-tool-section.aict-faq, html[data-theme="light"] .faq-section, html[data-theme="light"] .aict-persona-faq, html[data-theme="light"] .aict-persona-faq-list, html[data-theme="light"] .aict-pillar-faq, html[data-theme="light"] .aict-guide-faq, html[data-theme="light"] .aict-industry-faq, html[data-theme="light"] .aict-cmp-faq { background: #FFFFFF !important; color: #1a1a2e !important; } html[data-theme="light"] .aict-blog-post .blog-content, html[data-theme="light"] .aict-blog-post .blog-content p, html[data-theme="light"] .aict-blog-post .blog-content li { color: #334155 !important; } html[data-theme="light"] .aict-blog-post .blog-content h2, html[data-theme="light"] .aict-blog-post .blog-content h3, html[data-theme="light"] .aict-blog-post .blog-content h4 { color: #0f172a !important; } html[data-theme="light"] .aict-blog-post .blog-content a, html[data-theme="light"] .aict-blog-post .blog-nav a { color: #4f46e5 !important; } html[data-theme="light"] .aict-blog-post .blog-content code { background: #f8fafc !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .aict-blog-post .blog-content pre { background: #f8fafc !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important; } html[data-theme="light"] .aict-blog-post .blog-content blockquote { background: #f8fafc !important; border-left-color: #4f46e5 !important; color: #334155 !important; } html[data-theme="light"] .aict-faq-list .aict-faq-item, html[data-theme="light"] .aict-tool-section.aict-faq .aict-faq-item, html[data-theme="light"] .aict-persona-faq .aict-persona-faq-item, html[data-theme="light"] .aict-persona-faq-list .aict-persona-faq-item, html[data-theme="light"] .aict-pillar-faq .aict-pillar-faq-item, html[data-theme="light"] .aict-guide-faq .aict-guide-faq-item, html[data-theme="light"] .aict-industry-faq .aict-industry-faq-item, html[data-theme="light"] .aict-cmp-faq .aict-cmp-faq-item, html[data-theme="light"] .faq-section .faq-item { background: #FFFFFF !important; border-color: #e2e8f0 !important; color: #334155 !important; } html[data-theme="light"] .aict-faq-item summary, html[data-theme="light"] .aict-persona-faq-item summary, html[data-theme="light"] .aict-persona-faq-item h3, html[data-theme="light"] .aict-pillar-faq-item summary, html[data-theme="light"] .aict-pillar-faq-item h3, html[data-theme="light"] .aict-guide-faq-item summary, html[data-theme="light"] .aict-guide-faq-item h3, html[data-theme="light"] .aict-industry-faq-item summary, html[data-theme="light"] .aict-industry-faq-item h3, html[data-theme="light"] .aict-cmp-faq-item summary, html[data-theme="light"] .aict-cmp-faq-item h3, html[data-theme="light"] .faq-section .faq-item h3, html[data-theme="light"] .faq-section .faq-item summary { color: #0f172a !important; } html[data-theme="light"] .aict-blog-post .blog-author-box, html[data-theme="light"] .aict-blog-post .blog-lang-bar { background: #FFFFFF !important; border-color: #e2e8f0 !important; color: #334155 !important; } /* ============================================================ 2. Top header / nav — readable in light mode. ============================================================ */ html[data-theme="light"] .aict-header, html[data-theme="light"] .aict-header-inner { background: #FFFFFF !important; border-bottom-color: #e2e8f0 !important; } html[data-theme="light"] .aict-nav-links a, html[data-theme="light"] .aict-mobile-nav a { color: #1a1a2e !important; } html[data-theme="light"] .aict-nav-links a:hover, html[data-theme="light"] .aict-nav-links a.active { color: #4f46e5 !important; } /* ============================================================ 3. /agents and /agents/ — invert the .aict-ap-hero block. The dark hero on the agents page already has !important inline rules; this keeps light text + light bg consistent when data-theme=light. ============================================================ */ html[data-theme="light"] body.aict-agents-page .aict-ap-hero { background: #FFFFFF !important; color: #1a1a2e !important; } html[data-theme="light"] body.aict-agents-page .aict-ap-hero-title, html[data-theme="light"] body.aict-agents-page .aict-ap-section-title, html[data-theme="light"] body.aict-agents-page .aict-ap-compare-title, html[data-theme="light"] body.aict-agents-page .aict-ap-faq-title, html[data-theme="light"] body.aict-agents-page .aict-agent-card-name, html[data-theme="light"] body.aict-agents-page .aict-ap-role-agent-name, html[data-theme="light"] body.aict-agents-page .aict-ap-how-step-body h3, html[data-theme="light"] body.aict-agents-page .aict-ap-outcome-title, html[data-theme="light"] body.aict-agents-page .aict-ap-faq-item summary { color: #1a1a2e !important; -webkit-text-fill-color: #1a1a2e !important; } html[data-theme="light"] body.aict-agents-page .aict-ap-hero-sub, html[data-theme="light"] body.aict-agents-page .aict-ap-section-sub, html[data-theme="light"] body.aict-agents-page .aict-agent-card-desc, html[data-theme="light"] body.aict-agents-page .aict-ap-role-agent-desc, html[data-theme="light"] body.aict-agents-page .aict-ap-how-step-body p, html[data-theme="light"] body.aict-agents-page .aict-ap-outcome-desc, html[data-theme="light"] body.aict-agents-page .aict-ap-faq-item p { color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important; } /* ============================================================ 4. /pricing — gradient hero + "Trusted by creators" CTA contrast. In light, force a soft purple-tinted bg + dark text on the trust pill. ============================================================ */ html[data-theme="light"] .pricing-hero, html[data-theme="light"] .aict-pricing-hero { background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%) !important; color: #1a1a2e !important; } html[data-theme="light"] .pricing-hero h1, html[data-theme="light"] .pricing-hero p, html[data-theme="light"] .aict-pricing-hero h1, html[data-theme="light"] .aict-pricing-hero p { color: #1a1a2e !important; } html[data-theme="light"] .trusted-by-creators, html[data-theme="light"] .aict-trusted-pill, html[data-theme="light"] [data-aict-trusted] { background: #FFFFFF !important; color: #4f46e5 !important; border: 1px solid #c4b5fd !important; } /* ============================================================ 4b. Homepage "Browse by category" pills (2026-06-12). cro-components.css:745 darkens .aict-category-pills .aict-pill to bg #1e293b !important under @media(prefers-color-scheme:dark) on ANY dark-pref OS — even when the user explicitly chose LIGHT. That left dark chips floating on the white page AND forced .pill-count to an invisible #475569 (1.93:1). Restore the light chip palette so the chips match the page and the dark count is legible again. Specificity html[data-theme="light"] .aict-category-pills .aict-pill = (0,3,1) beats the @media (0,2,0)!important; the .pill-count override (0,4,1) beats the contrast-fix safety net (0,3,2). (Genuine dark mode keeps the dark chip + slate-400 count via the contrast-fix @media rule.) ============================================================ */ html[data-theme="light"] .aict-category-pills .aict-pill, html[data-theme="light"] .aict-category-pills-wrap .aict-pill { background: #FFFFFF !important; color: #334155 !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .aict-category-pills .aict-pill:hover, html[data-theme="light"] .aict-category-pills-wrap .aict-pill:hover { background: #4f46e5 !important; color: #FFFFFF !important; border-color: #5c5fe6 !important; } html[data-theme="light"] .aict-category-pills .aict-pill .pill-count, html[data-theme="light"] .aict-category-pills-wrap .aict-pill .pill-count { color: #475569 !important; } /* ============================================================ 5. /compare/-vs- — cards on dark layout. ============================================================ */ html[data-theme="light"] .aict-cmp-card, html[data-theme="light"] .aict-cmp-row, html[data-theme="light"] .aict-cmp-table { background: #FFFFFF !important; color: #1a1a2e !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .aict-cmp-card h2, html[data-theme="light"] .aict-cmp-card h3, html[data-theme="light"] .aict-cmp-row td, html[data-theme="light"] .aict-cmp-row th { color: #1a1a2e !important; } /* ============================================================ 6. Footer — always dark navy by design. [v4.16.80bf] Wave VVV — earlier version targeted `.aict-footer` (wrong class — actual element is `.aict-site-footer`), so the bg+a override never fired AND the `.aict-footer-inner` rule painted the inner container light-grey on what should be a dark footer. Removed. The footer bg + link colors are owned by footer.css, see that file. ============================================================ */ /* ============================================================ [v4.16.80au] Wave NNN — homepage UX audit fixes. These rules are scoped to LIGHT theme (default) and target the specific issues the 2026-04-29 manual audit flagged: P1: card text contrast (slate-100 on white was unreadable) P2: mobile drawer overflow + hero font scaling P3: featured grid auto-fit + content min-width:0 P4: floating UI safe-area + last-section padding P6: reduced-motion enforcement ============================================================ */ /* P1 — Card text contrast: force slate-900 on light cards. */ html[data-theme="light"] .aict-cap-card, html[data-theme="light"] .aict-cap-card h2, html[data-theme="light"] .aict-cap-card h3, html[data-theme="light"] .aict-cap-card h4, html[data-theme="light"] .aict-cap-card p { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html[data-theme="light"] .aict-cap-card p { color: #475569 !important; -webkit-text-fill-color: #475569 !important; } /* Trust strip chips ("Free forever", "Privacy-first", etc.) */ html[data-theme="light"] .aict-hp-trust-strip, html[data-theme="light"] .aict-hp-trust-strip * { color: #334155 !important; } html[data-theme="light"] .aict-hp-trust-strip [style*="color:#64748b"], html[data-theme="light"] .aict-hp-trust-strip [style*="color: #64748b"] { color: #475569 !important; /* slate-600 — 7:1 on white, was 3.8:1 */ } /* P2 — Body horizontal-scroll safety net + mobile drawer offscreen state */ html, body { overflow-x: hidden; max-width: 100vw; } /* [v4.16.80ay 2026-04-29] Wave RRR — real mobile menu only has class .aict-mobile-menu and toggles via aria-hidden="true|false". Old selector :not(.is-open):not(.aict-mobile-menu--open) never matched (no such class added to DOM), so menu rendered onscreen at x=352, w=300 = 269px overflow. */ .aict-mobile-menu[aria-hidden="true"], #aict-mobile-menu[aria-hidden="true"] { transform: translateX(100%) !important; visibility: hidden !important; pointer-events: none !important; } .aict-mobile-menu[aria-hidden="false"], #aict-mobile-menu[aria-hidden="false"] { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; } /* [v4.16.80ay] Wave RRR — homepage hero fix. The plugin renders
with

. homepage.css targets `.aict-homepage .hero` with !important rules but a later-loaded rule at higher source-order or specificity is winning + leaving bg transparent, h1 falling back to slate-100. Force here with maximum reasonable specificity (html body .aict-homepage .hero) so this LATE-loading rescue stylesheet wins regardless. */ /* [2026-06-11] Sync with the c10912b hero redesign. This rescue rule's !important background was re-asserting the OLD flat candy-purple gradient, so the new premium deep-indigo gradient (set inline on
) never reached users. Match the new 142deg deep-indigo here. The atmospheric radial-highlight layer is a separate absolutely-positioned div inside the hero, so leaving the base gradient here is enough. */ html body .aict-homepage section.hero, html body .aict-homepage .hero { background: linear-gradient(142deg, #1e1b4b 0%, #3730a3 38%, #4f46e5 78%, #5c5fe6 100%) !important; color: #fff !important; padding: 72px 20px 80px !important; position: relative; overflow: hidden; } html body .aict-homepage .hero-title, html body .aict-homepage section.hero h1 { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(1.75rem, 6vw, 3rem) !important; font-weight: 800 !important; line-height: 1.15 !important; text-shadow: 0 2px 4px rgba(0,0,0,.15); overflow-wrap: break-word; } html body .aict-homepage .hero-subtitle, html body .aict-homepage section.hero p { color: rgba(255,255,255,.95) !important; -webkit-text-fill-color: rgba(255,255,255,.95) !important; font-size: clamp(.95rem, 2.5vw, 1.25rem) !important; } /* P2 — Hero h1/subtitle fluid font-size (no fixed px) — covers OTHER hero variants */ .aict-hp-hero h1, .aict-hero h1, section.aict-hero h1, .aict-hp-hero-title { font-size: clamp(2rem, 6vw, 4rem) !important; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .aict-hp-hero p, .aict-hero p, .aict-hp-hero-subtitle { font-size: clamp(1rem, 3vw, 1.25rem) !important; padding-inline: 1rem; overflow-wrap: break-word; } /* P3 — Featured tools grid: auto-fit + min-width:0 on items */ .aict-featured-section .aict-tools-grid, .featured-section .aict-tools-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; } .aict-tools-grid > *, .aict-tool-card { min-width: 0; } .aict-tool-card .aict-card-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; } .aict-tool-card .aict-popular-badge, .aict-tool-card [class*="badge"] { flex-shrink: 0; } /* CTA "Open Tool →" should not be overlapped by stat icons */ .aict-tool-card .aict-card-cta { position: relative; z-index: 2; padding-right: 28px; } .aict-tool-card .aict-stat-icon, .aict-tool-card svg[class*="stat"] { position: absolute; top: 16px; right: 16px; z-index: 1; } /* P4 — Floating chat + scroll-up: safe-area + last-section clearance */ @media (max-width: 768px) { section.cta-section, section.aict-cta-section, main > section:last-of-type { padding-bottom: 80px; } } /* [v4.16.80hg 2026-05-10] Scope global bottom-pin to >=768px only. On mobile (<768px) the inline media-query rule in class-aict-rag-chatbot.php sets bottom:72px to clear the 56px bottom-nav. Without this scoping the rescue rule above won the specificity tie-break and pulled the chatbot back to 16px, re-introducing the overlap with the Account tab. */ @media (min-width: 768px) { .aict-chatbot-wrap, #aict-chatbot-wrap, .aict-scroll-top, #aict-scroll-top, [class*="scroll-to-top"] { bottom: max(16px, env(safe-area-inset-bottom)) !important; } } @media (max-width: 767px) { /* Belt + braces: defeat any other ancestor-less override by using body-prefixed specificity (0,1,1) AND !important. The mobile layout puts a 56px bottom-nav, plus a 16px gap, plus safe-area. */ body .aict-chatbot-wrap, body #aict-chatbot-wrap { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; right: 16px !important; } body .aict-scroll-top, body #aict-scroll-top, body [class*="scroll-to-top"] { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; } } /* P6 — Reduced-motion: belt + braces on top of Wave R global rule */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* [v4.16.80bd 2026-04-29] Wave UUU — dark-mode coverage for unstyled sections. Browser-Claude audit #141: 6 sections on homepage have no aict- class so no [data-theme="dark"] selectors target them. Result: white bg with slate-100 text = invisible. Cover via generic descendant selector. */ [data-theme="dark"] .aict-homepage > section, [data-theme="dark"] section.featured-section, [data-theme="dark"] .featured-section { background-color: #0f172a !important; color: #cbd5e1 !important; } [data-theme="dark"] .aict-homepage section h1, [data-theme="dark"] .aict-homepage section h2, [data-theme="dark"] .aict-homepage section h3, [data-theme="dark"] .aict-homepage section h4 { color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; } [data-theme="dark"] .aict-homepage section p, [data-theme="dark"] .aict-homepage section li { color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; } [data-theme="dark"] .aict-homepage .featured-section [class*="card"], [data-theme="dark"] .aict-homepage .featured-section .aict-tool-card { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* Pricing SAVE % badge — was 1.01:1 contrast (browser-Claude #142) */ [data-theme="dark"] .pricing-card .save-badge, [data-theme="dark"] .pricing-card .annual-savings, [data-theme="dark"] [class*="annual-save"] { background-color: #064e3b !important; color: #d1fae5 !important; border: 1px solid #10b981; } /* ============================================================ [UX-08 audit 2026-04-30] Affiliate surfaces — dark mode ------------------------------------------------------------ Awin monetization block (in-post sponsored card) had no dark-mode override → white card + dark text persisted in [data-theme="dark"], breaking the unified dark theme even though contrast was technically fine. Note: the partner portal at /affiliate/?code=... uses inline styles on #aict-affiliate-portal (no class hooks), so the audit's requested .aict-affiliate-dashboard / -stats-grid / -table selectors don't exist in the codebase. We dark-mode the actual Awin block classes that DO exist + the portal id. ============================================================ */ [data-theme="dark"] .aict-affiliate-block, [data-theme="dark"] #aict-affiliate-portal { background: var(--aict-bg); color: var(--aict-text); } [data-theme="dark"] .aict-affiliate-card { background: var(--aict-surface); border-color: var(--aict-border); border-left-color: var(--aict-pro-from); } [data-theme="dark"] .aict-affiliate-card .aict-affiliate-body h4 { color: var(--aict-text) !important; } [data-theme="dark"] .aict-affiliate-card .aict-affiliate-body p { color: var(--aict-text-muted) !important; } [data-theme="dark"] .aict-affiliate-badge { background: var(--aict-surface-2); color: var(--aict-text-muted-on-dark); } [data-theme="dark"] .aict-affiliate-disclosure { color: var(--aict-text-soft-on-dark); } /* ============================================================ [v4.16.80hg 2026-05-10] Mobile UX — tool detail page ------------------------------------------------------------ Browser audit IMG_2954-2957 found three issues on /tools-seo-meta-description-generator/: 1. Tool example "tex-card" body text used --aict-tex-muted fallback #94a3b8 (slate-400). Against the dark slate card bg #1e293b that yields ~3.8:1 — fails WCAG AA for body text. Bump the muted variable on this surface to #cbd5e1 (slate-300, ~9.5:1) and force the title to slate-100 explicitly. 2. Generate primary CTA spans (.aict-btn-text, .aict-btn-loading) were rendering low-contrast on the purple gradient because the dark-theme inheritance set color: var(--aict-text-secondary) on inner spans. Force pure white on the button + spans. 3. Sticky in-page search-bar visually clipped the hero h1 on mobile. Add 12px scroll-margin so jump-targets don't sit flush under the sticky chrome. ============================================================ */ /* ---- Issue 2: Tool examples card contrast (WCAG AA) ---- */ .aict-tool-examples { --aict-tex-muted: #cbd5e1 !important; } .aict-tex-card__usecase, .aict-tool-examples__subtitle { color: #cbd5e1 !important; } .aict-tex-card__title { color: #f1f5f9 !important; } .aict-tex-card__io-block h4 { color: #cbd5e1 !important; opacity: 1 !important; } .aict-tex-card__copy-btn { color: #cbd5e1 !important; border-color: #475569 !important; } .aict-tex-card__copy-btn:hover { color: #f1f5f9 !important; border-color: #818cf8 !important; } .aict-tex-card__inputs dt { color: #c4b5fd !important; } .aict-tex-card__inputs dd, .aict-tex-card__output { color: #e2e8f0 !important; } /* Light-theme variants stay readable too */ body.aict-light-theme .aict-tex-card__usecase, body.aict-tp2-light .aict-tex-card__usecase, body.aict-light-theme .aict-tool-examples__subtitle, body.aict-tp2-light .aict-tool-examples__subtitle { color: #334155 !important; } body.aict-light-theme .aict-tex-card__title, body.aict-tp2-light .aict-tex-card__title { color: #0b1b35 !important; } /* ---- Issue 3: Generate button text legibility ---- */ .aict-btn-primary, button.aict-btn-primary, #aict-submit-btn { color: #ffffff !important; opacity: 1 !important; } .aict-btn-primary .aict-btn-text, .aict-btn-primary .aict-btn-loading, .aict-btn-primary .aict-btn-text *, #aict-submit-btn .aict-btn-text, #aict-submit-btn .aict-btn-loading { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); font-weight: 700 !important; } .aict-btn-primary:disabled, .aict-btn-primary[disabled] { /* Keep readable even in disabled state — was 0.6 before, contrast fail */ opacity: 0.75 !important; } .aict-btn-primary:disabled .aict-btn-text, .aict-btn-primary[disabled] .aict-btn-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Issue 4: Sticky search bar / hero spacing on mobile ---- */ @media (max-width: 767px) { .aict-tool-detail-hero, .aict-tool-page h1, main h1 { scroll-margin-top: 96px; } /* If a sticky in-page search exists above the hero, give the first H2 in tool-examples breathing room so the section title isn't visually clipped. */ .aict-tool-examples { scroll-margin-top: 80px; } } /* ============================================================ [v4.16.81 2026-05-11] Wave ZZZ — Mobile R3 audit (IMG_2964) ------------------------------------------------------------ Two regressions surfaced on iPhone Safari light-mode homepage: ISSUE 1 — Hero instant-search input rendered dark-on-light page. Root cause: aict-theme-tokens.css defines an `@media (prefers-color-scheme: dark)` auto-fallback that flips `--aict-surface` to `#1e293b` whenever NO data-theme attribute is present on . iOS Safari with OS=dark briefly hits this state before the no-FOUC boot script runs, AND the rule wins via :root:not([data-theme="light"])... specificity. The hero search widget (`.aict-isearch-input` from class-aict-instant-search.php) uses `background: var(--aict-surface,#fff)`, so the input paints near-black with light placeholder text while the rest of the page is light. Fix: pin the input + dropdown to explicit white surface in any state that is NOT explicit dark mode (covers light + auto + pre-boot SSR). ISSUE 2 — Chat trigger button + "Need help?" idle tooltip overlap the 4th "outcome" card on the new-capabilities grid. Root cause: trigger lifts to calc(72px + safe-area) above bottom-nav (Wave HF) and the idle tooltip is a 210px-wide pill anchored on the trigger; on mobile the pill sits right where the rightmost outcome card title renders. Fix: hide the idle tooltip on mobile entirely (the floating WhatsApp-style icon is enough; the pill is a desktop-only nudge) AND add bottom padding to the new-capabilities section so card content never sits behind the trigger button's vertical footprint. ============================================================ */ /* Issue 1 — Force white surface on the hero instant-search widget in every non-explicit-dark state (light, auto, pre-boot). The `:not([data-theme="dark"])` guard means dark-mode users keep the dark surface from aict-theme-tokens.css. */ html:not([data-theme="dark"]) .aict-isearch-input, html[data-theme="light"] .aict-isearch-input, html.aict-theme-light .aict-isearch-input { background-color: #ffffff !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html:not([data-theme="dark"]) .aict-isearch-input::placeholder, html[data-theme="light"] .aict-isearch-input::placeholder, html.aict-theme-light .aict-isearch-input::placeholder { color: #64748b !important; opacity: 1 !important; } html:not([data-theme="dark"]) .aict-isearch-drop, html[data-theme="light"] .aict-isearch-drop, html.aict-theme-light .aict-isearch-drop { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } /* Same guard for the legacy `.aict-hero-search-input` (JS-injected from class-aict-site-config.php) — it hardcodes #1e293b which is correct on dark hero but reads as a "dark search bar in light mode" once the hero gradient is removed/overridden. Keep dark on the gradient hero, force light when the rest of the page is light AND the search lives outside the gradient. */ html:not([data-theme="dark"]) .aict-hero-search-input { background-color: #ffffff !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html:not([data-theme="dark"]) .aict-hero-search-input::placeholder { color: #64748b !important; opacity: 1 !important; } /* Issue 2 — Chatbot widget mobile collision with outcome cards. */ @media (max-width: 767px) { /* Hide the "Need help with this tool?" idle tooltip on mobile. It's a 210px-wide pill that anchors off the chat trigger and collides with the rightmost outcome card. The chat icon itself stays visible — users can still tap it to open chat. */ #aict-idle-tooltip { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Shrink the chat trigger to a 48px touch target on mobile (still meets WCAG 2.5.5 ≥44px). Frees ~8px of horizontal + vertical space next to the rightmost card. */ #aict-chatbot-wrap #aict-chat-btn { width: 48px !important; height: 48px !important; box-shadow: 0 3px 12px rgba(99, 102, 241, 0.40) !important; } #aict-chatbot-wrap #aict-chat-btn svg { width: 22px !important; height: 22px !important; } /* Defensive clearance: any homepage section that contains the new-capabilities outcome cards gets extra bottom padding so the last row of cards never sits behind the floating trigger (which occupies the bottom-right corner at y ≈ viewport height − 72px − 48px − safe-area). */ .aict-homepage section:has(.aict-cap-card) { padding-bottom: 96px !important; } /* Fallback for engines without :has() (iOS Safari < 15.4 — rare but covers older iPad): add bottom padding to ALL homepage sections. Costs a tiny bit of vertical whitespace on mobile but is safe. */ @supports not selector(:has(*)) { .aict-homepage > section, .aict-homepage section { padding-bottom: 96px !important; } } /* Belt + braces: bump the chatbot wrap bottom offset slightly higher than Wave HF's 72px so the icon visually clears any card that bleeds into the safe-area. */ body .aict-chatbot-wrap, body #aict-chatbot-wrap { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } } /* ============================================================ [v4.16.82 2026-05-11] Wave AAAA - Mobile R4 audit (IMG_2969-2973) ------------------------------------------------------------ Five regressions on iPhone Safari light-mode after R3 ship: A1 (search bar dark-mode persist): R3 covered .aict-isearch-input + .aict-hero-search-input but missed .aict-ts-input on the /tools/ semantic-search widget (class-aict-tool-search.php). Same root cause - var(--aict-surface,#fff) flips dark on iOS Safari with OS=dark. Source CSS files have been fixed to use explicit white surface; this is the belt-and-braces guard. A2 (tool cards dark on light page): Featured-tool grid renders cards that read as dark navy on white homepage. Aict-tool-card inherited dark surface via theme-tokens var resolution. Force light surface in any non-dark state. A3 (chatbot widget STILL overlaps outcome cards): R3 added padding-bottom 96px to .aict-homepage section:has(.aict-cap-card). Still bleeding because (a) :has() not universally supported, (b) some sections do not have .aict-cap-card descendants. Apply 140px clearance to the LAST homepage section on mobile AND lift chatbot to bottom: 96px + safe-area. A4 (bottom nav "Ucet" clipped): Fixed at source in mobile-ux.php (ellipsis + min-width:0). No CSS change here. B6 (TRUSTED BY fake logos): Removed via testimonials class - no CSS change needed; the section silently disappears. ============================================================ */ /* A1 - belt+braces for search widgets on the /tools/ page. */ html:not([data-theme="dark"]) .aict-ts-input, html[data-theme="light"] .aict-ts-input { background-color: #ffffff !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html:not([data-theme="dark"]) .aict-ts-input::placeholder, html[data-theme="light"] .aict-ts-input::placeholder { color: #64748b !important; opacity: 1 !important; } html:not([data-theme="dark"]) .aict-ts-results, html[data-theme="light"] .aict-ts-results { background-color: #ffffff !important; color: #0f172a !important; border-color: #e2e8f0 !important; } /* A2 - Tool cards (featured grid + listing) on light pages. The grid renders dark navy cards on white homepage because card bg defers to var(--aict-surface) which flips on iOS Safari OS=dark. Force explicit white surface + slate text on any non-dark state. */ html:not([data-theme="dark"]) .aict-tool-card, html[data-theme="light"] .aict-tool-card, html:not([data-theme="dark"]) .aict-tools-grid .aict-tool-card, html[data-theme="light"] .aict-tools-grid .aict-tool-card { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } html:not([data-theme="dark"]) .aict-tool-card .aict-card-name, html:not([data-theme="dark"]) .aict-tool-card .aict-card-title, html:not([data-theme="dark"]) .aict-tool-card h3, html:not([data-theme="dark"]) .aict-tool-card h4, html[data-theme="light"] .aict-tool-card .aict-card-name, html[data-theme="light"] .aict-tool-card .aict-card-title, html[data-theme="light"] .aict-tool-card h3, html[data-theme="light"] .aict-tool-card h4 { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html:not([data-theme="dark"]) .aict-tool-card .aict-card-desc, html:not([data-theme="dark"]) .aict-tool-card .aict-card-description, html:not([data-theme="dark"]) .aict-tool-card p, html[data-theme="light"] .aict-tool-card .aict-card-desc, html[data-theme="light"] .aict-tool-card .aict-card-description, html[data-theme="light"] .aict-tool-card p { color: #475569 !important; -webkit-text-fill-color: #475569 !important; } html:not([data-theme="dark"]) .aict-tool-card .aict-card-cta, html[data-theme="light"] .aict-tool-card .aict-card-cta { color: #4f46e5 !important; } /* A3 - Chatbot overlap clearance + trigger lift. R3 96px was not enough on iOS Safari with the larger Awin/PWA safe-area inset. Bump LAST section to 140px and lift trigger. */ @media (max-width: 767px) { .aict-homepage > section:last-of-type, .aict-homepage section.featured-section:last-of-type, .aict-homepage section.cta-section:last-of-type, main.aict-homepage > section:last-child { padding-bottom: 140px !important; } /* Lift chatbot trigger so it never bleeds onto card content. */ html body .aict-chatbot-wrap, html body #aict-chatbot-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; } /* Persistent kill on idle tooltip even AFTER user tap. */ #aict-idle-tooltip, .aict-idle-tooltip, [data-aict-idle-tooltip] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* [2026-06-24 contrast] A standalone .btn-cta (e.g. mid-page "Start Free →") is an anchor that misses the filled-button styling (homepage.css isn't enqueued sitewide), so it renders as indigo link-text — fine on white, but only 2.84:1 on the dark page. Lighten to a readable indigo in dark; specificity (0,1,1) leaves any properly-filled white-on-gradient .cta-section .btn-cta untouched. */ html[data-theme="dark"] .btn-cta { color: #a5b4fc !important; -webkit-text-fill-color: #a5b4fc !important; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .btn-cta { color: #a5b4fc !important; -webkit-text-fill-color: #a5b4fc !important; } }