/* ============================================================================ Seller storefront — public /u/{handle} and /@{slug} Ported from Sigrix_new/Marketplace - Seller.html (.sf-* block). Loaded only on the storefront page (via {% block extra_head %}). Pairs with the design-system base (css/sx-home.css for .sx-container / .sx-chip / .sx-btn / .sx-eyebrow) and the global --sx-* tokens defined in base.html. Theme note: the prototype scoped light-mode tweaks as `.sx[data-theme=...]` because its `.sx` wrapper carried the theme. In production `data-theme` lives on and `.sx` on , so those rules become a bare `[data-theme="light"] …` ancestor match. Everything else themes for free through the --sx-* custom properties. ========================================================================== */ :root { /* Tokens the prototype relies on that base.html does not define globally. */ --sx-font-num: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif; --sx-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4); --sx-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6); } .sf-page { padding: 28px 0 0; position: relative; } /* ---- hero card ---- */ .sf-hero { background: var(--sx-surface); border-radius: var(--sx-r-xl); box-shadow: 0 0 0 1px var(--sx-line) inset; overflow: hidden; } .sf-cover { position: relative; height: 180px; background: linear-gradient(120deg, #3D4DFF 0%, #1A1F6B 58%, #0B0D12 100%); overflow: hidden; } .sf-cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 100%); } .sf-cover-glow { position: absolute; inset: 0; background: radial-gradient(460px 220px at 82% 24%, rgba(124,140,255,0.5), transparent 70%); } .sf-cover-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(11,13,18,0.46); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255,255,255,0.20) inset; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .sf-cover-badge svg { color: var(--sx-warn); } .sf-hero-row { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 24px; align-items: flex-end; padding: 0 32px 24px; margin-top: -58px; } .sf-avatar-wrap { position: relative; } .sf-avatar { width: 116px; height: 116px; border-radius: 26px; background: linear-gradient(135deg, #1A1F6B, #3D4DFF); border: 4px solid var(--sx-surface); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: var(--sx-shadow-2); } .sf-avatar::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px); background-size: 15px 15px; mask-image: radial-gradient(circle at 32% 30%, black 0%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 32% 30%, black 0%, transparent 72%); } .sf-avatar-mono { font-family: var(--sx-font-num); font-weight: 600; font-size: 38px; color: #fff; letter-spacing: 0.02em; position: relative; z-index: 1; } .sf-avatar-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .sf-avatar-check { position: absolute; right: -3px; bottom: -3px; width: 30px; height: 30px; border-radius: 50%; background: var(--sx-surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--sx-surface); color: var(--sx-brand-3); } [data-theme="light"] .sf-avatar-check { color: var(--sx-brand); } .sf-hero-info { padding-bottom: 4px; min-width: 0; } .sf-hero-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sf-hero-name h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; margin: 0; } .sf-badge-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--sx-brand-ink); background: var(--sx-brand); } .sf-hero-handle { font-size: 13px; color: var(--sx-text-3); margin-top: 6px; } .sf-hero-tagline { font-size: 15px; color: var(--sx-text); margin: 12px 0 0; max-width: 60ch; line-height: 1.5; font-weight: 500; } .sf-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--sx-text-3); font-family: var(--sx-font-mono); } .sf-hero-meta span { display: inline-flex; align-items: center; gap: 6px; } .sf-hero-meta .sf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--sx-text-3); opacity: 0.55; gap: 0; } .sf-hero-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; } .sf-icon-btn { width: 38px; height: 38px; border-radius: var(--sx-r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--sx-text-2); background: var(--sx-surface); box-shadow: 0 0 0 1px var(--sx-line) inset; border: 0; cursor: pointer; transition: color 120ms, box-shadow 120ms; } .sf-icon-btn:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; } .sf-hero-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--sx-line); background: color-mix(in oklab, var(--sx-surface), var(--sx-bg) 32%); } .sf-hstat { padding: 16px 24px; border-right: 1px solid var(--sx-line); display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sf-hstat:last-child { border-right: 0; } .sf-hstat .v { font-family: var(--sx-font-num); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--sx-text); font-variant-numeric: tabular-nums; } .sf-hstat .v .unit { font-size: 13px; color: var(--sx-text-3); font-weight: 500; } .sf-hstat .l { font-size: 10px; color: var(--sx-text-3); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--sx-font-mono); } /* ---- body grid ---- */ .sf-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; align-items: start; margin-top: 24px; } .sf-main { min-width: 0; } .sf-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; } /* ---- listings ---- */ .sf-listings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .sf-tabs { display: flex; gap: 2px; padding: 4px; background: var(--sx-surface); border-radius: var(--sx-r-md); box-shadow: 0 0 0 1px var(--sx-line) inset; flex-wrap: wrap; } .sf-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--sx-r-sm); font-size: 13px; font-weight: 500; color: var(--sx-text-2); background: transparent; border: 0; cursor: pointer; transition: background 120ms, color 120ms; } .sf-tab:hover { color: var(--sx-text); } .sf-tab.is-active { background: var(--sx-bg); color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line) inset; } .sf-tab-count { font-family: var(--sx-font-mono); font-size: 11px; color: var(--sx-text-3); font-variant-numeric: tabular-nums; } .sf-tab.is-active .sf-tab-count { color: var(--sx-brand-3); } [data-theme="light"] .sf-tab.is-active .sf-tab-count { color: var(--sx-brand); } .sf-sort { display: flex; gap: 4px; } .sf-sort-btn { height: 32px; padding: 0 12px; border-radius: var(--sx-r-sm); font-size: 13px; color: var(--sx-text-3); font-weight: 500; background: transparent; border: 0; cursor: pointer; } .sf-sort-btn:hover { color: var(--sx-text); } .sf-sort-btn.is-active { color: var(--sx-text); background: var(--sx-surface); box-shadow: 0 0 0 1px var(--sx-line) inset; } .sf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sf-empty { padding: 48px; text-align: center; color: var(--sx-text-3); font-size: 14px; } /* ---- rail cards ---- */ .sf-card { background: var(--sx-surface); border-radius: var(--sx-r-lg); box-shadow: 0 0 0 1px var(--sx-line) inset; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .sf-about-bio { font-size: 13.5px; color: var(--sx-text-2); line-height: 1.6; margin: 0; } .sf-about-links { display: flex; flex-direction: column; gap: 2px; } .sf-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: var(--sx-r-sm); font-size: 13px; color: var(--sx-text-2); text-decoration: none; transition: background 120ms, color 120ms; } .sf-link:hover { background: var(--sx-bg); color: var(--sx-text); } .sf-link-ico { color: var(--sx-text-3); display: inline-flex; } .sf-link:hover .sf-link-ico { color: var(--sx-brand-3); } [data-theme="light"] .sf-link:hover .sf-link-ico { color: var(--sx-brand); } .sf-link-label { font-family: var(--sx-font-mono); } .sf-divider { height: 1px; background: var(--sx-line); margin: 2px 0; } .sf-tags { display: flex; flex-wrap: wrap; gap: 6px; } .sf-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--sx-text-2); background: var(--sx-bg); box-shadow: 0 0 0 1px var(--sx-line) inset; } .sf-hl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .sf-hl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sf-hl-top .l { font-size: 13px; color: var(--sx-text-2); } .sf-hl-top .v { font-family: var(--sx-font-num); font-size: 18px; font-weight: 600; color: var(--sx-text); font-variant-numeric: tabular-nums; } .sf-hl-note { font-size: 11px; color: var(--sx-text-3); margin-top: 2px; } /* ---- storefront listing filter (story #3587) ---- Tabs + sort render as anchor links so they fully work without JS (each is a real GET to ?type=/?sort=); seller_storefront.js upgrades them to instant client-side filtering/sorting. */ .sf-tab, .sf-sort-btn { text-decoration: none; } .sf-tab:focus-visible, .sf-sort-btn:focus-visible, .sf-icon-btn:focus-visible { outline: 2px solid var(--sx-brand-3); outline-offset: 2px; } [data-theme="light"] .sf-tab:focus-visible, [data-theme="light"] .sf-sort-btn:focus-visible, [data-theme="light"] .sf-icon-btn:focus-visible { outline-color: var(--sx-brand); } /* No-JS path: the server pre-hides non-matching cards with the `hidden` attribute, but `.sx-card`'s own display rule would override it. The JS path strips `hidden` on load and toggles `.is-hidden` (defined in sx-home.css). */ .sf-grid .sx-card[hidden] { display: none !important; } /* ---- contact seller dialog (story #3594) ---- */ .sf-contact { width: min(92vw, 460px); padding: 0; border: 0; border-radius: var(--sx-r-lg); background: var(--sx-surface); color: var(--sx-text); box-shadow: var(--sx-shadow-2), 0 0 0 1px var(--sx-line) inset; } .sf-contact::backdrop { background: rgba(11, 13, 18, 0.55); } .sf-contact-form { display: flex; flex-direction: column; gap: 8px; padding: 22px; } .sf-contact-title { font-size: 18px; font-weight: 600; margin: 0; } .sf-contact-sub { font-size: 13px; color: var(--sx-text-3); margin: 0 0 6px; line-height: 1.5; } .sf-contact-label { font-size: 12px; font-weight: 600; color: var(--sx-text-2); margin-top: 6px; } .sf-contact-label span { color: var(--sx-text-3); font-weight: 400; } .sf-contact-form input, .sf-contact-form textarea { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--sx-line); background: var(--sx-bg); color: inherit; font: inherit; resize: vertical; } .sf-contact-status { font-size: 12.5px; color: var(--sx-text-3); min-height: 1em; margin: 2px 0 0; } .sf-contact-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* ---- responsive ---- */ @media (max-width: 1000px) { .sf-body { grid-template-columns: 1fr; } .sf-rail { position: static; flex-direction: row; flex-wrap: wrap; } .sf-rail > * { flex: 1; min-width: 260px; } .sf-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .sf-hero-row { grid-template-columns: auto 1fr; } .sf-hero-actions { grid-column: 1 / -1; } .sf-hero-stats { grid-template-columns: repeat(2, 1fr) !important; } .sf-hstat:nth-child(2n) { border-right: 0; } .sf-hstat { border-bottom: 1px solid var(--sx-line); } .sf-grid { grid-template-columns: 1fr; } } /* ---- storefront extras (store editor): announcement, FAQ, languages ---- */ .sf-announcement { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 16px; background: var(--sx-surface); border-radius: var(--sx-r-lg); box-shadow: 0 0 0 1px var(--sx-line) inset, 3px 0 0 0 var(--sx-brand-3, #3D4DFF) inset; font-size: 13.5px; color: var(--sx-text-2); line-height: 1.5; } .sf-announcement-ico { color: var(--sx-brand-3, #3D4DFF); display: inline-flex; margin-top: 2px; } .sf-announcement-text { min-width: 0; overflow-wrap: anywhere; } .sf-faq-item { border-bottom: 1px solid var(--sx-line); } .sf-faq-item:last-child { border-bottom: 0; } .sf-faq-q { cursor: pointer; list-style: none; position: relative; padding: 10px 22px 10px 0; font-size: 13.5px; font-weight: 600; color: var(--sx-text); } .sf-faq-q::-webkit-details-marker { display: none; } .sf-faq-q::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--sx-text-3); font-weight: 500; } .sf-faq-item[open] .sf-faq-q::after { content: "–"; } .sf-faq-a { margin: 0 0 12px; font-size: 13px; color: var(--sx-text-2); line-height: 1.6; overflow-wrap: anywhere; } .sf-policy-note { margin: 0; font-size: 12px; color: var(--sx-text-3); line-height: 1.5; } .sf-policy-note a { color: var(--sx-text-2); text-decoration: underline; text-underline-offset: 2px; } /* "Featured" pin chip on storefront listing cards (only ever set on /u/). */ .sx-chip--featured { background: var(--sx-warn, #F5B454); color: #201505; font-weight: 700; }