/* ===================================================================== Modern UI Overlay — Storefront --------------------------------------------------------------------- Additive, non-destructive layer. Loaded LAST so it refines the existing theme without replacing it. Brand hue is inherited from the store's dynamic color (set via --brand in the layout ), so this file never hard-codes the primary color. ===================================================================== */ :root { /* --brand is injected inline from $gs->colors; fallback keeps it safe */ --brand: var(--brand-color, #ff5500); --ui-radius: 12px; --ui-radius-sm: 8px; --ui-radius-pill: 999px; --ui-ink: #1f2530; --ui-muted: #6b7280; --ui-line: #eceef2; --ui-bg-soft: #f7f8fa; --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --ui-shadow-md: 0 4px 12px rgba(16, 24, 40, .08); --ui-shadow-lg: 0 12px 28px rgba(16, 24, 40, .12); --ui-ease: cubic-bezier(.4, 0, .2, 1); --ui-t: .22s var(--ui-ease); } /* ---------- Base typography & rendering polish ---------- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; color: var(--ui-ink); } h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; } a { transition: color var(--ui-t); } img { image-rendering: -webkit-optimize-contrast; } ::selection { background: var(--brand); color: #fff; } /* Modern, slim scrollbar */ * { scrollbar-width: thin; scrollbar-color: #cfd4dc transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #cfd4dc; border-radius: var(--ui-radius-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #aeb4bf; background-clip: content-box; } /* ---------- Buttons ---------- */ .btn, .add-to-cart-btn, button.btn { border-radius: var(--ui-radius-sm); transition: transform var(--ui-t), box-shadow var(--ui-t), background-color var(--ui-t), opacity var(--ui-t); font-weight: 600; letter-spacing: .01em; } .btn:hover, .add-to-cart-btn:not(.cart-out-of-stock):hover, button.btn:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-md); } .btn:active, .add-to-cart-btn:active { transform: translateY(0); } .btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Out-of-stock should not look interactive */ .add-to-cart-btn.cart-out-of-stock { opacity: .65; cursor: not-allowed; } /* ---------- Product cards ---------- */ a.item { display: block; border-radius: var(--ui-radius); overflow: hidden; background: #fff; border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-sm); transition: transform var(--ui-t), box-shadow var(--ui-t), border-color var(--ui-t); } a.item:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-lg); border-color: color-mix(in srgb, var(--brand) 35%, var(--ui-line)); } a.item .item-img { overflow: hidden; background: var(--ui-bg-soft); } a.item .item-img img { transition: transform .45s var(--ui-ease); } a.item:hover .item-img img { transform: scale(1.06); } a.item .info { padding: 14px 14px 16px; } a.item .info .name { color: var(--ui-ink); font-weight: 500; line-height: 1.45; } a.item .info .price { font-weight: 700; } /* Sale badge — modern pill */ .sell-area .sale, .item .sale { border-radius: var(--ui-radius-pill); font-weight: 700; letter-spacing: .02em; box-shadow: var(--ui-shadow-sm); } /* Quick-action icons reveal smoothly */ .extra-list span, .add-to-wish, .add-to-compare, .quick-view { border-radius: var(--ui-radius-pill); transition: transform var(--ui-t), background-color var(--ui-t), color var(--ui-t), box-shadow var(--ui-t); } .extra-list span:hover, .add-to-wish:hover, .add-to-compare:hover, .quick-view:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow-md); } /* ---------- Forms & inputs ---------- */ .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], textarea, select, .nice-select { border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-line); transition: border-color var(--ui-t), box-shadow var(--ui-t), background-color var(--ui-t); } .form-control:focus, input:focus, textarea:focus, select:focus, .nice-select.open { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline: none; } ::placeholder { color: #9aa1ad; opacity: 1; } /* ---------- Cards / panels / generic boxes ---------- */ .card, .single-box, .widget, .panel { border-radius: var(--ui-radius); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow-sm); transition: box-shadow var(--ui-t), transform var(--ui-t); } .card:hover, .single-box:hover { box-shadow: var(--ui-shadow-md); } /* Category tiles */ .single-category { border-radius: var(--ui-radius); overflow: hidden; transition: transform var(--ui-t), box-shadow var(--ui-t); } .single-category:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow-md); } /* ---------- Header polish ---------- */ .header-bottom, header { backdrop-filter: saturate(1.05); } /* ---------- Badges / chips ---------- */ .badge { border-radius: var(--ui-radius-pill); font-weight: 600; letter-spacing: .02em; } /* ---------- Cart quantity / steppers ---------- */ .cart-plus-minus, .quantity { border-radius: var(--ui-radius-sm); overflow: hidden; } /* ---------- Tables (account / cart / orders) ---------- */ table.table { border-radius: var(--ui-radius); overflow: hidden; } table.table thead th { background: var(--ui-bg-soft); border-bottom: 1px solid var(--ui-line); font-weight: 600; letter-spacing: .02em; } table.table tbody tr { transition: background-color var(--ui-t); } table.table tbody tr:hover { background: var(--ui-bg-soft); } /* ---------- Pagination ---------- */ .pagination .page-link, .pagination li a, .pagination li span { border-radius: var(--ui-radius-sm) !important; margin: 0 3px; border: 1px solid var(--ui-line); transition: all var(--ui-t); } .pagination .page-item.active .page-link, .pagination li.active span { background: var(--brand); border-color: var(--brand); } /* ---------- Invoice download buttons (PDF / XML) ---------- */ .order-action-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .inv-dl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; } .inv-dl-btn:hover { filter: brightness(.95); transform: translateY(-1px); text-decoration: none; } .inv-dl-btn.pdf { background: #fce8e6; color: #c0392b; border-color: #f5c6cb; } .inv-dl-btn.xml { background: #e8f0fe; color: #1a56db; border-color: #c6d4f5; } .inv-dl-btn i { font-size: 1.05em; } /* ---------- DataTables controls — RTL alignment ---------- */ html[dir="rtl"] .dataTables_wrapper .dataTables_filter { text-align: left; } html[dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-right: .5em; margin-left: 0; } html[dir="rtl"] .dataTables_wrapper .dataTables_length { text-align: right; } html[dir="rtl"] .dataTables_wrapper .dataTables_info { text-align: right; } html[dir="rtl"] .dataTables_wrapper .dataTables_paginate { text-align: left; } html[dir="rtl"] table.dataTable thead th, html[dir="rtl"] table.dataTable tbody td { text-align: right; } /* ---------- Reduced motion respect ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }