/* ========================================================================== Global Color Variables for BecksCarCare Theme ========================================================================== */ :root { /* Primary Brand Colors */ --beckscarcare-primary-color: var(--beckscarcare-primary-color); /* Main brand color - red */ --beckscarcare-secondary-color: var(--beckscarcare-secondary-color); /* Secondary brand color - dark blue */ --beckscarcare-accent-color: #39B972; /* Accent color - green (for success states) */ /* Background Colors */ --beckscarcare-bg-white: var(--beckscarcare-bg-white); /* Pure white background */ --beckscarcare-bg-light: #f8f9fa; /* Light gray background */ --beckscarcare-bg-lighter: #f3f6ff; /* Very light blue-gray background */ /* Text Colors */ --beckscarcare-text-primary: #444444; /* Primary text color */ --beckscarcare-text-secondary: #666666; /* Secondary text color */ --beckscarcare-text-muted: #777777; /* Muted text color */ --beckscarcare-text-light: #999999; /* Light text color */ --beckscarcare-text-dark: var(--beckscarcare-text-primary); /* Dark text color */ --beckscarcare-text-white: var(--beckscarcare-bg-white); /* White text color */ /* Headings */ --beckscarcare-heading-color: var(--beckscarcare-secondary-color); /* Default heading color */ --beckscarcare-heading-white: var(--beckscarcare-bg-white); /* White heading color */ /* Link Colors */ --beckscarcare-link-color: var(--beckscarcare-secondary-color); /* Default link color */ --beckscarcare-link-hover: var(--beckscarcare-primary-color); /* Link hover color */ /* Border Colors */ --beckscarcare-border-light: #eeeeee; /* Light border color */ --beckscarcare-border-medium: #dddddd; /* Medium border color */ --beckscarcare-border-muted: #cccccc; /* Muted border color */ /* Button Colors */ --beckscarcare-btn-primary-bg: var(--beckscarcare-primary-color); /* Primary button background */ --beckscarcare-btn-primary-text: var(--beckscarcare-bg-white); /* Primary button text */ --beckscarcare-btn-primary-hover-bg: var(--beckscarcare-secondary-color); /* Primary button hover background */ --beckscarcare-btn-primary-hover-text: var(--beckscarcare-bg-white); /* Primary button hover text */ --beckscarcare-btn-secondary-bg: var(--beckscarcare-secondary-color); /* Secondary button background */ --beckscarcare-btn-secondary-text: var(--beckscarcare-bg-white); /* Secondary button text */ --beckscarcare-btn-secondary-hover-bg: var(--beckscarcare-primary-color); /* Secondary button hover background */ --beckscarcare-btn-secondary-hover-text: var(--beckscarcare-bg-white); /* Secondary button hover text */ /* Form Colors */ --beckscarcare-input-border: #dddddd; /* Input border color */ --beckscarcare-input-focus-border: var(--beckscarcare-primary-color); /* Input focus border color */ --beckscarcare-input-bg: var(--beckscarcare-bg-white); /* Input background color */ --beckscarcare-input-text: var(--beckscarcare-text-primary); /* Input text color */ /* Navigation Colors */ --beckscarcare-nav-bg: var(--beckscarcare-secondary-color); /* Navigation background */ --beckscarcare-nav-text: var(--beckscarcare-bg-white); /* Navigation text */ --beckscarcare-nav-text-hover: var(--beckscarcare-primary-color); /* Navigation text hover */ --beckscarcare-nav-btn-bg: var(--beckscarcare-bg-white); /* Navigation button background */ --beckscarcare-nav-btn-text: var(--beckscarcare-secondary-color); /* Navigation button text */ --beckscarcare-nav-btn-hover-bg: var(--beckscarcare-primary-color); /* Navigation button hover background */ --beckscarcare-nav-btn-hover-text: var(--beckscarcare-bg-white); /* Navigation button hover text */ /* Top Bar Colors */ --beckscarcare-topbar-bg: var(--beckscarcare-bg-white); /* Top bar background */ --beckscarcare-topbar-icon-bg: var(--beckscarcare-secondary-color); /* Top bar icon background */ --beckscarcare-topbar-icon-color: var(--beckscarcare-bg-white); /* Top bar icon color */ --beckscarcare-topbar-text: var(--beckscarcare-text-primary); /* Top bar text color */ --beckscarcare-logo-primary: var(--beckscarcare-primary-color); /* Logo primary color */ --beckscarcare-logo-secondary: var(--beckscarcare-secondary-color); /* Logo secondary color */ /* Footer Colors */ --beckscarcare-footer-bg: var(--beckscarcare-secondary-color); /* Footer background */ --beckscarcare-footer-text: var(--beckscarcare-bg-white); /* Footer text */ --beckscarcare-footer-heading: var(--beckscarcare-primary-color); /* Footer heading color */ --beckscarcare-footer-link: var(--beckscarcare-bg-white); /* Footer link color */ --beckscarcare-footer-link-hover: var(--beckscarcare-primary-color); /* Footer link hover color */ --beckscarcare-footer-social-bg: var(--beckscarcare-bg-white); /* Footer social icon background */ --beckscarcare-footer-social-color: var(--beckscarcare-secondary-color); /* Footer social icon color */ --beckscarcare-footer-social-hover-bg: var(--beckscarcare-primary-color); /* Footer social icon hover background */ --beckscarcare-footer-social-hover-color: var(--beckscarcare-bg-white); /* Footer social icon hover color */ /* Hero Section Colors */ --beckscarcare-hero-overlay: rgba(0, 0, 0, 0.5); /* Hero section overlay */ --beckscarcare-hero-subtitle: var(--beckscarcare-primary-color); /* Hero subtitle color */ --beckscarcare-hero-title: var(--beckscarcare-bg-white); /* Hero title color */ --beckscarcare-hero-text: var(--beckscarcare-bg-white); /* Hero text color */ --beckscarcare-hero-nav-bg: rgba(256, 256, 256, 0.2); /* Hero navigation background */ --beckscarcare-hero-nav-hover-bg: var(--beckscarcare-primary-color); /* Hero navigation hover background */ /* Page Header Colors */ --beckscarcare-page-header-bg: var(--beckscarcare-secondary-color); /* Page header background */ --beckscarcare-page-header-border: var(--beckscarcare-bg-white); /* Page header border */ --beckscarcare-page-header-title: var(--beckscarcare-bg-white); /* Page header title */ --beckscarcare-page-header-underline: var(--beckscarcare-bg-white); /* Page header title underline */ --beckscarcare-page-header-breadcrumb: var(--beckscarcare-bg-white); /* Page header breadcrumb text */ --beckscarcare-page-header-breadcrumb-hover: var(--beckscarcare-primary-color); /* Page header breadcrumb hover */ /* Section Header Colors */ --beckscarcare-section-subtitle: var(--beckscarcare-primary-color); /* Section subtitle color */ --beckscarcare-section-subtitle-underline: var(--beckscarcare-primary-color); /* Section subtitle underline */ --beckscarcare-section-title: var(--beckscarcare-secondary-color); /* Section title color */ /* Service Colors */ --beckscarcare-service-icon: var(--beckscarcare-secondary-color); /* Service icon color */ --beckscarcare-service-title: var(--beckscarcare-secondary-color); /* Service title color */ --beckscarcare-service-text: var(--beckscarcare-text-primary); /* Service text color */ /* Facts Section Colors */ --beckscarcare-facts-bg: var(--beckscarcare-secondary-color); /* Facts section background */ --beckscarcare-facts-icon: var(--beckscarcare-primary-color); /* Facts icon color */ --beckscarcare-facts-number: var(--beckscarcare-bg-white); /* Facts number color */ --beckscarcare-facts-text: var(--beckscarcare-bg-white); /* Facts text color */ /* Pricing Colors */ --beckscarcare-price-bg: var(--beckscarcare-bg-white); /* Price card background */ --beckscarcare-price-featured-title: var(--beckscarcare-primary-color); /* Featured price title color */ --beckscarcare-price-featured-number: var(--beckscarcare-primary-color); /* Featured price number color */ --beckscarcare-price-check-icon: var(--beckscarcare-accent-color); /* Price check icon color */ --beckscarcare-price-times-icon: #cccccc; /* Price times icon color */ --beckscarcare-price-btn-bg: var(--beckscarcare-secondary-color); /* Price button background */ --beckscarcare-price-btn-text: var(--beckscarcare-primary-color); /* Price button text */ --beckscarcare-price-btn-hover-bg: var(--beckscarcare-primary-color); /* Price button hover background */ --beckscarcare-price-btn-hover-text: var(--beckscarcare-bg-white); /* Price button hover text */ --beckscarcare-price-featured-btn-bg: var(--beckscarcare-primary-color); /* Featured price button background */ --beckscarcare-price-featured-btn-text: var(--beckscarcare-bg-white); /* Featured price button text */ --beckscarcare-price-featured-btn-hover-bg: var(--beckscarcare-secondary-color); /* Featured price button hover background */ --beckscarcare-price-featured-btn-hover-text: var(--beckscarcare-primary-color); /* Featured price button hover text */ /* Location/Contact Colors */ --beckscarcare-location-icon: var(--beckscarcare-primary-color); /* Location icon color */ --beckscarcare-location-title: var(--beckscarcare-secondary-color); /* Location title color */ --beckscarcare-location-text: var(--beckscarcare-text-primary); /* Location text color */ --beckscarcare-contact-form-bg: var(--beckscarcare-primary-color); /* Contact form background */ --beckscarcare-contact-form-title: var(--beckscarcare-bg-white); /* Contact form title */ --beckscarcare-contact-form-text: var(--beckscarcare-bg-white); /* Contact form text */ --beckscarcare-contact-form-border: var(--beckscarcare-bg-white); /* Contact form input border */ --beckscarcare-contact-info-bg: var(--beckscarcare-secondary-color); /* Contact info background */ --beckscarcare-contact-info-title: var(--beckscarcare-bg-white); /* Contact info title */ --beckscarcare-contact-info-text: var(--beckscarcare-bg-white); /* Contact info text */ --beckscarcare-contact-info-icon-bg: var(--beckscarcare-bg-white); /* Contact info icon background */ --beckscarcare-contact-info-icon: var(--beckscarcare-secondary-color); /* Contact info icon color */ --beckscarcare-contact-input-border: var(--beckscarcare-secondary-color); /* Contact form input border */ --beckscarcare-contact-input-focus: var(--beckscarcare-primary-color); /* Contact form input focus border */ /* Team Colors */ --beckscarcare-team-bg: var(--beckscarcare-secondary-color); /* Team member background */ --beckscarcare-team-hover-bg: var(--beckscarcare-primary-color); /* Team member hover background */ --beckscarcare-team-name: var(--beckscarcare-bg-white); /* Team member name color */ --beckscarcare-team-position: var(--beckscarcare-bg-white); /* Team member position color */ --beckscarcare-team-social-bg: var(--beckscarcare-secondary-color); /* Team social icon background */ --beckscarcare-team-social-color: var(--beckscarcare-bg-white); /* Team social icon color */ --beckscarcare-team-social-hover-bg: var(--beckscarcare-primary-color); /* Team social icon hover background */ --beckscarcare-team-social-hover-color: var(--beckscarcare-secondary-color); /* Team social icon hover color */ /* Testimonial Colors */ --beckscarcare-testimonial-name: var(--beckscarcare-secondary-color); /* Testimonial name color */ --beckscarcare-testimonial-position: #777777; /* Testimonial position color */ --beckscarcare-testimonial-text: var(--beckscarcare-text-primary); /* Testimonial text color */ --beckscarcare-testimonial-quote: var(--beckscarcare-primary-color); /* Testimonial quote icon color */ --beckscarcare-testimonial-dot: #dddddd; /* Testimonial navigation dot */ --beckscarcare-testimonial-dot-active: var(--beckscarcare-primary-color); /* Testimonial active navigation dot */ /* Blog Colors */ --beckscarcare-blog-date-bg: var(--beckscarcare-secondary-color); /* Blog date background */ --beckscarcare-blog-date-text: var(--beckscarcare-bg-white); /* Blog date text */ --beckscarcare-blog-title: var(--beckscarcare-secondary-color); /* Blog title color */ --beckscarcare-blog-title-hover: var(--beckscarcare-primary-color); /* Blog title hover color */ --beckscarcare-blog-meta: #999999; /* Blog meta text color */ --beckscarcare-blog-meta-hover: var(--beckscarcare-primary-color); /* Blog meta hover color */ --beckscarcare-blog-pagination-bg: var(--beckscarcare-secondary-color); /* Blog pagination background */ --beckscarcare-blog-pagination-text: var(--beckscarcare-secondary-color); /* Blog pagination text */ --beckscarcare-blog-pagination-hover-bg: var(--beckscarcare-secondary-color); /* Blog pagination hover background */ --beckscarcare-blog-pagination-hover-text: var(--beckscarcare-primary-color); /* Blog pagination hover text */ --beckscarcare-blog-pagination-disabled: #999999; /* Blog pagination disabled text */ /* Single Post Colors */ --beckscarcare-single-tag-color: var(--beckscarcare-secondary-color); /* Single post tag color */ --beckscarcare-single-tag-border: var(--beckscarcare-secondary-color); /* Single post tag border */ --beckscarcare-single-tag-hover-bg: var(--beckscarcare-primary-color); /* Single post tag hover background */ --beckscarcare-single-tag-hover-color: var(--beckscarcare-bg-white); /* Single post tag hover color */ --beckscarcare-single-tag-hover-border: var(--beckscarcare-primary-color); /* Single post tag hover border */ --beckscarcare-single-bio-bg: var(--beckscarcare-secondary-color); /* Single post bio background */ --beckscarcare-single-bio-img-bg: var(--beckscarcare-bg-white); /* Single post bio image background */ --beckscarcare-single-bio-name: var(--beckscarcare-bg-white); /* Single post bio name color */ --beckscarcare-single-bio-text: var(--beckscarcare-bg-white); /* Single post bio text color */ --beckscarcare-single-bio-social-bg: var(--beckscarcare-bg-white); /* Single post bio social background */ --beckscarcare-single-bio-social-color: var(--beckscarcare-secondary-color); /* Single post bio social color */ --beckscarcare-single-bio-social-hover-bg: var(--beckscarcare-primary-color); /* Single post bio social hover background */ --beckscarcare-single-bio-social-hover-color: var(--beckscarcare-bg-white); /* Single post bio social hover color */ --beckscarcare-single-nav-bg: var(--beckscarcare-secondary-color); /* Single post navigation background */ --beckscarcare-single-nav-color: var(--beckscarcare-bg-white); /* Single post navigation color */ --beckscarcare-single-nav-hover-bg: var(--beckscarcare-primary-color); /* Single post navigation hover background */ --beckscarcare-single-nav-hover-color: var(--beckscarcare-bg-white); /* Single post navigation hover color */ /* Comment Colors */ --beckscarcare-comment-bg: #f8f9fa; /* Comment background */ --beckscarcare-comment-author: var(--beckscarcare-secondary-color); /* Comment author color */ --beckscarcare-comment-meta: #666666; /* Comment meta color */ --beckscarcare-comment-meta-hover: var(--beckscarcare-primary-color); /* Comment meta hover color */ --beckscarcare-comment-moderation: var(--beckscarcare-primary-color); /* Comment moderation text color */ --beckscarcare-comment-reply: var(--beckscarcare-primary-color); /* Comment reply link color */ --beckscarcare-comment-reply-hover: var(--beckscarcare-secondary-color); /* Comment reply link hover color */ --beckscarcare-comment-form-bg: #f8f9fa; /* Comment form background */ --beckscarcare-comment-form-title: var(--beckscarcare-secondary-color); /* Comment form title color */ --beckscarcare-comment-form-label: var(--beckscarcare-secondary-color); /* Comment form label color */ --beckscarcare-comment-form-required: var(--beckscarcare-primary-color); /* Comment form required asterisk color */ --beckscarcare-comment-form-border: #dddddd; /* Comment form input border */ --beckscarcare-comment-form-focus-border: var(--beckscarcare-primary-color); /* Comment form input focus border */ --beckscarcare-comment-form-focus-shadow: rgba(232, 28, 46, 0.3); /* Comment form input focus shadow */ --beckscarcare-comment-btn-bg: #dddddd; /* Comment button background */ --beckscarcare-comment-btn-color: var(--beckscarcare-secondary-color); /* Comment button color */ --beckscarcare-comment-btn-hover-bg: var(--beckscarcare-primary-color); /* Comment button hover background */ --beckscarcare-comment-btn-hover-color: var(--beckscarcare-bg-white); /* Comment button hover color */ /* Sidebar Colors */ --beckscarcare-sidebar-widget-title-underline: var(--beckscarcare-primary-color); /* Sidebar widget title underline */ --beckscarcare-sidebar-search-border: #dddddd; /* Sidebar search input border */ --beckscarcare-sidebar-search-focus-border: var(--beckscarcare-primary-color); /* Sidebar search input focus border */ --beckscarcare-sidebar-search-btn-color: var(--beckscarcare-secondary-color); /* Sidebar search button color */ --beckscarcare-sidebar-search-btn-hover: var(--beckscarcare-primary-color); /* Sidebar search button hover color */ --beckscarcare-sidebar-tab-bg: var(--beckscarcare-secondary-color); /* Sidebar tab background */ --beckscarcare-sidebar-tab-text: var(--beckscarcare-bg-white); /* Sidebar tab text */ --beckscarcare-sidebar-tab-active-bg: var(--beckscarcare-primary-color); /* Sidebar tab active background */ --beckscarcare-sidebar-tab-active-text: var(--beckscarcare-bg-white); /* Sidebar tab active text */ --beckscarcare-sidebar-category-icon: var(--beckscarcare-primary-color); /* Sidebar category icon color */ --beckscarcare-sidebar-category-link: var(--beckscarcare-text-primary); /* Sidebar category link color */ --beckscarcare-sidebar-category-link-hover: var(--beckscarcare-primary-color); /* Sidebar category link hover color */ --beckscarcare-sidebar-category-count-bg: #f3f6ff; /* Sidebar category count background */ --beckscarcare-sidebar-category-count-color: var(--beckscarcare-secondary-color); /* Sidebar category count color */ --beckscarcare-sidebar-tag-bg: #f3f6ff; /* Sidebar tag background */ --beckscarcare-sidebar-tag-color: var(--beckscarcare-text-primary); /* Sidebar tag color */ --beckscarcare-sidebar-tag-hover-bg: var(--beckscarcare-primary-color); /* Sidebar tag hover background */ --beckscarcare-sidebar-tag-hover-color: var(--beckscarcare-bg-white); /* Sidebar tag hover color */ --beckscarcare-sidebar-text-color: #777777; /* Sidebar text widget color */ /* 404 Error Page Colors */ --beckscarcare-error-bg: #f8f9fa; /* 404 error page background */ --beckscarcare-error-title: var(--beckscarcare-primary-color); /* 404 error title color */ --beckscarcare-error-heading: var(--beckscarcare-secondary-color); /* 404 error heading color */ --beckscarcare-error-text: #666666; /* 404 error text color */ --beckscarcare-error-link: var(--beckscarcare-primary-color); /* 404 error link color */ --beckscarcare-error-link-hover: var(--beckscarcare-secondary-color); /* 404 error link hover color */ /* Search Page Colors */ --beckscarcare-search-info-bg: #f8f9fa; /* Search info background */ --beckscarcare-search-info-border: var(--beckscarcare-primary-color); /* Search info border */ --beckscarcare-search-result-title: var(--beckscarcare-secondary-color); /* Search result title color */ --beckscarcare-search-result-title-hover: var(--beckscarcare-primary-color); /* Search result title hover color */ --beckscarcare-search-result-meta: #666666; /* Search result meta color */ --beckscarcare-search-result-type-bg: var(--beckscarcare-primary-color); /* Search result type background */ --beckscarcare-search-result-type-text: var(--beckscarcare-bg-white); /* Search result type text */ --beckscarcare-search-result-price: var(--beckscarcare-primary-color); /* Search result price color */ /* Page Content Colors */ --beckscarcare-page-heading: var(--beckscarcare-secondary-color); /* Page content heading color */ --beckscarcare-page-text: var(--beckscarcare-text-primary); /* Page content text color */ --beckscarcare-page-blockquote-border: var(--beckscarcare-primary-color); /* Page content blockquote border */ --beckscarcare-page-blockquote-text: #666666; /* Page content blockquote text */ --beckscarcare-page-link-bg: #f8f9fa; /* Page content link background */ --beckscarcare-page-link-color: var(--beckscarcare-secondary-color); /* Page content link color */ --beckscarcare-page-link-hover-bg: var(--beckscarcare-primary-color); /* Page content link hover background */ --beckscarcare-page-link-hover-color: var(--beckscarcare-bg-white); /* Page content link hover color */ /* Form Colors */ --beckscarcare-form-field-border: #dddddd; /* Form field border */ --beckscarcare-form-field-focus-border: var(--beckscarcare-primary-color); /* Form field focus border */ --beckscarcare-form-field-focus-shadow: rgba(232, 28, 46, 0.3); /* Form field focus shadow */ --beckscarcare-form-submit-bg: var(--beckscarcare-primary-color); /* Form submit button background */ --beckscarcare-form-submit-text: var(--beckscarcare-bg-white); /* Form submit button text */ --beckscarcare-form-submit-hover-bg: var(--beckscarcare-secondary-color); /* Form submit button hover background */ --beckscarcare-form-submit-hover-text: var(--beckscarcare-bg-white); /* Form submit button hover text */ /* Loader Colors */ --beckscarcare-loader-bg: var(--beckscarcare-bg-white); /* Loader background */ --beckscarcare-loader-border: #dddddd; /* Loader border color */ --beckscarcare-loader-spinner: var(--beckscarcare-primary-color); /* Loader spinner color */ /* Back to Top Button Colors */ --beckscarcare-back-to-top-bg: var(--beckscarcare-primary-color); /* Back to top button background */ --beckscarcare-back-to-top-color: var(--beckscarcare-bg-white); /* Back to top button color */ --beckscarcare-back-to-top-hover-bg: var(--beckscarcare-secondary-color); /* Back to top button hover background */ /* WooCommerce Colors */ --beckscarcare-woocommerce-price: var(--beckscarcare-primary-color); /* WooCommerce price color */ --beckscarcare-woocommerce-btn-bg: var(--beckscarcare-primary-color); /* WooCommerce button background */ --beckscarcare-woocommerce-btn-text: var(--beckscarcare-bg-white); /* WooCommerce button text */ --beckscarcare-woocommerce-btn-hover-bg: var(--beckscarcare-secondary-color); /* WooCommerce button hover background */ --beckscarcare-woocommerce-btn-hover-text: var(--beckscarcare-bg-white); /* WooCommerce button hover text */ /* WordPress Specific Colors */ --beckscarcare-wp-caption-text: #666666; /* WordPress caption text color */ --beckscarcare-wp-sticky-bg: #f9f9f9; /* WordPress sticky post background */ --beckscarcare-wp-sticky-border: var(--beckscarcare-primary-color); /* WordPress sticky post border */ --beckscarcare-wp-bypostauthor-bg: #f0f0f0; /* WordPress post author background */ } /* Dark mode support (optional) */ @media (prefers-color-scheme: dark) { :root { /* You can add dark mode color overrides here if needed */ } } /* High contrast mode support (optional) */ @media (prefers-contrast: high) { :root { /* You can add high contrast color overrides here if needed */ } }