/* ========================================================= EcomFront Theme — theme.css Mobile-first. No CDN. All assets local. ========================================================= */ /* --------------------------------------------------------- 1. Inter Font Face --------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------- 2. CSS Custom Properties (Design Tokens) --------------------------------------------------------- */ :root { /* Brand colours */ --ec-primary: #1a56db; --ec-primary-dark: #1342a8; --ec-primary-light: #e8effd; --ec-secondary: #f97316; --ec-secondary-dark: #c05c0a; --ec-accent: #10b981; /* Neutrals */ --ec-dark: #111827; --ec-body: #374151; --ec-muted: #6b7280; --ec-border: #e5e7eb; --ec-bg: #f9fafb; --ec-white: #ffffff; /* Status */ --ec-success: #10b981; --ec-danger: #ef4444; --ec-warning: #f59e0b; --ec-info: #3b82f6; /* Typography */ --ec-font: 'Inter', system-ui, -apple-system, sans-serif; --ec-font-size-base: clamp(14px, 3.8vw, 16px); --ec-line-height: 1.6; /* Spacing */ --ec-section-py: clamp(2.5rem, 6vw, 5rem); /* Radius */ --ec-radius-sm: 0.375rem; --ec-radius: 0.625rem; --ec-radius-lg: 1rem; --ec-radius-pill: 50rem; /* Shadows */ --ec-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --ec-shadow: 0 4px 12px rgba(0,0,0,.1); --ec-shadow-lg: 0 8px 24px rgba(0,0,0,.12); /* Header */ --ec-header-h: 64px; --ec-topbar-h: 38px; --ec-total-header-h: calc(var(--ec-header-h) + var(--ec-topbar-h)); /* Transitions */ --ec-transition: 0.2s ease; } /* Dark mode tokens */ @media (prefers-color-scheme: dark) { :root { --ec-dark: #f9fafb; --ec-body: #d1d5db; --ec-muted: #9ca3af; --ec-border: #374151; --ec-bg: #111827; --ec-white: #1f2937; } } /* Manual dark mode toggle (class on ) */ html.ec-dark { --ec-dark: #f9fafb; --ec-body: #d1d5db; --ec-muted: #9ca3af; --ec-border: #374151; --ec-bg: #111827; --ec-white: #1f2937; } /* --------------------------------------------------------- 3. Base / Reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ec-font); font-size: var(--ec-font-size-base); color: var(--ec-body); background-color: var(--ec-white); line-height: var(--ec-line-height); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Prevent horizontal scroll */ body, .wrapper { max-width: 100vw; overflow-x: hidden; } /* Anchor offset for sticky header */ :target { scroll-margin-top: calc(var(--ec-total-header-h) + 8px); } img { max-width: 100%; height: auto; } a { color: var(--ec-primary); text-decoration: none; transition: color var(--ec-transition); } a:hover { color: var(--ec-primary-dark); } /* --------------------------------------------------------- 4. Bootstrap Overrides --------------------------------------------------------- */ .btn { font-weight: 600; border-radius: var(--ec-radius-sm); min-height: 44px; /* touch target */ padding: 0.5rem 1.25rem; transition: all var(--ec-transition); } .btn-primary { background-color: var(--ec-primary); border-color: var(--ec-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--ec-primary-dark); border-color: var(--ec-primary-dark); } .btn-secondary { background-color: var(--ec-secondary); border-color: var(--ec-secondary); color: #fff; } .btn-secondary:hover { background-color: var(--ec-secondary-dark); border-color: var(--ec-secondary-dark); color:#fff; } .btn-outline-primary { border-color: var(--ec-primary); color: var(--ec-primary); } .btn-outline-primary:hover { background-color: var(--ec-primary); color: #fff; } .form-control, .form-select { border-radius: var(--ec-radius-sm); border-color: var(--ec-border); min-height: 44px; font-size: 0.9375rem; } .form-control:focus, .form-select:focus { border-color: var(--ec-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.15); } .badge { font-weight: 600; border-radius: var(--ec-radius-sm); } /* --------------------------------------------------------- 5. Top Announcement Bar --------------------------------------------------------- */ .ec-topbar { background-color: var(--ec-primary); color: #fff; font-size: 0.8125rem; height: var(--ec-topbar-h); display: flex; align-items: center; } .ec-topbar a { color: #fff; text-decoration: underline; } .ec-topbar .ec-topbar-dismiss { background: none; border: none; color: #fff; opacity:.7; cursor:pointer; padding:0 .25rem; line-height:1; } .ec-topbar .ec-topbar-dismiss:hover { opacity:1; } /* --------------------------------------------------------- 6. Header / Navigation --------------------------------------------------------- */ .ec-header { position: sticky; top: 0; z-index: 1030; background: var(--ec-white); border-bottom: 1px solid var(--ec-border); height: var(--ec-header-h); transition: box-shadow var(--ec-transition), height var(--ec-transition); } .ec-header.scrolled { box-shadow: var(--ec-shadow); height: 56px; } .ec-header.scrolled .ec-logo img { height: 32px; } .ec-logo img { height: 40px; width: auto; transition: height var(--ec-transition); } /* Search bar */ .ec-search-form { position: relative; flex: 1; max-width: 480px; } .ec-search-form .form-control { padding-right: 3rem; border-radius: var(--ec-radius-pill); background: var(--ec-bg); } .ec-search-form .ec-search-btn { position: absolute; right: 0; top: 0; height: 100%; background: var(--ec-primary); color: #fff; border: none; border-radius: 0 var(--ec-radius-pill) var(--ec-radius-pill) 0; padding: 0 1rem; cursor: pointer; } /* Mobile search overlay */ .ec-search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1050; align-items: flex-start; padding-top: var(--ec-total-header-h); } .ec-search-overlay.active { display: flex; } .ec-search-overlay .ec-search-inner { background: var(--ec-white); width: 100%; padding: 1rem; box-shadow: var(--ec-shadow-lg); } /* Header icon buttons */ .ec-header-icon { position: relative; background: none; border: none; color: var(--ec-dark); font-size: 1.375rem; padding: 0.5rem; cursor: pointer; border-radius: var(--ec-radius-sm); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: background var(--ec-transition), color var(--ec-transition); } .ec-header-icon:hover { background: var(--ec-bg); color: var(--ec-primary); } .ec-badge-count { position: absolute; top: 2px; right: 2px; background: var(--ec-secondary); color: #fff; font-size: 0.625rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Main nav */ .ec-navbar { border-top: 1px solid var(--ec-border); background: var(--ec-white); } .ec-navbar .nav-link { font-weight: 500; font-size: 0.9375rem; color: var(--ec-dark); padding: 0.75rem 1rem; white-space: nowrap; transition: color var(--ec-transition); } .ec-navbar .nav-link:hover, .ec-navbar .nav-link.active { color: var(--ec-primary); } /* Dropdown mega menu */ .ec-mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background: var(--ec-white); box-shadow: var(--ec-shadow-lg); border-top: 2px solid var(--ec-primary); padding: 1.5rem; display: none; z-index: 1020; } .ec-mega-menu.show { display: block; } .ec-mega-menu-col h6 { font-weight: 700; color: var(--ec-dark); margin-bottom: .75rem; font-size:.875rem; text-transform:uppercase; letter-spacing:.05em; } .ec-mega-menu-col a { display: block; color: var(--ec-body); font-size:.9rem; padding:.2rem 0; } .ec-mega-menu-col a:hover { color: var(--ec-primary); padding-left:.25rem; } /* Off-canvas mobile menu */ .ec-offcanvas-menu .offcanvas-header { background: var(--ec-primary); color: #fff; } .ec-offcanvas-menu .offcanvas-header .btn-close { filter: invert(1); } .ec-offcanvas-menu .nav-link { color: var(--ec-dark); font-weight: 500; padding: .75rem 1rem; border-bottom: 1px solid var(--ec-border); } .ec-offcanvas-menu .nav-link:hover { color: var(--ec-primary); background: var(--ec-primary-light); } .ec-offcanvas-menu .accordion-button { font-weight: 600; color: var(--ec-dark); background: none; box-shadow: none; } .ec-offcanvas-menu .accordion-button:not(.collapsed) { color: var(--ec-primary); background: var(--ec-primary-light); } /* --------------------------------------------------------- 7. Footer --------------------------------------------------------- */ .ec-footer { background: var(--ec-dark); color: #9ca3af; padding-top: clamp(2rem, 5vw, 4rem); } html.ec-dark .ec-footer { background: #0d1117; } .ec-footer-heading { color: var(--ec-white); font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.25rem; } .ec-footer a { color: #9ca3af; font-size: .9rem; display: block; padding: .2rem 0; transition: color var(--ec-transition), padding var(--ec-transition); } .ec-footer a:hover { color: var(--ec-white); padding-left: .35rem; } .ec-footer-bottom { border-top: 1px solid #374151; margin-top: 2.5rem; padding: 1.25rem 0; font-size: .85rem; } .ec-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #374151; color: #9ca3af; font-size: 1rem; transition: background var(--ec-transition), color var(--ec-transition); padding: 0; } .ec-social-icons a:hover { background: var(--ec-primary); color: #fff; padding: 0; } /* Footer accordion (mobile collapse) */ .ec-footer-accordion .accordion-button { background: transparent; color: var(--ec-white); font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .05em; padding: 1rem 0; box-shadow: none; } .ec-footer-accordion .accordion-button::after { filter: invert(1); } .ec-footer-accordion .accordion-button:not(.collapsed) { color: var(--ec-primary); } .ec-footer-accordion .accordion-body { padding: 0 0 1rem 0; } .ec-footer-accordion .accordion-item { background: transparent; border: none; border-bottom: 1px solid #374151; } /* --------------------------------------------------------- 8. Product Card --------------------------------------------------------- */ .ec-product-card { border: 1px solid var(--ec-border); border-radius: var(--ec-radius); overflow: hidden; background: var(--ec-white); transition: box-shadow var(--ec-transition), transform var(--ec-transition); position: relative; height: 100%; } .ec-product-card:hover { box-shadow: var(--ec-shadow-lg); transform: translateY(-2px); } .ec-product-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--ec-bg); } .ec-product-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .ec-product-card:hover .ec-product-card__img-wrap img { transform: scale(1.05); } .ec-product-card__badges { position: absolute; top: .625rem; left: .625rem; display: flex; flex-direction: column; gap: .25rem; z-index: 1; } .ec-badge-sale { background: var(--ec-secondary); color:#fff; } .ec-badge-new { background: var(--ec-accent); color:#fff; } .ec-product-card__wish { position: absolute; top: .625rem; right: .625rem; background: var(--ec-white); border: 1px solid var(--ec-border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; z-index: 1; transition: background var(--ec-transition), color var(--ec-transition); color: var(--ec-muted); } .ec-product-card__wish:hover, .ec-product-card__wish.active { color: var(--ec-danger); background: #fef2f2; border-color: var(--ec-danger); } .ec-product-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: .75rem; transform: translateY(100%); transition: transform var(--ec-transition); display: flex; justify-content: center; } .ec-product-card:hover .ec-product-card__overlay { transform: translateY(0); } .ec-product-card__overlay .btn { font-size:.85rem; min-height:36px; padding:.35rem .875rem; } .ec-product-card__body { padding: .875rem; } .ec-product-card__brand { font-size:.75rem; font-weight:600; color: var(--ec-primary); text-transform:uppercase; letter-spacing:.05em; } .ec-product-card__name { font-size:.9375rem; font-weight:600; color: var(--ec-dark); margin:.2rem 0 .35rem; line-height:1.4; } .ec-product-card__name a { color: inherit; } .ec-product-card__name a:hover { color: var(--ec-primary); } .ec-stars { color: #f59e0b; font-size:.8rem; } .ec-rating-count { color: var(--ec-muted); font-size:.8rem; } .ec-price { font-size:1.0625rem; font-weight:700; color: var(--ec-dark); } .ec-price-old { font-size:.875rem; color: var(--ec-muted); text-decoration:line-through; margin-left:.35rem; } .ec-price-sale { color: var(--ec-danger); } /* --------------------------------------------------------- 9. Section Utilities --------------------------------------------------------- */ .ec-section { padding: var(--ec-section-py) 0; } .ec-section-title { font-size: clamp(1.375rem, 4vw, 2rem); font-weight: 700; color: var(--ec-dark); margin-bottom: 0; } .ec-section-subtitle { color: var(--ec-muted); font-size:.9375rem; margin-top:.375rem; } .ec-section-divider { width: 48px; height: 4px; background: var(--ec-primary); border-radius: var(--ec-radius-pill); margin: .75rem 0 0; } /* --------------------------------------------------------- 10. Back to Top --------------------------------------------------------- */ .ec-back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; background: var(--ec-primary); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; z-index: 999; box-shadow: var(--ec-shadow); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--ec-transition), transform var(--ec-transition); } .ec-back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .ec-back-to-top:hover { background: var(--ec-primary-dark); } /* --------------------------------------------------------- 11. Page Load Progress Bar --------------------------------------------------------- */ .ec-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--ec-secondary); z-index: 9999; width: 0%; transition: width .2s ease; } /* --------------------------------------------------------- 12. Breadcrumb --------------------------------------------------------- */ .ec-breadcrumb { padding: .875rem 0; font-size:.875rem; } .ec-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--ec-muted); } .ec-breadcrumb .breadcrumb-item a { color: var(--ec-muted); } .ec-breadcrumb .breadcrumb-item a:hover { color: var(--ec-primary); } .ec-breadcrumb .breadcrumb-item.active { color: var(--ec-dark); font-weight:500; } /* --------------------------------------------------------- 13. Responsive Utilities --------------------------------------------------------- */ /* Tables → card on mobile */ @media (max-width: 575.98px) { .ec-table-responsive-card thead { display: none; } .ec-table-responsive-card tbody tr { display: block; border: 1px solid var(--ec-border); border-radius: var(--ec-radius); margin-bottom: 1rem; padding: .75rem; } .ec-table-responsive-card td { display: flex; justify-content: space-between; align-items: center; border: none; padding: .3rem 0; font-size: .9rem; } .ec-table-responsive-card td::before { content: attr(data-label); font-weight: 600; color: var(--ec-dark); margin-right: 1rem; } } /* Off-canvas filter trigger — visible only on mobile/tablet */ .ec-filter-trigger { display: none; } @media (max-width: 991.98px) { .ec-filter-trigger { display: inline-flex; } } /* Sticky sidebar on desktop */ @media (min-width: 992px) { .ec-sidebar-sticky { position: sticky; top: calc(var(--ec-total-header-h) + 1rem); } } /* Mobile cart mini badge in offcanvas */ @media (max-width: 767.98px) { .ec-header .ec-search-form { display: none; } .ec-mobile-search-toggle { display: flex !important; } } @media (min-width: 768px) { .ec-mobile-search-toggle { display: none !important; } } /* Newsletter input */ .ec-newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; } .ec-newsletter-form .form-control { flex: 1 1 200px; border-radius: var(--ec-radius-pill) !important; } .ec-newsletter-form .btn { border-radius: var(--ec-radius-pill) !important; white-space: nowrap; } /* --------------------------------------------------------- 14. Mini Cart Drawer --------------------------------------------------------- */ .ec-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--ec-white); box-shadow: -4px 0 24px rgba(0,0,0,.15); z-index: 1055; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); } .ec-cart-drawer.open { transform: translateX(0); } .ec-cart-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1054; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .ec-cart-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .ec-cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--ec-border); flex-shrink: 0; } .ec-cart-drawer-header h5 { font-weight: 700; margin: 0; color: var(--ec-dark); font-size: 1rem; } .ec-cart-drawer-close { background: none; border: none; font-size: 1.25rem; color: var(--ec-muted); cursor: pointer; padding: .25rem .5rem; border-radius: var(--ec-radius-sm); transition: color var(--ec-transition), background var(--ec-transition); line-height: 1; } .ec-cart-drawer-close:hover { color: var(--ec-dark); background: var(--ec-bg); } .ec-cart-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem; } .ec-cart-drawer-item { display: flex; gap: .875rem; align-items: flex-start; padding: .875rem 0; border-bottom: 1px solid var(--ec-border); } .ec-cart-drawer-item:last-child { border-bottom: none; } .ec-cart-drawer-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--ec-radius-sm); flex-shrink: 0; } .ec-cart-drawer-item-info { flex: 1 1 auto; min-width: 0; } .ec-cart-drawer-item-name { font-weight: 600; font-size: .9rem; color: var(--ec-dark); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ec-cart-drawer-item-meta { font-size: .8rem; color: var(--ec-muted); margin: .2rem 0 .4rem; } .ec-cart-drawer-item-price { font-weight: 700; color: var(--ec-dark); font-size: .9rem; } .ec-cart-drawer-item-remove { background: none; border: none; color: var(--ec-muted); font-size: .85rem; cursor: pointer; padding: .2rem; border-radius: var(--ec-radius-sm); transition: color var(--ec-transition); flex-shrink: 0; align-self: flex-start; } .ec-cart-drawer-item-remove:hover { color: var(--ec-danger); } .ec-cart-drawer-footer { padding: 1.25rem; border-top: 1px solid var(--ec-border); flex-shrink: 0; background: var(--ec-bg); } .ec-cart-drawer-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: .95rem; } .ec-cart-drawer-subtotal .label { color: var(--ec-muted); } .ec-cart-drawer-subtotal .value { font-weight: 800; font-size: 1.1rem; color: var(--ec-dark); } .ec-cart-drawer-empty { text-align: center; padding: 3rem 1rem; } .ec-cart-drawer-empty i { font-size: 3rem; color: var(--ec-border); display: block; margin-bottom: .875rem; } .ec-cart-drawer-empty p { color: var(--ec-muted); margin-bottom: 1.25rem; } /* --------------------------------------------------------- 15. Micro-interactions & Polish --------------------------------------------------------- */ /* Focus ring */ :focus-visible { outline: 2px solid var(--ec-primary); outline-offset: 3px; } /* Image zoom on product cards */ .ec-product-img-wrap { overflow: hidden; } .ec-product-img-wrap img { transition: transform 0.4s ease; display: block; width: 100%; } .ec-product-card:hover .ec-product-img-wrap img { transform: scale(1.06); } /* Wishlist button active state */ .ec-wishlist-btn.active i { color: var(--ec-danger); } /* Skeleton loading placeholder */ .ec-skeleton { background: linear-gradient(90deg, var(--ec-border) 25%, var(--ec-bg) 50%, var(--ec-border) 75%); background-size: 200% 100%; animation: ec-shimmer 1.5s infinite; border-radius: var(--ec-radius-sm); } @keyframes ec-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Section fade-in on scroll */ .ec-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .ec-reveal.visible { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------- 16. Print Stylesheet (order confirmation) --------------------------------------------------------- */ @media print { .ec-topbar, .ec-header, .ec-navbar, .ec-back-to-top, .ec-cart-drawer, .ec-cart-drawer-backdrop, footer .d-flex.gap-3, .btn:not(.btn-link), nav[aria-label="breadcrumb"] { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } .ec-confirm-hero { background: #f0fdf4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ec-confirm-card { border: 1px solid #e5e7eb !important; box-shadow: none !important; break-inside: avoid; } .ec-confirm-icon { background: #10b981 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .container { max-width: 100% !important; padding: 0 1cm !important; } a { color: inherit !important; text-decoration: none !important; } .col-lg-7, .col-lg-5 { width: 100% !important; } } /* --------------------------------------------------------- 17. Animations (reduced-motion safe) --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .ec-reveal { opacity: 1; transform: none; } }