. Inline beats any selector, so those
two properties genuinely require !important — it is not laziness.
SELECTOR STABILITY
The [data-v-*] scope hashes are safe to target. The bundle can never be
rebuilt (no source), so they are frozen permanently.
data-v-0b495b80 → home page shell
data-v-474da4a6 → product grid component
Verified against: pages-index-index.7ca38448.js, index.7bfb5700.js
============================================================================= */
:root {
/* Warm neutrals biased toward the brand red rather than flat greys. */
--fc-red: #CF1B1B; /* brand red — from __uniConfig.tabBar.selectedColor */
--fc-red-deep: #A81414;
--fc-gold: #FFB917; /* Frozen Points — already used by .award */
--fc-gold-ink: #8A6100;
--fc-gold-wash: #FFF6E2;
--fc-ground: #F6F2F1;
--fc-card: #FFFFFF;
--fc-ink: #221B1A;
--fc-ink-2: #6F6462;
--fc-ink-3: #8B8180;
--fc-tile: #F1ECEA; /* neutral behind product photos */
--fc-shadow: 0 3px 12px rgba(60, 30, 28, 0.07);
--fc-shadow-lg: 0 6px 20px rgba(60, 30, 28, 0.10);
/* No font ships with the bundle. The styles ask for "Source Han Sans CN"
and "OPPOSans", neither of which exists on disk or on most devices, and
body declares no family at all — so Latin text lands on the browser's
serif default (Times) while CJK falls through to a system sans. That
split is the single most visible defect. This stack resolves to a real
sans on every target platform without shipping a webfont. */
--fc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
"Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* -----------------------------------------------------------------------------
1. Typography — kill the serif fallback
Applied broadly and with !important because the goal is genuinely "everywhere",
and because the phantom families are declared at [data-v-*] specificity.
----------------------------------------------------------------------------- */
uni-page-body,
uni-view, uni-text, uni-button, uni-input, uni-label,
uni-navigator, uni-swiper-item, uni-tabbar, uni-picker,
body, button, input, textarea, select {
font-family: var(--fc-font) !important;
}
uni-page-body {
background: var(--fc-ground) !important;
-webkit-font-smoothing: antialiased;
/* Guard rail. Several shipped elements are sized in vw or in JS-computed
px that ignore the container, so a stray few pixels of sideways scroll
is a recurring hazard on this build. A storefront should never scroll
horizontally; clip it once here rather than chase each offender. */
overflow-x: hidden;
}
/* -----------------------------------------------------------------------------
2. Home shell — header, notice, zone banner, tabs [data-v-0b495b80]
----------------------------------------------------------------------------- */
/* The shipped header paints a raster image at background-size:110% 100%, which
distorts on every viewport. A gradient renders crisp at any density. */
.content .headClass[data-v-0b495b80],
.headClass[data-v-0b495b80] {
background-image: none !important;
background-color: transparent !important;
background: linear-gradient(158deg, var(--fc-red) 0%, var(--fc-red-deep) 100%) !important;
height: auto !important;
padding: 14px 16px 30px !important;
border-radius: 0 0 20px 20px;
}
.head_title[data-v-0b495b80] {
font-size: 19px !important;
letter-spacing: -0.01em;
}
/* Trust badges shipped at 9px — below any reasonable legibility floor.
Lifted and given pill chips so they read as a considered row, not stray text. */
.head_intr[data-v-0b495b80] {
flex-wrap: wrap;
gap: 6px;
margin-top: 10px !important;
}
.headIntr_item[data-v-0b495b80] {
font-size: 11px !important;
font-weight: 500 !important;
background: rgba(255, 255, 255, 0.16);
border-radius: 999px;
padding: 3px 9px 3px 7px !important;
margin-right: 0 !important;
}
.head_input[data-v-0b495b80] {
height: 40px !important;
border-radius: 999px !important;
margin-top: 14px !important;
padding: 0 14px !important;
box-shadow: 0 4px 14px rgba(60, 30, 28, 0.12);
}
/* Banner sits under the header and is pulled up to overlap it. Rounding it
makes the overlap look deliberate instead of like a clipping bug.
Inset via width rather than padding. uni-swiper sizes its slides in JS to a
fixed px width (400px here) that does not track the container, so the track
is wider than the viewport; the shipped width:100vw on .wrap happened to
contain it. Padding shrank the content box without clipping and let those
slides escape, adding a 16px horizontal scroll. A contained width plus
overflow:hidden insets the banner AND keeps the track clipped.
margin-top (-60rpx, the header overlap) is left untouched. */
.wrap[data-v-0b495b80] {
width: calc(100% - 24px) !important;
margin-left: auto !important;
margin-right: auto !important;
border-radius: 16px;
overflow: hidden;
}
/* Notice bar shipped as red fading to rgba(...,.3) — over the grey page that
reads as an unfinished pink smear. A white card with a red action reads as
intentional and puts the announcement text on proper contrast. */
.notices[data-v-0b495b80] {
background: var(--fc-card) !important;
border-radius: 12px !important;
height: auto !important;
min-height: 0 !important;
width: calc(100% - 24px) !important;
margin: 14px auto 0 !important;
padding: 8px 10px !important;
box-shadow: var(--fc-shadow);
gap: 8px;
}
.notice_left[data-v-0b495b80] {
width: 24px !important;
height: 24px !important;
background: var(--fc-gold-wash);
border-radius: 8px !important;
flex: none;
}
.notice_swiper[data-v-0b495b80] { width: auto !important; flex: 1 1 auto; min-width: 0; }
.notice_text[data-v-0b495b80] {
color: var(--fc-ink) !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.notice_button[data-v-0b495b80] {
background: #FCF1F1 !important;
color: var(--fc-red) !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 999px !important;
padding: 4px 10px !important;
margin-right: 0 !important;
flex: none;
}
/* The quick-action grid has no items configured on this deployment, so it
renders at height 0 but still contributes its 40rpx top margin — a stray
20px of dead space between the notice bar and the zone banner. Collapse it
only when genuinely empty, so it behaves normally if items are ever added. */
.operation[data-v-0b495b80]:empty,
.classify[data-v-0b495b80]:empty {
display: none !important;
margin: 0 !important;
}
/* Zone banner. Same fade-to-transparent problem, plus a 17rpx (~8px) subtitle. */
.tabbars[data-v-0b495b80] {
width: calc(100% - 24px) !important;
margin: 18px auto 0 !important;
}
/* Shipped padding-bottom is 58rpx, which leaves a tall band of empty red under
the subtitle — presumably reserved for artwork that never shipped. Closed up
so the banner reads as a header for the tab strip directly beneath it. */
.tab_title[data-v-0b495b80] {
background: linear-gradient(135deg, var(--fc-red) 0%, var(--fc-red-deep) 100%) !important;
font-size: 12px !important;
border-radius: 16px 16px 0 0 !important;
padding: 16px 14px 16px !important;
}
.tab_edge[data-v-0b495b80] {
border-radius: 0 0 16px 16px !important;
box-shadow: var(--fc-shadow);
}
.tab_item[data-v-0b495b80] {
font-size: 14px !important;
color: var(--fc-ink-3) !important;
padding: 14px 0 8px !important;
}
.tab_item.selItem[data-v-0b495b80],
.selItem[data-v-0b495b80] {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--fc-ink) !important;
}
/* -----------------------------------------------------------------------------
3. Product grid + card [data-v-474da4a6]
This component carries most of the perceived quality gap.
----------------------------------------------------------------------------- */
.products[data-v-474da4a6] {
background: var(--fc-ground) !important;
padding: 14px 12px 0 !important;
align-items: stretch;
}
/* Two columns with an exact 12px gutter. space-between (shipped) supplies the
gap between the pair and leaves a lone trailing card left-aligned, which is
the behaviour we want — so it stays. */
.products .single[data-v-474da4a6] {
width: calc((100% - 12px) / 2) !important;
flex: 0 0 calc((100% - 12px) / 2) !important;
background: var(--fc-card) !important;
border-radius: 14px !important;
box-shadow: var(--fc-shadow) !important;
padding: 0 0 10px 0 !important;
margin-bottom: 12px !important;
text-align: left !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ---- The image fix ----
The photo is painted as a background on an inner
, and uni-app writes
background-size:100% 100% + background-position:0% 0% INLINE (mode
"scaleToFill"). That stretches every photo to fill the square — a tall bottle
gets squashed, a wide box gets pulled. The square itself was never the
problem; the distortion is. cover + centre turns it into a proper crop.
Inline styles can only be beaten by !important. */
.products .single uni-image[data-v-474da4a6] {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
display: block !important;
border-radius: 0 !important;
background-color: var(--fc-tile);
flex: none;
}
.products .single uni-image[data-v-474da4a6] > div {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* The award chip nests its own tiny icon in a uni-image — exclude it from the
rule above or it inherits the 1:1 product-photo treatment and blows up. */
.products .single .award uni-image[data-v-474da4a6] {
width: 13px !important;
height: 13px !important;
aspect-ratio: auto !important;
display: inline-block !important;
background-color: transparent;
margin-right: 4px !important;
}
.products .single .award uni-image[data-v-474da4a6] > div {
background-size: contain !important;
}
/* Shipped with a hard height:76rpx and no clamp, so long titles were cut
through the middle of a line rather than ellipsed. */
.products .single .title[data-v-474da4a6] {
height: auto !important;
min-height: 2.6em;
font-size: 13px !important;
line-height: 1.3 !important;
color: var(--fc-ink) !important;
padding: 0 10px !important;
margin-top: 10px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Points move onto a gold chip so the red price is the only saturated thing
in the card and clearly owns it. */
.products .single .award[data-v-474da4a6] {
display: inline-flex !important;
align-items: center;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: var(--fc-gold-ink) !important;
background: var(--fc-gold-wash);
border-radius: 6px;
padding: 2px 7px !important;
margin: 7px 10px 0 !important;
align-self: flex-start;
}
.products .single .msg[data-v-474da4a6] { padding: 0 10px !important; margin-top: 6px; }
.products .single .msg .v1 .price[data-v-474da4a6] {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--fc-red) !important;
line-height: 1.25 !important;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* float:right on a flex child did nothing; the 70/30 split truncated the shop
name to a fragment even when there was room. Let it take the slack instead. */
.products .single .msg .shop[data-v-474da4a6] {
height: auto !important;
line-height: 1.4 !important;
font-size: 11px !important;
color: var(--fc-ink-3) !important;
float: none !important;
margin-top: 5px !important;
gap: 6px;
align-items: baseline;
}
.products .single .msg .shop .shop_title[data-v-474da4a6] {
width: auto !important;
flex: 1 1 auto;
min-width: 0;
}
.products .single .msg .shop .shop_sale[data-v-474da4a6] {
width: auto !important;
flex: none;
white-space: nowrap;
}
.data-empty[data-v-474da4a6] { padding: 40px 0; color: var(--fc-ink-3); }
/* -----------------------------------------------------------------------------
4. Tab bar — floating pill
uni-app marks the selected tab only through an inline label colour and an
icon filename ending _active.png. Neither is selectable by class, but the
filename is, via :has(img[src*="_active"]). Browsers without :has() simply
skip the active-pill block and still get the floating bar, so this degrades
cleanly rather than breaking.
----------------------------------------------------------------------------- */
uni-tabbar .uni-tabbar {
left: 12px !important;
right: 12px !important;
width: auto !important;
bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
height: 58px !important;
border-radius: 999px !important;
box-shadow: 0 8px 26px rgba(60, 30, 28, 0.18) !important;
display: flex !important;
align-items: center;
justify-content: space-around;
padding: 0 6px;
box-sizing: border-box;
}
/* The 1px hairline is what makes it read as a docked system bar. */
uni-tabbar .uni-tabbar-border { display: none !important; }
uni-tabbar .uni-tabbar__item {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
height: 42px;
padding: 0 16px;
border-radius: 999px;
display: flex !important;
align-items: center;
justify-content: center;
transition: background-color 0.18s ease;
}
uni-tabbar .uni-tabbar__bd {
width: auto !important;
height: auto !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Active tab: red pill, icon and label laid out inline like the reference.
The shipped _active icon is already red, so it is forced to white — a red
glyph on a red pill would vanish. */
uni-tabbar .uni-tabbar__item:has(img[src*="_active"]) {
background-color: var(--fc-red);
}
uni-tabbar .uni-tabbar__item:has(img[src*="_active"]) .uni-tabbar__bd {
flex-direction: row;
gap: 7px;
}
uni-tabbar .uni-tabbar__item:has(img[src*="_active"]) .uni-tabbar__icon img {
filter: brightness(0) invert(1);
}
uni-tabbar .uni-tabbar__item:has(img[src*="_active"]) .uni-tabbar__label {
color: #FFFFFF !important;
font-size: 12px !important;
font-weight: 600;
margin-top: 0 !important;
}
uni-tabbar .uni-tabbar__item:not(:has(img[src*="_active"])) .uni-tabbar__label {
color: var(--fc-ink-2) !important;
}
/* A floating bar no longer reserves its own space, so the last row of content
would slide underneath it. Reclaim the clearance the bar used to occupy. */
.goods_list[data-v-0b495b80],
uni-page-body {
padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
/* -----------------------------------------------------------------------------
5. Text wrapping
Merchant names on this deployment are frequently raw wallet addresses —
a 42-character unbroken hex run. CJK and normal words wrap anywhere, but a
hex string has no break opportunity, so its min-content width is the whole
string. Inside a flex row (which defaults to min-width:auto and therefore
refuses to shrink below min-content) that pushes the row wider than the
screen. Both halves have to be fixed: allow the break, and allow the shrink.
----------------------------------------------------------------------------- */
uni-view, uni-text, uni-label {
overflow-wrap: anywhere;
}
/* Elements that deliberately truncate with an ellipsis must keep doing so —
re-assert nowrap for them or they start wrapping instead of clipping. */
.products .single .msg .shop uni-view[data-v-474da4a6],
.index .show .matter[data-v-b9788f3a] {
overflow-wrap: normal;
white-space: nowrap;
}
/* -----------------------------------------------------------------------------
6. Product detail page [data-v-b9788f3a]
Shares the home page's problems plus its own: a second, slightly different
red (#e32121) and a merchant row that overflows.
----------------------------------------------------------------------------- */
.index[data-v-b9788f3a] { background-color: var(--fc-ground) !important; }
/* The overflowing merchant row. min-width:0 lets the flex item shrink; the
wrap rule above lets the address break. */
.index .business[data-v-b9788f3a] {
border-radius: 14px !important;
box-shadow: var(--fc-shadow);
gap: 10px;
min-width: 0;
}
.index .business .business_detail[data-v-b9788f3a] {
min-width: 0;
flex: 1 1 auto;
gap: 10px;
line-height: 1.4;
font-size: 13px;
}
.index .business .business_detail uni-image[data-v-b9788f3a] { flex: none; }
.index .content[data-v-b9788f3a],
.index .size[data-v-b9788f3a],
.index .photos[data-v-b9788f3a] {
border-radius: 14px !important;
box-shadow: var(--fc-shadow);
}
/* Unify on the brand red. The detail page shipped #e32121, a near-miss that
reads as a colour bug when the two pages sit side by side. */
.index .content .v1 .v1_1 uni-view[data-v-b9788f3a] {
color: var(--fc-red) !important;
font-size: 22px !important;
font-weight: 800 !important;
height: auto !important;
line-height: 1.2 !important;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.index .content .v1 .v1_2[data-v-b9788f3a] {
color: var(--fc-ink-3) !important;
height: auto !important;
font-size: 12px !important;
}
.index .content .v2[data-v-b9788f3a] {
color: var(--fc-ink) !important;
font-size: 16px !important;
line-height: 1.35 !important;
}
/* Points chip, matching the product card treatment. */
.index .content .award[data-v-b9788f3a] {
display: inline-flex !important;
align-items: center;
color: var(--fc-gold-ink) !important;
background: var(--fc-gold-wash);
border-radius: 6px;
padding: 3px 8px !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin-top: 12px !important;
}
.index .size[data-v-b9788f3a] { height: auto !important; padding: 14px !important; font-size: 13px; }
/* Bottom action bar — lift it off the edge and make the primary action a pill,
consistent with the tab bar and the CTA style used everywhere else. */
.index .end[data-v-b9788f3a] {
height: auto !important;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
box-shadow: 0 -4px 20px rgba(60, 30, 28, 0.10);
gap: 10px;
box-sizing: border-box;
}
.index .end .v3[data-v-b9788f3a],
.index .end .v4[data-v-b9788f3a] {
border-radius: 999px !important;
height: 44px !important;
line-height: 44px !important;
font-size: 15px !important;
font-weight: 700 !important;
flex: 1 1 auto;
width: auto !important;
}
.index .end .v3[data-v-b9788f3a] {
color: var(--fc-red) !important;
border-color: var(--fc-red) !important;
flex: 0 1 auto;
padding: 0 18px;
}
.index .end .v4[data-v-b9788f3a] { background: var(--fc-red) !important; }
.index .end .v1[data-v-b9788f3a],
.index .end .v2[data-v-b9788f3a] {
flex: none;
font-size: 11px !important;
color: var(--fc-ink-2);
}
/* -----------------------------------------------------------------------------
7. Wider viewports. The grid is authored mobile-first at a 750rpx base and
simply stretches on a tablet or desktop browser, stranding cards in
whitespace. Cap the reading column and let the grid gain columns instead.
----------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
.products .single[data-v-474da4a6] {
width: calc((100% - 36px) / 4) !important;
flex: 0 0 calc((100% - 36px) / 4) !important;
}
.products[data-v-474da4a6] {
justify-content: flex-start !important;
gap: 12px;
max-width: 1100px;
margin: 0 auto;
}
.products .single[data-v-474da4a6] { margin-bottom: 0 !important; }
}
/* -----------------------------------------------------------------------------
8. Motion
One easing curve and one distance unit throughout, so navigating the shop
feels like a single system rather than a set of unrelated effects.
Deliberately NOT animating transform on uni-page. A transformed ancestor
becomes the containing block for position:fixed descendants, and both the
tab bar and the product-detail action bar are fixed — they would detach and
slide with the page mid-transition. The page itself only fades; the sense of
movement comes from the content rising inside it, which is where it reads
best anyway.
----------------------------------------------------------------------------- */
:root {
--fc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--fc-rise: 10px;
}
@keyframes fc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fc-rise { from { opacity: 0; transform: translateY(var(--fc-rise)); } to { opacity: 1; transform: none; } }
@keyframes fc-pill { from { opacity: 0; max-width: 0; transform: translateX(-6px); }
to { opacity: 1; max-width: 90px; transform: none; } }
/* Route change: every page fades in. */
uni-page { animation: fc-fade 260ms var(--fc-ease) both; }
/* Content rises behind the fade. Staggered so the grid assembles rather than
appearing all at once; the delay is capped at eight cards so a long list
never leaves the tail visibly lagging. */
.products .single[data-v-474da4a6] { animation: fc-rise 420ms var(--fc-ease) both; }
.products .single[data-v-474da4a6]:nth-child(1) { animation-delay: 20ms; }
.products .single[data-v-474da4a6]:nth-child(2) { animation-delay: 55ms; }
.products .single[data-v-474da4a6]:nth-child(3) { animation-delay: 90ms; }
.products .single[data-v-474da4a6]:nth-child(4) { animation-delay: 125ms; }
.products .single[data-v-474da4a6]:nth-child(5) { animation-delay: 160ms; }
.products .single[data-v-474da4a6]:nth-child(6) { animation-delay: 195ms; }
.products .single[data-v-474da4a6]:nth-child(7) { animation-delay: 225ms; }
.products .single[data-v-474da4a6]:nth-child(n+8) { animation-delay: 250ms; }
.notices[data-v-0b495b80] { animation: fc-rise 420ms var(--fc-ease) 40ms both; }
.tabbars[data-v-0b495b80] { animation: fc-rise 420ms var(--fc-ease) 80ms both; }
.index .content[data-v-b9788f3a],
.index .business[data-v-b9788f3a],
.index .size[data-v-b9788f3a] { animation: fc-rise 420ms var(--fc-ease) both; }
.index .content[data-v-b9788f3a] { animation-delay: 40ms; }
.index .size[data-v-b9788f3a] { animation-delay: 80ms; }
.index .business[data-v-b9788f3a] { animation-delay: 120ms; }
/* Tab switch: the pill grows and its label unfurls, rather than snapping. */
uni-tabbar .uni-tabbar__item { transition: background-color 240ms var(--fc-ease), padding 240ms var(--fc-ease); }
uni-tabbar .uni-tabbar__item:has(img[src*="_active"]) .uni-tabbar__label { animation: fc-pill 300ms var(--fc-ease) both; }
uni-tabbar .uni-tabbar__icon img { transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1); }
uni-tabbar .uni-tabbar__item:has(img[src*="_active"]) .uni-tabbar__icon img { transform: scale(1.06); }
/* Touch feedback — the press should be felt on anything tappable. */
.products .single[data-v-474da4a6],
.index .end .v3[data-v-b9788f3a],
.index .end .v4[data-v-b9788f3a],
.notice_button[data-v-0b495b80] { transition: transform 150ms var(--fc-ease), box-shadow 150ms var(--fc-ease); }
.products .single[data-v-474da4a6]:active { transform: scale(0.983); }
.index .end .v3[data-v-b9788f3a]:active,
.index .end .v4[data-v-b9788f3a]:active,
.notice_button[data-v-0b495b80]:active { transform: scale(0.97); }
uni-tabbar .uni-tabbar__item:active { opacity: 0.82; }
@media (prefers-reduced-motion: reduce) {
uni-page,
uni-page-body,
uni-page-body *,
uni-tabbar * {
animation: none !important;
transition-duration: 0.001ms !important;
}
}