/* ============================================================================= VANTAIGE — THEME SYSTEM v2.0 Deploy to: [child-theme]/assets/css/vantaige-theme.css Architecture: ─ CSS variables at :root + [data-theme="light"] = current light site (no change) ─ [data-theme="dark"] overrides only — light mode costs zero extra CSS ─ [data-theme] is set on by an inline script BEFORE first paint (zero FOUC) ─ .style-dark on activates the vantaige-ai-tools plugin's built-in dark CSS ─ Home page is always data-theme="dark" (forced in functions.php) DO NOT add styles here for vantaige-home-styles.css elements (.vhp-*) DO NOT add styles that affect all pages without [data-theme="dark"] scoping DO NOT minify manually — LiteSpeed Cache handles this ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS — Light (default) and Dark ───────────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Backgrounds */ --vt-bg: #ffffff; --vt-bg-sub: #f8fafc; --vt-card: #ffffff; /* Borders */ --vt-border: #e2e8f0; --vt-border-hover: #6440FB; /* Text */ --vt-fg: #0f172a; --vt-muted: #4F547B; /* Brand — matches current Elementor Global Colors */ --vt-primary: #6440FB; --vt-primary-dark: #5027FA; --vt-secondary: #140342; --vt-accent: #00FF84; --vt-accent-glow: rgba(0, 255, 132, 0.22); /* Shadows */ --vt-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --vt-shadow-hover: 0 20px 40px -8px rgba(100, 64, 251, 0.18); /* Misc */ --vt-tag-bg: #f1f5f9; --vt-tag-text: #475569; --vt-logo-bg: #f8fafc; --vt-radius: 0.75rem; /* Header — white glassmorphism in light mode */ --vt-header-bg: rgba(255, 255, 255, 0.95); --vt-header-border: #e2e8f0; --vt-header-blur: saturate(180%) blur(20px); /* Grid pattern — subtle purple grid in light mode */ --vt-grid-line: rgba(100, 64, 251, 0.035); } [data-theme="dark"] { /* Backgrounds */ --vt-bg: #050608; --vt-bg-sub: hsl(240, 12%, 8%); --vt-card: hsl(240, 12%, 10%); /* Borders */ --vt-border: hsl(240, 8%, 18%); --vt-border-hover: hsl(145, 80%, 50%); /* Text */ --vt-fg: hsl(0, 0%, 95%); --vt-muted: hsl(240, 5%, 65%); /* Brand — green becomes primary in dark (matches home page) */ --vt-primary: hsl(145, 80%, 50%); --vt-primary-dark: hsl(145, 80%, 42%); --vt-secondary: hsl(250, 60%, 55%); --vt-accent: hsl(145, 80%, 50%); --vt-accent-glow: hsla(145, 80%, 50%, 0.28); /* Shadows */ --vt-shadow-card: none; --vt-shadow-hover: 0 0 40px -10px hsla(145, 80%, 50%, 0.25); /* Misc */ --vt-tag-bg: hsl(240, 10%, 14%); --vt-tag-text: hsl(240, 5%, 65%); --vt-logo-bg: hsl(240, 12%, 7%); --vt-radius: 0.75rem; /* Header — dark glassmorphism in dark mode */ --vt-header-bg: rgba(5, 6, 8, 0.90); --vt-header-border: hsl(240, 8%, 18%); --vt-header-blur: saturate(180%) blur(14px); /* Grid pattern — on in dark mode */ --vt-grid-line: rgba(255, 255, 255, 0.025); } /* ───────────────────────────────────────────────────────────────────────────── 2. BODY + BACKGROUND ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: var(--vt-bg) !important; color: var(--vt-fg) !important; background-image: linear-gradient(to right, var(--vt-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--vt-grid-line) 1px, transparent 1px) !important; background-size: 52px 52px !important; } @media (max-width: 768px) { [data-theme="dark"] body { background-attachment: scroll !important; } } /* ───────────────────────────────────────────────────────────────────────────── 2b. BODY — Light mode subtle grid background ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] body { background-color: var(--vt-bg) !important; background-image: linear-gradient(to right, var(--vt-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--vt-grid-line) 1px, transparent 1px) !important; background-size: 52px 52px !important; } @media (max-width: 768px) { [data-theme="light"] body { background-attachment: scroll !important; } } /* ───────────────────────────────────────────────────────────────────────────── 3. ELEMENTOR CONTAINER RESET (dark only, safely scoped) Only clears background on containers WITHOUT an explicit inline background. Containers where Elementor set a specific bg (inline style) are left alone. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .e-con:not([style*="background-color"]):not([style*="background-image"]), [data-theme="dark"] .e-con-inner, [data-theme="dark"] .elementor-section:not([style*="background-color"]):not([style*="background-image"]), [data-theme="dark"] .elementor-container { background-color: transparent !important; } /* ───────────────────────────────────────────────────────────────────────────── 4. TYPOGRAPHY ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .elementor-heading-title { color: var(--vt-fg) !important; letter-spacing: -0.02em; } [data-theme="dark"] p, [data-theme="dark"] .elementor-widget-text-editor p { color: var(--vt-muted) !important; } [data-theme="dark"] strong, [data-theme="dark"] b { color: var(--vt-fg); } [data-theme="dark"] a { color: var(--vt-primary); text-decoration: none; } [data-theme="dark"] a:hover { color: var(--vt-fg); } [data-theme="dark"] hr { border-color: var(--vt-border) !important; } [data-theme="dark"] code { background: var(--vt-bg-sub) !important; border: 1px solid var(--vt-border) !important; color: var(--vt-primary) !important; border-radius: 0.375rem; padding: 0.15em 0.45em; font-size: 0.875em; } [data-theme="dark"] pre { background: var(--vt-bg-sub) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; color: var(--vt-fg) !important; } [data-theme="dark"] blockquote, [data-theme="dark"] .wp-block-quote { border-left: 3px solid var(--vt-primary) !important; background: var(--vt-card) !important; color: var(--vt-muted) !important; padding: 1rem 1.5rem !important; border-radius: 0 var(--vt-radius) var(--vt-radius) 0 !important; } /* ───────────────────────────────────────────────────────────────────────────── 5. HEADER — Both themes use CSS variables (no duplication needed) ───────────────────────────────────────────────────────────────────────────── */ .site-header, #masthead, .elementor-location-header { background: var(--vt-header-bg) !important; border-bottom: 1px solid var(--vt-header-border) !important; backdrop-filter: var(--vt-header-blur) !important; -webkit-backdrop-filter: var(--vt-header-blur) !important; position: sticky !important; top: 0 !important; z-index: 999 !important; transition: background 0.3s ease, border-color 0.3s ease !important; } [data-theme="dark"] .elementor-nav-menu .elementor-item, [data-theme="dark"] .elementor-nav-menu .elementor-item-anchor { color: var(--vt-muted) !important; transition: color 0.2s !important; } [data-theme="dark"] .elementor-nav-menu .elementor-item:hover, [data-theme="dark"] .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-menu-toggle i, [data-theme="dark"] .elementor-menu-toggle svg { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-nav-menu--dropdown, [data-theme="dark"] .elementor-nav-menu__container.elementor-nav-menu--dropdown { background: var(--vt-bg-sub) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] .elementor-nav-menu--dropdown .menu-item a.elementor-item { color: var(--vt-fg) !important; border-bottom: 1px solid var(--vt-border) !important; } [data-theme="dark"] .elementor-nav-menu--dropdown .menu-item a.elementor-item:hover { color: var(--vt-primary) !important; background: hsl(240, 12%, 13%) !important; } /* ───────────────────────────────────────────────────────────────────────────── 5b. HEADER — Light mode overrides (fix hardcoded #FFFFFF Elementor styles) ───────────────────────────────────────────────────────────────────────────── */ /* Header glassmorphism: reduce opacity so grid peeks through */ [data-theme="light"] .elementor-location-header { --vt-header-bg: rgba(255, 255, 255, 0.88); } /* Logo: make the white PNG logo appear dark in light mode */ [data-theme="light"] .elementor-location-header .elementor-widget-theme-site-logo img, [data-theme="light"] .elementor-location-header .elementor-widget-image img { filter: brightness(0) !important; transition: filter 0.3s ease !important; } /* Desktop nav links — override hardcoded color:#FFFFFF */ [data-theme="light"] .elementor-element-d21be19 .elementor-nav-menu--main .elementor-item, [data-theme="light"] .elementor-element-38a27b2 .elementor-nav-menu--main .elementor-item { color: var(--vt-secondary) !important; fill: var(--vt-secondary) !important; } [data-theme="light"] .elementor-element-d21be19 .elementor-nav-menu--main .elementor-item:hover, [data-theme="light"] .elementor-element-d21be19 .elementor-nav-menu--main .elementor-item.elementor-item-active, [data-theme="light"] .elementor-element-38a27b2 .elementor-nav-menu--main .elementor-item:hover, [data-theme="light"] .elementor-element-38a27b2 .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--vt-primary) !important; fill: var(--vt-primary) !important; } /* Mobile hamburger/close icons — override white stacked icon */ [data-theme="light"] .elementor-element-ddc0365.elementor-view-stacked .elementor-icon, [data-theme="light"] .elementor-element-79d1063.elementor-view-stacked .elementor-icon { background-color: var(--vt-primary) !important; color: #ffffff !important; fill: #ffffff !important; } [data-theme="light"] .elementor-element-ddc0365.elementor-view-default .elementor-icon, [data-theme="light"] .elementor-element-ddc0365.elementor-view-framed .elementor-icon, [data-theme="light"] .elementor-element-79d1063.elementor-view-default .elementor-icon, [data-theme="light"] .elementor-element-79d1063.elementor-view-framed .elementor-icon { color: var(--vt-secondary) !important; fill: var(--vt-secondary) !important; border-color: var(--vt-border) !important; } /* Divider — was #FFFFFF (invisible on white), make it the border color */ [data-theme="light"] .elementor-element-94d57b6 { --divider-color: var(--vt-border) !important; } /* Social icons in header — light mode: transparent bg + dark icons */ [data-theme="light"] .elementor-element-8e02a6b .elementor-social-icon, [data-theme="light"] .elementor-element-a6b2616 .elementor-social-icon { background-color: transparent !important; border: 1px solid var(--vt-border) !important; } [data-theme="light"] .elementor-element-8e02a6b .elementor-social-icon i, [data-theme="light"] .elementor-element-8e02a6b .elementor-social-icon svg, [data-theme="light"] .elementor-element-a6b2616 .elementor-social-icon i, [data-theme="light"] .elementor-element-a6b2616 .elementor-social-icon svg { color: var(--vt-muted) !important; fill: var(--vt-muted) !important; } [data-theme="light"] .elementor-element-8e02a6b .elementor-social-icon:hover, [data-theme="light"] .elementor-element-a6b2616 .elementor-social-icon:hover { background-color: var(--vt-primary) !important; border-color: var(--vt-primary) !important; } [data-theme="light"] .elementor-element-8e02a6b .elementor-social-icon:hover i, [data-theme="light"] .elementor-element-8e02a6b .elementor-social-icon:hover svg, [data-theme="light"] .elementor-element-a6b2616 .elementor-social-icon:hover i, [data-theme="light"] .elementor-element-a6b2616 .elementor-social-icon:hover svg { color: #ffffff !important; fill: #ffffff !important; } /* Off-canvas (mobile) menu — light mode: white background + dark text */ [data-theme="light"] .elementor-element-65150db .e-off-canvas__content { background-color: #ffffff !important; border-left: 1px solid var(--vt-border) !important; } [data-theme="light"] .elementor-element-65150db .e-off-canvas__content .elementor-nav-menu .elementor-item, [data-theme="light"] .elementor-element-65150db .e-off-canvas__content .elementor-heading-title, [data-theme="light"] .elementor-element-65150db .e-off-canvas__content p, [data-theme="light"] .elementor-element-65150db .e-off-canvas__content a { color: var(--vt-secondary) !important; } [data-theme="light"] .elementor-element-65150db .e-off-canvas__content .elementor-nav-menu .elementor-item:hover { color: var(--vt-primary) !important; } /* Off-canvas logo (mobile sidebar) */ [data-theme="light"] .elementor-element-65150db .elementor-widget-theme-site-logo img, [data-theme="light"] .elementor-element-65150db .elementor-widget-image img { filter: brightness(0) !important; } /* Off-canvas (mobile) menu — dark mode */ [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content { background-color: var(--vt-bg-sub) !important; border-left: 1px solid var(--vt-border) !important; } [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content .elementor-nav-menu .elementor-item, [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content .elementor-heading-title, [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content p, [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content a { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content .elementor-nav-menu .elementor-item:hover, [data-theme="dark"] .elementor-element-65150db .e-off-canvas__content .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--vt-primary) !important; } [data-theme="dark"] .elementor-element-65150db .elementor-widget-theme-site-logo img, [data-theme="dark"] .elementor-element-65150db .elementor-widget-image img { filter: brightness(1) !important; } [data-theme="dark"] .elementor-element-65150db .elementor-divider-separator { border-color: var(--vt-border) !important; } [data-theme="dark"] .elementor-element-65150db .elementor-social-icon { background-color: transparent !important; border: 1px solid var(--vt-border) !important; } [data-theme="dark"] .elementor-element-65150db .elementor-social-icon svg { fill: var(--vt-muted) !important; } /* ───────────────────────────────────────────────────────────────────────────── 6. FOOTER ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .site-footer, [data-theme="dark"] #colophon, [data-theme="dark"] .elementor-location-footer { background: hsl(240, 12%, 6%) !important; border-top: 1px solid var(--vt-border) !important; } [data-theme="dark"] .elementor-location-footer .elementor-heading-title, [data-theme="dark"] .elementor-location-footer h2, [data-theme="dark"] .elementor-location-footer h3, [data-theme="dark"] .elementor-location-footer h4 { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-location-footer a, [data-theme="dark"] .site-footer a, [data-theme="dark"] #colophon a { color: var(--vt-muted) !important; transition: color 0.2s; } [data-theme="dark"] .elementor-location-footer a:hover, [data-theme="dark"] .site-footer a:hover { color: var(--vt-primary) !important; } [data-theme="dark"] .elementor-location-footer .elementor-divider-separator, [data-theme="dark"] .site-footer hr { border-color: var(--vt-border) !important; opacity: 1 !important; } [data-theme="dark"] .elementor-location-footer .elementor-social-icon { background: var(--vt-tag-bg) !important; border: 1px solid var(--vt-border) !important; transition: background 0.2s, border-color 0.2s !important; } [data-theme="dark"] .elementor-location-footer .elementor-social-icon:hover { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; } [data-theme="dark"] .elementor-location-footer .elementor-social-icon i { color: var(--vt-muted) !important; } [data-theme="dark"] .elementor-location-footer .elementor-social-icon:hover i { color: #050608 !important; } /* ───────────────────────────────────────────────────────────────────────────── 7. FORMS & INPUTS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--vt-bg-sub) !important; border: 1px solid var(--vt-border) !important; color: var(--vt-fg) !important; border-radius: var(--vt-radius) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--vt-muted) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--vt-primary) !important; outline: none !important; box-shadow: 0 0 0 3px var(--vt-accent-glow) !important; } [data-theme="dark"] .elementor-field-label, [data-theme="dark"] .gfield_label, [data-theme="dark"] .wpcf7-form label { color: var(--vt-muted) !important; font-weight: 500 !important; } [data-theme="dark"] input[type="submit"], [data-theme="dark"] button[type="submit"], [data-theme="dark"] .elementor-form .elementor-button[type="submit"] { background: var(--vt-primary) !important; color: #050608 !important; border: none !important; border-radius: var(--vt-radius) !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 0 28px -6px var(--vt-accent-glow) !important; transition: opacity 0.2s !important; } [data-theme="dark"] input[type="submit"]:hover, [data-theme="dark"] button[type="submit"]:hover { opacity: 0.88 !important; } /* ───────────────────────────────────────────────────────────────────────────── 8. ELEMENTOR BUTTONS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .elementor-button, [data-theme="dark"] .elementor-button-wrapper .elementor-button { background: var(--vt-primary) !important; color: #050608 !important; border-color: var(--vt-primary) !important; box-shadow: 0 0 32px -8px var(--vt-accent-glow) !important; transition: opacity 0.2s !important; } [data-theme="dark"] .elementor-button:hover, [data-theme="dark"] .elementor-button-wrapper .elementor-button:hover { opacity: 0.88 !important; color: #050608 !important; } [data-theme="dark"] .elementor-button:focus-visible { outline: 2px solid var(--vt-primary) !important; outline-offset: 3px !important; } /* ───────────────────────────────────────────────────────────────────────────── 8b. BUTTONS — Light mode ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-button, [data-theme="light"] .elementor-button-wrapper .elementor-button { background: var(--vt-primary) !important; color: #ffffff !important; border-color: var(--vt-primary) !important; transition: box-shadow 0.2s, opacity 0.2s !important; } [data-theme="light"] .elementor-button:hover, [data-theme="light"] .elementor-button-wrapper .elementor-button:hover { opacity: 0.88 !important; color: #ffffff !important; box-shadow: 0 8px 25px -5px rgba(100, 64, 251, 0.4) !important; } [data-theme="light"] .elementor-button:focus-visible { outline: 2px solid var(--vt-primary) !important; outline-offset: 3px !important; } [data-theme="light"] input[type="submit"], [data-theme="light"] button[type="submit"], [data-theme="light"] .elementor-form .elementor-button[type="submit"] { background: var(--vt-primary) !important; color: #ffffff !important; border: none !important; font-weight: 600 !important; cursor: pointer !important; transition: opacity 0.2s !important; } /* ───────────────────────────────────────────────────────────────────────────── 9. BLOG LOOP GRID CARDS (archive + category pages) ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .elementor-loop-container .e-loop-item { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; overflow: hidden !important; position: relative !important; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1) !important; } /* Green→purple gradient accent bar across the top of each card */ [data-theme="dark"] .elementor-loop-container .e-loop-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vt-primary), var(--vt-secondary)); z-index: 10; pointer-events: none; } [data-theme="dark"] .elementor-loop-container .e-loop-item:hover { border-color: var(--vt-border-hover) !important; box-shadow: var(--vt-shadow-hover) !important; transform: translateY(-2px) !important; } [data-theme="dark"] .elementor-loop-container .e-loop-item .elementor-element { background: transparent !important; } [data-theme="dark"] .elementor-loop-container .elementor-heading-title, [data-theme="dark"] .elementor-loop-container .elementor-heading-title a { color: var(--vt-fg) !important; transition: color 0.2s !important; } [data-theme="dark"] .elementor-loop-container .e-loop-item:hover .elementor-heading-title, [data-theme="dark"] .elementor-loop-container .e-loop-item:hover .elementor-heading-title a { color: var(--vt-primary) !important; } [data-theme="dark"] .elementor-loop-container .elementor-post-info__item, [data-theme="dark"] .elementor-loop-container .elementor-post-info__item a { color: var(--vt-muted) !important; } [data-theme="dark"] .elementor-loop-container .elementor-post-info__terms-list a { color: var(--vt-primary) !important; } [data-theme="dark"] .elementor-loop-container .elementor-widget-text-editor p, [data-theme="dark"] .elementor-loop-container .elementor-post__excerpt p { color: var(--vt-muted) !important; } [data-theme="dark"] .elementor-loop-container .elementor-widget-image, [data-theme="dark"] .elementor-loop-container .elementor-post__thumbnail { overflow: hidden !important; } [data-theme="dark"] .elementor-loop-container .elementor-widget-image img, [data-theme="dark"] .elementor-loop-container .elementor-post__thumbnail img { transition: transform 0.4s ease !important; } [data-theme="dark"] .elementor-loop-container .e-loop-item:hover img { transform: scale(1.04) !important; } /* Blog archive filter buttons (.e-filter-item) */ [data-theme="dark"] .e-filter-item { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; color: var(--vt-muted) !important; border-radius: 9999px !important; padding: 0.35rem 1rem !important; cursor: pointer !important; transition: all 0.2s !important; } [data-theme="dark"] .e-filter-item:hover, [data-theme="dark"] .e-filter-item[aria-pressed="true"] { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: #050608 !important; } /* ───────────────────────────────────────────────────────────────────────────── 9b. BLOG / AI TOOLS LOOP CARDS — Light mode ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-loop-container .e-loop-item { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; box-shadow: var(--vt-shadow-card) !important; overflow: hidden !important; position: relative !important; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1) !important; } /* Purple accent bar across the top of each card */ [data-theme="light"] .elementor-loop-container .e-loop-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vt-primary), hsl(270, 55%, 65%)); z-index: 10; pointer-events: none; } [data-theme="light"] .elementor-loop-container .e-loop-item:hover { border-color: var(--vt-primary) !important; box-shadow: var(--vt-shadow-hover) !important; transform: translateY(-2px) !important; } [data-theme="light"] .elementor-loop-container .e-loop-item .elementor-element { background: transparent !important; } [data-theme="light"] .elementor-loop-container .elementor-heading-title, [data-theme="light"] .elementor-loop-container .elementor-heading-title a { color: var(--vt-secondary) !important; transition: color 0.2s !important; } [data-theme="light"] .elementor-loop-container .e-loop-item:hover .elementor-heading-title, [data-theme="light"] .elementor-loop-container .e-loop-item:hover .elementor-heading-title a { color: var(--vt-primary) !important; } [data-theme="light"] .elementor-loop-container .elementor-widget-image img, [data-theme="light"] .elementor-loop-container .elementor-post__thumbnail img { transition: transform 0.4s ease !important; } [data-theme="light"] .elementor-loop-container .e-loop-item:hover img { transform: scale(1.03) !important; } /* ───────────────────────────────────────────────────────────────────────────── 10. SINGLE BLOG POST ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .single-post .entry-title { color: var(--vt-fg) !important; letter-spacing: -0.03em !important; } [data-theme="dark"] .single-post .entry-content h1, [data-theme="dark"] .single-post .entry-content h2, [data-theme="dark"] .single-post .entry-content h3, [data-theme="dark"] .single-post .entry-content h4 { color: var(--vt-fg) !important; } [data-theme="dark"] .single-post .entry-content p, [data-theme="dark"] .single-post .entry-content li { color: #F1F5F9 !important; line-height: 1.8 !important; } [data-theme="dark"] .single-post .entry-meta, [data-theme="dark"] .single-post .entry-meta a, [data-theme="dark"] .single-post .posted-on, [data-theme="dark"] .single-post .byline { color: var(--vt-muted) !important; font-size: 0.875rem !important; } [data-theme="dark"] .single-post .entry-meta a:hover { color: var(--vt-primary) !important; } [data-theme="dark"] .single-post .cat-links a, [data-theme="dark"] .single-post .tags-links a { background: hsla(145, 80%, 50%, 0.06) !important; border: 1px solid hsla(145, 80%, 50%, 0.2) !important; color: var(--vt-primary) !important; border-radius: 9999px !important; padding: 0.2rem 0.65rem !important; font-size: 0.75rem !important; font-weight: 600 !important; text-decoration: none !important; } [data-theme="dark"] .comment-body { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; padding: 1.25rem !important; } [data-theme="dark"] .comment .fn { color: var(--vt-fg) !important; } [data-theme="dark"] .comment-content p { color: #F1F5F9 !important; } [data-theme="dark"] #comments { border-top: 1px solid var(--vt-border) !important; } /* ───────────────────────────────────────────────────────────────────────────── 11. AI TOOLS PAGE — Filter Toolbar Note: Plugin card styles (mini/mid) are handled by .style-dark class which activates the plugin's own built-in dark CSS in ai-tools-card-styles.css ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .v-toolbar-container { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: 1rem !important; box-shadow: 0 4px 48px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .v-sort-control .jet-sorting-list, [data-theme="dark"] .v-sort-control .jet-radio-list { background: var(--vt-bg-sub) !important; } [data-theme="dark"] .v-sort-control .jet-sorting-item label, [data-theme="dark"] .v-sort-control .jet-radio-list__button { color: var(--vt-muted) !important; background: transparent !important; } [data-theme="dark"] .v-sort-control .jet-sorting-item.is-checked label, [data-theme="dark"] .v-sort-control .jet-radio-list__input:checked + .jet-radio-list__button { background: var(--vt-primary) !important; color: #050608 !important; box-shadow: 0 0 18px -4px var(--vt-accent-glow) !important; } [data-theme="dark"] .v-sort-control .jet-sorting-item:hover label, [data-theme="dark"] .v-sort-control .jet-radio-list__item:hover .jet-radio-list__button { background: hsl(240, 10%, 16%) !important; color: var(--vt-fg) !important; box-shadow: none !important; } [data-theme="dark"] .v-verified-filter { border-right-color: var(--vt-border) !important; } [data-theme="dark"] .v-verified-filter .jet-checkboxes-list__button { background: var(--vt-bg-sub) !important; border-color: var(--vt-border) !important; color: var(--vt-muted) !important; } [data-theme="dark"] .v-verified-filter .jet-checkboxes-list__button:hover { border-color: var(--vt-primary) !important; color: var(--vt-fg) !important; } [data-theme="dark"] .v-verified-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button { background: hsla(145, 80%, 50%, 0.08) !important; border-color: hsla(145, 80%, 50%, 0.35) !important; color: var(--vt-primary) !important; } /* Pricing filter: FREE */ [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__item:nth-child(1) .jet-checkboxes-list__button, [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__row:nth-child(1) .jet-checkboxes-list__button { background: hsla(145,80%,50%,0.06) !important; border-color: hsla(145,80%,50%,0.2) !important; color: var(--vt-primary) !important; } [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__item:nth-child(1) input:checked + .jet-checkboxes-list__button, [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__row:nth-child(1) input:checked + .jet-checkboxes-list__button { background: var(--vt-primary) !important; color: #050608 !important; border-color: var(--vt-primary) !important; } /* Pricing filter: FREEMIUM */ [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__item:nth-child(2) .jet-checkboxes-list__button, [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__row:nth-child(2) .jet-checkboxes-list__button { background: hsla(250,60%,55%,0.06) !important; border-color: hsla(250,60%,55%,0.2) !important; color: var(--vt-secondary) !important; } [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__item:nth-child(2) input:checked + .jet-checkboxes-list__button, [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__row:nth-child(2) input:checked + .jet-checkboxes-list__button { background: var(--vt-secondary) !important; color: #fff !important; border-color: var(--vt-secondary) !important; } /* Pricing filter: PAID */ [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__item:nth-child(3) .jet-checkboxes-list__button, [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__row:nth-child(3) .jet-checkboxes-list__button { background: hsla(220,80%,60%,0.06) !important; border-color: hsla(220,80%,60%,0.2) !important; color: hsl(220,80%,72%) !important; } [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__item:nth-child(3) input:checked + .jet-checkboxes-list__button, [data-theme="dark"] .v-pricing-filter .jet-checkboxes-list__row:nth-child(3) input:checked + .jet-checkboxes-list__button { background: hsl(220,70%,58%) !important; color: #fff !important; border-color: hsl(220,70%,58%) !important; } /* JSF filter pills in widget */ [data-theme="dark"] .ai-tools-display-widget .jet-radio-list__button { background: var(--vt-bg-sub) !important; border-color: var(--vt-border) !important; color: var(--vt-muted) !important; } [data-theme="dark"] .ai-tools-display-widget .jet-radio-list__input:checked + .jet-radio-list__button, [data-theme="dark"] .ai-tools-display-widget .jet-radio-list__button:hover { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: #050608 !important; } /* Carousel arrows */ [data-theme="dark"] .ai-tools-display-area.carousel .slick-arrow { background: var(--vt-card) !important; border-color: var(--vt-border) !important; } [data-theme="dark"] .ai-tools-display-area.carousel .slick-arrow::before { color: var(--vt-fg) !important; } [data-theme="dark"] .ai-tools-display-area.carousel .slick-arrow:hover { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; } [data-theme="dark"] .ai-tools-display-area.carousel .slick-arrow:hover::before { color: #050608 !important; } /* Loading spinner */ [data-theme="dark"] .jsf-grid.loading::after, [data-theme="dark"] .ai-tools-display-area.grid.loading::after { border-color: var(--vt-border) !important; border-top-color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 12. PAGINATION ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .page-numbers a, [data-theme="dark"] .page-numbers span { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; color: var(--vt-muted) !important; border-radius: var(--vt-radius) !important; transition: all 0.2s !important; } [data-theme="dark"] .page-numbers a:hover { border-color: var(--vt-primary) !important; color: var(--vt-primary) !important; } [data-theme="dark"] .page-numbers.current { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: #050608 !important; } [data-theme="dark"] .ai-tools-pagination-button, [data-theme="dark"] .jet-filters-pagination__link { background: var(--vt-card) !important; border-color: var(--vt-border) !important; color: var(--vt-muted) !important; } [data-theme="dark"] .ai-tools-pagination-button:hover, [data-theme="dark"] .jet-filters-pagination__link:hover, [data-theme="dark"] .jet-filters-pagination__current { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: #050608 !important; } /* ───────────────────────────────────────────────────────────────────────────── 13. SIDEBAR WIDGETS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .widget { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; padding: 1.25rem !important; margin-bottom: 1.5rem !important; } [data-theme="dark"] .widget-title { color: var(--vt-fg) !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid var(--vt-border) !important; margin-bottom: 1rem !important; } [data-theme="dark"] .widget li { border-bottom: 1px solid hsl(240,8%,13%) !important; padding: 0.4rem 0 !important; } [data-theme="dark"] .widget li:last-child { border-bottom: none !important; } [data-theme="dark"] .widget li a { color: var(--vt-muted) !important; } [data-theme="dark"] .widget li a:hover { color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 14. BREADCRUMBS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .rank-math-breadcrumb p, [data-theme="dark"] .rank-math-breadcrumb p a { color: var(--vt-muted) !important; } [data-theme="dark"] .rank-math-breadcrumb p a:hover { color: var(--vt-primary) !important; } [data-theme="dark"] .rank-math-breadcrumb p > span:last-child { color: var(--vt-fg) !important; } [data-theme="dark"] .rank-math-breadcrumb .separator { color: var(--vt-border) !important; } /* ───────────────────────────────────────────────────────────────────────────── 15. ELEMENTOR ICON BOX + IMAGE BOX ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .elementor-icon-box-wrapper, [data-theme="dark"] .elementor-image-box-wrapper { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; padding: 1.5rem !important; transition: border-color 0.25s, box-shadow 0.25s !important; } [data-theme="dark"] .elementor-icon-box-wrapper:hover, [data-theme="dark"] .elementor-image-box-wrapper:hover { border-color: var(--vt-border-hover) !important; box-shadow: var(--vt-shadow-hover) !important; } [data-theme="dark"] .elementor-icon-box-title a, [data-theme="dark"] .elementor-icon-box-title, [data-theme="dark"] .elementor-image-box-title { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-icon-box-description, [data-theme="dark"] .elementor-image-box-description { color: var(--vt-muted) !important; } [data-theme="dark"] .elementor-icon-box-icon .elementor-icon { color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 16. ACCORDION & TABS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .elementor-accordion-item { background: var(--vt-card) !important; border-color: var(--vt-border) !important; border-radius: var(--vt-radius) !important; margin-bottom: 0.5rem !important; overflow: hidden !important; } [data-theme="dark"] .elementor-accordion-item .elementor-tab-title { background: transparent !important; color: var(--vt-fg) !important; border: none !important; border-radius: 0 !important; } [data-theme="dark"] .elementor-accordion-item .elementor-tab-title.elementor-active { color: var(--vt-primary) !important; } [data-theme="dark"] .elementor-accordion-item .elementor-tab-content { background: transparent !important; color: var(--vt-muted) !important; border-top: 1px solid var(--vt-border) !important; } [data-theme="light"] .elementor-accordion-icon { color: var(--vt-secondary) !important; } [data-theme="dark"] .elementor-tab-title { background: var(--vt-bg-sub) !important; color: var(--vt-muted) !important; border-color: var(--vt-border) !important; transition: color 0.2s !important; } [data-theme="dark"] .elementor-tab-title.elementor-active, [data-theme="dark"] .elementor-tab-title:hover { color: var(--vt-primary) !important; background: var(--vt-card) !important; } [data-theme="dark"] .elementor-tab-content, [data-theme="dark"] .elementor-tabs-content-wrapper { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; color: var(--vt-muted) !important; } /* ───────────────────────────────────────────────────────────────────────────── 17. PRICE TABLE (List Your Tool page) ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .elementor-price-table__wrapper { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: 1.25rem !important; overflow: hidden !important; transition: border-color 0.25s, box-shadow 0.25s !important; } [data-theme="dark"] .elementor-price-table__wrapper:hover { border-color: var(--vt-border-hover) !important; box-shadow: var(--vt-shadow-hover) !important; } [data-theme="dark"] .elementor-price-table__header { background: var(--vt-bg-sub) !important; border-bottom: 1px solid var(--vt-border) !important; } [data-theme="dark"] .elementor-price-table__title { color: var(--vt-primary) !important; font-weight: 700 !important; } [data-theme="dark"] .elementor-price-table__integer-part, [data-theme="dark"] .elementor-price-table__currency, [data-theme="dark"] .elementor-price-table__period { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-price-table__feature-inner, [data-theme="dark"] .elementor-price-table__features-list .elementor-price-table__feature-inner, [data-theme="dark"] .elementor-price-table__features-list li, [data-theme="dark"] .elementor-price-table__features-list span { color: var(--vt-fg) !important; } [data-theme="dark"] .elementor-price-table__features-list li { border-bottom-color: var(--vt-border) !important; } [data-theme="dark"] .elementor-ribbon-inner { background: var(--vt-primary) !important; color: #050608 !important; font-weight: 700 !important; } /* ───────────────────────────────────────────────────────────────────────────── 18. TAXONOMY / CATEGORY ARCHIVE PAGES ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .vantaige-ai-tools-type-content { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; transition: border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s !important; } [data-theme="dark"] .vantaige-ai-tools-type-content:hover { background: var(--vt-bg-sub) !important; border-color: var(--vt-border-hover) !important; box-shadow: var(--vt-shadow-hover) !important; transform: translateY(-4px) !important; } [data-theme="dark"] .vantaige-ai-tools-type-icon { background: var(--vt-logo-bg) !important; border: 1px solid var(--vt-border) !important; } [data-theme="dark"] .vantaige-ai-tools-type-icon i { color: var(--vt-primary) !important; } [data-theme="dark"] .vantaige-ai-tools-type-title { color: var(--vt-fg) !important; } [data-theme="dark"] .vantaige-ai-tools-type-count { color: var(--vt-muted) !important; } /* ───────────────────────────────────────────────────────────────────────────── 19. THEME TOGGLE BUTTON ───────────────────────────────────────────────────────────────────────────── */ #vt-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vt-border); background: transparent; cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.2s, border-color 0.2s; color: inherit; } #vt-theme-toggle:hover { background: var(--vt-tag-bg); border-color: var(--vt-primary); } #vt-theme-toggle:focus-visible { outline: 2px solid var(--vt-primary); outline-offset: 3px; } #vt-theme-toggle svg { width: 17px; height: 17px; display: block; } /* Show sun in dark mode, moon in light mode */ [data-theme="dark"] #vt-theme-toggle .icon-moon { display: none; } [data-theme="dark"] #vt-theme-toggle .icon-sun { display: block; } [data-theme="light"] #vt-theme-toggle .icon-moon { display: block; } [data-theme="light"] #vt-theme-toggle .icon-sun { display: none; } /* ───────────────────────────────────────────────────────────────────────────── 20. RESPONSIVE ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { [data-theme="dark"] .v-toolbar-container { flex-direction: column !important; align-items: stretch !important; width: 95% !important; } [data-theme="dark"] .v-verified-filter { border-right: none !important; border-bottom: 1px solid var(--vt-border) !important; padding-right: 0 !important; padding-bottom: 0.75rem !important; margin-right: 0 !important; } } @media (prefers-reduced-motion: reduce) { [data-theme="dark"] * { transition-duration: 0.01ms !important; } } /* ============================================================================= LIGHT MODE — Content Depth, Visual Polish & Component Overrides Version: 2.1 | Added: 2026-03-18 ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── 21. LIGHT MODE — Icon box & Image box ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-icon-box-wrapper, [data-theme="light"] .elementor-image-box-wrapper { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; box-shadow: var(--vt-shadow-card) !important; transition: border-color 0.25s, box-shadow 0.25s !important; } [data-theme="light"] .elementor-icon-box-wrapper:hover, [data-theme="light"] .elementor-image-box-wrapper:hover { border-color: var(--vt-primary) !important; box-shadow: var(--vt-shadow-hover) !important; } [data-theme="light"] .elementor-icon-box-icon .elementor-icon { color: var(--vt-primary) !important; } [data-theme="light"] .elementor-icon-box-title a, [data-theme="light"] .elementor-icon-box-title, [data-theme="light"] .elementor-image-box-title { color: var(--vt-secondary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 22. LIGHT MODE — Price tables ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-price-table__wrapper { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: 1.25rem !important; box-shadow: var(--vt-shadow-card) !important; overflow: hidden !important; transition: border-color 0.25s, box-shadow 0.25s !important; } [data-theme="light"] .elementor-price-table__wrapper:hover { border-color: var(--vt-primary) !important; box-shadow: var(--vt-shadow-hover) !important; } [data-theme="light"] .elementor-price-table__title { color: var(--vt-primary) !important; font-weight: 700 !important; } [data-theme="light"] .elementor-ribbon-inner { background: var(--vt-primary) !important; color: #ffffff !important; font-weight: 700 !important; } /* ───────────────────────────────────────────────────────────────────────────── 23. LIGHT MODE — AI Tools toolbar + filter pills ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .v-toolbar-container { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: 1rem !important; box-shadow: var(--vt-shadow-card) !important; } /* ───────────────────────────────────────────────────────────────────────────── 24. LIGHT MODE — Taxonomy / category archive cards ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .vantaige-ai-tools-type-content { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; box-shadow: var(--vt-shadow-card) !important; transition: border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s !important; } [data-theme="light"] .vantaige-ai-tools-type-content:hover { border-color: var(--vt-primary) !important; box-shadow: var(--vt-shadow-hover) !important; transform: translateY(-4px) !important; } [data-theme="light"] .vantaige-ai-tools-type-title { color: var(--vt-secondary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 25. LIGHT MODE — Pagination ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .page-numbers.current { background: var(--vt-primary) !important; border-color: var(--vt-primary) !important; color: #ffffff !important; } [data-theme="light"] .page-numbers a:hover { border-color: var(--vt-primary) !important; color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 26. LIGHT MODE — Forms & inputs ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), [data-theme="light"] textarea, [data-theme="light"] select { background: #ffffff !important; border: 1px solid var(--vt-border) !important; color: var(--vt-fg) !important; border-radius: var(--vt-radius) !important; transition: border-color 0.2s, box-shadow 0.2s !important; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: var(--vt-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(100, 64, 251, 0.12) !important; } /* ───────────────────────────────────────────────────────────────────────────── 27. LIGHT MODE — Sidebar widgets ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .widget { background: var(--vt-card) !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; box-shadow: var(--vt-shadow-card) !important; padding: 1.25rem !important; margin-bottom: 1.5rem !important; } /* ───────────────────────────────────────────────────────────────────────────── 28. LIGHT MODE — Accordion & Tabs ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-accordion-item { border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; margin-bottom: 0.5rem !important; overflow: hidden !important; box-shadow: var(--vt-shadow-card) !important; } [data-theme="light"] .elementor-accordion-item .elementor-tab-title.elementor-active { color: var(--vt-primary) !important; } [data-theme="light"] .elementor-accordion-icon { color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 29. LIGHT MODE — Dropdown nav menus ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-nav-menu--dropdown, [data-theme="light"] .elementor-nav-menu__container.elementor-nav-menu--dropdown { background: #ffffff !important; border: 1px solid var(--vt-border) !important; border-radius: var(--vt-radius) !important; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15) !important; } [data-theme="light"] .elementor-nav-menu--dropdown .menu-item a.elementor-item { color: var(--vt-secondary) !important; border-bottom: 1px solid var(--vt-border) !important; } [data-theme="light"] .elementor-nav-menu--dropdown .menu-item a.elementor-item:hover { color: var(--vt-primary) !important; background: var(--vt-bg-sub) !important; } /* ───────────────────────────────────────────────────────────────────────────── 30. RESPONSIVE — Light mode adjustments ───────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-theme="light"] * { transition-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────────────────────── 31. TAXONOMY CARDS — Cancel Section 9/9b border overlay on type/usage cards Section 9/9b adds border + ::before gradient bar to ALL .e-loop-item. Taxonomy cards (.vantaige-type-card / .vantaige-usage-card) already have their own per-term colored border via Elementor CSS var(--v-accent), so remove the added overlay for both dark and light modes. ───────────────────────────────────────────────────────────────────────────── */ [data-theme] .elementor-loop-container .e-loop-item:has(.vantaige-type-card), [data-theme] .elementor-loop-container .e-loop-item:has(.vantaige-usage-card) { border: none !important; box-shadow: none !important; background: transparent !important; } [data-theme] .elementor-loop-container .e-loop-item:has(.vantaige-type-card)::before, [data-theme] .elementor-loop-container .e-loop-item:has(.vantaige-usage-card)::before { display: none !important; content: none !important; } [data-theme] .elementor-loop-container .e-loop-item:has(.vantaige-type-card):hover, [data-theme] .elementor-loop-container .e-loop-item:has(.vantaige-usage-card):hover { border: none !important; box-shadow: none !important; transform: none !important; background: transparent !important; } /* ───────────────────────────────────────────────────────────────────────────── 32. LIGHT MODE — Header active nav item contrast fix Elementor may set background-color on active items; ensure transparent bg so the purple text (#6440FB) is visible on the white header. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .elementor-element-d21be19 .elementor-nav-menu--main .elementor-item.elementor-item-active, [data-theme="light"] .elementor-element-38a27b2 .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #ffffff !important; background-color: var(--vt-primary) !important; background: var(--vt-primary) !important; border-radius: 0.375rem !important; } /* ───────────────────────────────────────────────────────────────────────────── 33. NESTED TABS — Rounded, underline-free, coloured active state - Tab titles: border-radius (no rectangular corners) - Underline removed: no border-bottom on heading bar or individual titles - Active tab: background highlight only (no underline indicator) - Light mode active: purple bg; hover → subtle purple tint - Dark mode active: purple bg; hover → green tint (matches dark hover system) ───────────────────────────────────────────────────────────────────────────── */ /* Base: round all tab titles + strip underlines (both modes) */ [data-theme] .e-n-tab-title { border-radius: 0.5rem !important; border-bottom: none !important; border-bottom-width: 0 !important; text-decoration: none !important; } /* Strip the bottom border line from the entire tabs heading bar */ [data-theme] .e-n-tabs-heading { border-bottom: none !important; border-bottom-width: 0 !important; } /* ── LIGHT MODE — active: purple bg ── */ [data-theme="light"] .e-n-tab-title[aria-selected="true"], [data-theme="light"] .e-n-tab-title.e-active { background: var(--vt-primary) !important; color: #ffffff !important; border-bottom: none !important; } [data-theme="light"] .e-n-tab-title[aria-selected="true"] *, [data-theme="light"] .e-n-tab-title.e-active * { color: #ffffff !important; fill: #ffffff !important; } /* Light mode inactive hover: subtle purple tint */ [data-theme="light"] .e-n-tab-title:not([aria-selected="true"]):hover, [data-theme="light"] .e-n-tab-title:not(.e-active):hover { background: hsla(240, 80%, 60%, 0.1) !important; color: var(--vt-primary) !important; } /* ── DARK MODE — active: purple bg ── */ [data-theme="dark"] .e-n-tab-title[aria-selected="true"], [data-theme="dark"] .e-n-tab-title.e-active { background: var(--vt-secondary) !important; color: #ffffff !important; border-bottom: none !important; } [data-theme="dark"] .e-n-tab-title[aria-selected="true"] *, [data-theme="dark"] .e-n-tab-title.e-active * { color: #ffffff !important; fill: #ffffff !important; } /* Dark mode inactive hover: green tint (matches dark card hover system) */ [data-theme="dark"] .e-n-tab-title:not([aria-selected="true"]):hover, [data-theme="dark"] .e-n-tab-title:not(.e-active):hover { background: hsla(145, 80%, 50%, 0.12) !important; color: var(--vt-fg) !important; } /* ───────────────────────────────────────────────────────────────────────────── 34. DARK MODE — Blog article body text contrast Section 10 uses var(--vt-muted) = hsl(240,5%,65%) which is too dim. Override to #F1F5F9 (near-white) for paragraphs, lists, inline text. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .single-post .entry-content p, [data-theme="dark"] .single-post .entry-content li, [data-theme="dark"] .single-post .entry-content span, [data-theme="dark"] .single-post .entry-content td, [data-theme="dark"] .single-post .entry-content th, [data-theme="dark"] .elementor-widget-theme-post-content p, [data-theme="dark"] .elementor-widget-theme-post-content li, [data-theme="dark"] .elementor-widget-theme-post-content span, [data-theme="dark"] .elementor-widget-theme-post-content .wp-block-list li, [data-theme="dark"] .post-content p, [data-theme="dark"] .post-content li { color: #F1F5F9 !important; line-height: 1.8 !important; } /* Keep anchor links visually distinct inside blog post content */ [data-theme="dark"] .single-post .entry-content a, [data-theme="dark"] .elementor-widget-theme-post-content a { color: var(--vt-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── 35. DARK MODE — AI Tools single page white backgrounds / white circle elementor-element-1d1fd743 .elementor-widget-container has background:#FFF injected by Elementor CSS class — make transparent in dark mode. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .elementor-element-1d1fd743 .elementor-widget-container { background-color: transparent !important; background: transparent !important; } /* Also neutralise any other white widget containers on the single tool page */ [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color:#fff"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color: #fff"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color:#FFF"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color: #FFF"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color:#ffffff"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color: #ffffff"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color:#FFFFFF"], [data-theme="dark"] .single-ai_tool .elementor-widget-container[style*="background-color: #FFFFFF"] { background-color: transparent !important; background: transparent !important; } /* ───────────────────────────────────────────────────────────────────────────── 36. DARK MODE — Homepage primary buttons text contrast + Subscribe hover [data-theme="dark"] a { color: var(--vt-primary) } (spec 0,1,1) beats .vhp-btn--primary { color: #050608 } (spec 0,1,0) → text disappears. Restore correct dark text on green button, and fix Subscribe hover state. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] .vhp-btn--primary, [data-theme="dark"] a.vhp-btn--primary, [data-theme="dark"] button.vhp-btn--primary { color: #050608 !important; } [data-theme="dark"] .vhp-btn--primary:hover, [data-theme="dark"] a.vhp-btn--primary:hover, [data-theme="dark"] button.vhp-btn--primary:hover { color: #050608 !important; background-color: var(--vhp-green, hsl(145, 80%, 50%)) !important; background: var(--vhp-green, hsl(145, 80%, 50%)) !important; opacity: 0.88; } /* ───────────────────────────────────────────────────────────────────────────── 37. DARK MODE — AI Tool single page: local CSS vars + white circle blob The Elementor template post-20526 injects :root vars (--vt-surface:#FFF etc.) and a .vt-main-wrapper::before radial-gradient blob. Override both in dark mode. ───────────────────────────────────────────────────────────────────────────── */ /* Override the template's local :root variables that escape our dark tokens */ [data-theme="dark"] { --vt-surface: hsl(240, 12%, 10%); --vt-text-main: hsl(0, 0%, 95%); --vt-text-muted: hsl(240, 5%, 65%); --vt-border: hsl(240, 8%, 18%); } /* The 800×800px lavender radial-gradient orb: tone down to subtle purple glow */ [data-theme="dark"] .vt-main-wrapper::before { background: radial-gradient(circle, hsla(250, 60%, 55%, 0.08) 0%, transparent 70%) !important; } /* MacBook mockup title bar: replace light gray with dark */ [data-theme="dark"] .vt-macbook::before { background: hsl(240, 12%, 12%) !important; background-image: radial-gradient(#FF5F56 50%, transparent 55%), radial-gradient(#FFBD2E 50%, transparent 55%), radial-gradient(#27C93F 50%, transparent 55%) !important; background-size: 10px 10px !important; background-repeat: no-repeat !important; background-position: 12px center, 28px center, 44px center !important; border-color: hsl(240, 8%, 20%) !important; } /* Single AI tool page — post-info chips (use --vt-surface which is now dark) */ [data-theme="dark"] .single-ai_tool .elementor-widget-post-info .elementor-icon-list-item { background: var(--vt-card) !important; border-color: var(--vt-border) !important; } [data-theme="dark"] .single-ai_tool .elementor-widget-post-info .elementor-icon-list-text, [data-theme="dark"] .single-ai_tool .elementor-widget-post-info .elementor-icon-list-text a { color: var(--vt-muted) !important; } /* vt-tabs styling — inherit rounded/underline-free styles from Section 33 */ [data-theme="dark"] .vt-tabs .e-n-tab-title { color: var(--vt-muted) !important; } /* ───────────────────────────────────────────────────────────────────────────── 38. AI TOOL SINGLE — Features grid + FAQ dark mode overrides These classes are injected by the inline