/* Comprehensive Dark Mode Stylesheet */
@media (prefers-color-scheme: dark) {
/* --- Root and Base Styles --- */
:root { /* Define dark mode variables for easier customization */
--dark-bg: #121212;
--dark-text: #e0e0e0;
--dark-headings: #f0f0f0; /* Changed from #ffffff to softer white */
--dark-links: #9db4ff;
--dark-links-hover: #c5d7ff;
--dark-border: #555;
--dark-input-bg: #2c2c2c;
--dark-input-placeholder: #999;
--dark-accent: #5bb5a2;
--dark-brand-blue: #5C81FF; /* Brand blue for select focus and interactive elements */
--dark-grey-bg: #2c2c2c;
--dark-grey-text: #e0e0e0;
--dark-error-bg: #520505;
--dark-success-bg: #2c2c2c;
--dark-badge-bg: #2c2c2c33;
--dark-muted-text: #bbb;
--dark-blockquote-border: #555;
--dark-hr-border: #444;
--dark-webflow-badge: #333;
--dark-slider-dot: #999;
--dark-navbar-bg: #1a1a1a;
--dark-blog-divider: var(--dark-grey);
--dark-accordion-border: var(--shapescale-dark-80);
--dark-feature-card-bg: var(--dark-20);
--dark-label-bg: var(--shapescale-dark-100);
--dark-input-disabled-bg: #333;
--dark-input-disabled-text: #aaa;
--dark-error-message-bg: #520505;
--dark-success-message-bg: #2c2c2c;
--dark-tooltip-bg: var(--shapescale-dark-100);
--dark-tooltip-arrow: var(--shapescale-dark-100);
--dark-price-tab-inactive: #d4d4d4;
--dark-price-tab-active-bg: var(--shapescale-dark-100);
--dark-price-tab-active-text: #f6f6f6;
--dark-comp-table-border: var(--dark-20);
--dark-comp-table-featured: var(--shape-dark-blue);
--dark-comp-table-secondary: var(--dark-grey);
--dark-section-alt-bg: #1a1a1a; /* Added for alternating section backgrounds */
/* Form-specific variables (consolidated from duplicate :root blocks) */
--ss-dark-text: #e6e8ea;
--ss-dark-muted: #aab4bb;
--ss-dark-field-bg: #14171a;
--ss-dark-field-border: #2a2f36;
--ss-dark-field-focus: #41b5ff;
--ss-field-radius: 12px;
--ss-dark-surface: #0f1216; /* card background */
}
html {
background-color: var(--dark-bg);
color-scheme: dark;
}
html .body, html body {
color: var(--dark-text);
background-color: var(--dark-bg);
}
/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { color: var(--dark-headings); }
p, span, div, li, label, figcaption { color: var(--dark-text); } /* General text elements */
em { color: var(--dark-text); font-style: italic; }
strong { color: var(--dark-headings); font-weight: 700; }
a { color: var(--dark-links); }
a:hover { color: var(--dark-links-hover); }
.text-color-muted, .text-color-muted.text-size-small { color: var(--dark-muted-text); }
.text-weight-semibold { color: var(--dark-headings); } /* Example - adjust as needed */
.text-size-medium.white, .text-size-small.white, .text-size-large.white, .text-size-xlarge.white, .text-size-tiny.white, .text-size-medium.white, .text-size-large.white, .text-size-xlarge.white, .text-size-tiny.semi-transparent { color: var(--dark-headings); } /* White text variations */
/* --- ADDED: Why Us Section Typography --- */
.ss_whyus-paragraph {
color: var(--dark-text) !important; /* Override hardcoded #2c2c2c */
}
.h5-heading {
color: var(--dark-headings) !important; /* Override hardcoded #2c2c2c */
}
.ss_whyus-grid-wrapper {
color: var(--dark-text) !important;
}
/* --- ADDED: Logo Bar Typography --- */
.logo-bar, .logo-business-bar {
color: var(--dark-text) !important; /* Override hardcoded #4e4e4e */
}
/* --- Sections and Containers --- */
.ss_background-section, .ss_background-section.white, .ss_background-section.ss_demo-section, .ss_background-section.home-bg, .ss_background-section.uf-bg-1, .ss_background-section.hbs-bg-1, .section-home-use-cases.grey, .cta, .section-bg, .section_faq4, .section_demo, .section_case-study, .section_socal-proof, .section-404, .section-f { background-color: var(--dark-bg); } /* General sections */
.container-large, .container-medium, .container-small, .container-large-6, .container-large-80rem, .ss_section-container, .ss_container-medium_1, .ss_container_small_2, .container-w1, .ss_container-medium_2, .ss_3d_scanners-container, .ss_body_comp_method-container, .ss_pricing-container, .ss_pricing_comparison-outer-container, .ss_3d_comparison-outer-container, .ss_return_policy-container, .div-mx-auto, .frame-2, .div-flex-4, .div-flex-6, .div-flex-8, .contact-modal4_content-wrapper, .popup-content-wrapper, .ss_navbar_menu, .ss_navbar { background-color: var(--dark-bg); } /* General containers */
/* Pricing Section - Darker Background */
#pricing-section { background-color: var(--dark-bg) !important; } /* #0d0d0d - true dark */
/* --- Cards and Boxes --- */
.features-overview-card-large, .features-overview-card-small, .blog-card, .home-savings-column, .cta-support, .badge, .badge.primary-light, .badge.primary-light.small, .badge.primary-light.large, .badge.inverse, .accordion, .accordion.first, .accordion.last, .price-card, .price-card-feature, .price-tab-menu-half, .w-tab-content, .w-tab-pane, .w-dropdown-list, .w-dropdown-list.w--open, .w-lightbox-content, .w-lightbox-view, .w-lightbox-strip, .w-lightbox-item, .w-lightbox-thumbnail, .w-lightbox-thumbnail-image, .w-nav-menu, .w-nav-overlay, .w-dropdown-list, .w-dropdown-list.w--open, .w-lightbox-backdrop, .w-lightbox-content, .w-lightbox-view, .w-lightbox-strip, .w-lightbox-item, .w-lightbox-thumbnail, .w-lightbox-thumbnail-image, .ss_whyus-grid-wrapper, .ss_whyus-grid-wrapper:hover, .contact-modal4_content-wrapper, .popup-content-wrapper, .tooltip-dark, .tooltip-light, .ss_lse_opt-box, .ss_lse_tab, .comp-table-cell, .comp-table-cell.secondary, .comp-table-cell.secondary.last, .bodycomp-sticky-bg-wrap, .bodycomp-title-wrap-sticky, .bodycomp-title-wrap-sticky.middle, .price-tab-link.w--current, .ss_pricing_options-tabs_half, .price-card-feature, .price-card, .ss_navbar_menu, .ss_navbar.w-nav, .ss_navbar, .contact-modal4_content-wrapper, .accordion, .accordion.first, .accordion.last {
background-color: var(--dark-grey-bg); /* Darker card backgrounds */
border-color: var(--dark-border); /* Darker card borders */
}
/* --- Buttons --- */
.w-button, .button, .button.primary, .button.secondary-3, .button.secondary.hero, .button.secondary.hero-sm, .button.secondary-3.smallish.header, .button.secondary-3.smallish.header.order, .button.secondary, .button.secondary.small, .button.secondary.popup-toggle, .button.secondarish, .button-10, .button-6, .button-3, .button-cta, .button-cta.long.ordercta, .button-cta.long.ordercta.large-atf, .button-cta.long.ordercta.hero-lg, .button-cta.long.ordercta.xxl, .button-cta.is-add-to-cart-button, .button-cta.button-caps.order, .button-cta.button-caps.order.op8, .button-cta.button-caps.white-bg, .button-2, .submit-button-2, .home-order-button, .ss_navbar-button-wrapper .button, .ss_navbar-button-wrapper .button:hover, .ss_navbar-button-wrapper .button.secondary-3.smallish.header, .ss_navbar-button-wrapper .button.secondary-3.smallish.header:hover, .ss_navbar-button-wrapper .button.secondary-3.smallish.header.order, .ss_navbar-button-wrapper .button.secondary-3.smallish.header.order:hover, .w-button:hover, .button:hover, .button.primary:hover, .button.secondary-3:hover, .button.secondary.hero:hover, .button.secondary.hero-sm:hover, .button.secondary-3.smallish.header:hover, .button.secondary-3.smallish.header.order:hover, .button.secondary.popup-toggle:hover, .button.secondary.small:hover, .button.secondarish:hover, .button-10:hover, .button-6:hover, .button-3:hover, .button-cta:hover, .button-cta.long.ordercta:hover, .button-cta.long.ordercta.large-atf:hover, .button-cta.long.ordercta.hero-lg:hover, .button-cta.long.ordercta.xxl:hover, .button-cta.is-add-to-cart-button:hover, .button-cta.button-caps.order:hover, .button-cta.button-caps.order.op8:hover, .button-cta.button-caps.white-bg:hover, .button-2:hover, .submit-button-2:hover, .home-order-button:hover, .ss_navbar-button-wrapper .button:hover, .ss_navbar-button-wrapper .button.secondary-3.smallish.header:hover, .ss_navbar-button-wrapper .button.secondary-3.smallish.header.order:hover {
background-color: var(--dark-grey-bg); /* Darken button backgrounds */
border-color: var(--dark-grey-bg); /* Keep border consistent with background */
color: var(--dark-text); /* Light text on buttons */
}
.w-button:hover, /* Specific hover styles for buttons */
.button:hover {
color: var(--dark-headings); /* Whiter text on button hover */
}
.button.secondary.popup-toggle{
background-color: rgb(44 44 44 / 40%); /* Example - adjust as needed */
}
/* --- Inputs and Forms --- */
.form-input, .w-input, .w-select, .form-input-2 {
background-color: var(--dark-input-bg);
border-color: var(--dark-border);
color: var(--dark-text);
}
.form-input:focus, .w-input:focus, .w-select:focus, .form-input-2:focus {
border-color: var(--dark-brand-blue);
outline: none;
box-shadow: 0 0 0 2px rgb(92 129 255 / 50%); /* Subtle glow on focus */
}
.form-input::placeholder, .w-input::placeholder, .w-select::placeholder, .form-input-2::placeholder {
color: var(--dark-input-placeholder);
}
.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
background-color: var(--dark-input-disabled-bg);
color: var(--dark-input-disabled-text);
}
.w-select { background-color: var(--dark-input-bg); } /* Ensure consistent select background */
/* --- Form Messages --- */
.form-message-error, .w-form-done, .w-form-fail, .error-message-3 {
background-color: var(--dark-error-message-bg);
color: var(--dark-text); /* Light text for error/success messages */
}
.w-form-done { background-color: var(--dark-success-message-bg); }
/* --- Lists and Blockquotes --- */
ul, ol { background: rgb(92 129 255 / 7%); } /* Subtle list background */
li, .list-item { color: var(--dark-text); }
blockquote { border-left-color: var(--dark-blockquote-border); color: #ccc; }
/* --- Dividers and Rules --- */
hr, .divider-details { border-color: var(--dark-hr-border); }
/* --- Webflow Components --- */
.w-webflow-badge { background-color: var(--dark-webflow-badge) !important; color: #bbb !important; box-shadow: 0 0 0 1px rgb(0 0 0 / 20%), 0 1px 3px rgb(0 0 0 / 20%) !important; }
.w-webflow-badge > img { filter: invert(1); } /* Invert Webflow logo */
.w-slider-dot { background-color: var(--dark-slider-dot); }
.w-slider-dot:focus { outline: 2px solid #3898ec; box-shadow: none; }
.w-slider-dot.w-active { background-color: var(--white); }
/* --- Navbar --- */
.ss_navbar, .ss_navbar.w-nav { background-color: var(--dark-navbar-bg); border-bottom-color: var(--dark-border); } /* Dark navbar background */
.ss_navbar-link, .ss_navbar_menu-button, .ss_menu-icon_line-top, .ss_menu-icon_line-middle, .ss_menu-icon_line-middle-top, .ss_menu-icon_line-middle-base, .ss_menu-icon_line-bottom, .ss_navbar_social-link, .navbar18_bottom .text-size-large-3, .navbar18_bottom .text-size-large-3 a { color: var(--dark-text); } /* Navbar text and icons */
.ss_navbar-link:hover, .ss_navbar-link.indent:hover, .ss_navbar_social-link:hover, .navbar18_bottom .text-size-large-3 a:hover { color: #a7a7a7; } /* Navbar link hover */
.ss_navbar-link.w--current, a.ss_navbar-link.w--current { color: var(--dark-accent) !important; } /* Current link style with higher specificity */
.ss_navbar_menu-button.w--open { background-color: rgb(0 0 0 / 20%); color: var(--white); } /* Open menu button */
.ss_navbar_menu { background-image: linear-gradient(240deg, var(--dark-grey), #fff0); } /* Menu background gradient */
.ss_navbar_social-link:hover .social-icon svg path { fill: var(--shapescale-dark-100); stroke: var(--shapescale-dark-100); } /* Social icon hover */
.navbar18_bottom .text-size-large-3:hover { color: var(--white); }
/* --- ADDED: Mobile Menu Icon Lines --- */
.menu-icon_line-middle-base, .ss_menu-icon_line-top, .ss_menu-icon_line-middle,
.ss_menu-icon_line-middle-top, .ss_menu-icon_line-bottom {
background-color: var(--dark-text) !important; /* Override hardcoded #000 */
}
/* --- Blog Cards --- */
.blog-card-wrapper .blog-card-title, .blog-card-wrapper .text-200.medium { color: var(--dark-headings); } /* Blog card titles and muted text */
.blog-card-wrapper .divider-details { background-color: var(--dark-blog-divider); } /* Blog card divider */
/* --- Accordion --- */
.accordion, .accordion.first, .accordion.last { border-color: var(--dark-accordion-border); }
.accordion-title { color: var(--white); }
.accordion-content { color: var(--dark-muted-text); }
/* --- Badges and Labels --- */
.badge, .badge.primary-light, .badge.primary-light.small { background-color: var(--dark-badge-bg); }
.badge.primary-light.large { background-color: var(--transparent); }
.label, .label.primary-light, .label.primary-light.small, .label.primary-light.large { background-color: var(--dark-label-bg); color: var(--white-smoke); }
/* --- Feature Cards and CTAs --- */
.features-overview-card-large, .features-overview-card-small, .cta-support, .button.secondary.popup-toggle, .price-card-feature, .cta-dark, .section-report-cta { background-color: var(--dark-feature-card-bg); color: var(--white); }
/* --- ADDED: Specific CTA Dark Section Override --- */
.cta-dark {
background-color: var(--dark-bg) !important;
background-image: linear-gradient(303deg, rgb(0 0 0 / 60%), rgb(0 0 0 / 30%)), url("https://cdn.prod.website-files.com/679b389fab97d46a3c4d2369/679b389fab97d46a3c4d254c_shapescale-closed-pre-optim.jpg") !important;
color: var(--dark-headings) !important;
}
/* CTA content elements */
.cta-dark .overline, .cta-dark .overline.drop-shadow {
color: var(--dark-accent) !important;
text-shadow: 1px 1px 2px rgb(0 0 0 / 80%);
}
.cta-dark .h2-heading, .cta-dark .h2-heading.text-shadow {
color: var(--dark-headings) !important;
text-shadow: 2px 2px 4px rgb(0 0 0 / 80%);
}
.cta-dark .overline-2 {
color: var(--dark-muted-text) !important;
}
/* --- Comparison Table --- */
.bodycomp-sticky-bg-wrap, .comp-table-cell { background-color: var(--dark-grey-bg); color: var(--white-smoke); }
.bodycomp-title-wrap-sticky, .bodycomp-title-wrap-sticky.middle { background-color: var(--dark-grey-bg); color: var(--white-smoke); border-bottom-color: var(--dark-comp-table-border); border-right-color: var(--dark-comp-table-border); }
.comp-table-cell { border-right-color: var(--dark-comp-table-border); }
.comp-table-cell.secondary.last, .comp-table-cell.secondary { background-color: var(--dark-comp-table-secondary); color: var(--white); }
.comp-table-cell.featured.sticky, .comp-table-cell.featured.end { background-color: var(--dark-comp-table-featured); border-color: var(--dark-comp-table-featured); box-shadow: 0 30px 50px -10px #5c81ff4d; }
.sticky-grid-bodycomp-methods { background-color: var(--dark-grey-bg); }
.tooltip-dark, .tooltip-light { background-color: var(--dark-tooltip-bg); color: var(--white); }
.tooltip-arrow, .tooltip-dark-arrow-right, .tooltip-arrow-far-right, .tooltip-light-arrow-right,.tooltip-light-arrow-left { background-color: var(--dark-tooltip-arrow); border-color: var(--dark-tooltip-arrow); }
/* --- Pricing Table --- */
.price-card-feature { background-color: var(--dark-grey-bg); color: var(--white); border-color: var(--ultra-light-grey); }
.price-tab-menu-half { background-color: var(--dark-20); border-color: var(--dark-grey); }
.price-tab-link.w--current { background-color: var(--dark-price-tab-active-bg); color: var(--dark-price-tab-active-text); }
.ss_pricing_options-tabs_half { background: var(--dark-5); }
/* --- Images --- */
/* Consider adding specific image adjustments if needed, e.g., brightness or opacity filters */
/* --- Utility and Misc Classes (adjust as needed) --- */
.text-color-muted, .text-color-muted.text-size-small, .inverse-text-color-muted, .text-color-muted, .text-size-small.text-color-muted, .text-size-tiny.semi-transparent, .text-size-medium-3, .text-size-medium-3.text-weight-semibold, .form-checkbox-label-2.text-size-small, .bodycomp-title-wrap-sticky, .bodycomp-title-wrap-sticky.middle, .comp-table-cell.secondary, .tooltip-copy-small, .price-text-large, .price-feature-line, .text-size-small-3, .paragraph-sm, .price-feature-half, .text-size-medium-3, .text-size-medium-3.text-weight-semibold, .form-checkbox-label-2.text-size-small, .text-size-tiny.semi-transparent, .text-300.medium.color-neutral-800 { color: var(--dark-muted-text); } /* Muted text variations */
.form-checkbox-icon-2 { border-color: var(--dark-grey); }
.form-checkbox-icon-2.w--redirected-checked { background-color: var(--white); border-color: var(--white); }
.form-input-2, .form-input-2:focus, .form-input-2.is-select-input:focus, .form-input-2::placeholder { /* Form input 2 variations */
/* Styles already defined above, can remove from here if not overriding */
}
.error-text, .error-text.error-message-2, .error-text.error-message-3, .error-text.form-message-error { color: #b16cea; } /* Error text variations */
.success-text, .success-message-inner-container, .success-message-2.white-message, .success-message-3 { color: var(--white); } /* Success text variations */
.hide-mobile-portrait.show-mobile-landscape, .show-mobile-portrait { /* Visibility classes - adjust if needed */
/* No specific dark mode styling, inherit from parent or default */
}
.ss_navbar-trigger-bottom { display:none; } /* Hide bottom navbar trigger */
.ss_navbar_links-wrapper { grid-template-columns: 1fr; } /* Adjust navbar links layout */
/* Form field layout - preserve 2 columns on desktop, single column on mobile */
@media screen and (width <= 767px) {
.form-field-2col { grid-template-columns: 1fr; }
}
/* Keep 2-column layout on desktop even in dark mode */
@media screen and (width >= 768px) {
.form-field-2col { grid-template-columns: 1fr 1fr; }
}
/* --- ADDED: Pricing Page Specific Elements --- */
.btn-monthly, .btn-yearly {
background-color: var(--dark-grey-bg);
color: var(--dark-text);
border: 1px solid var(--dark-border);
transition: all 0.3s ease;
}
.btn-monthly:hover, .btn-yearly:hover {
background-color: var(--dark-accent);
color: var(--dark-headings);
border-color: var(--dark-accent);
}
.btn-monthly.w--current, .btn-yearly.w--current {
background-color: var(--dark-accent);
color: var(--dark-headings);
border-color: var(--dark-accent);
}
#lease-pricing, #billing-description, .price-text-large {
color: var(--dark-headings);
}
.price-type {
color: var(--dark-muted-text);
}
.ss_sticky_lease_form, .ss_sticky_buy_form {
background-color: var(--dark-grey-bg);
border-color: var(--dark-border);
}
/* --- ADDED: Form Fields and Labels --- */
.field, .field_wrap input, .field_wrap select, .field_wrap textarea,
.field.name, .field.email, .field.company, .field.message {
background-color: var(--dark-input-bg);
color: var(--dark-text);
border-color: var(--dark-border);
}
.field_label, .field-label-5, .field_label.is-radio, .field_label.large {
color: var(--dark-text);
}
.field:focus, .field_wrap input:focus, .field_wrap select:focus, .field_wrap textarea:focus {
border-color: var(--dark-brand-blue);
outline: none;
box-shadow: 0 0 0 2px rgb(92 129 255 / 30%);
}
.field_wrap {
background-color: transparent;
}
/* --- ADDED: Dropdowns --- */
.dropdown-form, .w-dropdown-toggle, .field_dropdown {
background-color: var(--dark-input-bg);
color: var(--dark-text);
border-color: var(--dark-border);
}
.dropdown-list, .w-dropdown-list, .dropdown-2 .w-dropdown-list {
background-color: var(--dark-grey-bg);
border: 1px solid var(--dark-border);
box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}
.w-dropdown-arrow, .icon.w-icon-dropdown-toggle {
color: var(--dark-text);
}
.form-span {
color: var(--dark-text);
}
/* --- ADDED: Radio Button Label Dark Mode Override --- */
/* Override hardcoded #333 color from b2b_webflow_all_head.html for dark mode visibility */
/* Higher specificity needed to override inline !important styles */
.field_wrap .field_label.is-radio,
label.field_label.is-radio {
color: var(--dark-headings) !important; /* Override #333 from head styles */
}
/* Radio button error state - keep visible in dark mode */
.field_wrap.has-error .field_label.is-radio {
color: var(--dark-headings) !important; /* Override #333 from head styles */
}
/* --- ADDED: Tabs --- */
.w-tabs, .w-tab-menu, .ss_pricing_options-tabs {
background-color: var(--dark-bg);
}
.w-tab-link, a[data-w-tab] {
background-color: var(--dark-grey-bg);
color: var(--dark-text);
border-color: var(--dark-border);
}
.w-tab-link.w--current, .w-tab-link:hover, a[data-w-tab].w--current {
background-color: var(--dark-accent);
color: var(--dark-headings);
border-color: var(--dark-accent);
}
.w-tab-content, .w-tab-pane {
background-color: transparent;
}
/* --- ADDED: Radio Buttons and Checkboxes --- */
.radio_button, .checkbox-icon, .w-form-formradioinput, .w-checkbox-input,
.tab_button, .w-form-formradioinput--inputType-custom {
background-color: var(--dark-input-bg);
border: 2px solid var(--dark-border);
}
.w-form-formradioinput:checked, .w-form-formradioinput.w--redirected-checked,
.w-checkbox-input--inputType-custom.w--redirected-checked,
.radio_button.w--redirected-checked, .checkbox-icon.w--redirected-checked {
background-color: var(--dark-brand-blue);
border-color: var(--dark-brand-blue);
}
.radio_label, .checkbox-wrapper span, .w-form-label {
color: var(--dark-text);
}
.tab_wrap, .radio_wrap {
background-color: transparent;
}
.tab_field, .radio_field, .checkbox-wrapper {
background-color: transparent;
}
/* --- ADDED: Typography and Headings --- */
.h2-heading-hero, .h2-heading, .h3 {
color: var(--dark-headings);
}
/* Specific heading adjustments for better contrast */
.h2-heading-section, .h1-heading-normal {
color: #d8d8d8; /* Softer than pure white for better readability */
}
/* For very large headings, use slightly darker color */
@media screen and (width >= 768px) {
.h2-heading-section {
color: #d0d0d0; /* Even softer for large text */
}
}
.h3-heading, .quote-h4, .author-name-2 {
color: var(--dark-text) !important; /* Override hardcoded #2c2c2c */
}
/* --- ADDED: Button Text Override --- */
.button-text-text {
color: var(--dark-headings) !important; /* Override hardcoded #000 */
}
.paragraph-md, .text-size-medium-3, .text-style-italic-2, .author-job {
color: var(--dark-text);
}
.footer-title-button {
color: var(--dark-headings);
}
/* --- ADDED: Paragraph Variations --- */
.paragraph-dark {
color: var(--dark-text) !important; /* Override var(--shapescale-dark-100) */
-webkit-text-stroke-color: var(--dark-text) !important;
}
.paragraph-gray-xs {
color: var(--dark-muted-text) !important; /* Override var(--dark-grey) */
}
/* --- ADDED: Review Widgets --- */
/* Note: Widget internals styled by rave-review-overrides-refactor-v2.css */
.trustspot, .trustspot-main-widget, .ss_reviews_b2b001-container, .ss_reviews_b2b002-container {
background-color: transparent !important; /* Let widget styles take precedence */
color: var(--dark-text);
border-color: transparent !important; /* Widget handles its own borders */
}
/* --- ADDED: Testimonial/Research Cards --- */
.ts-content {
background-color: var(--dark-grey-bg);
color: var(--dark-text);
border: 1px solid var(--dark-border);
}
/* Additional testimonial elements */
.ts-wrapper, .testimonial-card, .research-card {
background-color: var(--dark-grey-bg);
color: var(--dark-text);
}
/* Testimonial reviewer designation */
.ts-reviewer-desi {
color: var(--dark-muted-text) !important; /* Override var(--dim-grey) */
}
/* Read more links in testimonials */
.ts-content a, .testimonial-link {
color: var(--dark-links);
}
.ts-content a:hover, .testimonial-link:hover {
color: var(--dark-links-hover);
}
/* --- ADDED: Demo and Header Sections --- */
.ss_demo-section, .ss_demo-header {
background-color: var(--dark-bg);
}
.header1_component, .header1_content, .header1_demo-wrapper {
background-color: transparent;
color: var(--dark-text);
}
/* --- ADDED: Success and Error Messages --- */
.success_wrap, .success-message-inner-container {
background-color: var(--dark-success-bg);
color: var(--dark-text);
}
.error-message_text, .error-message-3 .error-message_text {
color: #ff6b6b;
background-color: var(--dark-error-bg);
}
/* --- ADDED: Misc Elements --- */
.w-embed {
background-color: transparent;
}
.cf-turnstile {
filter: invert(1) hue-rotate(180deg);
}
.button_form-wrapper {
background-color: transparent;
}
/* --- ADDED: Calendar Embed --- */
#calendly-embed-container {
background-color: var(--dark-grey-bg);
border-color: var(--dark-border);
}
/* --- ADDED: Navigation Dots --- */
.navdot {
border-color: var(--dark-border) !important;
background-color: var(--dark-input-bg) !important;
color: var(--dark-muted-text) !important;
}
.navdot.selected {
border-color: var(--dark-accent) !important;
background-color: var(--dark-accent) !important;
color: var(--dark-headings) !important;
box-shadow: 0 0 0 2px rgb(91 181 162 / 30%) !important;
}
/* --- ADDED: Feature Sections and Alternating Backgrounds --- */
.ss_feature-section, .ss_whyus-section {
background-color: var(--dark-section-alt-bg); /* Slightly lighter than main bg */
}
/* Sections that use white-smoke background in light mode */
.ss_feature-section[style*="--white-smoke"],
[style*="background-color: var(--white-smoke)"],
.background-color-primary-light {
background-color: var(--dark-section-alt-bg) !important;
}
/* Additional section backgrounds */
.section-wrapper, .content-section {
background-color: var(--dark-bg);
}
/* Alternating section pattern for better visual hierarchy */
section:nth-of-type(even) {
background-color: var(--dark-section-alt-bg);
}
/* Ensure main content areas have proper backgrounds */
main, article, aside {
background-color: var(--dark-bg);
color: var(--dark-text);
}
/* --- ADDED: FAQ Section Background --- */
.ss_faq-section {
background-color: var(--dark-bg) !important; /* Override transparent background */
}
/* --- MINIMAL FAQ ACCORDION DESIGN --- */
/* Container */
.faq-grid-right, .faq {
background: transparent;
color: var(--dark-text);
}
/* Clean Accordion Items */
.accordion, .accordion.first, .accordion.second, .accordion.last {
background: var(--dark-grey-bg) !important;
border: 1px solid var(--dark-border) !important;
border-radius: 6px !important;
margin-bottom: 1rem;
transition: border-color 0.2s ease;
overflow: hidden;
}
.accordion:hover {
border-color: rgb(255 255 255 / 20%) !important;
}
.accordion.last {
margin-bottom: 0;
}
/* Clean Title Section */
.accordion-title-wapper {
background: transparent;
padding: 1.5rem !important;
cursor: pointer;
transition: background-color 0.2s ease;
}
.accordion-title-grid {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 1rem;
width: 100%;
}
.accordion-title-wapper:hover {
background-color: rgb(255 255 255 / 3%);
}
/* Clean Typography */
.accordion-title {
color: var(--dark-headings) !important;
margin: 0;
font-size: 1.1rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
transition: color 0.2s ease;
}
/* Simple Icon */
.accordion-icon {
background: transparent;
color: var(--dark-text);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.accordion-icon svg {
fill: var(--dark-text) !important;
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.accordion-title-wapper:hover .accordion-icon svg {
transform: scale(1.1);
}
/* Clean Content Area */
.accordion-content-wrapper {
background: rgb(0 0 0 / 10%) !important;
border-top: 1px solid var(--dark-border);
transition: all 0.2s ease;
}
.accordion-content {
background: transparent;
padding: 1.5rem !important;
color: var(--dark-text) !important;
}
/* Clean Typography for Content */
.accordion-content .w-richtext {
color: var(--dark-text) !important;
line-height: 1.6 !important;
}
.accordion-content .w-richtext p {
color: var(--dark-text) !important;
line-height: 1.6 !important;
margin-bottom: 1rem;
font-weight: 400;
}
.accordion-content .w-richtext p:last-child {
margin-bottom: 0;
}
.accordion-content .w-richtext strong {
color: var(--dark-headings) !important;
font-weight: 600 !important;
}
/* Simple Link Styling */
.accordion-content .w-richtext a {
color: var(--dark-links) !important;
text-decoration: underline !important;
transition: color 0.2s ease;
}
.accordion-content .w-richtext a:hover {
color: var(--dark-links-hover) !important;
}
/* Clean List Styling */
.accordion-content .w-richtext ul,
.accordion-content .w-richtext ol {
color: var(--dark-text) !important;
margin: 1rem 0;
padding-left: 1.5rem;
background: transparent !important;
}
.accordion-content .w-richtext li {
color: var(--dark-text) !important;
margin-bottom: 0.5rem;
line-height: 1.6;
}
.accordion-content .w-richtext li:last-child {
margin-bottom: 0;
}
.accordion-content .w-richtext ul[role="list"] li {
list-style-type: disc;
color: var(--dark-text) !important;
}
.accordion-content .w-richtext ol[role="list"] li {
list-style-type: decimal;
color: var(--dark-text) !important;
}
/* Simple list markers */
.accordion-content .w-richtext ul li::marker {
color: rgb(255 255 255 / 60%);
}
.accordion-content .w-richtext ol li::marker {
color: rgb(255 255 255 / 60%);
}
/* Clean Focus States */
.accordion-title-wapper:focus {
outline: 2px solid rgb(255 255 255 / 50%);
outline-offset: 2px;
}
/* Expanded State */
.accordion[data-expanded="true"],
.accordion:has(.accordion-content-wrapper[style*="height"]:not([style*="height: 0"])) {
border-color: rgb(255 255 255 / 30%) !important;
}
.accordion[data-expanded="true"] .accordion-icon svg,
.accordion:has(.accordion-content-wrapper[style*="height"]:not([style*="height: 0"])) .accordion-icon svg {
transform: rotate(45deg);
}
/* Mobile Responsiveness */
@media screen and (width <= 768px) {
.accordion-title-wapper {
padding: 1rem !important;
}
.accordion-content {
padding: 1rem !important;
}
.accordion-title {
font-size: 1rem !important;
}
.accordion-content .w-richtext ul,
.accordion-content .w-richtext ol {
padding-left: 1rem;
}
}
/* Embedded Content */
.faq .accordion-content .w-richtext div.w-embed {
background: transparent;
margin: 1rem 0;
}
.faq .accordion-content .w-richtext div.w-embed p {
color: var(--dark-text) !important;
}
.faq .accordion-content .w-richtext div.w-embed a {
color: var(--dark-links) !important;
}
.faq .accordion-content .w-richtext div.w-embed a:hover {
color: var(--dark-links-hover) !important;
}
/* Clean AR Link Styling */
.faq .accordion-content .w-richtext a#ar-link {
color: var(--dark-links) !important;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgb(255 255 255 / 5%);
border: 1px solid var(--dark-border);
border-radius: 4px;
transition: all 0.2s ease;
font-weight: 500;
text-decoration: none !important;
}
.faq .accordion-content .w-richtext a#ar-link:hover {
color: var(--dark-links-hover) !important;
background: rgb(255 255 255 / 8%);
border-color: rgb(255 255 255 / 20%);
}
.faq .accordion-content .w-richtext svg#ar-icon {
width: 20px;
height: 20px;
filter: brightness(0) saturate(100%) invert(70%) sepia(8%) saturate(1458%) hue-rotate(202deg) brightness(94%) contrast(87%);
transition: all 0.2s ease;
}
.faq .accordion-content .w-richtext a#ar-link:hover svg#ar-icon {
filter: brightness(0) saturate(100%) invert(85%) sepia(15%) saturate(1458%) hue-rotate(202deg) brightness(104%) contrast(97%);
}
/* === Dark mode form polish === */
/* Labels */
.w-form-label,
.field-label,
label {
color: var(--ss-dark-text) !important;
}
/* Inputs, selects, textareas */
.w-input,
.w-select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"] {
background-color: var(--ss-dark-field-bg) !important;
border: 1px solid var(--ss-dark-field-border) !important;
color: var(--ss-dark-text) !important;
}
/* Placeholder text */
.w-input::placeholder,
textarea::placeholder,
input::placeholder {
color: var(--ss-dark-muted) !important;
opacity: 1; /* Firefox */
}
/* Focus state (accessible) */
.w-input:focus,
.w-select:focus,
textarea:focus {
outline: none;
border-color: var(--dark-brand-blue) !important;
box-shadow: 0 0 0 3px rgb(92 129 255 / 25%); /* visible focus ring */
}
/* Select arrow contrast (no external asset) */
.w-select {
appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 1rem;
padding-right: 2.25rem; /* room for arrow */
}
/* WebKit autofill (Chrome/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ss-dark-text);
box-shadow: 0 0 0 1000px var(--ss-dark-field-bg) inset;
transition: background-color 9999s ease-in-out 0s;
}
/* ===== ShapeScale B2B Demo: dark mode form fix ===== */
/* Ensure we have a stacking context we control */
.field_wrap { position: relative; z-index: 0; }
/* 3) Labels: readable color only - DO NOT modify positioning for floating labels */
/* IMPORTANT: Only change color, never position/z-index/pointer-events for floating labels */
.w-form-label,
.field-label,
label:not(.field_label) {
color: var(--ss-dark-text, #e6e8ea) !important;
}
/* Non-floating labels (e.g., radio, checkbox) need positioning */
.w-form-label:not(.field_label),
.field-label:not(.field_label),
label.is-radio {
position: relative;
z-index: 3 !important;
pointer-events: auto;
}
/* Floating labels (.field_label, .field_label.large) - color only, preserve animation */
.field_label,
.field_label.large {
color: var(--ss-dark-text, #e6e8ea) !important;
/* DO NOT set position, z-index, or pointer-events - they break floating animation */
}
/* 4) Inputs/selects/textarea: dark appearance + radius restored */
.w-input,
.w-select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"] {
background-color: var(--ss-dark-field-bg) !important;
border: 1px solid var(--ss-dark-field-border) !important;
color: var(--ss-dark-text, #e6e8ea) !important;
border-radius: var(--ss-field-radius) !important; /* bring back rounded corners */
position: relative;
z-index: 1; /* below the label */
}
/* 5) Placeholder */
.w-input::placeholder,
textarea::placeholder,
input::placeholder {
color: var(--ss-dark-muted, #aab4bb) !important;
opacity: 1;
}
/* 6) Focus state (visible & accessible) */
.w-input:focus,
.w-select:focus,
textarea:focus {
outline: none;
border-color: var(--dark-brand-blue) !important;
box-shadow: 0 0 0 3px rgb(92 129 255 / 25%);
}
/* 7) Select arrow contrast */
.w-select {
appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 1rem;
padding-right: 2.25rem;
border-radius: var(--ss-field-radius) !important;
}
/* ===== B2B Demo (dark): make the card + underline inputs match light mode ===== */
/* Card wrapper — match light mode shape/elevation */
.header1_demo-wrapper,
.header1_demo_form-wrapper {
background-color: var(--ss-dark-surface) !important;
border: 1px solid var(--ss-dark-field-border) !important;
border-radius: 24px !important;
padding: clamp(16px, 3vw, 40px) !important;
box-shadow:
0 1px 0 rgb(255 255 255 / 3%) inset,
0 12px 32px rgb(0 0 0 / 45%) !important;
overflow: visible; /* avoid clipping of floating labels */
}
/* Make sure each field section manages its own stacking */
.header1_demo-wrapper .field_wrap,
.header1_demo_form-wrapper .field_wrap {
position: relative;
isolation: isolate; /* prevents ancestor stacking oddities */
overflow: visible; /* labels shouldn't be cut off */
}
/* Labels readable - PRESERVE floating label positioning from head file */
.header1_demo-wrapper .w-form-label,
.header1_demo-wrapper .field-label,
.header1_demo-wrapper .field_label,
.header1_demo-wrapper .field_label.large,
.header1_demo-wrapper label,
.header1_demo_form-wrapper .w-form-label,
.header1_demo_form-wrapper .field-label,
.header1_demo_form-wrapper .field_label,
.header1_demo_form-wrapper .field_label.large,
.header1_demo_form-wrapper label {
color: var(--ss-dark-text, #e6e8ea) !important;
/* DO NOT set position/z-index/pointer-events - breaks floating animation from head file */
/* The head file sets position: absolute which is critical for floating */
}
/* Underline-style inputs (like light mode) */
.header1_demo-wrapper .field,
.header1_demo-wrapper .w-input,
.header1_demo-wrapper .w-select,
.header1_demo-wrapper textarea,
.header1_demo-wrapper input[type="text"],
.header1_demo-wrapper input[type="email"],
.header1_demo-wrapper input[type="tel"],
.header1_demo-wrapper input[type="url"],
.header1_demo-wrapper input[type="number"],
.header1_demo_form-wrapper .field,
.header1_demo_form-wrapper .w-input,
.header1_demo_form-wrapper .w-select,
.header1_demo_form-wrapper textarea,
.header1_demo_form-wrapper input[type="text"],
.header1_demo_form-wrapper input[type="email"],
.header1_demo_form-wrapper input[type="tel"],
.header1_demo_form-wrapper input[type="url"],
.header1_demo_form-wrapper input[type="number"] {
/* Use background-color longhand instead of `background:` shorthand —
the shorthand was wiping out background-image and killing the
dark-mode select chevron painted by .w-select above. */
background-color: transparent !important; /* remove dark pills */
border-top: none !important;
border-right: none !important;
border-left: none !important;
border-bottom: 1.5px solid var(--ss-dark-field-border) !important;
border-radius: 0 !important; /* match light mode */
color: var(--ss-dark-text, #e6e8ea) !important;
box-shadow: none !important;
position: relative;
z-index: 1;
}
/* Explicit dark-mode chevron on the demo form's selects, in case any
later rule (or browser default) resets background-image. */
.header1_demo-wrapper .w-select,
.header1_demo_form-wrapper .w-select {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 1rem !important;
padding-right: 2.25rem !important;
}
/* Focus state: bright underline without layout shift */
.header1_demo-wrapper .field:focus,
.header1_demo-wrapper .w-input:focus,
.header1_demo-wrapper .w-select:focus,
.header1_demo-wrapper textarea:focus,
.header1_demo_form-wrapper .field:focus,
.header1_demo_form-wrapper .w-input:focus,
.header1_demo_form-wrapper .w-select:focus,
.header1_demo_form-wrapper textarea:focus {
outline: none;
border-bottom-color: var(--dark-brand-blue) !important;
box-shadow: 0 2px 0 0 var(--dark-brand-blue); /* extra glow below */
}
/* Placeholder & helper text */
.header1_demo-wrapper .w-input::placeholder,
.header1_demo-wrapper textarea::placeholder,
.header1_demo-wrapper input::placeholder {
color: var(--ss-dark-muted, #9aa4ad) !important;
opacity: 1;
}
/* Select: keep underline style and visible arrow */
.header1_demo-wrapper .w-select {
appearance: none;
appearance: none;
background-color: transparent !important;
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 1rem;
padding-right: 2.25rem;
}
/* Autofill (Chrome/Safari) */
.header1_demo-wrapper input:-webkit-autofill,
.header1_demo-wrapper input:-webkit-autofill:hover,
.header1_demo-wrapper input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ss-dark-text);
box-shadow: 0 0 0 1000px transparent inset;
transition: background-color 99999s ease-in-out 0s;
}
/* --- COMPREHENSIVE PRICING PAGE DARK MODE FIXES --- */
/* Phase 1: Pricing Tab System */
.ss_pricing_options-tabs_half, .ss_pricing_options-tabs {
background-color: var(--dark-bg) !important;
}
.price-tab-menu-half {
background-color: var(--dark-grey-bg) !important;
border: 1px solid var(--dark-border) !important;
border-radius: 8px !important;
padding: 4px !important;
}
.price-tab-link {
background-color: transparent !important;
color: var(--dark-text) !important;
border: none !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
padding: 1rem 1.5rem !important;
}
.price-tab-link:hover {
background-color: rgb(255 255 255 / 5%) !important;
color: var(--dark-headings) !important;
}
.price-tab-link.w--current {
background-color: var(--dark-bg) !important;
color: var(--dark-headings) !important;
box-shadow: 0 2px 4px rgb(0 0 0 / 30%) !important;
}
/* Tab content areas - Fix background layering */
.w-tab-content, .price-content {
background-color: transparent !important;
}
.w-tab-pane {
background-color: transparent !important;
}
/* Phase 2: Pricing Cards & Content */
.ss_lse_opt-box, .price-card {
background-color: var(--dark-grey-bg) !important;
border: 1px solid var(--dark-border) !important;
border-radius: 12px !important;
color: var(--dark-text) !important;
}
/* Main pricing display */
.price-text-large, #lease-pricing {
color: var(--dark-headings) !important;
}
.price-type {
color: var(--dark-muted-text) !important;
}
.price-billing, #billing-description {
color: var(--dark-muted-text) !important;
font-weight: 500 !important;
}
.price-text {
color: var(--dark-headings) !important;
}
.price-comma {
color: var(--dark-headings) !important;
}
/* Price details and descriptions */
.price-detail {
color: var(--dark-text) !important;
}
.paragraph-small-5 {
color: var(--dark-text) !important;
}
/* Phase 3: Badges and Labels */
.badge-deal {
background-color: var(--dark-accent) !important;
color: var(--dark-bg) !important;
border: none !important;
}
.badge-secondary {
background-color: var(--dark-border) !important;
color: var(--dark-text) !important;
border: 1px solid var(--dark-border) !important;
}
.badge-primary {
background-color: var(--dark-accent) !important;
color: var(--dark-bg) !important;
border: none !important;
}
.text-block-22 {
color: inherit !important;
font-weight: 600 !important;
}
.text-block-24 {
color: inherit !important;
font-weight: 600 !important;
}
/* Tab text blocks */
.text-block-20, .text-block-21, .text-block-25 {
color: inherit !important;
}
/* Phase 4: Feature Lists & Icons */
.price-feature-grid {
background-color: transparent !important;
}
.price-feature-line {
background-color: transparent !important;
border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
padding: 1rem 0 !important;
color: var(--dark-text) !important;
}
.price-feature-line:last-child {
border-bottom: none !important;
}
.price-feature-half {
color: var(--dark-text) !important;
}
.price-feature-half.laptop,
.price-feature-half.desktop {
color: var(--dark-text) !important;
}
/* Pricing icons */
.pricing-icon {
color: var(--dark-text) !important;
}
.pricing-icon svg {
fill: var(--dark-text) !important;
color: var(--dark-text) !important;
}
/* Special handling for shield icon */
.pricing-icon svg path[fill="#2c2c2c"] {
fill: var(--dark-text) !important;
}
/* Phase 5: Interactive Elements - Toggle System */
.ss_lse_opt-tabs {
background-color: transparent !important;
}
.ss_lse_opt-tgl {
background-color: var(--dark-grey-bg) !important;
border: 1px solid var(--dark-border) !important;
border-radius: 8px !important;
padding: 4px !important;
}
.ss_lse_tab {
background-color: transparent !important;
color: var(--dark-text) !important;
border: none !important;
border-radius: 6px !important;
transition: all 0.2s ease !important;
padding: 0.75rem 1rem !important;
}
.ss_lse_tab:hover {
background-color: rgb(255 255 255 / 5%) !important;
color: var(--dark-headings) !important;
}
.ss_lse_tab.w--current {
background-color: var(--dark-bg) !important;
color: var(--dark-headings) !important;
box-shadow: 0 2px 4px rgb(0 0 0 / 30%) !important;
}
.ss_lse_tab_txt {
color: inherit !important;
font-weight: 500 !important;
}
/* Toggle dot system */
.ss_tgl-ct {
background-color: rgb(255 255 255 / 10%) !important;
border-radius: 12px !important;
padding: 2px !important;
}
.ss_tgl_dot {
background-color: var(--dark-headings) !important;
border-radius: 10px !important;
transition: all 0.2s ease !important;
}
.ss_tgl_dot.right {
background-color: var(--dark-headings) !important;
}
/* Phase 6: Tooltips */
.tooltip-button {
color: var(--dark-text) !important;
}
.tooltip-icon svg {
fill: var(--dark-text) !important;
color: var(--dark-text) !important;
}
.tooltip-wrap {
z-index: 1000 !important;
}
.tooltip-dark {
background-color: var(--dark-grey-bg) !important;
color: var(--dark-text) !important;
border: 1px solid var(--dark-border) !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgb(0 0 0 / 40%) !important;
}
.tooltip-copy-small {
color: var(--dark-text) !important;
line-height: 1.5 !important;
}
.tooltip-arrow-far-right,
.tooltip-dark-arrow-right,
.tooltip-arrow-far-left {
background-color: var(--dark-grey-bg) !important;
border-color: var(--dark-border) !important;
}
/* Phase 7: Product Ratings - Comprehensive Star System Fix */
.ss_product_rating {
background-color: transparent !important;
}
.trustspot-inline-product,
.trustspot-inline-rating {
background-color: transparent !important;
color: var(--dark-text) !important;
}
.trustspot-inline-rating.trustspot-extended-widget {
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
margin: 1rem 0 0 !important;
color: var(--dark-text) !important;
}
.trustspot-inline-rating {
font-family: Montserrat, Helvetica, Arial, sans-serif !important;
color: var(--dark-text) !important;
}
.ts-reviews-rating {
color: var(--dark-text) !important;
}
.ts-reviews-count {
color: var(--dark-links) !important;
text-decoration: underline !important;
}
.ts-reviews-count:hover {
color: var(--dark-links-hover) !important;
}
/* Star Rating System - Complete Dark Mode Fix
*
* IMPORTANT: These CSS rules DO NOT WORK due to CSS specification limitations!
* CSS custom properties in inline style attributes cannot be overridden by
* external stylesheets, even with !important.
*
* The RaveCapture widget injects: style="--star-background: #2c2c2c"
* This inline custom property takes precedence over all external CSS rules.
*
* SOLUTION: JavaScript fix in b2b_webflow_pricing_head.html directly modifies
* the inline style attributes. See Issue #117 for details.
*
* These rules are preserved for documentation purposes only.
* @see https://github.com/kesslerio/shapescale-checkout/issues/117
*/
.stars-container {
--star-background: #ffc107 !important; /* Gold stars (INEFFECTIVE - see comment above) */
--star-color: var(--dark-border) !important; /* Dark gray for empty portion */
--star-size: 20 !important;
}
/* Override inline star background styles (INEFFECTIVE - CSS cannot override inline custom properties) */
.stars-container[style*="--star-background: #2c2c2c"] {
--star-background: #ffc107 !important;
}
/* Star container pseudo element styling */
div.stars-container::before {
content: '\f005 \f005 \f005 \f005 \f005' !important;
font: normal 900 1em/1 ts-widget-icons !important;
letter-spacing: 2px !important;
background: linear-gradient(90deg, #ffc107 var(--percent), var(--dark-border) var(--percent)) !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Fallback for browsers that don't support CSS custom properties in gradients */
@supports not (background: linear-gradient(90deg, #ffc107 var(--percent), var(--dark-border) var(--percent))) {
div.stars-container::before {
background: linear-gradient(90deg, #ffc107 75%, var(--dark-border) 75%) !important;
}
}
/* Additional star rating text elements */
.ts-reviews-rating-options {
color: var(--dark-text) !important;
}
.ts-reviews-rating-options a {
color: var(--dark-links) !important;
}
.ts-reviews-rating-options a:hover {
color: var(--dark-links-hover) !important;
}
/* Phase 8: CTA Buttons - Updated with brand colors */
.button-cta.long.ordercta.xxl {
background-color: #f0f0f0 !important;
color: var(--dark-bg) !important;
border: 2px solid #f0f0f0 !important;
font-weight: 600 !important;
transition: all 0.2s ease !important;
}
.button-cta.long.ordercta.xxl:hover {
background-color: transparent !important;
color: #f0f0f0 !important;
border-color: #f0f0f0 !important;
}
.button-cta.long.ordercta.xxl.buy {
background-color: #f0f0f0 !important;
color: var(--dark-bg) !important;
border-color: #f0f0f0 !important;
}
.button-cta.long.ordercta.xxl.buy:hover {
background-color: transparent !important;
color: #f0f0f0 !important;
border-color: #f0f0f0 !important;
}
/* Phase 9: Form Elements */
.product-header3_add-to-cart {
background-color: transparent !important;
}
.cta-button-grid {
background-color: transparent !important;
}
.text-align-center-2 {
color: var(--dark-muted-text) !important;
}
.text-size-tiny-2 {
color: var(--dark-muted-text) !important;
}
/* Phase 10: Grid and Layout */
.grid-three-column-3 {
background-color: transparent !important;
}
.w-layout-grid {
background-color: transparent !important;
}
.w-layout-vflex, .flex-block {
background-color: transparent !important;
}
/* Phase 11: Pricing Images */
.pricing-image {
opacity: 0.9 !important;
border-radius: 8px !important;
}
/* Phase 12: Additional Text Elements */
.price-wrapper {
background-color: transparent !important;
}
.paragraph-md {
color: var(--dark-text) !important;
}
/* Phase 13: Financing Elements */
.html-embed-7 svg {
filter: invert(1) !important;
}
/* Phase 14: Form States */
.out-of-stock-state, .w-form-done {
background-color: var(--dark-success-bg) !important;
color: var(--dark-text) !important;
border: 1px solid var(--dark-border) !important;
}
.error-state, .w-form-fail {
background-color: var(--dark-error-bg) !important;
color: var(--dark-text) !important;
border: 1px solid rgb(255 107 107 / 30%) !important;
}
/* Phase 15: Mobile Responsiveness */
@media screen and (width <= 768px) {
.price-tab-link {
padding: 0.75rem 1rem !important;
font-size: 0.9rem !important;
}
.ss_lse_tab {
padding: 0.5rem 0.75rem !important;
}
.price-feature-line {
padding: 0.75rem 0 !important;
}
.tooltip-wrap {
position: fixed !important;
z-index: 1001 !important;
}
}
/* ============================================================================
CHECKOUT PAGE DARK MODE STYLES MIGRATED (Issue #270, #286, #295)
============================================================================
Checkout-specific dark mode styles have been migrated to their respective
feature files for better maintainability and co-location:
MOBILE STYLES → website/webflow/css/mobile-sticky-header-enhancements.css
- Mobile sticky summary container and price breakdowns
- Toggle button states and focus indicators
- Recurring billing info and payment methods
DESKTOP STYLES → website/webflow/css/desktop-product-display-enhancements.css
- Desktop order summary sidebar and trust signals
- Button hover animations (primary, secondary, link-style)
- Payment methods and support section
URGENCY INDICATORS → Already in desktop-product-display-enhancements.css
- Stock counter and view counter dark mode
- Both desktop and mobile urgency badges
This migration improves maintainability by keeping light and dark mode
styles for each feature together in the same file.
============================================================================ */
/* Phase 7: Comparison Table Dark Mode */
/* Table Container */
.bodycomp-table-wrap {
background-color: transparent !important;
}
/* Sticky Header Grid */
.sticky-grid-bodycomp-methods {
background-color: var(--dark-bg) !important;
border-bottom: 1px solid var(--dark-border) !important;
}
.bodycomp-sticky-bg-wrap {
background-color: var(--dark-card-bg) !important;
border: 1px solid var(--dark-border) !important;
}
/* Header Cells */
.comp-table-cell.featured.sticky {
background-color: var(--shape-dark-blue) !important;
color: var(--dark-headings) !important;
border: 1px solid var(--shape-dark-blue) !important;
}
.bodycomp-title-wrap-sticky {
background-color: var(--dark-card-bg) !important;
color: var(--dark-headings) !important;
}
.bodycomp-title-wrap-sticky.middle,
.bodycomp-title-wrap-sticky.last {
background-color: var(--dark-card-bg) !important;
border: 1px solid var(--dark-border) !important;
}
/* Table Grid Containers */
.outer-chart-grid,
.bodycomp-chart-grid {
background-color: transparent !important;
}
/* Row Title Cells */
.table-cell-title-2 {
background-color: var(--dark-grey-bg) !important;
color: var(--dark-headings) !important;
border: 1px solid var(--dark-border) !important;
border-right: 2px solid var(--dark-border) !important;
}
/* Regular Table Cells */
.comp-table-cell {
background-color: var(--dark-card-bg) !important;
color: var(--dark-text) !important;
border: 1px solid var(--dark-border) !important;
}
/* Featured Column (ShapeScale) */
.comp-table-cell.featured {
background-color: rgb(92 129 255 / 15%) !important;
color: var(--dark-headings) !important;
border: 1px solid var(--shape-dark-blue) !important;
border-left: 3px solid var(--shape-dark-blue) !important;
}
/* Secondary Highlight Cells */
.comp-table-cell.secondary {
background-color: rgb(92 129 255 / 8%) !important;
color: var(--dark-text) !important;
border: 1px solid rgb(92 129 255 / 30%) !important;
}
/* Last Column Cells */
.comp-table-cell.last,
.table-cell.last {
background-color: var(--dark-card-bg) !important;
border-right: 1px solid var(--dark-border) !important;
}
/* Table Text */
.table-text-1 {
color: inherit !important;
font-family: Uniform, sans-serif !important;
}
/* Icons in Table */
.icon-check-2 svg,
.icon-cross svg {
filter: brightness(0) saturate(100%) invert(85%) !important;
}
.icon-check-2.featured svg {
filter: brightness(0) saturate(100%) invert(100%) !important;
}
/* Pricing Tooltips in Table */
.pricing-tooltip .table-text-1 {
color: var(--dark-text) !important;
}
.pricing-tooltip .tooltip-icon svg {
fill: var(--dark-text) !important;
}
.tooltip-light {
background-color: var(--dark-grey-bg) !important;
color: var(--dark-text) !important;
border: 1px solid var(--dark-border) !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgb(0 0 0 / 40%) !important;
}
.tooltip-copy-small {
color: var(--dark-text) !important;
}
.tooltip-light-arrow-right,
.tooltip-light-arrow-left {
border-left-color: var(--dark-grey-bg) !important;
}
/* Table End Row */
.comp-table-cell.end {
background-color: rgb(92 129 255 / 15%) !important;
border-bottom: 2px solid var(--shape-dark-blue) !important;
}
/* Mobile Table Adjustments */
@media (width <= 768px) {
.comp-table-cell,
.table-cell-title-2 {
padding: 0.75rem !important;
min-height: 60px !important;
}
.table-text-1 {
font-size: 0.85rem !important;
line-height: 1.4 !important;
}
}
/* Phase 8: Comparison Table Section Headers */
/* Body Composition Method Container */
.ss_body_comp_method-container {
background-color: transparent !important;
color: var(--dark-text) !important;
}
/* Overline text (THE SHAPESCALE DIFFERENCE) */
.overline-4 {
color: var(--dark-muted-text) !important;
font-family: 'Uniform Medium', sans-serif !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
}
/* Main heading */
.h3-heading-4 {
color: var(--dark-headings) !important;
font-family: Uniform, sans-serif !important;
letter-spacing: 0.05em !important;
}
/* Paragraph text */
.paragraph-11 {
color: var(--dark-text) !important;
font-family: Uniform, sans-serif !important;
letter-spacing: 0.05rem !important;
line-height: 160% !important;
}
/* Content wrapper adjustments */
.content-wrap-center {
background-color: transparent !important;
}
.max-width-large {
background-color: transparent !important;
}
/* Text color utility class */
.text-color {
color: var(--dark-headings) !important;
}
/* Blurb text in table */
.blurb-txt-2 {
color: inherit !important;
font-family: Uniform, sans-serif !important;
}
/* Phase 9: FAQ Section Dark Mode */
/* FAQ Section Container */
.faq-section {
background-color: var(--dark-bg) !important;
color: var(--dark-text) !important;
}
/* FAQ Question Items */
.faq-question {
background-color: var(--dark-card-bg) !important;
border: 1px solid var(--dark-border) !important;
color: var(--dark-text) !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.faq-question:hover {
background-color: rgb(255 255 255 / 5%) !important;
border-color: var(--dark-border) !important;
}
.faq-question:active,
.faq-question:focus {
background-color: rgb(255 255 255 / 8%) !important;
border-color: rgb(92 129 255 / 30%) !important;
outline: none !important;
}
/* FAQ Question Bar */
.faq-question-bar {
background-color: transparent !important;
color: var(--dark-text) !important;
}
/* FAQ Titles */
.faq-title {
color: var(--dark-headings) !important;
font-family: Uniform, sans-serif !important;
letter-spacing: -0.02em !important;
font-size: 1.2rem !important;
font-weight: 500 !important;
line-height: 2rem !important;
}
/* FAQ Icon Circle */
.faq-icon-circle {
background-color: transparent !important;
color: var(--dark-text) !important;
}
/* FAQ Plus Icon */
.faq-plus {
color: var(--dark-text) !important;
}
.faq-plus svg {
fill: var(--dark-text) !important;
color: var(--dark-text) !important;
}
/* FAQ Content */
.faq-content-2 {
background-color: var(--dark-card-bg) !important;
color: var(--dark-text) !important;
border-top: 1px solid var(--dark-border) !important;
}
/* FAQ Paragraph */
.faq-paragraph {
color: var(--dark-text) !important;
font-family: Uniform, sans-serif !important;
line-height: 1.6 !important;
}
/* FAQ Links within content */
.faq-content-2 a,
.faq-paragraph a {
color: var(--dark-links) !important;
text-decoration: underline !important;
}
.faq-content-2 a:hover,
.faq-paragraph a:hover {
color: var(--dark-links-hover) !important;
}
/* FAQ Side Image Section */
.faq-side {
background-color: transparent !important;
}
.image-cover-2 {
border-radius: 8px !important;
transition: opacity 0.3s ease !important;
}
/* FAQ Section Responsive */
@media (width <= 768px) {
.faq-question {
padding: 1rem 1.5rem !important;
}
.faq-title {
font-size: 1.1rem !important;
line-height: 1.8rem !important;
}
.faq-content-2 {
padding: 1rem 1.5rem !important;
}
.faq-side {
width: 100% !important;
max-height: none !important;
margin-bottom: 2rem !important;
}
}
/* FAQ Side Section Styling - Phase 10 */
.faq-side-image {
background-color: transparent !important;
}
.faq-side-image img {
opacity: 0.9 !important;
filter: brightness(0.9) !important;
}
/* Placeholder Spacer Dark Mode - Phase 11 */
.placeholder-spacer {
background-color: transparent !important;
}
.image-wrapper .curve-rough { color: rgb(18 18 18) !important; }
/* --- Testimonial slider (dark mode base) --- */
.testimonial43_slider {
background-color: transparent !important;
}
/* Testimonial heading - white color */
.testimonial43_heading,
.h4-heading.testimonial43_heading {
color: #fff !important;
}
/* Testimonial card/slide - transparent background, no box shadows */
.testimonial43_card,
.testimonial43_slide {
/* background: radial-gradient(ellipse at center, rgba(92, 129, 255, 0.15) 0%, #12121a 65%) !important; */
/* background-image: radial-gradient(ellipse at center, rgba(92, 129, 255, 0.15) 0%, #12121a 65%) !important; */
/* border-color: rgba(255, 255, 255, 0.08) !important; */
background: transparent !important;
box-shadow: none !important;
color: #f5f6ff !important;
}
/* Remove backgrounds from inner content elements */
.testimonial43_content-top,
.testimonial43_content-bottom,
.testimonial43_client {
background: transparent !important;
background-image: none !important;
}
.testimonial43_quote,
.testimonial43_author,
.testimonial43_role {
color: #f5f6ff !important;
}
/* Remove any pseudo-element backgrounds that might interfere */
.testimonial43_mask::before,
.testimonial43_slide::before,
.testimonial43_card::before,
.testimonial43_card::after {
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
/* Slider navigation dots - dark mode */
.testimonial43_slide-nav .w-slider-dot {
background-color: rgb(255 255 255 / 30%) !important;
border: 1px solid rgb(255 255 255 / 40%) !important;
transition: all 0.3s ease !important;
}
.testimonial43_slide-nav .w-slider-dot:hover {
background-color: rgb(255 255 255 / 50%) !important;
border-color: rgb(255 255 255 / 60%) !important;
}
.testimonial43_slide-nav .w-slider-dot.w-active {
background-color: #fff !important;
border-color: #fff !important;
transform: scale(1.2) !important;
}
/* Checkout sticky summary bar: the Webflow designer stylesheet hardcodes
a white background on .ss_sticky_summary; match the page surface. */
.ss_sticky_summary {
background-color: #121212 !important;
border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
}
}