/* Theme Name: EcomWooh Theme URI: https://ecomwooh.com Author: EcomWooh Team Author URI: https://ecomwooh.com Description: A modern, minimal WooCommerce theme built for conversion. Features Quick View, Ajax Cart, Countdown Timers, Sticky Add-to-Cart, Upsell blocks, and full Elementor integration. ThemeForest ready. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ecomwooh Tags: e-commerce, woocommerce, elementor, minimal, modern, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, wide-blocks */ /* ============================================================================= CSS CUSTOM PROPERTIES — Design Tokens ============================================================================= */ :root { /* ── Brand Colors ── */ --ew-primary: #111111; --ew-primary-hover: #333333; --ew-accent: #E63946; --ew-accent-hover: #c1121f; --ew-success: #2DC653; --ew-warning: #F4A261; --ew-info: #457B9D; /* ── Neutral Palette ── */ --ew-white: #FFFFFF; --ew-gray-50: #F9FAFB; --ew-gray-100: #F3F4F6; --ew-gray-200: #E5E7EB; --ew-gray-300: #D1D5DB; --ew-gray-400: #9CA3AF; --ew-gray-500: #6B7280; --ew-gray-600: #4B5563; --ew-gray-700: #374151; --ew-gray-800: #1F2937; --ew-gray-900: #111827; --ew-black: #000000; /* ── Semantic Colors ── */ --ew-text-primary: var(--ew-gray-900); --ew-text-secondary: var(--ew-gray-500); --ew-text-muted: var(--ew-gray-400); --ew-text-inverse: var(--ew-white); --ew-border: var(--ew-gray-200); --ew-border-focus: var(--ew-primary); --ew-bg-body: var(--ew-white); --ew-bg-subtle: var(--ew-gray-50); --ew-bg-card: var(--ew-white); /* ── WooCommerce / CRO Colors ── */ --ew-sale-badge: var(--ew-accent); --ew-new-badge: #457B9D; --ew-hot-badge: #F4A261; --ew-stock-low: #F4A261; --ew-stock-out: var(--ew-accent); --ew-price: var(--ew-gray-900); --ew-price-old: var(--ew-gray-400); --ew-price-sale: var(--ew-accent); --ew-star-filled: #F59E0B; --ew-star-empty: var(--ew-gray-200); /* ── Typography ── */ --ew-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ew-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ew-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --ew-text-xs: 0.75rem; /* 12px */ --ew-text-sm: 0.875rem; /* 14px */ --ew-text-base: 1rem; /* 16px */ --ew-text-lg: 1.125rem; /* 18px */ --ew-text-xl: 1.25rem; /* 20px */ --ew-text-2xl: 1.5rem; /* 24px */ --ew-text-3xl: 1.875rem; /* 30px */ --ew-text-4xl: 2.25rem; /* 36px */ --ew-text-5xl: 3rem; /* 48px */ --ew-text-6xl: 3.75rem; /* 60px */ --ew-font-light: 300; --ew-font-normal: 400; --ew-font-medium: 500; --ew-font-semibold: 600; --ew-font-bold: 700; --ew-font-extrabold: 800; --ew-leading-tight: 1.2; --ew-leading-snug: 1.375; --ew-leading-normal: 1.5; --ew-leading-relaxed:1.625; --ew-leading-loose: 2; --ew-tracking-tight: -0.025em; --ew-tracking-normal: 0; --ew-tracking-wide: 0.025em; --ew-tracking-wider: 0.05em; --ew-tracking-widest:0.1em; /* ── Spacing Scale ── */ --ew-space-1: 0.25rem; /* 4px */ --ew-space-2: 0.5rem; /* 8px */ --ew-space-3: 0.75rem; /* 12px */ --ew-space-4: 1rem; /* 16px */ --ew-space-5: 1.25rem; /* 20px */ --ew-space-6: 1.5rem; /* 24px */ --ew-space-8: 2rem; /* 32px */ --ew-space-10: 2.5rem; /* 40px */ --ew-space-12: 3rem; /* 48px */ --ew-space-16: 4rem; /* 64px */ --ew-space-20: 5rem; /* 80px */ --ew-space-24: 6rem; /* 96px */ --ew-space-32: 8rem; /* 128px */ /* ── Border Radius ── */ --ew-radius-sm: 4px; --ew-radius: 8px; --ew-radius-md: 10px; --ew-radius-lg: 16px; --ew-radius-xl: 24px; --ew-radius-full: 9999px; /* ── Shadows ── */ --ew-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05); --ew-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); --ew-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); --ew-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); --ew-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); --ew-shadow-card: 0 2px 8px rgba(0,0,0,.08); --ew-shadow-card-hover: 0 8px 24px rgba(0,0,0,.12); /* ── Transitions ── */ --ew-transition-fast: 150ms ease; --ew-transition: 250ms ease; --ew-transition-slow: 400ms ease; /* ── Layout ── */ --ew-container-sm: 640px; --ew-container-md: 768px; --ew-container-lg: 1024px; --ew-container-xl: 1280px; --ew-container-2xl: 1400px; --ew-container-pad: var(--ew-space-6); /* ── Header ── */ --ew-header-height: 70px; --ew-header-height-sm: 56px; --ew-header-bg: var(--ew-white); --ew-header-border: var(--ew-gray-200); /* ── Z-index Scale ── */ --ew-z-base: 1; --ew-z-dropdown: 100; --ew-z-sticky: 200; --ew-z-header: 300; --ew-z-overlay: 400; --ew-z-modal: 500; --ew-z-toast: 600; --ew-z-tooltip: 700; } /* ── Dark Mode Tokens ── */ @media (prefers-color-scheme: dark) { :root { --ew-bg-body: #0f0f0f; --ew-bg-subtle: #1a1a1a; --ew-bg-card: #1a1a1a; --ew-text-primary: #f3f4f6; --ew-text-secondary: #9ca3af; --ew-text-muted: #6b7280; --ew-border: #2d2d2d; --ew-header-bg: #0f0f0f; --ew-header-border: #2d2d2d; --ew-shadow-card: 0 2px 8px rgba(0,0,0,.4); } } /* .dark-mode class for manual toggle via customizer */ body.dark-mode { --ew-bg-body: #0f0f0f; --ew-bg-subtle: #1a1a1a; --ew-bg-card: #1a1a1a; --ew-text-primary: #f3f4f6; --ew-text-secondary: #9ca3af; --ew-border: #2d2d2d; --ew-header-bg: #0f0f0f; --ew-header-border: #2d2d2d; }