/* ============================================================================= 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 4px 6px -1px rgba(0, 0, 0, 0.05); --vt-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.10); /* 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 — off in light mode */ --vt-grid-line: transparent; } [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%, 55%); /* 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; } } /* ───────────────────────────────────────────────────────────────────────────── 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; } /* ───────────────────────────────────────────────────────────────────────────── 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; } /* ───────────────────────────────────────────────────────────────────────────── 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; } /* ───────────────────────────────────────────────────────────────────────────── 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: var(--vt-muted) !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: var(--vt-muted) !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="dark"] .elementor-accordion-icon { color: var(--vt-primary) !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 { color: var(--vt-muted) !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; } }