/* IKAROS Pro brand overrides for WooCommerce native templates */ body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account, body.woocommerce-shop, body.single-product { background:#05070d; } .woocommerce, .woocommerce-page { color:#cbd5e1; font-family:'Inter',sans-serif; } .woocommerce ul.products li.product .price, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce input.button { background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important; color:#05070d !important; border:none !important; border-radius:30px !important; font-weight:700 !important; padding:14px 26px !important; box-shadow:0 0 25px rgba(34,211,238,.25); } .woocommerce table.shop_table { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12); border-radius:16px; color:#e2e8f0; } .woocommerce table.shop_table th { color:#94a3b8; border-bottom:1px solid rgba(255,255,255,.12) !important; } .woocommerce table.shop_table td { border-top:1px solid rgba(255,255,255,.08) !important; } .woocommerce-cart-form, .woocommerce-checkout-review-order, .woocommerce-checkout-payment, .cart_totals, .woocommerce-MyAccount-content, .woocommerce-Address { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:32px; color:#e2e8f0; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background:#1e293b; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:16px; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title { color:#fff !important; } .woocommerce ul.products li.product .price ins { color:#05070d; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select { background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.2) !important; color:#fff !important; border-radius:6px !important; } .woocommerce-MyAccount-navigation ul { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:10px; } .woocommerce-MyAccount-navigation ul li a { color:#e2e8f0; } .woocommerce-MyAccount-navigation ul li.is-active a { color:#22d3ee; } .woocommerce-message, .woocommerce-info { background:rgba(34,211,238,.08) !important; border-top-color:#22d3ee !important; color:#e2e8f0 !important; } /* Stronger overrides to beat theme wrapper specificity on Woo pages */ html body.woocommerce-cart, html body.woocommerce-checkout, html body.woocommerce-account, html body.woocommerce-shop, html body.single-product, html body.woocommerce-cart #main-container, html body.woocommerce-checkout #main-container, html body.woocommerce-account #main-container, html body.woocommerce-shop #main-container, html body.single-product #main-container, html body.woocommerce-cart .entry-content, html body.woocommerce-checkout .entry-content, html body.woocommerce-account .entry-content, html body.woocommerce-shop .entry-content, html body.single-product .entry-content, html body.woocommerce-cart article, html body.woocommerce-checkout article, html body.woocommerce-account article, html body.woocommerce-shop article, html body.single-product article { background:#05070d !important; } /* Popup mega-menu: force full width, override any competing max-width */ .elementor-location-popup .dialog-message, .elementor-popup-modal .dialog-widget-content, .elementor-42.elementor-location-popup { width: 100vw !important; max-width: 100vw !important; } /* Popup mega-menu: aggressively force full width across every possible jQuery-UI dialog wrapper layer */ .dialog-widget, .dialog-lightbox-widget, .dialog-widget-content, .dialog-message, .elementor-popup-modal, .elementor-location-popup, .elementor-42, #elementor-popup-modal-42, .ui-dialog:has(.elementor-location-popup) { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; left: 0 !important; top: 0 !important; margin: 0 !important; overflow-y: auto !important; box-sizing: border-box !important; } .dialog-widget-content { overflow: visible !important; } /* IKAROS mega-menu: fully self-controlled visibility (bypasses Elementor's popup JS/dialog wrapper) */ .elementor-42.elementor-location-popup { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; background-color: #05070D !important; z-index: 999999 !important; overflow-y: auto !important; } /* Force dark backgrounds directly (header + popup), bypassing whichever nested element Elementor actually themes */ header[data-elementor-type='header'], div[data-elementor-type='header'], .elementor-location-header, .elementor-location-header .e-con-inner { background-color: rgba(5,7,13,0.92) !important; } .elementor-42.elementor-location-popup { background-color: #05070D !important; } /* Neutralize any of Elementor's own popup overlay/dialog chrome we're not using, in case it renders inert but visible */ .dialog-overlay, .dialog-widget:not(.elementor-42), .ui-widget-overlay { display: none !important; } /* Elementor's actual dynamically-created popup dialog wrapper (separate from the content div) */ #elementor-popup-modal-42, .elementor-popup-modal { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; top: 0 !important; left: 0 !important; margin: 0 !important; z-index: 999999 !important; background-color: #05070D !important; overflow-y: auto !important; } /* Integrations radial diagram: scale down to fit on mobile instead of overflowing/clipping */ .elementor-element-af53773 { transform-origin: top center; } @media (max-width: 767px) { .elementor-element-af53773 { transform: scale(0.68) !important; margin-bottom: -192px !important; } } @media (max-width: 480px) { .elementor-element-af53773 { transform: scale(0.56) !important; margin-bottom: -264px !important; } } /* Hosting feature list: stack to single column on smaller screens instead of squeezing 2 */ @media (max-width: 767px) { .elementor-element-ddec8b9 .elementor-icon-list-items { display: block !important; } .elementor-element-ddec8b9 .elementor-icon-list-item { width: 100% !important; margin-bottom: 14px; } } /* Force diagram node/center sizes regardless of Elementor's responsive width defaults on smaller breakpoints */ .elementor-element-c031610, .elementor-element-86a6a3d, .elementor-element-34773d9, .elementor-element-57043ad, .elementor-element-dc23dec, .elementor-element-bc9b57d, .elementor-element-bd9c7f2, .elementor-element-628209d, .elementor-element-301e41b, .elementor-element-891e65a { width: 96px !important; min-width: 96px !important; max-width: 96px !important; height: 96px !important; min-height: 96px !important; max-height: 96px !important; flex-basis: 96px !important; } .elementor-element-d7f983b { width: 152px !important; min-width: 152px !important; max-width: 152px !important; height: 152px !important; min-height: 152px !important; max-height: 152px !important; flex-basis: 152px !important; } /* Force dashboard mockup dot/accent sizes - flex was stretching them unexpectedly */ .elementor-element-67845f7, .elementor-element-ad52de2, .elementor-element-e1ba729 { width: 10px !important; min-width: 10px !important; max-width: 10px !important; height: 10px !important; min-height: 10px !important; max-height: 10px !important; flex-shrink: 0 !important; flex-grow: 0 !important; flex-basis: 10px !important; } .elementor-element-7ea5137, .elementor-element-9b17eba, .elementor-element-9ec59d7, .elementor-element-50b01d2, .elementor-element-be40f6e, .elementor-element-b7a25d7 { width: 4px !important; min-width: 4px !important; max-width: 4px !important; height: 4px !important; min-height: 4px !important; max-height: 4px !important; flex-shrink: 0 !important; flex-grow: 0 !important; flex-basis: 4px !important; } /* Dashboard mockup: full width on desktop, but the hero stacks on smaller screens and the mockup needs to shrink to fit rather than overflow */ .elementor-element-aff7d7b { width: 100% !important; } @media (max-width: 1024px) { .elementor-element-c288f31 { width: 100% !important; max-width: 550px !important; } } @media (max-width: 640px) { .elementor-element-c288f31 { max-width: 100% !important; } } /* Mobile fixes: hero heading font-size scaling + chart bars must stay in a row, not wrap */ @media (max-width: 767px) { .elementor-element-611e715 .elementor-heading-title { font-size: 34px !important; line-height: 1.15 !important; } } @media (max-width: 480px) { .elementor-element-611e715 .elementor-heading-title { font-size: 28px !important; } } .elementor-element-ad2d7a5 { flex-wrap: nowrap !important; } @media (max-width: 640px) { .elementor-element-ad2d7a5 { padding: 12px 8px 0 8px !important; gap: 4px !important; } } /* Keep hero text + mockup side-by-side down to a much narrower breakpoint; only stack on true mobile */ .elementor-element-d8838e1 { flex-wrap: nowrap !important; align-items: center !important; } .elementor-element-d8838e1 > .e-con { min-width: 0 !important; } @media (max-width: 900px) { .elementor-element-d8838e1 { flex-wrap: wrap !important; } } @media (min-width: 901px) and (max-width: 1300px) { .elementor-element-611e715 .elementor-heading-title { font-size: 40px !important; } .elementor-element-c288f31 { max-width: 420px !important; } } /* Extra-forceful: constrain each bar directly so the chart can never stack, regardless of parent flex-wrap behavior */ .elementor-element-504bba1, .elementor-element-1e0e363, .elementor-element-5155d7c, .elementor-element-e9b9e30, .elementor-element-e41ab12, .elementor-element-78d84fb, .elementor-element-cfda8f8 { flex: 1 1 0 !important; width: auto !important; max-width: none !important; flex-shrink: 1 !important; flex-grow: 1 !important; } .elementor-element-ad2d7a5 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; } @media (max-width: 480px) { .elementor-element-ad2d7a5 { padding: 10px 6px 0 6px !important; gap: 3px !important; } } /* Cart/Checkout: force dark theme on all inner WooCommerce/Blocksy wrapper boxes, not just body */ html body.woocommerce-cart .ct-woocommerce-cart-form, html body.woocommerce-cart table.shop_table, html body.woocommerce-cart .cart_totals, html body.woocommerce-cart .cart-collaterals, html body.woocommerce-cart .woocommerce-cart-form, html body.woocommerce-checkout .ct-order-review, html body.woocommerce-checkout .woocommerce-checkout-review-order-table, html body.woocommerce-checkout form.checkout, html body.woocommerce-checkout .woocommerce-billing-fields, html body.woocommerce-account .woocommerce-MyAccount-content { background: #05070d !important; color: #cbd5e1 !important; border-color: rgba(255,255,255,0.1) !important; } html body.woocommerce-cart th, html body.woocommerce-cart td, html body.woocommerce-checkout th, html body.woocommerce-checkout td, html body.woocommerce-cart .product-name a, html body.woocommerce-cart .woocommerce-Price-amount, html body.woocommerce-checkout .woocommerce-Price-amount, html body.woocommerce-cart label, html body.woocommerce-checkout label { color: #e2e8f0 !important; } html body.woocommerce-cart input[type='text'], html body.woocommerce-cart input[type='number'], html body.woocommerce-checkout input[type='text'], html body.woocommerce-checkout input[type='email'], html body.woocommerce-checkout input[type='tel'], html body.woocommerce-checkout textarea, html body.woocommerce-checkout select { background: rgba(255,255,255,0.04) !important; color: #e2e8f0 !important; border: 1px solid rgba(255,255,255,0.15) !important; } html body.woocommerce-cart .quantity input, html body.woocommerce-cart .quantity .plus, html body.woocommerce-cart .quantity .minus { background: rgba(255,255,255,0.06) !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.15) !important; } /* Cart table: force dark on every row/cell individually, not just the table wrapper */ html body.woocommerce-cart table.shop_table thead, html body.woocommerce-cart table.shop_table tbody, html body.woocommerce-cart table.shop_table tr, html body.woocommerce-cart table.shop_table th, html body.woocommerce-cart table.shop_table td, html body.woocommerce-checkout table.shop_table thead, html body.woocommerce-checkout table.shop_table tbody, html body.woocommerce-checkout table.shop_table tr, html body.woocommerce-checkout table.shop_table th, html body.woocommerce-checkout table.shop_table td { background: #05070d !important; background-color: #05070d !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.1) !important; } /* Cart Totals heading + divider contrast */ html body.woocommerce-cart .cart_totals h2, html body.woocommerce-cart .cart_totals th, html body.woocommerce-cart .cart_totals td, html body.woocommerce-cart .cart_totals tr { color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; } /* Cart: exact wrapper classes from Blocksy's actual template (coupon box, actions row, collaterals) */ html body.woocommerce-cart td.actions, html body.woocommerce-cart .coupon, html body.woocommerce-cart .cart-collaterals, html body.woocommerce-cart .cart-collaterals *, html body.woocommerce-checkout .cart-collaterals, html body.woocommerce-checkout .cart-collaterals * { background: #05070d !important; background-color: #05070d !important; color: #e2e8f0 !important; } html body.woocommerce-cart #coupon_code, html body.woocommerce-cart .coupon input.input-text { background: rgba(255,255,255,0.06) !important; color: #e2e8f0 !important; border: 1px solid rgba(255,255,255,0.15) !important; } /* Belt-and-suspenders: force EVERY element inside these wrapper contexts to inherit dark, only excluding elements with their own intentional gradient */ html body.woocommerce-cart .ct-woocommerce-cart-form *:not(.button):not(a):not(svg):not(path), html body.woocommerce-checkout .ct-order-review *:not(.button):not(a):not(svg):not(path) { background-color: transparent; } /* Fix the white 'frame' effect: Blocksy's --theme-border-color variable defaults light, override directly on these wrappers */ html body.woocommerce-cart .cart_totals, html body.woocommerce-checkout .ct-order-review { --theme-border-color: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.15) !important; box-shadow: none !important; } /* Checkout: order review table rows, payment box, coupon toggle notice */ html body.woocommerce-checkout .woocommerce-checkout-review-order-table, html body.woocommerce-checkout .woocommerce-checkout-review-order-table tr, html body.woocommerce-checkout .woocommerce-checkout-review-order-table th, html body.woocommerce-checkout .woocommerce-checkout-review-order-table td, html body.woocommerce-checkout #payment, html body.woocommerce-checkout #payment ul.payment_methods, html body.woocommerce-checkout #payment div.payment_box, html body.woocommerce-checkout .woocommerce-form-coupon-toggle, html body.woocommerce-checkout .woocommerce-info { background: #05070d !important; background-color: #05070d !important; color: #e2e8f0 !important; border-color: rgba(255,255,255,0.15) !important; } html body.woocommerce-checkout .woocommerce-info a { color: #22D3EE !important; } /* Real root cause found: Elementor Pro's cart/checkout widgets wrap content in .e-cart-section / .e-checkout-section, defaulting to a white background via CSS variable */ .elementor-widget-woocommerce-cart .e-cart-section, .elementor-widget-woocommerce-checkout-page .e-checkout-section, .elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page { --sections-background-color: #05070d !important; --sections-border-color: rgba(255,255,255,0.15) !important; background-color: #05070d !important; border-color: rgba(255,255,255,0.15) !important; color: #e2e8f0 !important; } /* Payment method labels (likely WooCommerce Blocks checkout, React-rendered) still had dark text meant for a white background */ html body.woocommerce-checkout .wc-block-components-radio-control__label, html body.woocommerce-checkout .wc-block-components-radio-control__description, html body.woocommerce-checkout .wc-block-components-radio-control-accordion-option, html body.woocommerce-checkout .wc-block-components-payment-method-label, html body.woocommerce-checkout .wc-block-components-payment-method-content, html body.woocommerce-checkout ul.wc_payment_methods li label, html body.woocommerce-checkout ul.payment_methods li label, html body.woocommerce-checkout .payment_box, html body.woocommerce-checkout .payment_box p { color: #e2e8f0 !important; } html body.woocommerce-checkout .wc-block-components-radio-control__label * , html body.woocommerce-checkout .wc-block-components-payment-method-label * { color: inherit !important; }