/* ========================================================================== ShopNova storefront — base: tokens, reset, typography, buttons, forms, utilities Brand colours, fonts and radii come from Admin → Appearance (CSS variables printed in the layout by App\Support\Theme). ========================================================================== */ :root { --primary: #141A24; --primary-hover: #2B3240; --primary-contrast: #fff; --primary-soft: #E8E9EA; --accent: #FF5A36; --accent-hover: #E5512F; --accent-contrast: #fff; --accent-soft: #FFEDE8; --success: #12A150; --success-soft: #E0F3E8; --warning: #D97706; --warning-soft: #FEF3C7; --danger: #DC2626; --danger-soft: #FEE2E2; --text: #141A24; --muted: #6B7280; --border: #E8E6E1; --border-strong: #D1D1CF; --bg: #fff; --surface: #F5F4F0; --surface-2: #EFEEEA; --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --fs-base: 15px; --fw-heading: 700; --radius: 14px; --radius-sm: 8px; --radius-lg: 20px; --btn-radius: 12px; --container: 1320px; --img-ratio: 1/1; --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-md: 0 10px 30px -10px rgba(16, 24, 40, .16); --shadow-lg: 0 28px 60px -18px rgba(16, 24, 40, .28); --ease: cubic-bezier(.2, .8, .2, 1); --header-h: 76px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; color: var(--text); } h1 { font-size: clamp(26px, 3vw, 38px); } h2 { font-size: clamp(22px, 2.3vw, 30px); } h3 { font-size: 19px; } h4 { font-size: 16px; } p { margin: 0 0 1em; } hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; } ::selection { background: var(--accent); color: var(--accent-contrast); } [hidden] { display: none !important; } [x-cloak] { display: none !important; } .icon { display: inline-block; vertical-align: -0.22em; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-sm { width: 16px; height: 16px; } .icon-xs { width: 14px; height: 14px; } .icon-lg { width: 24px; height: 24px; } .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 999; background: var(--primary); color: var(--primary-contrast); padding: 10px 16px; border-radius: 8px; } .skip-link:focus { left: 8px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------------------------------------------------------------- layout */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: 36px 0; } .section-lg { padding: 64px 0; } .stack > * + * { margin-top: 16px; } .row { display: flex; align-items: center; gap: 12px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .grow { flex: 1; min-width: 0; } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .center { text-align: center; } .muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 12px; } .strong { font-weight: 700; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .text-accent { color: var(--accent); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } /* ---------------------------------------------------------------- buttons */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--btn-radius); border: 1.5px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; font-size: 14.5px; letter-spacing: -.005em; white-space: nowrap; line-height: 1; text-align: center; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); user-select: none; position: relative; } .btn:hover { background: var(--surface-2); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; } .btn .icon { width: 18px; height: 18px; } .btn-primary { --btn-bg: var(--primary); --btn-fg: var(--primary-contrast); } .btn-primary:hover { background: var(--primary-hover); } .btn-accent { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); } .btn-accent:hover { background: var(--accent-hover); box-shadow: 0 10px 24px -12px var(--accent); } .btn-outline { --btn-bg: transparent; --btn-bd: var(--border-strong); } .btn-outline:hover { background: transparent; border-color: var(--text); } .btn-ghost { --btn-bg: transparent; } .btn-ghost:hover { background: var(--surface); } .btn-white { --btn-bg: #fff; --btn-fg: #141A24; } .btn-white:hover { background: #F3F3F1; } .btn-danger { --btn-bg: var(--danger-soft); --btn-fg: var(--danger); } .btn-danger:hover { background: #FECACA; } .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: min(var(--btn-radius), 10px); } .btn-lg { height: 54px; padding: 0 28px; font-size: 16px; } .btn-block { width: 100%; } .btn-icon { width: 46px; padding: 0; } .btn-icon.btn-sm { width: 36px; } .btn.is-loading { color: transparent !important; pointer-events: none; } .btn.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--btn-fg); border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color .2s; } .link:hover { text-decoration-color: currentColor; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .link-arrow .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); } .link-arrow:hover .icon { transform: translateX(3px); } /* ---------------------------------------------------------------- forms */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .label { font-size: 13.5px; font-weight: 600; color: var(--text); } .label .req { color: var(--danger); } .input, .select, .textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 15px; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; } .textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; } .select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } .input::placeholder, .textarea::placeholder { color: #A0A4AB; } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px var(--primary-soft); } .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); } .field-error { color: var(--danger); font-size: 13px; font-weight: 500; } .help { color: var(--muted); font-size: 12.5px; } .input-group { position: relative; display: flex; } .input-group .input { padding-left: 44px; } .input-group > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .input-group .btn { position: absolute; right: 5px; top: 5px; height: 38px; } .input-inline { display: flex; gap: 8px; } .input-inline .input { flex: 1; } .check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.45; user-select: none; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check .box { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--bg); display: grid; place-items: center; transition: all .15s var(--ease); } .check .box::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .15s var(--ease); } .check input:checked + .box { background: var(--primary); border-color: var(--primary); } .check input:checked + .box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); } .check input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; } .check.radio .box { border-radius: 50%; } .check.radio .box::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: scale(0); } .check.radio input:checked + .box::after { transform: scale(1); } .switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .switch input { position: absolute; opacity: 0; } .switch .track { width: 42px; height: 24px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background .2s; } .switch .track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); } .switch input:checked + .track { background: var(--success); } .switch input:checked + .track::after { transform: translateX(18px); } /* ---------------------------------------------------------------- badges & pills */ .badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1; white-space: nowrap; background: var(--primary); color: var(--primary-contrast); } .badge-sale { background: var(--accent); color: var(--accent-contrast); } .badge-new { background: var(--success); color: #fff; } .badge-hot { background: #FFB020; color: #3B2600; } .badge-soft { background: var(--surface); color: var(--text); } .badge-muted { background: #EEF0F2; color: #5B6270; } .badge-out { background: rgba(20, 26, 36, .78); color: #fff; } .pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); white-space: nowrap; } .pill .icon { width: 14px; height: 14px; } .pill-accent { background: var(--accent-soft); color: var(--accent); } .pill-success { background: var(--success-soft); color: var(--success); } .tone { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; } .tone::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tone-amber { background: #FEF3C7; color: #A16207; } .tone-blue { background: #DBEAFE; color: #1D4ED8; } .tone-violet { background: #EDE9FE; color: #6D28D9; } .tone-indigo { background: #E0E7FF; color: #4338CA; } .tone-green { background: #DCFCE7; color: #15803D; } .tone-red { background: #FEE2E2; color: #B91C1C; } .tone-gray { background: #F1F2F4; color: #4B5563; } /* ---------------------------------------------------------------- stars */ .stars { --size: 14px; --rating: 0; position: relative; display: inline-block; width: calc(var(--size) * 5); height: var(--size); flex: none; } .stars::before, .stars::after { content: ''; position: absolute; inset: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.3 6.9.8-5.12 4.7 1.4 6.8L12 17.3l-6.13 3.5 1.4-6.8L2.15 9.3l6.9-.8z'/%3E%3C/svg%3E") repeat-x left center / var(--size) var(--size); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.95 6.3 6.9.8-5.12 4.7 1.4 6.8L12 17.3l-6.13 3.5 1.4-6.8L2.15 9.3l6.9-.8z'/%3E%3C/svg%3E") repeat-x left center / var(--size) var(--size); } .stars::before { background: #E2E0DA; } .stars::after { background: #FFB020; width: calc(var(--rating) / 5 * 100%); } .rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .rating b { color: var(--text); font-weight: 700; } /* ---------------------------------------------------------------- cards & misc */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); } .card-pad { padding: 24px; } .card-soft { background: var(--surface); border-radius: var(--radius); } .divider-dot::before { content: '·'; margin: 0 6px; color: var(--border-strong); } .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 2px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); } .code-chip { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .06em; padding: 8px 14px; border: 1.5px dashed var(--accent); color: var(--accent); background: var(--accent-soft); border-radius: 10px; } .alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; margin-bottom: 16px; } .alert .icon { margin-top: 1px; } .alert-success { background: var(--success-soft); color: #0E6B37; } .alert-error { background: var(--danger-soft); color: #991B1B; } .alert-info { background: #EAF2FE; color: #1E4FA8; } .alert-warning { background: var(--warning-soft); color: #92400E; } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 18px 0 6px; } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs .icon { width: 13px; height: 13px; opacity: .6; } .breadcrumbs span[aria-current] { color: var(--text); font-weight: 600; } .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 40px 0 8px; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 600; font-size: 14px; border: 1px solid var(--border); background: var(--bg); transition: all .15s; } .pagination a:hover { border-color: var(--text); } .pagination .is-active { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); } .pagination .is-disabled { opacity: .4; } .pagination .gap { border: 0; min-width: 20px; } .empty-state { text-align: center; padding: 56px 20px; max-width: 460px; margin: 0 auto; } .empty-state svg.illustration { width: min(300px, 80%); height: auto; margin: 0 auto 20px; } .empty-state h3 { font-size: 22px; margin-bottom: 8px; } .empty-state p { color: var(--muted); margin-bottom: 22px; } .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------------------------------------------------------------- toast */ .toasts { position: fixed; z-index: 1200; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: min(92vw, 420px); } .toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; background: #141A24; color: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; animation: toastIn .35s var(--ease); } .toast.is-leaving { animation: toastOut .25s ease forwards; } .toast .toast-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); flex: none; } .toast.success .toast-icon { background: var(--success); } .toast.error .toast-icon { background: var(--danger); } .toast .toast-icon .icon { width: 16px; height: 16px; stroke-width: 2.4; } .toast img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: #fff; flex: none; } .toast .toast-body { flex: 1; min-width: 0; line-height: 1.35; } .toast .toast-body small { display: block; color: rgba(255, 255, 255, .65); font-size: 12.5px; } .toast a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } @keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateY(10px); } } /* ---------------------------------------------------------------- overlay, drawer, modal */ .overlay { position: fixed; inset: 0; z-index: 900; background: rgba(12, 16, 23, .48); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .overlay.is-open { opacity: 1; visibility: visible; } body.is-locked { overflow: hidden; } .drawer { position: fixed; top: 0; bottom: 0; z-index: 950; width: min(440px, 100vw); background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); transition: transform .38s var(--ease); visibility: hidden; } .drawer-right { right: 0; transform: translateX(100%); } .drawer-left { left: 0; transform: translateX(-100%); width: min(360px, 88vw); } .drawer.is-open { transform: none; visibility: visible; } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .drawer-head h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; } .drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; } .drawer-foot { padding: 18px 20px 20px; border-top: 1px solid var(--border); background: var(--bg); } .close-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center; transition: background .2s, transform .2s; } .close-btn:hover { background: var(--surface-2); transform: rotate(90deg); } .modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility .25s; } .modal.is-open { visibility: visible; opacity: 1; } .modal-backdrop { position: absolute; inset: 0; background: rgba(12, 16, 23, .55); } .modal-dialog { position: relative; width: min(960px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.985); transition: transform .3s var(--ease); } .modal.is-open .modal-dialog { transform: none; } .modal-sm .modal-dialog { width: min(480px, 100%); } .modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; } /* ---------------------------------------------------------------- responsive helpers */ @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hide-md { display: none !important; } } @media (max-width: 640px) { :root { --header-h: 62px; } .container { padding: 0 16px; } .grid-2 { grid-template-columns: minmax(0, 1fr); } .field-row { grid-template-columns: minmax(0, 1fr); } .hide-sm { display: none !important; } .section { padding: 28px 0; } .section-lg { padding: 44px 0; } .btn { height: 44px; } } @media (min-width: 641px) { .show-sm { display: none !important; } } @media (min-width: 861px) { .show-md { display: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }