/* ══════════════════════════════════════════════════════════════════════════ LOGEET STOREFRONT — customer-facing shop page. Mobile-first. Every rule is `sf-` prefixed so it can't collide with the older store.css rules that cart.html and track.html still rely on. --accent is set per store inline on ; everything derives from it. ═════════════════════════════════════════════════════════════════════════ */ .sf { /* Neutrals carry a slight cool bias so they sit under any accent hue without reading as flat grey. */ --ink: #14121a; --ink-2: #4a4657; --ink-3: #837e91; --line: #e7e4ee; --paper: #ffffff; --wash: #f7f6fa; --radius: 16px; --radius-sm: 10px; --ease: cubic-bezier(.22,.9,.28,1); } /* ── HERO ─────────────────────────────────────────────────────────────────── */ .sf-hero { position: relative; padding: 26px 18px 22px; color: #fff; overflow: hidden; background: var(--accent); background-image: radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.26), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(0,0,0,.30), transparent 55%); } .sf-hero-cover { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .34; transform: scale(1.06); } .sf-hero::after { /* keeps text legible over any cover photo */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.42) 100%); } .sf-hero-inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; } .sf-id { display: flex; align-items: center; gap: 14px; } .sf-logo { width: 60px; height: 60px; flex: none; border-radius: 18px; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.34); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; box-shadow: 0 10px 26px -10px rgba(0,0,0,.5); } .sf-logo img { width: 100%; height: 100%; object-fit: cover; } .sf-name { font-size: clamp(23px, 6vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; } .sf-tagline { margin-top: 3px; font-size: 13.5px; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Real counts, not decoration — hidden entirely when a shop has nothing yet. */ .sf-stats { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .sf-stat { display: flex; align-items: baseline; gap: 5px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; backdrop-filter: blur(6px); } .sf-stat b { font-size: 14px; font-variant-numeric: tabular-nums; } .sf-stat span { opacity: .85; } /* ── CATEGORY CHIPS (replaces the desktop sidebar) ────────────────────────── */ .sf-chips-wrap { position: sticky; top: var(--nav-h, 68px); z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .sf-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 11px 18px; max-width: 1180px; margin: 0 auto; -webkit-overflow-scrolling: touch; } .sf-chips::-webkit-scrollbar { display: none; } .sf-chip { flex: none; cursor: pointer; white-space: nowrap; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 500; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .sf-chip:hover { border-color: var(--accent); color: var(--ink); } .sf-chip:active { transform: scale(.96); } .sf-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .sf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── TOOLBAR + GRID ───────────────────────────────────────────────────────── */ .sf-main { max-width: 1180px; margin: 0 auto; padding: 18px 18px 90px; } .sf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .sf-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .sf-sort { height: 36px; padding: 0 11px; font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-2); cursor: pointer; } .sf-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sf-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .sf-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } } @media (min-width: 960px) { .sf-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (min-width: 1240px) { .sf-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } } /* ── PRODUCT CARD ─────────────────────────────────────────────────────────── */ .sf-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); animation: sf-rise .42s var(--ease) both; animation-delay: var(--d, 0ms); } .sf-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--accent) 55%, transparent); } .sf-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sf-card:active { transform: scale(.985); } .sf-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--wash); display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden; } .sf-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .sf-card:hover .sf-thumb img { transform: scale(1.06); } .sf-tag { position: absolute; top: 9px; left: 9px; background: rgba(255,255,255,.93); color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); max-width: calc(100% - 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-low { position: absolute; bottom: 9px; left: 9px; background: #b4530b; color: #fff; font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; } .sf-body { padding: 11px 12px 0; flex: 1; } .sf-title { font-size: 13.5px; font-weight: 600; line-height: 1.32; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-price { margin-top: 7px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sf-unit { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; } .sf-foot { padding: 11px 12px 12px; } .sf-add { width: 100%; height: 38px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 7px; transition: filter .18s var(--ease), transform .18s var(--ease); } .sf-add:hover { filter: brightness(1.08); } .sf-add:active { transform: scale(.97); } .sf-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .sf-add.is-done { background: #0f7b52; } /* ── SKELETONS + EMPTY ────────────────────────────────────────────────────── */ .sf-skel { border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(100deg, var(--wash) 30%, #eeecf3 50%, var(--wash) 70%); background-size: 220% 100%; animation: sf-shimmer 1.4s linear infinite; aspect-ratio: 3 / 4; } .sf-empty { grid-column: 1/-1; text-align: center; padding: 56px 20px; color: var(--ink-3); } .sf-empty-mark { font-size: 34px; margin-bottom: 10px; } .sf-empty p { color: var(--ink-2); font-weight: 600; font-size: 15px; } .sf-empty small { display: block; margin-top: 4px; font-size: 13px; } /* ── PRODUCT SHEET (bottom sheet on phones, dialog on desktop) ─────────────── */ .sf-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(14,12,20,.5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); display: flex; align-items: flex-end; justify-content: center; } .sf-scrim.is-open { opacity: 1; pointer-events: auto; } .sf-sheet { position: relative; width: 100%; max-width: 480px; background: var(--paper); color: var(--ink); border-radius: 22px 22px 0 0; padding: 0 0 18px; max-height: 88vh; overflow-y: auto; transform: translateY(102%); transition: transform .3s var(--ease); } .sf-scrim.is-open .sf-sheet { transform: translateY(0); } @media (min-width: 640px) { .sf-scrim { align-items: center; } .sf-sheet { border-radius: 22px; transform: translateY(14px) scale(.97); } .sf-scrim.is-open .sf-sheet { transform: translateY(0) scale(1); } } .sf-sheet-img { aspect-ratio: 16 / 11; background: var(--wash); display: flex; align-items: center; justify-content: center; font-size: 56px; border-radius: 22px 22px 0 0; overflow: hidden; } .sf-sheet-img img { width: 100%; height: 100%; object-fit: cover; } .sf-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.92); color: var(--ink); font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,.16); } .sf-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sf-sheet-body { padding: 16px 20px 0; } .sf-sheet-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); } .sf-sheet-name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; line-height: 1.22; text-wrap: balance; } .sf-sheet-price { font-size: 25px; font-weight: 700; margin-top: 11px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sf-sheet-unit { font-size: 13px; color: var(--ink-3); margin-top: 2px; } .sf-sheet-desc { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; } .sf-sheet-actions { display: flex; gap: 10px; align-items: center; padding: 18px 20px 0; position: sticky; bottom: 0; background: var(--paper); } .sf-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; flex: none; } .sf-qty button { width: 40px; height: 44px; border: 0; background: var(--paper); cursor: pointer; font-size: 17px; color: var(--ink-2); transition: background .15s var(--ease); } .sf-qty button:hover { background: var(--wash); } .sf-qty button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .sf-qty span { min-width: 34px; text-align: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .sf-sheet-add { flex: 1; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; transition: filter .18s var(--ease), transform .18s var(--ease); } .sf-sheet-add:hover { filter: brightness(1.08); } .sf-sheet-add:active { transform: scale(.98); } .sf-sheet-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @keyframes sf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes sf-shimmer { from { background-position: 220% 0; } to { background-position: -20% 0; } } @media (prefers-reduced-motion: reduce) { .sf-card, .sf-skel, .sf-sheet, .sf-scrim { animation: none !important; transition: none !important; } .sf-card:hover { transform: none; } .sf-card:hover .sf-thumb img { transform: none; } }