/* ============================================================================ Digital Products Marketplace - premium design system (namespace: dpx-*) Theme: premium minimal SaaS. White / black / light-gray neutrals dominate (~85-90%); DARK is primary (buttons/avatars/FAB/hero). Accents are sparing + semantic: GREEN = success /positive ONLY, BLUE = interactive/active/focus, purple = featured, amber = pending, red = rejected, gold = best-seller. Charts stay colorful. Glassmorphism + premium elevation hover. Loaded on every module page via ``. Fully responsive (Desktop / Laptop / Tablet / iPad / Mobile). No em-dash in copy. ============================================================================ */ :root { /* success/positive green ramp (semantic accent only - NOT the brand color) */ --dpx-green-50: #e9fbf3; --dpx-green-100: #c9f5e1; --dpx-green-300: #5fe0a8; --dpx-green: #10b981; --dpx-green-600: #059669; --dpx-green-700: #047857; --dpx-green-800: #065f46; /* dark = primary (neutral charcoal -> black); success grad kept for positive actions */ --dpx-grad: linear-gradient(135deg, #2a2e37 0%, #14161c 60%, #0c0e12 100%); --dpx-grad-hero: linear-gradient(160deg, #191b20 0%, #0f1013 60%, #0a0b0d 100%); --dpx-grad-text: linear-gradient(120deg, #2f333c, #17191f 60%, #0c0e12); --dpx-grad-success: linear-gradient(135deg, #12c98c 0%, #059669 55%, #047857 100%); /* neutral near-black for dark/glass moments */ --dpx-ink: #0d0f13; --dpx-ink-2: #14171c; --dpx-ink-3: #1c2028; --dpx-on-dark: #f3f4f6; --dpx-on-dark-2: #a3a9b3; /* light neutral surfaces (browsing) */ --dpx-bg: #f6f7f9; --dpx-surface: #ffffff; --dpx-surface-2: #f1f3f5; --dpx-line: #e6e8ec; --dpx-line-2: #eef0f3; /* text (neutral) */ --dpx-text: #101319; --dpx-text-2: #40474f; --dpx-muted: #6b7280; --dpx-faint: #9ca3af; /* accents (semantic, sparing) */ --dpx-blue: #2563eb; --dpx-blue-50: #eff4ff; --dpx-blue-600: #1d4ed8; --dpx-purple: #7c3aed; --dpx-orange: #f97316; --dpx-red: #ef4444; --dpx-yellow: #f59e0b; --dpx-gold: #b7791f; --dpx-gold-50: #fbf3e2; --dpx-gold-700: #8a5a0b; /* -------------------------------------------------------------------- RADII (Phase 25). Eight steps derived from a census of all 23 DP stylesheets, not invented: 727 border-radius declarations carried 21 distinct literals, clustering at 12 / 16 / 10 / 14 / 11 / 18 / 8 / 9. Each step is the mode of its cluster, so every substitution moves a corner by at most 1px. `--dpx-r` / `-sm` / `-xs` keep their original values as aliases so the 44 existing call sites do not move at all. Skin-independent on purpose: dpx-night.css flips colour tokens only. -------------------------------------------------------------------- */ --dpx-r1: 6px; --dpx-r2: 8px; --dpx-r3: 10px; --dpx-r4: 12px; --dpx-r5: 14px; --dpx-r6: 16px; --dpx-r7: 18px; --dpx-r8: 22px; --dpx-pill: 999px; /* legacy aliases - unchanged values, kept so no existing rule shifts */ --dpx-r: var(--dpx-r8); --dpx-r-sm: var(--dpx-r5); --dpx-r-xs: var(--dpx-r3); /* -------------------------------------------------------------------- SPACING. An even 2px scale. The census found gap/padding literals at EVERY integer from 2 to 26 - there is no existing grid, the values are hand-tuned per component. So these tokens are the standard for new and touched code, and the Phase 25 sweep substitutes ONLY exact matches (zero pixel movement). Odd literals are deliberately left as-is rather than snapped; forcing them onto the scale would be a redesign wearing a refactor's clothes. -------------------------------------------------------------------- */ --dpx-s1: 2px; --dpx-s2: 4px; --dpx-s3: 6px; --dpx-s4: 8px; --dpx-s5: 10px; --dpx-s6: 12px; --dpx-s7: 14px; --dpx-s8: 16px; --dpx-s9: 18px; --dpx-s10: 20px; --dpx-s12: 24px; --dpx-s16: 32px; --dpx-s24: 48px; /* -------------------------------------------------------------------- TYPE. Target scale for new and touched code. NOT swept: the module currently ships 18 distinct font-size literals at half-pixel granularity (13 / 13.5 / 12.5 / 12 / 11.5 / 11 / 14 / 14.5 ...). Collapsing those onto 7 steps changes how the product reads and is a design decision, not a substitution - it needs its own approval. -------------------------------------------------------------------- */ --dpx-fs-xs: 11px; --dpx-fs-sm: 12px; --dpx-fs-base: 13px; --dpx-fs-md: 15px; --dpx-fs-lg: 18px; --dpx-fs-xl: 22px; --dpx-fs-2xl: 27px; --dpx-lh-tight: 1.1; --dpx-lh-base: 1.5; --dpx-lh-loose: 1.6; /* -------------------------------------------------------------------- MOTION. The first motion tokens in the repo. Durations are the modes of the four real clusters (0.10-0.13 / 0.14-0.18 / 0.20-0.24 / 0.25-0.35); the second is the house default with ~150 declarations. Substitution error is <= 30ms and <= 10ms for the 137 declarations in the dominant 0.15-0.16 band. Values above 0.31s (0.32 / 0.34 / 0.35 and every keyframe over 0.4s - shimmer, pulse, portal, burst) stay literal: they are character, not interface response, and snapping them would cost more than the consistency is worth. `--dpx-ease` is the curve the module already uses, spelled four different ways across the files. The 267 bare `ease` declarations are NOT converted: `ease` is cubic-bezier(.25,.1,.25,1) and swapping it would change how every transition feels, which is a redesign. DELAYS are never tokenised - `animation: x 0.6s 0.1s` has a 0.1s delay, and turning that into a 120ms duration token would nearly double it. Only the first time value in each shorthand layer moves. -------------------------------------------------------------------- */ --dpx-dur-1: 120ms; --dpx-dur-2: 160ms; --dpx-dur-3: 220ms; --dpx-dur-4: 280ms; --dpx-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dpx-ease-out: cubic-bezier(0, 0, 0.2, 1); --dpx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* shadows (neutral) */ --dpx-sh-1: 0 1px 2px rgba(16, 18, 24, 0.05); --dpx-sh-2: 0 10px 30px -18px rgba(16, 18, 24, 0.24); --dpx-sh-3: 0 26px 64px -32px rgba(15, 18, 26, 0.4); --dpx-glow: 0 14px 36px -16px rgba(15, 18, 26, 0.34); --dpx-glow-success: 0 14px 40px -16px rgba(16, 185, 129, 0.42); --dpx-blue-ring: 0 0 0 3px rgba(37, 99, 235, 0.15); /* fonts (loaded in page head) */ --dpx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --dpx-font-num: "Inter", sans-serif; --dpx-wrap: 1240px; } /* ---- page base ---- */ body.dpx { margin: 0; background: var(--dpx-bg); color: var(--dpx-text); font-family: var(--dpx-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.dpx * { box-sizing: border-box; } /* ---- typography floor (every DP surface inherits this) ---- Headings balance so a two-line title never leaves one orphan word on its own line; body copy uses `pretty` so paragraphs never end on a single-word widow. Both degrade to plain `wrap` on engines that lack them, so this is additive. Digits are tabular everywhere numbers stack in a column (prices, counts, ledger rows) so decimal points line up down the page instead of drifting. */ body.dpx h1, body.dpx h2, body.dpx h3, body.dpx h4 { text-wrap: balance; } body.dpx p, body.dpx li { text-wrap: pretty; } body.dpx [class*="-price"], body.dpx [class*="-amount"], body.dpx [class*="-total"], body.dpx [class*="-stat-v"], body.dpx [class*="-count"], body.dpx [class*="-money"] { font-variant-numeric: tabular-nums; } /* Freelancing HONOURS (seller level chip + trust badges) are a Freelancing-marketplace concept and must NOT appear anywhere in the Digital-Products marketplace - owner rule (2026-08-11): they show ONLY in freelancing. Hide the freelancing leaf elements plus the library's `.dpx-lb-honors` wrapper (an inline-flex that would otherwise leave a trailing gap once emptied). `display:none` drops the leaves out of their flex seller-lines (browse / detail / cart) so no gap is reserved. `!important` is needed: the store/browse ship (0,3,0) `display:flex` rules on these that a plain `body.dpx` (0,2,0) selector would lose to. DP-native pills (`.dpx-lb-badge` "Up to date", status chips) use different classes and are deliberately untouched. */ body.dpx .fp-level, body.dpx .fp-badge, body.dpx .fp-badge-row, body.dpx .dpx-lb-honors { display: none !important; } .dpx-wrap { width: 100%; max-width: var(--dpx-wrap); margin: 0 auto; padding: 0 24px; } .dpx-num { font-family: var(--dpx-font-num); font-feature-settings: "tnum" 1; } .dpx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } /* ---- kicker + section headings ---- */ .dpx-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dpx-text-2); } .dpx-h1 { font-size: clamp(1.9rem, 1.4vw + 1.4rem, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 0; } .dpx-h2 { font-size: clamp(1.35rem, 0.8vw + 1.1rem, 1.8rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; } .dpx-lead { font-size: clamp(1rem, 0.3vw + 0.95rem, 1.12rem); color: var(--dpx-text-2); line-height: 1.55; margin: 0; } .dpx-grad-ink { background: var(--dpx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .dpx-sec { padding: 42px 0; } .dpx-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } /* ---- buttons ---- */ .dpx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--dpx-r-sm); border: 1px solid transparent; font: 700 15px/1 var(--dpx-font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dpx-dur-2) ease, box-shadow var(--dpx-dur-2) ease, background var(--dpx-dur-2) ease, border-color var(--dpx-dur-2) ease, color var(--dpx-dur-2) ease; } .dpx-btn svg { width: 18px; height: 18px; } .dpx-btn-primary { background: var(--dpx-grad); color: #fff; box-shadow: var(--dpx-glow); } .dpx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(15, 18, 26, 0.4); } .dpx-btn-ghost { background: var(--dpx-surface); color: var(--dpx-text); border-color: var(--dpx-line); box-shadow: var(--dpx-sh-1); } .dpx-btn-ghost:hover { border-color: var(--dpx-text); color: var(--dpx-text); transform: translateY(-1px); } .dpx-btn-dark { background: var(--dpx-ink); color: var(--dpx-on-dark); box-shadow: var(--dpx-sh-2); } .dpx-btn-dark:hover { transform: translateY(-2px); box-shadow: var(--dpx-sh-3); } .dpx-btn-success { background: var(--dpx-grad-success); color: #fff; box-shadow: var(--dpx-glow-success); } .dpx-btn-success:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -16px rgba(16, 185, 129, 0.5); } .dpx-btn-sm { height: 38px; padding: 0 15px; font-size: 13.5px; border-radius: var(--dpx-r-xs); } .dpx-btn-lg { height: 52px; padding: 0 26px; font-size: 16px; } .dpx-btn[disabled], .dpx-btn.is-disabled { opacity: 0.55; pointer-events: none; } /* ---- glass utility + dark hero ---- */ .dpx-glass { background: rgba(255, 255, 255, 0.62); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border: 1px solid rgba(255, 255, 255, 0.7); } .dpx-hero { position: relative; overflow: hidden; border-radius: 28px; color: var(--dpx-on-dark); background: radial-gradient(120% 140% at 88% -10%, rgba(255, 255, 255, 0.06), transparent 55%), var(--dpx-grad-hero); box-shadow: var(--dpx-sh-3), inset 0 0 0 1px rgba(255, 255, 255, 0.08); padding: clamp(28px, 4vw, 56px); } .dpx-hero .dpx-kicker { color: var(--dpx-on-dark-2); } .dpx-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 40% at 78% 20%, rgba(255, 255, 255, 0.05), transparent 70%); } /* ---- chips (category / filter) ---- */ .dpx-chips { display: flex; gap: 9px; flex-wrap: wrap; } .dpx-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: var(--dpx-pill); background: var(--dpx-surface); border: 1px solid var(--dpx-line); color: var(--dpx-text-2); font: 650 13.5px/1 var(--dpx-font); cursor: pointer; white-space: nowrap; transition: all var(--dpx-dur-2) ease; text-decoration: none; } .dpx-chip:hover { border-color: var(--dpx-text-2); color: var(--dpx-text); } .dpx-chip.is-active { background: var(--dpx-blue-50); border-color: var(--dpx-blue); color: var(--dpx-blue-600); box-shadow: none; } .dpx-chip .dpx-chip-n { font-size: 11.5px; opacity: 0.7; } /* ---- badges (accent only) ---- */ .dpx-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--dpx-pill); font: 800 11px/1 var(--dpx-font); letter-spacing: 0.02em; text-transform: uppercase; background: var(--dpx-surface-2); color: var(--dpx-text-2); box-shadow: inset 0 0 0 1px var(--dpx-line); } .dpx-badge svg { width: 13px; height: 13px; } .dpx-badge--blue { background: #eaf1ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px #cfe0ff; } .dpx-badge--purple { background: #f3ecff; color: #6d28d9; box-shadow: inset 0 0 0 1px #e2d5ff; } .dpx-badge--orange { background: #fff1e6; color: #c2410c; box-shadow: inset 0 0 0 1px #ffdcc2; } .dpx-badge--red { background: #ffecec; color: #b91c1c; box-shadow: inset 0 0 0 1px #ffd2d2; } .dpx-badge--yellow { background: #fff7e0; color: #a16207; box-shadow: inset 0 0 0 1px #ffe9ad; } .dpx-badge--ink { background: rgba(255, 255, 255, 0.1); color: var(--dpx-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .dpx-badge--green { background: var(--dpx-green-50); color: var(--dpx-green-700); box-shadow: inset 0 0 0 1px var(--dpx-green-100); } .dpx-badge--gold { background: var(--dpx-gold-50); color: var(--dpx-gold-700); box-shadow: inset 0 0 0 1px #f0e0b8; } /* ---- product grid + card ---- */ .dpx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 22px; } .dpx-card { position: relative; display: flex; flex-direction: column; background: var(--dpx-surface); border: 1px solid var(--dpx-line); border-radius: var(--dpx-r); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--dpx-sh-1); transition: transform var(--dpx-dur-3) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--dpx-dur-3) ease, border-color var(--dpx-dur-3) ease; } .dpx-card:hover { transform: translateY(-4px); box-shadow: var(--dpx-sh-3); border-color: #d3d7de; } .dpx-card-media { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #f1f3f5, #e6e8ec); overflow: hidden; } .dpx-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .dpx-card:hover .dpx-card-media img { transform: scale(1.045); } .dpx-card-media-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #aab0ba; } .dpx-card-media-ph svg { width: 40px; height: 40px; opacity: 0.7; } .dpx-card-tags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; } .dpx-card-fav { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--dpx-text); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--dpx-sh-1); transition: all var(--dpx-dur-2) ease; } .dpx-card-fav:hover { color: var(--dpx-red); transform: scale(1.06); } .dpx-card-fav svg { width: 17px; height: 17px; } .dpx-card-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 4px; flex: 1; } .dpx-card-type { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dpx-muted); } /* Owner: hide the category/type label on digital-product cards. */ .dpx-card-type { display: none !important; } .dpx-card-title { font-size: 15.5px; font-weight: 750; line-height: 1.32; color: var(--dpx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dpx-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 15px; margin-top: auto; border-top: 1px solid var(--dpx-line-2); } .dpx-seller { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: var(--dpx-text-2); } .dpx-seller-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--dpx-grad); color: #fff; display: grid; place-items: center; font: 800 10px/1 var(--dpx-font); flex: none; } .dpx-seller-nm { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dpx-price { display: flex; align-items: baseline; gap: 6px; flex: none; } .dpx-price-now { font-family: var(--dpx-font-num); font-size: 17px; font-weight: 800; color: var(--dpx-text); } .dpx-price-was { font-family: var(--dpx-font-num); font-size: 12.5px; color: var(--dpx-faint); text-decoration: line-through; } .dpx-price-free { color: var(--dpx-green-700); } .dpx-card-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--dpx-text-2); font-weight: 650; } .dpx-card-rating svg { width: 13px; height: 13px; color: var(--dpx-yellow); } /* ---- skeleton ---- The `.dpx-loader` spinner orb that used to live here is GONE (Phase 25), along with its `dpxSpin` keyframe and the `DPX.loader()` renderer. Standing rule: a loading state is a shaped skeleton in the real layout, never a spinner. It had exactly one live call site - the seller store's quick preview - which now draws its own skeleton in the preview's real two-column geometry. Deleting the primitive rather than leaving it unused is deliberate: an available spinner is an invitation to use one. The one surviving spinner in the module is `.dpx-co-proc` in digital-checkout.css, and that is correct - payment processing is genuinely indeterminate with no layout to shape. */ .dpx-skel { background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%); background-size: 480px 100%; animation: dpxShimmer 1.25s linear infinite; border-radius: var(--dpx-r-xs); } @keyframes dpxShimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } } .dpx-sk-card { border: 1px solid var(--dpx-line); border-radius: var(--dpx-r); overflow: hidden; background: var(--dpx-surface); } .dpx-sk-card .dpx-sk-media { aspect-ratio: 4 / 3; } .dpx-sk-card .dpx-sk-body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 10px; } .dpx-sk-line { height: 12px; border-radius: var(--dpx-r1); } /* ---- toast ---- Lives HERE, in the file every DP page loads, because DPX.toastLite() is part of the shared component library and any page that can call it must be able to style it. These rules used to exist only in seller-dp-products.css and seller-store.css, so the four pages that load neither (coupons, customers, orders, analytics) appended a bare, unpositioned div to on every toast. dpx-night.css re-skins these under body.dpx-night and still loads later, so the dark public pages keep their glass treatment. */ /* ---- focus floor (Phase 25) ---- 43 stylesheets in this repo contain `:focus-visible` and every single rule is scoped to one component - there was no baseline anywhere, so any DP control nobody thought about had no keyboard focus indication at all. This is the floor, and it has to LOSE to everything that was designed: 22 DP rules deliberately drop the outline and paint their own border+shadow ring instead, and a floor that outranked them would show both at once on every select and search box in the module. Hence `:where()` on BOTH compounds - it matches identically but contributes zero specificity, so the whole selector is (0,1,0) (just `:focus-visible`) and any real rule wins. Containment still works: `:where(body.dpx)` matches the class that is on all 27 DP pages and nowhere else. `:is()` would have been (0,3,1) here, because `:is()` takes the HIGHEST specificity among its arguments and `[tabindex]` is an attribute selector. No `border-radius` here: an outline already follows the element's own radius, and setting one would round a square control the moment it took focus. */ :where(body.dpx) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--dpx-blue); outline-offset: 2px; } /* The night skin's accent is violet; the blue would read as a foreign colour on it. Same specificity as the rule above, so this wins on source order, which is why it sits here. */ :where(body.dpx-night) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #8b5cf6; } /* Off-screen but still read aloud. DP had no visually-hidden class of its own, and the freelancing sheets that do are out of scope for this phase. `DPX.announce()` mounts its single polite live region with this class. Not `display:none` / `visibility:hidden` - both remove the node from the accessibility tree, which would make the region silent. */ .dpx-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- broken + loading images (Phase 25) ---- dpx-components.js swaps a 404 image's src for a 1x1 transparent pixel and adds .dpx-img-broken, so the element keeps its box (and its own border-radius, which is why a round avatar stays round) and the placeholder comes from here instead of the browser's broken-image glyph. The glyph is the same rect+mountain used by .dpx-card-media-ph, inlined because a background image cannot resolve currentColor - hence the separate night-skin stroke below. */ body.dpx .dpx-img-broken { background-color: var(--dpx-surface-2, #f1f3f7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab0ba' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 38%; object-fit: cover; } body.dpx-night .dpx-img-broken { background-color: #141a2b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339415a' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); } /* Blur-up. digital-cart.css had the only copy of this; this is the shared one. It is OPT-IN via `.dpx-blur` rather than keying on `is-loading` alone: a bare `body.dpx img.is-loading` rule would also hand a transition to every other image on 24 pages, which would quietly re-time any hover-scale that relied on having none. An image opts in with class="dpx-blur is-loading" and DPX.wireImages() drops `is-loading` on load. Cart and library keep their own older local rules; those still work and are left alone. */ body.dpx img.dpx-blur { transition: filter var(--dpx-dur-3) var(--dpx-ease-out), transform var(--dpx-dur-3) var(--dpx-ease-out); } body.dpx img.dpx-blur.is-loading { filter: blur(14px); transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { /* A blur that resolves is motion. Under reduce, show the image plainly the moment it lands. */ body.dpx img.dpx-blur { transition: none; } body.dpx img.dpx-blur.is-loading { filter: none; transform: none; } /* fp-upload's progress bar runs `animation: fpuSheen 1.5s linear infinite` on .fpu-fill, and that rule is INJECTED at runtime by fpuInjectStyle() with no media query at all - so an upload sheens forever even for someone who asked for reduced motion. (fp-upload.css's own reduced-motion block covers `.fp-up-*`, the dropzone, which is a different component.) Fixed here rather than in fp-upload.js because that file is on 14 freelancing pages and this phase does not touch them. `body.dpx .fpu-fill` is (0,2,1) against the injected rule's (0,1,0), so it wins regardless of the injected