/* ============================================================ Dynamic Pricing AI — dark-mode.css Two themes: light (default) and mono (enterprise B&W) Toggle via data-theme="light" | data-theme="mono" on ============================================================ */ /* ============================================================ MONO — enterprise black & white Sharp geometry. Precision over decoration. ============================================================ */ /* ── Mono tokens ─────────────────────────────────────────── */ html[data-theme="mono"], html:not([data-theme]) { --c-heading: #002626; --c-body: #3a4a5c; } html[data-theme="mono"] { --c-heading: #ddeaea; --c-body: rgba(180, 205, 210, 0.8); --font-heading: 'Instrument Sans', sans-serif; --font-body: 'Instrument Sans', sans-serif; --c-primary: #ffffff; --c-primary-dark: #e0e0e0; --c-primary-light: #002226; --c-accent: #ffffff; --c-accent-dark: #cccccc; --c-dark: #ffffff; --c-dark-alt: #999999; --c-muted: #555555; --c-border: #1a3a3e; --c-bg: #00171a; --c-white: #002226; /* Minimal rounding */ --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; --r-full: 4px; /* Offset shadows — geometric, no blur */ --shadow-sm: 3px 3px 0 rgba(255, 255, 255, 0.06); --shadow-md: 4px 4px 0 rgba(255, 255, 255, 0.09); --shadow-lg: 6px 6px 0 rgba(255, 255, 255, 0.12); } /* ── Mono logo images — bright & shiny on dark background ── */ html[data-theme="mono"] .logos-img { filter: brightness(0) invert(1) opacity(0.75); } html[data-theme="mono"] .logos-item:hover .logos-img { filter: brightness(0) invert(1) opacity(1); } /* ── Mono logos section ──────────────────────────────────── */ html[data-theme="mono"] .section--logos { background: var(--c-bg); } html[data-theme="mono"] .logos__anchor::before, html[data-theme="mono"] .logos__anchor::after { background: #1a3a3e; } html[data-theme="mono"] .logos__label { background: var(--c-bg); color: #aaaaaa; } html[data-theme="mono"] .logos__bottom-rule { background: #1a3a3e; } /* ── Mono hero ───────────────────────────────────────────── */ /* Pull the hero up behind the transparent header so they share one background */ html[data-theme="mono"] .section--hero { background-image: url('../images/hero-bg-dark.webp'); background-size: cover; background-position: center top; background-repeat: no-repeat; position: relative; margin-top: -72px; padding-top: calc(72px + var(--sp-24)); } html[data-theme="mono"] .site-header { background: transparent; border-bottom: none; box-shadow: none; transition: transform 0.28s ease, background 0.25s ease, border-color 0.25s ease; } html[data-theme="mono"] .site-header.is-hidden { transition: none; } html[data-theme="mono"] .site-header.is-scrolled { background: var(--c-bg); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-sm); } @media (max-width: 1024px) { html[data-theme="mono"] .site-header { background: var(--c-bg) !important; border-bottom: 1px solid var(--c-border); } } html[data-theme="mono"] .section--hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.58) 30%, rgba(0, 0, 0, 0.38) 65%, rgba(0, 0, 0, 0.15) 100%); pointer-events: none; z-index: 0; } /* ── Mono hero headings — all pages ─────────────────────── */ html[data-theme="mono"] .hero__heading, html[data-theme="mono"] .page-hero__heading, html[data-theme="mono"] .pricing-hero__heading, html[data-theme="mono"] .solution-hero__heading, html[data-theme="mono"] .product-hero__heading, html[data-theme="mono"] .pricing-calc__title { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: #ffffff; background-clip: unset; color: #ffffff; } html[data-theme="mono"] .product-feature__desc { color: rgba(200, 220, 224, 0.80); } /* ── Mono case studies hero ──────────────────────────────── */ html[data-theme="mono"] .section--cs-hero { background: #00171a; border-bottom: 1px solid #1a3a3e; } html[data-theme="mono"] .section--cs-hero .page-hero__sub { color: rgba(200, 220, 224, 0.80); } html[data-theme="mono"] .cs-card__excerpt { color: rgba(200, 220, 224, 0.80); } /* ── Mono hero subtitles — all hero sections ─────────────── */ html[data-theme="mono"] .hero__subheading, html[data-theme="mono"] .pricing-hero__sub, html[data-theme="mono"] .page-hero__sub, html[data-theme="mono"] .solution-hero__sub, html[data-theme="mono"] .bam-hero__subheading { color: rgba(200, 220, 224, 0.80); } /* ── Mono book-a-meeting calendar ───────────────────────── */ html[data-theme="mono"] .bam-hero { background: var(--c-bg); } html[data-theme="mono"] .bam-calendar { background: #00171a; border: 1px solid #1a3a3e; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); } html[data-theme="mono"] .bam-calendar iframe { border-radius: 0; display: block; } /* ── Mono pricing — free card ────────────────────────────── */ html[data-theme="mono"] .pricing-free-card { background: #002226; border-color: #1a3a3e; } html[data-theme="mono"] .pricing-free-card__badge { background: rgba(0, 151, 167, 0.15); color: #9dd8de; } html[data-theme="mono"] .pricing-free-card__title { color: #ffffff; } html[data-theme="mono"] .pricing-free-card__features { color: #e8edf2; } /* ── Mono pricing — plan cards ───────────────────────────── */ html[data-theme="mono"] .plan-card__name, html[data-theme="mono"] .plan-card__price-value { color: #ffffff; } html[data-theme="mono"] .plan-card__price-period, html[data-theme="mono"] .plan-card__tagline { color: #aaaaaa; } html[data-theme="mono"] .plan-card__feature span { color: #cccccc; } html[data-theme="mono"] .plan-card__feature--no span { color: #666666; } html[data-theme="mono"] .plan-card__stat strong { color: #9dd8de; } /* ── Mono pricing — calculator ───────────────────────────── */ html[data-theme="mono"] .pricing-calc__label { color: #cccccc; } html[data-theme="mono"] .pricing-calc__value-display { color: #ffffff; } html[data-theme="mono"] .pricing-calc__note { color: #cccccc; } html[data-theme="mono"] .pricing-calc__slider-labels { color: #cccccc; } html[data-theme="mono"] .calc-result__label { color: #9dd8de; } html[data-theme="mono"] .calc-result__plan-name { color: #ffffff; } html[data-theme="mono"] .calc-result__row span { color: #aaaaaa; } html[data-theme="mono"] .calc-result__row strong { color: #ffffff; } /* ── Mono capabilities section ──────────────────────────── */ html[data-theme="mono"] .feature-sub { color: #9dd8de; } html[data-theme="mono"] .section-header__intro { color: #aaaaaa; } /* ── Social proof section ────────────────────────────────── */ html[data-theme="mono"] .section--social-proof { background: #002226; border-top: 1px solid #1a3a3e; border-bottom: 1px solid #1a3a3e; } html[data-theme="mono"] .section--social-proof .section-header__h2 { color: #ffffff; } html[data-theme="mono"] .section--social-proof .section-header__intro { color: #aaaaaa; } html[data-theme="mono"] .social-proof__stat-value { color: #9dd8de; } html[data-theme="mono"] .social-proof__stat-label { color: #ffffff; } html[data-theme="mono"] .social-proof__stat-desc { color: #aaaaaa; } /* ── Mono header ─────────────────────────────────────────── */ html[data-theme="mono"] .site-header__inner { height: 72px; } html[data-theme="mono"] .nav-menu>li>a { padding: 0.75rem 1rem; } /* ── Mono pricing calculator & blog hero ─────────────────── */ html[data-theme="mono"] .section--pricing-calc::before, html[data-theme="mono"] .section--blog-hero::before { background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.50) 50%, rgba(0, 0, 0, 0.28) 100%); } /* ── Mono sections ───────────────────────────────────────── */ html[data-theme="mono"] .site-footer, html[data-theme="mono"] .pricing-hero, html[data-theme="mono"] .page-hero--careers { background: #00171a; border-top: 1px solid #1a3a3e; } html[data-theme="mono"] .section--testimonials { background: #00171a; border-top: 1px solid #1a3a3e; } html[data-theme="mono"] .section--testimonials .section-header__h2 { color: #ffffff; } html[data-theme="mono"] .section--testimonials .section-header__label { color: #9dd8de; } html[data-theme="mono"] .testimonial-card { background-color: #001215; background-image: url('../images/hero-bg-dark.webp'); background-size: cover; background-position: left center; border-color: #1a3a3e; box-shadow: none; position: relative; overflow: hidden; } html[data-theme="mono"] .testimonial-card::before { content: ''; position: absolute; inset: 0; background: rgba(0, 18, 21, 0.55); pointer-events: none; z-index: 0; } html[data-theme="mono"] .testimonial-card > * { position: relative; z-index: 1; } html[data-theme="mono"] .testimonial-card:hover { border-color: rgba(157, 216, 222, 0.35); box-shadow: none; } html[data-theme="mono"] .testimonial-card__stat-value { color: #9dd8de; } html[data-theme="mono"] .testimonial-card__stat { border-bottom-color: #1a3a3e; } html[data-theme="mono"] .testimonial-card__stat-label { color: rgba(200, 220, 224, 0.65); } html[data-theme="mono"] .testimonial-card__text { color: rgba(200, 220, 224, 0.82); } html[data-theme="mono"] .testimonial-card__name { color: #ffffff; } html[data-theme="mono"] .testimonial-card__role { color: rgba(200, 220, 224, 0.85); } html[data-theme="mono"] .section--testimonials .section-header__h2 { color: #ffffff; } html[data-theme="mono"] .section--testimonials .section-header__label { color: #9dd8de; } html[data-theme="mono"] .testimonial-card { border-color: #1a3a3e; } html[data-theme="mono"] .testimonial-card:hover { border-color: rgba(157, 216, 222, 0.35); background: rgba(157, 216, 222, 0.04); } html[data-theme="mono"] .testimonial-card__stat { border-bottom-color: #1a3a3e; } html[data-theme="mono"] .testimonial-card__stat-value { color: #9dd8de; } /* ── Mono solutions section ──────────────────────────────── */ html[data-theme="mono"] .section--solutions { background-image: url('../images/hero-bg-dark.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #00171a; position: relative; } html[data-theme="mono"] .section--solutions::before { background: linear-gradient(to right, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.88) 55%, rgba(0, 0, 0, 0.55) 100%) !important; } html[data-theme="mono"] .section--solutions .section-header__label, html[data-theme="mono"] .section--solutions .section-header__h2, html[data-theme="mono"] .section--solutions .section-header__intro { color: #ffffff; } html[data-theme="mono"] .section--solutions .solutions__col-heading { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.25); } html[data-theme="mono"] .section--solutions .solutions__list { align-items: flex-start; } html[data-theme="mono"] .section--solutions .solutions__link { color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.12); } html[data-theme="mono"] .section--solutions .solutions__link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.35); } html[data-theme="mono"] .section--solutions .solutions__all-link { color: rgba(255, 255, 255, 0.6); } html[data-theme="mono"] .section--solutions .solutions__all-link:hover { color: #ffffff; } /* ── Mono nav ────────────────────────────────────────────── */ html[data-theme="mono"] .sub-menu { background: #00171a; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } html[data-theme="mono"] .sub-menu a { color: #cccccc; border-radius: 4px; } html[data-theme="mono"] .sub-menu a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.07); } html[data-theme="mono"] .sub-menu .sub-menu { border: none; border-left: 1px solid rgba(157, 216, 222, 0.2); box-shadow: none; background: transparent; margin-left: 1.75rem; } html[data-theme="mono"] .sub-menu .sub-menu a { color: #aaaaaa; } html[data-theme="mono"] .sub-menu .sub-menu a:hover { color: #ffffff; background: transparent; } html[data-theme="mono"] .nav-menu>li>a { color: #cccccc; letter-spacing: 0.07em; text-transform: uppercase; font-size: 0.7rem; font-weight: 500; } html[data-theme="mono"] .nav-menu>li>a:hover, html[data-theme="mono"] .nav-menu>li.current-menu-item>a, html[data-theme="mono"] .nav-menu>li.current-menu-ancestor>a { color: #ffffff; background: rgba(255, 255, 255, 0.07); } /* ── Mono buttons ────────────────────────────────────────── */ html[data-theme="mono"] .btn--primary { background: #ffffff; color: #00171a; border-color: #ffffff; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } html[data-theme="mono"] .btn--primary:hover { background: #00171a; color: #ffffff; border-color: #ffffff; box-shadow: none; transform: translate(3px, 3px); } html[data-theme="mono"] .btn--ghost { border-color: #ffffff; color: #999999; letter-spacing: 0.04em; } html[data-theme="mono"] .btn--ghost:hover { border-color: #ffffff; color: #ffffff; background: transparent; } /* ── Mono logo ───────────────────────────────────────────── */ html[data-theme="mono"] .site-logo__img--light { display: none; } html[data-theme="mono"] .site-logo__img--mono { display: block; } html[data-theme="mono"] .site-logo__img { filter: brightness(0) invert(1); } html[data-theme="mono"] .site-logo__wordmark { color: #ffffff; } html[data-theme="mono"] .site-logo__wordmark-ai { color: #9dd8de; } /* ── Toggle button ───────────────────────────────────────── */ .dark-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--c-muted); cursor: pointer; flex-shrink: 0; transition: background var(--ease), color var(--ease); } .dark-toggle:hover { background: var(--c-primary-light); color: var(--c-primary); } /* ── Toggle icons — light theme shows mono icon (next theme preview) */ .dark-toggle__icon-moon { display: none; } .dark-toggle__icon-sun { display: none; } .dark-toggle__icon-leaf { display: none; } .dark-toggle__icon-mono { display: block; } html[data-theme="mono"] .dark-toggle__icon-mono { display: none; } html[data-theme="mono"] .dark-toggle__icon-sun { display: block; } html[data-theme="mono"] .dark-toggle { color: #999999; } html[data-theme="mono"] .dark-toggle:hover { color: #ffffff; background: transparent; } /* ── Mono calculator & plan card buttons ─────────────────── */ html[data-theme="mono"] .btn--accent { background: #ffffff; color: #00171a; border-color: #ffffff; } html[data-theme="mono"] .btn--accent:hover { background: #00171a; color: #ffffff; border-color: #ffffff; box-shadow: none; } /* Popular plan card (Growth) — text on primary-colored background */ html[data-theme="mono"] .plan-card--popular .plan-card__badge { background: #ffffff; color: #00171a; } html[data-theme="mono"] .plan-card--popular { border-color: #ffffff; box-shadow: 0 0 0 2px #ffffff; } /* ── Pricing Dictionary — mono theme ───────────────── */ html[data-theme="mono"] .dict-filter__btn { color: #aaaaaa; border-color: #1a3a3e; } html[data-theme="mono"] .dict-filter__btn:hover { color: #9dd8de; border-color: #9dd8de; } html[data-theme="mono"] .dict-filter__btn.is-active { background: #9dd8de; border-color: #9dd8de; color: #00171a; } html[data-theme="mono"] .dict-card { background: #002226; border-color: #1a3a3e; } html[data-theme="mono"] .dict-card:hover { border-color: #9dd8de; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } html[data-theme="mono"] .dict-card__term, html[data-theme="mono"] .dict-card__term a { color: #ffffff; } html[data-theme="mono"] .dict-card__term a:hover { color: #9dd8de; } html[data-theme="mono"] .dict-card__definition { color: #cccccc; } html[data-theme="mono"] .dict-card__link, html[data-theme="mono"] .dict-entry__link { color: #9dd8de; } /* Single term page — mono */ html[data-theme="mono"] .dict-single__label, html[data-theme="mono"] .dict-single__letter { color: #9dd8de; } html[data-theme="mono"] .dict-single__text { color: #cccccc; } html[data-theme="mono"] .post-title { font-family: var(--font-body, inherit); } /* ── Single post content — mono ──────────────────────────── */ html[data-theme="mono"] .post-content p, html[data-theme="mono"] .post-content ul, html[data-theme="mono"] .post-content ol, html[data-theme="mono"] .post-content li { color: #d4dde6; } html[data-theme="mono"] .post-content h2, html[data-theme="mono"] .post-content h3, html[data-theme="mono"] .post-content h4 { color: #ffffff; } html[data-theme="mono"] .post-content a { color: #9dd8de; } html[data-theme="mono"] .post-content blockquote { background: rgba(157, 216, 222, 0.07); border-left-color: #9dd8de; } html[data-theme="mono"] .post-content blockquote p { color: #cccccc; } html[data-theme="mono"] .post-content code { background: rgba(157, 216, 222, 0.1); color: #9dd8de; } html[data-theme="mono"] .post-content pre { background: #001215; color: #e2e8f0; } html[data-theme="mono"] .post-content th { background: rgba(157, 216, 222, 0.1); color: #ffffff; } html[data-theme="mono"] .post-content td { color: #cccccc; border-color: #1a3a3e; } html[data-theme="mono"] .post-content th { border-color: #1a3a3e; } html[data-theme="mono"] .post-content hr { border-top-color: #1a3a3e; } /* ── Post top CTA — mono ─────────────────────────────────── */ html[data-theme="mono"] .post-top-cta { background: linear-gradient(135deg, #000e10 0%, #001a1d 50%, #000e10 100%); } html[data-theme="mono"] .post-top-cta__btn { background: #9dd8de; color: #00171a; box-shadow: 0 4px 20px rgba(157, 216, 222, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4); } html[data-theme="mono"] .post-top-cta__btn:hover { background: #b8e8ed; color: #00171a; box-shadow: 0 8px 28px rgba(157, 216, 222, 0.45), 0 4px 12px rgba(0, 0, 0, 0.5); } /* ── Post CTA — mono ─────────────────────────────────────── */ html[data-theme="mono"] .post-cta { background: linear-gradient(135deg, #002226 0%, #003035 100%); border-top-color: #1a3a3e; } html[data-theme="mono"] .post-cta__heading { color: #ffffff; } html[data-theme="mono"] .post-cta__sub { color: #aaaaaa; } html[data-theme="mono"] .post-cta__label { color: #9dd8de; } /* ── Blog filter bar — mono ──────────────────────────────── */ html[data-theme="mono"] .blog-filter__btn { border-color: #1a3a3e; color: #aaaaaa; } html[data-theme="mono"] .blog-filter__btn:hover { border-color: #9dd8de; color: #9dd8de; } html[data-theme="mono"] .blog-filter__btn.is-active { background: #9dd8de; border-color: #9dd8de; color: #00171a; } html[data-theme="mono"] .blog-filter__count { background: rgba(255, 255, 255, 0.1); } html[data-theme="mono"] .blog-filter__btn.is-active .blog-filter__count { background: rgba(0, 23, 26, 0.25); } /* ── Blog cards — mono ───────────────────────────────────── */ html[data-theme="mono"] .blog-card { background: #002226; border-color: #1a3a3e; } html[data-theme="mono"] .blog-card:hover { border-color: #9dd8de; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55), 4px 4px 0 rgba(157, 216, 222, 0.15); } /* Shimmer: teal tint in dark mode */ html[data-theme="mono"] .blog-card::after { background: linear-gradient( 108deg, transparent 28%, rgba(157, 216, 222, 0.14) 50%, transparent 72% ); } /* Corner orb: teal */ html[data-theme="mono"] .blog-card::before { background: radial-gradient(circle, rgba(157, 216, 222, 0.16) 0%, transparent 70%); } html[data-theme="mono"] .blog-card__meta { color: #666666; } html[data-theme="mono"] .blog-card__meta a { background: rgba(157, 216, 222, 0.1); color: #9dd8de; } html[data-theme="mono"] .blog-card__meta a:hover { background: #9dd8de; color: #00171a; } html[data-theme="mono"] .blog-card__title a { color: #ffffff; font-weight: 700; } html[data-theme="mono"] .blog-card__title a:hover { color: #9dd8de; } html[data-theme="mono"] .blog-card__excerpt .blog-excerpt__text { color: #e8edf2; } html[data-theme="mono"] .blog-card__read-more { color: #9dd8de; } /* ── Shared page hero — mono ─────────────────────────────── */ html[data-theme="mono"] .section--blog-hero .page-hero__sub { color: rgba(157, 216, 222, 0.95); } html[data-theme="mono"] .section--blog-hero .page-hero__eyebrow { color: rgba(157, 216, 222, 0.7); } html[data-theme="mono"] .section--blog-hero .btn--secondary { background: rgba(255, 255, 255, 0.08); border-color: rgba(157, 216, 222, 0.3); color: #9dd8de; } html[data-theme="mono"] .section--blog-hero .btn--secondary:hover { background: rgba(157, 216, 222, 0.15); } /* ── Contact blocks — mono ───────────────────────────────── */ html[data-theme="mono"] .contact-block { background: #002226; border-color: #1a3a3e; } html[data-theme="mono"] .contact-block:hover { border-color: #9dd8de; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55), 4px 4px 0 rgba(157, 216, 222, 0.15); } html[data-theme="mono"] .contact-block::before { background: radial-gradient(circle, rgba(157, 216, 222, 0.16) 0%, transparent 70%); } html[data-theme="mono"] .contact-block__name { color: #ffffff !important; } html[data-theme="mono"] .contact-block__address { color: #aaaaaa; } html[data-theme="mono"] .contact-block__phone { color: #e8edf2; } html[data-theme="mono"] .contact-block__phone:hover { color: #9dd8de; } html[data-theme="mono"] .section--contact { background-image: url('../images/hero-bg-dark.webp'); background-position: center bottom; } html[data-theme="mono"] .section--contact::before { background: linear-gradient(to right, rgba(0, 23, 26, 0.92) 0%, rgba(0, 23, 26, 0.80) 35%, rgba(0, 23, 26, 0.40) 65%, rgba(0, 23, 26, 0.10) 100%); } html[data-theme="mono"] .contact-section__body, html[data-theme="mono"] .pricing-cta__form-body { color: rgba(200, 220, 224, 0.80); } /* ── Benefits section — mono ─────────────────────────────── */ html[data-theme="mono"] .section--benefits { background-color: #001316; background-image: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(157, 216, 222, 0.06) 0%, transparent 65%), radial-gradient(rgba(157, 216, 222, 0.10) 1px, transparent 1px); background-size: cover, 24px 24px; border-bottom: 1px solid #1a3a3e; } html[data-theme="mono"] .benefits__intro { color: rgba(200, 220, 224, 0.75); } html[data-theme="mono"] .benefit-card { background: rgba(255, 255, 255, 0.025); border-color: rgba(157, 216, 222, 0.12); box-shadow: var(--shadow-sm); } html[data-theme="mono"] .benefit-card:hover { border-color: rgba(157, 216, 222, 0.5); background: rgba(157, 216, 222, 0.04); box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.09); transform: translateY(-5px); } html[data-theme="mono"] .benefit-card__ticker { color: #9dd8de; } html[data-theme="mono"] .benefit-card__signal { background: #9dd8de; animation-name: benefit-pulse-mono; } @keyframes benefit-pulse-mono { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(157, 216, 222, 0.5); } 50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(157, 216, 222, 0); } } html[data-theme="mono"] .benefit-card__top-line { background: linear-gradient(90deg, #9dd8de, rgba(157, 216, 222, 0.4)); } html[data-theme="mono"] .benefit-card__name { color: rgba(220, 235, 238, 0.95); } html[data-theme="mono"] .benefit-card__desc { color: rgba(200, 220, 224, 0.75); } html[data-theme="mono"] .benefit-card__index { color: rgba(157, 216, 222, 0.20); } html[data-theme="mono"] .benefit-card:hover .benefit-card__index { color: rgba(157, 216, 222, 0.35); } /* ── Capability cards — mono ─────────────────────────────── */ html[data-theme="mono"] .capability-card { background: #002226; border-color: #1a3a3e; } html[data-theme="mono"] .capability-card:hover { border-color: #9dd8de; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.55), 4px 4px 0 rgba(157, 216, 222, 0.15); } html[data-theme="mono"] .capability-card::before { background: radial-gradient(circle, rgba(157, 216, 222, 0.16) 0%, transparent 70%); } html[data-theme="mono"] .capability-card__heading { color: #ffffff !important; border-bottom-color: #1a3a3e; } html[data-theme="mono"] .feature-label { color: #e8edf2; } html[data-theme="mono"] .feature-sub { color: #aaaaaa; } html[data-theme="mono"] .capability-card__features li::before { background: #9dd8de; } /* ── How it works — mono ─────────────────────────────────── */ html[data-theme="mono"] .how-it-works__step-number { color: rgba(157, 216, 222, 0.40); } html[data-theme="mono"] .how-it-works__step-desc { color: rgba(220, 235, 238, 0.95); } /* ── Team about — mono ───────────────────────────────────── */ html[data-theme="mono"] .team-about__mission-text { color: #e8edf2; } /* ── Partners page — mono ────────────────────────────────── */ html[data-theme="mono"] .partners-col--agency { background: #002226; border-color: #1a3a3e; } html[data-theme="mono"] .partners-col--merchant { background: #0d0820; border-color: #2d1f5a; } html[data-theme="mono"] .partners-col--agency .partners-col__eyebrow { color: #9dd8de; } html[data-theme="mono"] .partners-col--merchant .partners-col__eyebrow { color: #a78bfa; } html[data-theme="mono"] .partners-col__title { color: #ffffff; } html[data-theme="mono"] .partners-col__sub, html[data-theme="mono"] .partners-card__desc { color: #c8d4dc; } html[data-theme="mono"] .partners-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); } html[data-theme="mono"] .partners-card__num { opacity: 0.9; } html[data-theme="mono"] .partners-card__title { color: #ffffff; } html[data-theme="mono"] .partners-col__section-label { color: #8a9aaa; border-bottom-color: #1a3a3e; } html[data-theme="mono"] .partners-quote { background: rgba(255, 255, 255, 0.05); border-left-color: #a78bfa; } html[data-theme="mono"] .partners-quote p { color: #c8d4dc; } html[data-theme="mono"] .partners-quote cite { color: #a78bfa; } html[data-theme="mono"] .partners-quote p { color: #aaaaaa; } html[data-theme="mono"] .partners-roi .section-eyebrow { color: #9dd8de; } html[data-theme="mono"] .partners-roi__title { color: #e8edf2; } html[data-theme="mono"] .partners-roi__sub { color: #c8d4dc; } html[data-theme="mono"] .roi-calc__select { background-color: #001a1c; border-color: #1a3a3e; color: #e8edf2; } html[data-theme="mono"] .roi-calc__label { color: #8a9aaa; } html[data-theme="mono"] .roi-calc__field-value { color: #9dd8de; } html[data-theme="mono"] .roi-calc__slider-labels { color: #8a9aaa; } html[data-theme="mono"] .roi-calc__output { border-top-color: #1a3a3e; } html[data-theme="mono"] .roi-result--gmv { background: #001a1c; border-color: #1a3a3e; } html[data-theme="mono"] .roi-result--gmv .roi-result__range { color: #e8edf2; } html[data-theme="mono"] .roi-result--gmv .roi-result__label, html[data-theme="mono"] .roi-result--gmv .roi-result__period { color: #8a9aaa; } html[data-theme="mono"] .roi-calc__disclaimer { color: #c8d4dc; } /* ── Integration page — mono ──────────────────────────────── */ html[data-theme="mono"] .integration-split__title, html[data-theme="mono"] .integration-intro__title, html[data-theme="mono"] .integration-quote__text { color: #e8edf2; } html[data-theme="mono"] .integration-split__sub, html[data-theme="mono"] .integration-intro__sub, html[data-theme="mono"] .integration-checklist li { color: #c8d4dc; } html[data-theme="mono"] .integration-quote__name { color: #e8edf2; } html[data-theme="mono"] .integration-quote__role, html[data-theme="mono"] .integration-faq__cta p { color: #8a9aaa; } /* ── FAQ — all sections ──────────────────────────────────── */ html[data-theme="mono"] .faq__toggle { color: #ffffff; background: #002a2f; } html[data-theme="mono"] .faq__toggle:hover { background: #003a40; color: #ffffff; } html[data-theme="mono"] .faq__answer { background: #002226; } html[data-theme="mono"] .faq__answer p { color: rgba(220, 235, 238, 0.95); } html[data-theme="mono"] .faq__icon { color: #9dd8de; } html[data-theme="mono"] .faq__item { border-color: #1a3a3e; } html[data-theme="mono"] .faq__item:has(.faq__toggle[aria-expanded="true"]) { border-color: #9dd8de; } html[data-theme="mono"] .integration-checklist li::before { background-color: #0097a7; } /* The dark visuals (int-hub, int-visual) are already dark-themed by design */ /* They look good in both light and mono themes without overrides */ html[data-theme="mono"] .int-visual__count { color: #7ecdd4; font-size: var(--text-base); } html:not([data-theme="mono"]) .int-visual__count { color: #5bbfc8; font-size: var(--text-base); }