/** * Consolidated CSS for Custom Product Cards * تمام استایل‌های پلاگین در یک فایل * * This file combines all CSS modules for better performance * Version: 1.0.0 */ /* ========================================================================== CSS Variables ========================================================================== */ :root {--cpc-price-gap: 6px;--cpc-mobile-card-height: 167px;--cpc-mobile-image-size: 150px;--cpc-mobile-padding: 13px;--cpc-mobile-gap: 17px;--cpc-mobile-border-radius: 8px;--cpc-lazy-load-transition: 0.3s ease-in-out;--cpc-hover-transition: 0.3s ease;--cpc-button-transition: 0.2s ease;--cpc-mobile-shadow: 0 2px 8px rgba(0,0,0,0.1);--cpc-card-shadow: 0 4px 8px rgba(0,0,0,0.15);--cpc-button-shadow: 0 2px 4px rgba(0,0,0,0.1);--cpc-primary-color: #007cba;--cpc-danger-color: #e74c3c;--cpc-success-color: #28a745;--cpc-warning-color: #ffc107;--cpc-info-color: #17a2b8;--cpc-light-color: #f8f9fa;--cpc-dark-color: #343a40;--cpc-muted-color: #6c757d;--cpc-text-primary: #1a1a1a;--cpc-text-secondary: #2c3e50;--cpc-text-muted: #6c757d;--cpc-text-white: #ffffff;--cpc-bg-white: #ffffff;--cpc-bg-light: #f8f9fa;--cpc-bg-gray: #e8e8e8;--cpc-bg-border: #fafafa;--cpc-bg-hover: rgba(0,0,0,0.05);--cpc-font-size-xs: 11px;--cpc-font-size-sm: 12px;--cpc-font-size-base: 14px;--cpc-font-size-md: 15px;--cpc-font-size-lg: 16px;--cpc-font-size-xl: 17px;--cpc-font-size-xxl: 18px;--cpc-font-weight-normal: 400;--cpc-font-weight-medium: 500;--cpc-font-weight-semibold: 600;--cpc-font-weight-bold: 700;--cpc-line-height-tight: 1.2;--cpc-line-height-normal: 1.4;--cpc-line-height-relaxed: 1.6;--cpc-spacing-xs: 4px;--cpc-spacing-sm: 8px;--cpc-spacing-md: 12px;--cpc-spacing-lg: 16px;--cpc-spacing-xl: 20px;--cpc-spacing-xxl: 24px;--cpc-border-radius-sm: 4px;--cpc-border-radius-md: 8px;--cpc-border-radius-lg: 12px;--cpc-border-radius-xl: 18px;--cpc-border-radius-none: 0;--cpc-border-width-thin: 1px;--cpc-border-width-medium: 2px;--cpc-border-width-thick: 3px;--cpc-icon-size-sm: 12px;--cpc-icon-size-md: 16px;--cpc-icon-size-lg: 20px;--cpc-icon-size-xl: 24px;--cpc-button-height-sm: 32px;--cpc-button-height-md: 40px;--cpc-button-height-lg: 44px;--cpc-button-height-xl: 48px;--cpc-card-min-height-desktop: 400px;--cpc-card-min-height-tablet: 350px;--cpc-card-min-height-mobile: 167px;--cpc-image-height-desktop: 200px;--cpc-image-height-tablet: 180px;--cpc-image-height-mobile: 150px;--cpc-z-index-dropdown: 1000;--cpc-z-index-sticky: 1020;--cpc-z-index-fixed: 1030;--cpc-z-index-modal-backdrop: 1040;--cpc-z-index-modal: 1050;--cpc-z-index-popover: 1060;--cpc-z-index-tooltip: 1070;--cpc-z-index-toast: 1080;--cpc-breakpoint-xs: 480px;--cpc-breakpoint-sm: 576px;--cpc-breakpoint-md: 768px;--cpc-breakpoint-lg: 992px;--cpc-breakpoint-xl: 1200px;--cpc-breakpoint-xxl: 1400px} @media (prefers-color-scheme: dark) {:root {--cpc-text-primary: #ffffff;--cpc-text-secondary: #e9ecef;--cpc-text-muted: #adb5bd;--cpc-bg-white: #212529;--cpc-bg-light: #343a40;--cpc-bg-gray: #495057;--cpc-bg-border: #6c757d} } @media (prefers-contrast: high) {:root {--cpc-primary-color: #000000;--cpc-danger-color: #000000;--cpc-text-primary: #000000;--cpc-bg-white: #ffffff;--cpc-border-color: #000000} } /* ========================================================================== Grid Layout (CSS Grid Implementation) ========================================================================== */ .cpc-products-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: var(--cpc-spacing-lg);padding: var(--cpc-spacing-md);max-width: 100%;margin: 0 auto} .cpc-grid-1 {grid-template-columns: 1fr} .cpc-grid-2 {grid-template-columns: repeat(2, 1fr)} .cpc-grid-3 {grid-template-columns: repeat(3, 1fr)} .cpc-grid-4 {grid-template-columns: repeat(4, 1fr)} .cpc-grid-5 {grid-template-columns: repeat(5, 1fr)} .cpc-grid-6 {grid-template-columns: repeat(6, 1fr)} @supports not (display: grid) {.cpc-products-grid {display: flex;flex-wrap: wrap;justify-content: space-between} .cpc-grid-1 .cpc-card {width: 100%} .cpc-grid-2 .cpc-card {width: calc(50% - var(--cpc-spacing-sm))} .cpc-grid-3 .cpc-card {width: calc(33.333% - var(--cpc-spacing-sm))} .cpc-grid-4 .cpc-card {width: calc(25% - var(--cpc-spacing-sm))} .cpc-grid-5 .cpc-card {width: calc(20% - var(--cpc-spacing-sm))} .cpc-grid-6 .cpc-card {width: calc(16.666% - var(--cpc-spacing-sm))} } /* ========================================================================== Card Styles ========================================================================== */ .cpc-card {background: var(--cpc-bg-white);border: var(--cpc-border-width-thin) solid var(--cpc-bg-gray);border-radius: var(--cpc-border-radius-md);box-shadow: var(--cpc-card-shadow);transition: var(--cpc-hover-transition);min-height: var(--cpc-card-min-height-desktop);position: relative;overflow: hidden;display: flex;flex-direction: column} .cpc-card:hover {transform: translateY(-2px);box-shadow: 0 8px 16px rgba(0,0,0,0.2)} .cpc-card.cpc-has-timer {border-color: var(--cpc-danger-color)} .cpc-card.cpc-has-discount {border-color: var(--cpc-success-color)} /* ========================================================================== Timer Styles ========================================================================== */ .cpc-timer {background: linear-gradient(135deg, var(--cpc-danger-color), #c0392b);color: var(--cpc-text-white);padding: var(--cpc-spacing-sm) var(--cpc-spacing-md);border-radius: var(--cpc-border-radius-sm);font-size: var(--cpc-font-size-sm);font-weight: var(--cpc-font-weight-semibold);text-align: center;margin-bottom: var(--cpc-spacing-md);position: relative;z-index: var(--cpc-z-index-sticky)} .cpc-timer-label {display: block;font-size: var(--cpc-font-size-xs);opacity: 0.9;margin-bottom: var(--cpc-spacing-xs)} .cpc-timer-display {display: block;font-size: var(--cpc-font-size-lg);font-weight: var(--cpc-font-weight-bold);font-family: 'Courier New', monospace;letter-spacing: 1px} .cpc-timer.expired {background: var(--cpc-muted-color)} /* ========================================================================== Product Meta Styles ========================================================================== */ .cpc-product-content {flex: 1;display: flex;flex-direction: column;padding: var(--cpc-spacing-lg)} .cpc-thumb-wrapper {position: relative;margin-bottom: var(--cpc-spacing-md);overflow: hidden;border-radius: var(--cpc-border-radius-sm)} .cpc-product-image {width: 100%;height: var(--cpc-image-height-desktop);object-fit: cover;transition: var(--cpc-hover-transition)} .cpc-card:hover .cpc-product-image {transform: scale(1.05)} .cpc-meta {flex: 1;display: flex;flex-direction: column} .cpc-title {margin: 0 0 var(--cpc-spacing-md) 0;font-size: var(--cpc-font-size-lg);font-weight: var(--cpc-font-weight-semibold);line-height: var(--cpc-line-height-tight)} .cpc-title a {color: var(--cpc-text-primary);text-decoration: none;transition: var(--cpc-hover-transition)} .cpc-title a:hover {color: var(--cpc-primary-color)} .cpc-meta-content {display: grid;grid-template-columns: 1fr 1fr;gap: var(--cpc-spacing-md);align-items: center;margin-top: auto} .cpc-meta-left {display: flex;flex-direction: column;gap: var(--cpc-spacing-xs)} .cpc-meta-right {text-align: right} .cpc-discount-badge {background: var(--cpc-success-color);color: var(--cpc-text-white);padding: var(--cpc-spacing-xs) var(--cpc-spacing-sm);border-radius: var(--cpc-border-radius-sm);font-size: var(--cpc-font-size-xs);font-weight: var(--cpc-font-weight-bold);display: inline-block;width: fit-content} .cpc-rating {display: flex;align-items: center;gap: var(--cpc-spacing-xs)} .cpc-star-icon {width: var(--cpc-icon-size-sm);height: var(--cpc-icon-size-sm)} .cpc-rating-text {font-size: var(--cpc-font-size-sm);color: var(--cpc-text-muted)} .cpc-price {font-size: var(--cpc-font-size-lg);font-weight: var(--cpc-font-weight-bold);color: var(--cpc-text-primary)} .cpc-toman-icon {width: var(--cpc-icon-size-sm);height: var(--cpc-icon-size-sm);vertical-align: middle;margin-left: var(--cpc-spacing-xs)} /* ========================================================================== Responsive Design ========================================================================== */ @media (max-width: 1200px) {.cpc-products-grid {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--cpc-spacing-md)} .cpc-card {min-height: var(--cpc-card-min-height-tablet)} .cpc-product-image {height: var(--cpc-image-height-tablet)} } @media (max-width: 768px) {.cpc-products-grid {grid-template-columns: 1fr;gap: var(--cpc-spacing-sm);padding: var(--cpc-spacing-sm)} .cpc-card {min-height: var(--cpc-card-min-height-mobile);flex-direction: row;align-items: center;padding: var(--cpc-mobile-padding);gap: var(--cpc-mobile-gap)} .cpc-thumb-wrapper {flex-shrink: 0;width: var(--cpc-mobile-image-size);height: var(--cpc-mobile-image-size);margin-bottom: 0} .cpc-product-image {width: var(--cpc-mobile-image-size);height: var(--cpc-mobile-image-size)} .cpc-product-content {flex: 1;padding: 0} .cpc-meta-content {grid-template-columns: 1fr;gap: var(--cpc-spacing-xs)} .cpc-meta-right {text-align: left} } @media (max-width: 480px) {.cpc-products-grid {padding: var(--cpc-spacing-xs)} .cpc-card {padding: var(--cpc-spacing-sm);gap: var(--cpc-spacing-sm)} .cpc-thumb-wrapper {width: 120px;height: 120px} .cpc-product-image {width: 120px;height: 120px} } /* ========================================================================== Accessibility ========================================================================== */ @media (prefers-reduced-motion: reduce) {.cpc-card, .cpc-product-image, .cpc-title a {transition: none} .cpc-card:hover {transform: none} .cpc-card:hover .cpc-product-image {transform: none} } .cpc-title a:focus, .cpc-card:focus-within {outline: 2px solid var(--cpc-primary-color);outline-offset: 2px} @media (prefers-contrast: high) {.cpc-card {border-width: var(--cpc-border-width-medium)} .cpc-timer {border: var(--cpc-border-width-thin) solid var(--cpc-text-white)} } /* ========================================================================== Lazy Loading ========================================================================== */ .cpc-lazy-loading {opacity: 0;transition: opacity var(--cpc-lazy-load-transition)} .cpc-lazy-loading.loaded {opacity: 1} .cpc-lazy-loading img {filter: blur(5px);transition: filter var(--cpc-lazy-load-transition)} .cpc-lazy-loading.loaded img {filter: blur(0)} /* ========================================================================== Print Styles ========================================================================== */ @media print {.cpc-timer {display: none} .cpc-card {box-shadow: none;border: var(--cpc-border-width-thin) solid #000;break-inside: avoid} .cpc-product-image {max-height: 150px} }