/* ══════════════════════════════════════════════════════════ NEUVEX — DARK MODE Activates when Base dark hex: #00275a (navy) instead of black. Load this file LAST, after neuvex-style.css and all section stylesheets (newengine / newtestimonials / cookieconsent / offerchip). ══════════════════════════════════════════════════════════ */ /* --------------------------------------------------------- 1. CORE TOKENS neuvex-style.css drives most of the site off these :root variables, so redefining them re-themes the nav, hero, buttons, cards, FAQ and footer automatically. --------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #00275a; --surface: #0a3670; --text: #eef3fb; --text-muted: #b7c6e0; --text-dim: #8ea1c4; --accent: #bae8f8; /* kept light — reads as a bright chip on navy */ --accent-hover: #c2eb00; --border: rgba(255, 255, 255, 0.14); --border-light: rgba(255, 255, 255, 0.08); --white: #123f7e; /* "raised" surfaces that were pure white */ } /* --------------------------------------------------------- 2. THEME TOGGLE BUTTON --------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border, rgba(21,19,42,0.12)); background: transparent; color: var(--text, #111); cursor: pointer; margin-left: 8px; transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease; flex-shrink: 0; } .theme-toggle:hover { transform: translateY(-1px); background: rgba(0,0,0,0.04); } .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; } .theme-toggle .theme-toggle-sun { display: none; } :root[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; } :root[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); } /* --------------------------------------------------------- 3. FIXES FOR HARD-CODED (non-variable) COLORS Everything neuvex-style.css didn't put behind a variable. --------------------------------------------------------- */ /* Nav bar — translucent frost over --bg */ :root[data-theme="dark"] .nav { background: rgba(0, 39, 90, 0.8); } :root[data-theme="dark"] .activenav { color: #ffffff !important; } /* Ghost button — was hard-coded white / light-grey hover fill */ :root[data-theme="dark"] .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } :root[data-theme="dark"] .btn-ghost::before { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .btn-ghost:hover { box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); } /* Acid (primary) button — brighten the hover-fill navy so it still pops */ :root[data-theme="dark"] .btn-acid { color: #00193d; } :root[data-theme="dark"] .btn-acid::before { background: #1b83fe; } :root[data-theme="dark"] .btn-acid:hover { color: #fff; border: none; } /* Accent chip text ("ePortfolio" highlight, section badges) — the chip itself stays light cyan on purpose, so pin its text dark for contrast regardless of theme, rather than letting it inherit the now-light --text */ :root[data-theme="dark"] .accent-word, :root[data-theme="dark"] .accent-wordanywhere { color: #00193d; } /* Nav logo mark + footer logo mark use a hard-coded dark fill */ :root[data-theme="dark"] .nav-logo-mark svg path, :root[data-theme="dark"] .footer .nav-logo-mark svg path { fill: #eef3fb; } /* Speed metrics band — was a fixed light-cyan panel with black text */ :root[data-theme="dark"] .metrics { background: var(--surface); } :root[data-theme="dark"] .metrics-label, :root[data-theme="dark"] .metric-desc, :root[data-theme="dark"] .metric-number .metric-unit { color: var(--text-soft, var(--text-muted)); } :root[data-theme="dark"] .metric-number { color: var(--text); } :root[data-theme="dark"] .metric-number .metric-highlight { background: #123f7e; color: #eef3fb; } /* CTA banner — already dark charcoal; shift it to the navy family */ :root[data-theme="dark"] .cta-banner-inner { background: #001c47; } /* FAQ plus/minus icon: default state sits on --white (now navy), so its hard-coded #111 stroke needs to flip; once opened it sits on the light accent chip, where the dark stroke is already correct and untouched */ :root[data-theme="dark"] .faq-icon svg path { stroke: #eef3fb; } :root[data-theme="dark"] .faq-item.open .faq-icon svg path { stroke: #00193d; } /* Mobile nav panel background (uses var(--bg) already, kept here for clarity) */ :root[data-theme="dark"] .nav-links.open { border-top-color: var(--border); } /* --------------------------------------------------------- 4. PRICING (newuipricing — self-contained token set in neuvex-style.css: --npx-*) --------------------------------------------------------- */ :root[data-theme="dark"] .newuipricing-section { --npx-bg: #00275a; --npx-card: #0a3670; --npx-border: rgba(255, 255, 255, 0.14); --npx-heading: #eef3fb; --npx-body: #b7c6e0; --npx-muted: #8ea1c4; --npx-navy: #7fb0ff; --npx-navy-dark: #001c47; --npx-shadow: rgba(0, 0, 0, 0.35); --npx-shadow-md: rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .newuipricing-toggle-switch { background: #123f7e; } :root[data-theme="dark"] .newuipricing-toggle-badge { background: rgba(127, 176, 255, 0.14); border-color: rgba(127, 176, 255, 0.3); } :root[data-theme="dark"] .newuipricing-check { background: rgba(127, 176, 255, 0.14); border-color: rgba(127, 176, 255, 0.3); } :root[data-theme="dark"] .newuipricing-cta { color: #eef3fb; } :root[data-theme="dark"] .newuipricing-cta:hover { background: rgba(127, 176, 255, 0.1); } :root[data-theme="dark"] .newuipricing-fee-chip { color: #cfe0ff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); } /* --------------------------------------------------------- 5. NEWENGINE (bento grid) — self-contained token set --------------------------------------------------------- */ :root[data-theme="dark"] .newengine { --ink: #eef3fb; --ink-soft: #b7c6e0; --paper: #00275a; } :root[data-theme="dark"] .newengine-bento-card { background: #0a3670; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } :root[data-theme="dark"] .newengine-bento-card-visual { border-top-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .newengine-mini-bar { background: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .newengine-mini-pipeline-node--mid { background: rgba(255, 255, 255, 0.08); color: var(--ink-soft); } :root[data-theme="dark"] .newengine-bento-card-icon svg { stroke: #fff; } /* --------------------------------------------------------- 6. NEWTESTIMONIALS — self-contained token set --------------------------------------------------------- */ :root[data-theme="dark"] .newtestimonials-section { --nt-bg: #00275a; --nt-card: #0a3670; --nt-border: rgba(255, 255, 255, 0.12); --nt-heading: #eef3fb; --nt-body: #b7c6e0; --nt-muted: #8ea1c4; --nt-navy: #123f7e; --nt-navy-dark: #001c47; --nt-highlight: #123f7e; --nt-shadow: rgba(0, 0, 0, 0.35); --nt-shadow-md: rgba(0, 0, 0, 0.45); background: var(--nt-bg); } :root[data-theme="dark"] .newtestimonials-title mark { color: #eef3fb; } :root[data-theme="dark"] .newtestimonials-card--side .newtestimonials-stars svg { fill: var(--nt-body); } /* --------------------------------------------------------- 7. COOKIE CONSENT — banner + preferences modal (hard-coded colors, no shared variables) --------------------------------------------------------- */ :root[data-theme="dark"] .nxk-consent-card { background: linear-gradient(155deg, #0a3670 0%, #062a5c 100%); border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -28px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .nxk-consent-body h3 { color: #eef3fb; } :root[data-theme="dark"] .nxk-consent-body p { color: #b7c6e0; } :root[data-theme="dark"] .nxk-modal-card { background: #062a5c; color: #eef3fb; } :root[data-theme="dark"] .nxk-modal-card h3 { color: #eef3fb; } :root[data-theme="dark"] .nxk-modal-sub, :root[data-theme="dark"] .nxk-modal-row-desc { color: #b7c6e0; } :root[data-theme="dark"] .nxk-modal-row-title { color: #eef3fb; } :root[data-theme="dark"] .nxk-modal-row { border-bottom-color: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .nxk-modal-close { background: rgba(255, 255, 255, 0.08); color: #b7c6e0; } :root[data-theme="dark"] .nxk-modal-close:hover { background: rgba(255, 255, 255, 0.16); color: #eef3fb; } :root[data-theme="dark"] .nxk-btn-light { background: rgba(255, 255, 255, 0.08); color: #eef3fb; } :root[data-theme="dark"] .nxk-btn-light:hover { background: rgba(255, 255, 255, 0.15); } :root[data-theme="dark"] .nxk-btn-ghost { color: #b7c6e0; } :root[data-theme="dark"] .nxk-toggle { background: rgba(255, 255, 255, 0.18); } /* --------------------------------------------------------- 8. OFFER CHIP — chip + modal --------------------------------------------------------- */ :root[data-theme="dark"] .nxo-chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(127, 176, 255, 0.35); color: #7fb0ff; } :root[data-theme="dark"] .nxo-chip:hover { background: rgba(255, 255, 255, 0.14); } :root[data-theme="dark"] .nxo-modal-card { background: linear-gradient(155deg, #0a3670 0%, #062a5c 100%); color: #eef3fb; } :root[data-theme="dark"] .nxo-modal-card h3 { color: #eef3fb; } :root[data-theme="dark"] .nxo-modal-body { color: #b7c6e0; } :root[data-theme="dark"] .nxo-modal-close { background: rgba(255, 255, 255, 0.08); color: #b7c6e0; } :root[data-theme="dark"] .nxo-btn-ghost { color: #b7c6e0; } /* --------------------------------------------------------- 9. Smooth theme transition --------------------------------------------------------- */ body, .nav, .hero, .metrics, .faq, .cta-banner-inner, .footer, .btn-ghost, .btn-acid, .faq-item, .faq-icon, .newuipricing-section, .newuipricing-card, .newengine, .newengine-bento-card, .newtestimonials-section, .newtestimonials-card, .nxk-consent-card, .nxk-modal-card, .nxo-modal-card, .nxo-chip, .about-hero, .about-hero-highlight, .about-story-card, .about-story-node, .about-value-card, .about-value-badge, .features-hero, .features-hero-highlight, .features-spot-card, .features-spot-badge, .features-card, .pricing-hero, .pricing-hero-highlight, .pricing-hero-toggle, .nxc-calc-card, .nxc-tab, .nxc-banner, .nxc-result, .nxc-saving-strip, .nxf-wrap, .nxf-input, .nxf-alert-success, .nxf-alert-error, .nxf-submit { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* --------------------------------------------------------- 10. ABOUT PAGE (about.css) Text, muted-text and border colors already inherit from the core --text / --text-muted / --border tokens above. Only the hard-coded panel and pastel-wash colors need patching here. --------------------------------------------------------- */ /* Hero band — was a fixed light-cyan panel with black text */ :root[data-theme="dark"] .about-hero { background: #0a3670; } :root[data-theme="dark"] .about-hero-label, :root[data-theme="dark"] .about-hero-sub { color: #eef3fb; opacity: 0.85; } :root[data-theme="dark"] .about-hero-highlight { background: #123f7e; color: #eef3fb; } /* accent-wordanywhere chip stays light cyan on purpose (matches the rest of the site) so its text needs to stay dark for contrast */ :root[data-theme="dark"] .about-hero .accent-wordanywhere { color: #00193d; } /* Our Story — timeline rail + cards */ :root[data-theme="dark"] .about-story-timeline::before { background: linear-gradient(to bottom, rgba(255,255,255,0.28), rgba(255,255,255,0.1)); } :root[data-theme="dark"] .about-story-card { background: linear-gradient(155deg, #0a3670 0%, #062a5c 100%); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 40px -28px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .about-story-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35), 0 28px 48px -26px rgba(0, 0, 0, 0.55); } :root[data-theme="dark"] .about-story-node { background: #0a3670; border-color: rgba(255, 255, 255, 0.3); } /* Values grid — pastel washes swap for navy-tinted washes, accent colors themselves are left alone (already vivid enough) */ :root[data-theme="dark"] .about-value-card.card1 { --value-wash: linear-gradient(160deg, #123f7e 0%, #0a3670 55%); } :root[data-theme="dark"] .about-value-card.card2 { --value-wash: linear-gradient(160deg, #1e2f6e 0%, #0a3670 55%); } :root[data-theme="dark"] .about-value-card.card3 { --value-wash: linear-gradient(160deg, #3a2f5e 0%, #0a3670 55%); } :root[data-theme="dark"] .about-value-card { border-color: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .about-value-card:hover { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .about-value-badge { background: #00275a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .about-value-footer { border-top-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .about-value-bars span { background: rgba(255, 255, 255, 0.14); } :root[data-theme="dark"] .about-value-flow .pill-neutral { background: rgba(255, 255, 255, 0.1); color: #b7c6e0; } :root[data-theme="dark"] .about-value-flow .pill-tint { background: rgba(255, 255, 255, 0.12); } /* --------------------------------------------------------- 12. FEATURES PAGE (features.css) Same pattern as the About page — hero, spotlight cards and supporting feature cards all use hard-coded pastel colors that need explicit dark equivalents; body/muted text and borders already inherit from the core tokens above. --------------------------------------------------------- */ /* Hero band — same fixed light-cyan panel as about-hero */ :root[data-theme="dark"] .features-hero { background: #0a3670; } :root[data-theme="dark"] .features-hero-label, :root[data-theme="dark"] .features-hero-sub { color: #eef3fb; opacity: 0.85; } :root[data-theme="dark"] .features-hero-highlight { background: #123f7e; color: #eef3fb; } :root[data-theme="dark"] .features-hero .accent-wordanywhere { color: #00193d; } /* Spotlight cards — pastel washes swap for navy-tinted washes */ :root[data-theme="dark"] .features-spot-card.spot1 { --spot-wash: linear-gradient(160deg, #123f7e 0%, #0a3670 55%); } :root[data-theme="dark"] .features-spot-card.spot2 { --spot-wash: linear-gradient(160deg, #1e2f6e 0%, #0a3670 55%); } :root[data-theme="dark"] .features-spot-card.spot3 { --spot-wash: linear-gradient(160deg, #3a2f5e 0%, #0a3670 55%); } :root[data-theme="dark"] .features-spot-card { border-color: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .features-spot-card:hover { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .features-spot-badge { background: #00275a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .features-spot-footer { border-top-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .features-spot-bars span { background: rgba(255, 255, 255, 0.14); } :root[data-theme="dark"] .features-spot-flow .pill-neutral { background: rgba(255, 255, 255, 0.1); color: #b7c6e0; } /* Supporting feature-card grid */ :root[data-theme="dark"] .features-card { background: linear-gradient(155deg, #0a3670 0%, #062a5c 100%); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 32px -26px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .features-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 40px -24px rgba(0, 0, 0, 0.55); } /* --------------------------------------------------------- 14. PRICING HERO (pricinghero.css) Same hero pattern as About/Features, plus a bubble-scatter background and a standalone billing toggle. --------------------------------------------------------- */ :root[data-theme="dark"] .pricing-hero { background-color: #0a3670; } /* the bubble dots and ambient glows are translucent white — they read fine over navy as-is, so only the base color needs changing */ :root[data-theme="dark"] .pricing-hero-label, :root[data-theme="dark"] .pricing-hero-sub { color: #eef3fb; opacity: 0.85; } :root[data-theme="dark"] .pricing-hero-highlight { background: #123f7e; color: #eef3fb; } :root[data-theme="dark"] .pricing-hero .accent-wordanywhere { color: #00193d; } /* Billing toggle pill */ :root[data-theme="dark"] .pricing-hero-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); } :root[data-theme="dark"] .pricing-hero-toggle button.is-active { background: #123f7e; color: #eef3fb; } :root[data-theme="dark"] .pricing-hero-toggle .save-tag { background: rgba(23, 160, 106, 0.18); color: #8fe6bd; } /* --------------------------------------------------------- 15. PRICING CALCULATOR (pricing-calculator.css) The card defines its own --navy and --bg-mid variables in scope, so overriding those two here cascades automatically into the banner text, slider track/thumb, and min-note — only the hard-coded panel backgrounds need explicit rules. --------------------------------------------------------- */ :root[data-theme="dark"] .nxc-calc-card { --navy: #7fb0ff; --bg-mid: rgba(255, 255, 255, 0.15); background: linear-gradient(155deg, #0a3670 0%, #062a5c 100%); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -32px rgba(0, 0, 0, 0.55); } :root[data-theme="dark"] .nxc-tabs { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .nxc-tab.active { background: #123f7e; color: #eef3fb; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .nxc-banner { background: rgba(127, 176, 255, 0.1); border-color: rgba(127, 176, 255, 0.3); } :root[data-theme="dark"] .nxc-range::-webkit-slider-thumb, :root[data-theme="dark"] .nxc-range::-moz-range-thumb { background: #eef3fb; } :root[data-theme="dark"] .nxc-result { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } :root[data-theme="dark"] .nxc-result.highlight { background: linear-gradient(155deg, rgba(127, 176, 255, 0.16) 0%, rgba(127, 176, 255, 0.05) 100%); border-color: rgba(127, 176, 255, 0.35); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.5); } /* Saving strip — success-green banner, dimmed for dark bg */ :root[data-theme="dark"] .nxc-saving-strip { background: rgba(23, 160, 106, 0.14); border-color: rgba(111, 227, 180, 0.3); } :root[data-theme="dark"] .nxc-saving-strip p { color: #b8f5d8; } :root[data-theme="dark"] .nxc-saving-strip p span { color: #eef3fb; } /* --------------------------------------------------------- 17. CONTACT FORM (contactform.css) Text color and muted label color already inherit from the core --text / --text-muted tokens; the card shell, inputs, floating labels, and alert banners are all hard-coded and need explicit dark equivalents. --------------------------------------------------------- */ :root[data-theme="dark"] .nxf-wrap { background: linear-gradient(155deg, #0a3670 0%, #062a5c 100%); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 30px 60px -34px rgba(0, 0, 0, 0.55); } /* Inputs */ :root[data-theme="dark"] .nxf-input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); } :root[data-theme="dark"] .nxf-input:focus { border-color: #7fb0ff; box-shadow: 0 0 0 4px rgba(127, 176, 255, 0.18); } :root[data-theme="dark"] .nxf-icon { color: #8ea1c4; } :root[data-theme="dark"] .nxf-field:focus-within .nxf-icon { color: #7fb0ff; } /* Floating labels */ :root[data-theme="dark"] .nxf-label { color: #8ea1c4; } :root[data-theme="dark"] .nxf-input:focus + .nxf-label, :root[data-theme="dark"] .nxf-input:not(:placeholder-shown) + .nxf-label { color: #7fb0ff; } /* Static (date/time) labels */ :root[data-theme="dark"] .nxf-field-static:focus-within .nxf-label-static { color: #7fb0ff; } /* Alerts — success/error banners dimmed for dark bg, same pattern used for the pricing calculator's saving strip */ :root[data-theme="dark"] .nxf-alert-success { background: rgba(23, 160, 106, 0.14); border-color: rgba(111, 227, 180, 0.3); color: #b8f5d8; } :root[data-theme="dark"] .nxf-alert-error { background: rgba(220, 66, 46, 0.14); border-color: rgba(246, 140, 122, 0.35); color: #ffb3a3; } /* Submit button — gradient already reads well on navy; just deepen the shadow so it doesn't look washed out against the dark card */ :root[data-theme="dark"] .nxf-submit { box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.55); } :root[data-theme="dark"] .nxf-submit:hover { box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.6); } /* --------------------------------------------------------- 19. LIST ARROW (.list-arrow li::before) Arrow color is a dark navy in light mode — needs to brighten so it doesn't disappear against the dark bg. --------------------------------------------------------- */ :root[data-theme="dark"] .list-arrow li::before { color: #7fb0ff; } /* --------------------------------------------------------- 20. NEWENGINE CONTACT ACTION PILL --------------------------------------------------------- */ :root[data-theme="dark"] .newengine-contact-action { background: #00275a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); } /* --------------------------------------------------------- 21. HERO BACKGROUND ARTWORK bghero.png was flattened on a white canvas, which is why it blended into the light theme. bghero-dark.png is the same arrow with the white knocked out to real transparency, so it reads correctly on the navy background too. --------------------------------------------------------- */ :root[data-theme="dark"] .hero { background-image: url(../img/bghero-dark.png); } :root[data-theme="dark"] .pricingsectiontag { color: #7fb0ff; } :root[data-theme="dark"] .pricingsectiontagdot { background: #7fb0ff; } :root[data-theme="dark"] .faqsectiontag { color: #7fb0ff; } :root[data-theme="dark"] .faqsectiontagdot { background: #7fb0ff; } :root[data-theme="dark"] .newengine .newengine-section-tag { color: #c084fc; } [data-theme="dark"] .newuipricing-toggle-label { color: #fff; } [data-theme="dark"] .newuipricing-badge { background: #104c9b; } [data-theme="dark"] .newuipricing-card.newuipricing-featured .newuipricing-cta { background: #104c9b; } [data-theme="dark"] .valuebadge1 { color: #92c1ff; } [data-theme="dark"] .valuebadge2 { color: #d2a4ff; } [data-theme="dark"] .valuebadge3 { color: #ffc294; } [data-theme="dark"] .trackdark { color: #b7c6e0 !important; } [data-theme="dark"] .showcase-arrow:hover { color: #000 !important; }