/** * Dark Color Scheme * Only contains color-related properties * Base theme handles all spacing, sizing, and positioning */ /* The base style.css declares Bootstrap variables on :root, [data-bs-theme=light] and header.php hardcodes data-bs-theme="light" on BOTH and . That means [data-bs-theme=light] re-applies the orange --bs-primary-rgb directly to , overriding the dark value inherits. To win on (and any nested data-bs-theme="light" container, e.g. the search offcanvas), we must match the same selector list. */ :root, [data-bs-theme=light] { --bs-primary: #2b2b2b; --bs-primary-rgb: 43, 43, 43; --bs-primary-dark: #1a1a1a; --bs-primary-text-emphasis: #1a1a1a; --bs-primary-bg-subtle: #dfdfdf; --bs-primary-border-subtle: #aaaaaa; --bs-link-color: var(--bs-primary); --bs-link-hover-color: var(--bs-primary-dark); --bs-accordion-active-bg: var(--bs-primary); --bs-accordion-border-color: var(--bs-primary); --bs-progress-bar-bg: var(--bs-primary); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); /* Theme-polish (loaded after this file) defines its own --ui-* tints hardcoded to red rgba(220, 53, 69, .x). Re-declare them here with dark-equivalent rgba so any selector that uses var(--ui-primary-soft) / var(--ui-primary-tint) automatically picks up the dark value. */ --ui-primary-soft: rgba(43, 43, 43, .08) !important; --ui-primary-tint: rgba(43, 43, 43, .15) !important; } /* Notice Text */ .notice-text h4 { color: #2b2b2b; } /* Site Notice & Black Backgrounds */ .site-notice.text-bg-black, .has-black-background-color, .text-bg-black { background-color: #2b2b2b !important; } /* Header */ header.sticky-top.bg-gray.color-pull { background-color: #D8CFBE !important; } /* Footer Social Icons */ .footer .fa-brands, .footer .fab { color: #2b2b2b !important; } .footer a.phone { color: #2b2b2b !important; } /* Accordion */ .accordion-button:not(.collapsed) { background-color: #2b2b2b !important; } /* Primary Text Color */ .text-primary, .has-orange-color { color: rgb(43 43 43) !important; } /* Primary Buttons */ .btn-primary, .button.wp-element-button, .woocommerce-MyAccount-content .button { --bs-btn-bg: #2b2b2b; --bs-btn-border-color: #2b2b2b; --bs-btn-hover-bg: #2b2b2b; --bs-btn-hover-border-color: #2b2b2b; --bs-btn-active-bg: #01b5b4; --bs-btn-active-border-color: #2b2b2b; --bs-btn-disabled-bg: #01b5b4; --bs-btn-disabled-border-color: #2b2b2b; } /* Outline Buttons */ .btn-outline-primary { --bs-btn-color: #2b2b2b; --bs-btn-border-color: #2b2b2b; --bs-btn-hover-bg: #2b2b2b; --bs-btn-hover-border-color: #01b5b4; --bs-btn-active-bg: #2b2b2b; --bs-btn-active-border-color: #2b2b2b; --bs-btn-disabled-color: #2b2b2b; --bs-btn-disabled-border-color: #01b5b4; } /* Navbar */ .navbar-dark { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important; } nav.navbar.navbar-expand-lg.bg-primary.clearfix { background-color: #2b2b2b !important; } /* Custom Buttons */ a.btn.btn-sm.btn-outline-white.stretched-link.text-uppercase { background-color: #d35421; border-color: #d35421; } a.btn.btn-sm.btn-outline-white.stretched-link.text-uppercase:hover { background-color: #ea7241; border-color: #ea7241; color: #fff; } /* Widget Containers */ .bg-gray { background-color: #f8f9fa; } /* Widget Headers */ .widget_product_categories h3, .bapf_head h3 { color: #333; } /* Product Categories — no background color on cat-item links; the offcanvas filter sets its own surface, and other widget contexts inherit the page background. */ .product-categories .cat-item a { color: #495057; border-color: #e9ecef; } .product-categories .cat-item a:hover { color: #fff; border-color: var(--bs-primary); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* Current Active Category */ .product-categories .cat-item.current-cat a { color: #fff; border-color: var(--bs-primary); } .product-categories .cat-item.current-cat a:hover { color: #fff; } /* Filter Widgets */ .berocket_single_filter_widget { background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .bapf_head h3 { color: #333; } /* Select Elements */ .bapf_body select { border-color: #ced4da; color: #495057; background-color: #fff; } .bapf_body select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 0, 102, 204), 0.1); } /* Select2 Styling */ .select2-container--default .select2-selection--multiple { border-color: #ced4da; } .select2-container--default .select2-selection--multiple:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 0, 102, 204), 0.1); } /* Accessibility Focus States */ .product-categories .cat-item a:focus { outline-color: var(--bs-primary); } .bapf_body select:focus-visible { outline-color: var(--bs-primary); } /* Gravity Forms Variables */ .gf_stylespro_wrapper { background-color: var(--gfsp--bg-color, initial); } .gf_stylespro_wrapper .gf_stylespro ::-webkit-input-placeholder { color: var(--gfsp--placeholder-color, #999); } .gf_stylespro_wrapper .gf_stylespro ::placeholder { color: var(--gfsp--placeholder-color, #999); } .gf_stylespro_wrapper .gf_stylespro :-ms-input-placeholder { color: var(--gfsp--placeholder-color, #999); } .gf_stylespro_wrapper .gf_stylespro .gfield_label { background-color: var(--gfsp--label-bg-color, none); } .gf_stylespro .gfield_description, .gf_stylespro_wrapper .gf_stylespro .ginput_complex label, .gf_stylespro_wrapper .gf_stylespro .ginput_counter { color: var(--gfsp--label-font-color, inherit); } .gf_stylespro .gfsp_icon { color: var(--gfsp--field-icon-color, inherit); } .gf_stylespro .o-custom-bg input[type]:checked+label, .gf_stylespro .o-custom-bg li:not(.gfsp_choice_icn):not(.gfsp_choice_img) :checked+label { background-color: var(--gfsp--o-bg-color, #5ac26f); } .gf_stylespro .o-custom-bg input:checked+label:after { color: var(--gfsp--o-bg-color, #5ac26f); } .gf_stylespro .o-custom-border input[type]:checked+label, .gf_stylespro .o-custom-border li:not(.gfsp_choice_icn):not(.gfsp_choice_img) :checked+label { border-color: var(--gfsp--o-bg-color, #4a92ff); color: var(--gfsp--o-bg-text-color, inherit); } .gfsp_o_frame input:checked+label .o_label>i { color: var(--gfsp--o-bg-color, #5ac26f); } .gf_stylespro .o-custom-bg input:checked+label .ginput_price, .gf_stylespro .o-custom-bg input:checked+label .o_text, .gf_stylespro .o-custom-bg input[type]:checked+label, .gf_stylespro .o-custom-bg input[type]:checked+label:before, .gf_stylespro .o-custom-bg.o-ticktopright .o_label:after { color: var(--gfsp--o-bg-text-color, #fff); } .gf_stylespro .validation_error, .gf_stylespro_wrapper .gf_stylespro .gfield_description.validation_message, .gf_stylespro_wrapper .gfield_validation_message, .gf_stylespro_wrapper .validation_message, .gform_wrapper.gravity-theme .gform_validation_errors, .gform_wrapper.gravity-theme .gform_validation_errors>h2 { color: var(--gfsp--warning-color, #c02b0a); border-color: var(--gfsp--warning-color, #c02b0a); background-color: var(--gfsp--warning-bg-color, #fff9f9); } .gf_stylespro .gfield_required, .gf_stylespro_wrapper .gfield_error .gfield_repeater_cell label, .gf_stylespro_wrapper .gfield_error legend, .gf_stylespro_wrapper .gfield_validation_message, .gf_stylespro_wrapper .gform_validation_errors>h2, .gf_stylespro_wrapper .gform_validation_errors>ol, .gf_stylespro_wrapper .gform_validation_errors>ol a, .gf_stylespro_wrapper .gform_validation_errors>ol li, .gf_stylespro_wrapper .validation_message, .gf_stylespro_wrapper [aria-invalid=true]+label, .gf_stylespro_wrapper label+[aria-invalid=true] { color: var(--gfsp--warning-color, #c02b0a); } .gform_wrapper.gf_stylespro_wrapper .validation_error { border-bottom-color: var(--gfsp--warning-color, #c02b0a); border-top-color: var(--gfsp--warning-color, #c02b0a); color: var(--gfsp--warning-color, #c02b0a); } .gf_stylespro_wrapper .gf_stylespro .gfield_description { color: var(--gfsp--desc-color, inherit); background-color: var(--gfsp--desc-bg-color, none); } .gf_stylespro .gfsp_flip input[type]:not(old)+label:after, .gf_stylespro .gfsp_ios input[type]:not(old):checked+label:before, .gf_stylespro .gfsp_toggle input[type]:not(old):checked+label:after { background-color: var(--gfsp-choice-style-color); } .gf_stylespro .gfsp_toggle input[type]:not(old):checked+label:before { background-color: var(--gfsp-choice-style-color-muted, #aed6ff); } .gf_stylespro .gfsp_draw input[type]:not(old)+label:after { color: var(--gfsp-choice-style-color); } .gf_stylespro .gfsp_dot input[type]:not(old)+label:before { box-shadow: 0 0 0 10px inset, 0 0 0 15px var(--gfsp-choice-style-color) inset; border-color: var(--gfsp-choice-style-color); } .gf_stylespro .gfsp_dot input[type]:not(old):checked+label:before { box-shadow: 0 0 0 4px inset, 0 0 0 15px var(--gfsp-choice-style-color) inset; border-color: var(--gfsp-choice-style-color); } .gf_stylespro_wrapper.gform_wrapper .gpnf-row-actions button, .gf_stylespro_wrapper.gform_wrapper .gpnf-row-actions button:hover { background-color: transparent; box-shadow: none; } /* Print Styles - Color Only */ @media print { .product-categories .cat-item a { color: #000; background-color: transparent; border-color: transparent; } } /* ============================================================ Theme-polish + commerce-cta overrides theme-polish.css and commerce-cta.css load after this file and hardcode red gradients (#dc3545 → #b91c2e / #bd2130) plus red shadows (rgba(220, 53, 69, .x)) that don't track --bs-primary. These rules switch those hardcoded reds to the dark palette so the pet single page (and shared CTA buttons elsewhere) lose their orange/red glow in dark mode. ============================================================ */ /* Bootstrap primary button — replace red gradient + shadow */ .btn-primary { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%) !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(43, 43, 43, .25) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important; border-color: transparent !important; box-shadow: 0 6px 20px rgba(43, 43, 43, .38) !important; color: #fff !important; } .btn-primary:active { box-shadow: 0 2px 6px rgba(43, 43, 43, .25) !important; } /* Outline-primary hover fill */ .btn-outline-primary:hover, .btn-outline-primary:focus { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%) !important; } /* Hero + card deposit CTAs (commerce-cta.css hardcodes #dc3545 → #bd2130) */ .pep-deposit-btn--hero, .pep-deposit-btn--card { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%) !important; } /* Pet single — "Get My Info" / "Unlock Pricing" secondary CTA pill */ .tp-cta-secondary { background: linear-gradient(135deg, rgba(43, 43, 43, .08) 0%, rgba(43, 43, 43, .14) 100%) !important; box-shadow: 0 4px 14px rgba(43, 43, 43, .14) !important; } .tp-cta-secondary:hover, .tp-cta-secondary:focus { background: linear-gradient(135deg, rgba(43, 43, 43, .14) 0%, rgba(43, 43, 43, .22) 100%) !important; box-shadow: 0 8px 22px rgba(43, 43, 43, .25) !important; } .tp-cta-secondary .bi-heart { box-shadow: 0 2px 6px rgba(43, 43, 43, .3); } /* Pet single — Promise card check-mark circles */ .tp-promise__check { box-shadow: 0 1px 4px rgba(43, 43, 43, .35); } /* Pet single — In-store / Virtual Visit CTA card icon */ .tp-cta-card__icon { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%); box-shadow: 0 4px 12px rgba(43, 43, 43, .25); } /* Pet single — gallery "Unlock Pricing" pill */ .tp-gallery-unlock { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%); box-shadow: 0 6px 20px rgba(43, 43, 43, .35); } .tp-gallery-unlock:hover, .tp-gallery-unlock:focus { box-shadow: 0 10px 24px rgba(43, 43, 43, .45); } /* Pet single — inquire-form section: top stripe + tinted background */ .tp-section.inquire-form { background: rgba(43, 43, 43, .04); } /* Pet single — Pet card "hot" view badge */ li.product .badge-view-hot { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%) !important; } /* Pet card — "Get My Info" / unlock pricing pills + hover shadow */ li.product .btn.btn-primary, li.product .btn.btn-danger, li.product .btn-unlock-price { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%) !important; } li.product .btn.btn-primary:hover, li.product .btn.btn-danger:hover, li.product .btn-unlock-price:hover { box-shadow: 0 4px 14px rgba(43, 43, 43, .3) !important; } /* Generic Gravity Forms submit (older/shared selector) */ .gform_wrapper .gform_button, .gform_wrapper input[type="submit"] { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%); box-shadow: 0 4px 14px rgba(43, 43, 43, .25); } .gform_wrapper .gform_button:hover, .gform_wrapper input[type="submit"]:hover { box-shadow: 0 6px 20px rgba(43, 43, 43, .38); } /* pet-product-enhancements.css deposit-pulse animation hardcodes red glow. Override the @keyframes by replaying the deposit-targeted button rules with a dark-tinted shadow so the red glow doesn't strobe in dark mode. */ .btn[href*="puppy-checkout"], .btn[href*="deposit"] { animation: none; box-shadow: 0 10px 40px rgba(43, 43, 43, .4); } .btn[href*="puppy-checkout"]:hover, .btn[href*="deposit"]:hover { box-shadow: 0 20px 50px rgba(43, 43, 43, .5) !important; } /* Footer "Contact" pill (uses theme-polish red gradient) */ .tp-footer-contact { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%); box-shadow: 0 4px 14px rgba(43, 43, 43, .3); } .tp-footer-contact:hover, .tp-footer-contact:focus { box-shadow: 0 6px 20px rgba(43, 43, 43, .42); } /* Pet single — Reservation card icon (uses red gradient + glow) */ .tp-reservation-card__icon { background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%); box-shadow: 0 4px 12px rgba(43, 43, 43, .3); } /* ============================================================ pet-inquiry-modal.css overrides — modal opened from the pet product detail page. Hardcodes #f26322 (orange) on focus states; switch those to dark grays. ============================================================ */ #petInquiry input[type="text"]:focus, #petInquiry input[type="email"]:focus, #petInquiry input[type="tel"]:focus, #petInquiry textarea:focus, #unlockPriceModal input[type="text"]:focus, #unlockPriceModal input[type="email"]:focus, #unlockPriceModal input[type="tel"]:focus, #unlockPriceModal textarea:focus { border-color: #2b2b2b; box-shadow: 0 0 0 0.2rem rgba(43, 43, 43, 0.15); } /* Pet single — blurred corner unlock-price overlay */ .blurred-corner-price:focus { outline-color: rgba(43, 43, 43, 0.6); } .blurred-corner-price:hover .unlock-pricing-cta { color: #2b2b2b; } /* Prefers Dark Mode Media Query */ @media (prefers-color-scheme: dark) { .bg-gray { background-color: #1a1a1a; } .widget_product_categories h3, .bapf_head h3 { color: #e9ecef; border-bottom-color: #495057; } .product-categories .cat-item a { color: #e9ecef; border-color: #495057; } .product-categories .cat-item a:hover { color: #fff; border-color: var(--bs-primary); } .berocket_single_filter_widget { background-color: #2d2d2d; } .bapf_body select { background-color: #1a1a1a; color: #e9ecef; border-color: #495057; } }