its BACKGROUND class from DOM order; this file owns the two background definitions AND every FOREGROUND override needed so text stays legible when a section flips colour. ── Load order ────────────────────────────────────────────────────────── Linked AFTER components.css on every page, so these overrides layer on top of component defaults (they also win on specificity, so order is a safety net, not a dependency). ── The two stripes ───────────────────────────────────────────────────── ⬛ .section-bg-page → dark (var(--bg-primary)) · the page default 🟨 .section-bg-surface → yellow (var(--yellow-500)) · brand stripe ── Contract for the BLACK stripe ─────────────────────────────────────── Needs NO foreground rules — the global :root tokens already ARE the dark theme (light text on dark). Listed here only so the contract is explicit. ── Contract for the YELLOW stripe ────────────────────────────────────── Light text vanishes on yellow, so every element whose text sits DIRECTLY on the stripe gets an ink colour below. Self-contained DARK cards (cocreation / news-hero / community — they carry their own --bg-card) keep their white text and are deliberately NOT listed. ── MAINTENANCE RULE (read before editing) ────────────────────────────── Add a component that paints text straight onto a stripe? Add its selector to the YELLOW list below — nowhere else. Do NOT scatter `.section-bg-*` overrides across component files. (Why not flip the --text-* tokens on .section-bg-surface instead? Most of these elements INHERIT `color` rather than reading var(--text-*), so a token override never reaches them. Explicit selectors are the contract.) ════════════════════════════════════════════════════════════════════════ */ /* ── BACKGROUNDS ─────────────────────────────────────────────────────────── */ .section-bg-page { background: var(--bg-primary); } /* ⬛ neutral-900 */ .section-bg-surface { background: var(--yellow-500); } /* 🟨 brand-yellow */ /* ════════════════════════════════════════════════════════════════════════ PREMIUM SHARP SURFACE — .theme-sharp (reusable theme variant, NOT a page hack) Squares every card / thumbnail radius in its scope for a gallery-premium look. Apply to a page/section container: . Token-driven first — overrides the radius scale + the shop's --rf-radius var, so everything that reads a radius token squares automatically. The scoped block then squares the few thumbnail medias whose radius is a LEGACY HARDCODE in a page-keyed refine-*.css (those should be tokens; !important bridges them until migrated). Pills / dots / buttons keep their shape — only cards + media are squared. */ .theme-sharp { /* squares card/media radii only — NOT --radius-pill, so nav pills, buttons and badges keep their shape (per L: don't sharpen the nav). */ --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0; --rf-radius: 0; } /* Thumbnail medias whose radius is a legacy hardcode (page-keyed refine-*.css / component literals) don't read tokens — square just the cards + their image medias. Nav (.glass-tabs), buttons and pills are deliberately left rounded. */ body.theme-sharp .shop-card, body.theme-sharp .shop-card__media, body.theme-sharp .shop-card__media img, body.theme-sharp .creator-card, body.theme-sharp .creator-card__media, body.theme-sharp .creator-card__media img, body.theme-sharp .shop-card--auction, body.theme-sharp .shop-card--auction .shop-card__media, body.theme-sharp .shop-card--auction .shop-card__media img, body.theme-sharp .ig-cell { border-radius: 0 !important; } /* Floating chrome is NOT part of the sharp gallery surface (same call as the wp-roomdev dev panel, 13-dev-state-toggle.css): header dropdown menus (profile / lang — portaled to so they inherit the zeroed tokens), the create-menu popup, and the cart/checkout drawer keep the default radius scale from tokens.css. 0731 Dolly：結帳面板一律圓角 — 抽屜是浮在陳列面上的「操作介面」，不是畫廊商品面；否則同一畫面會出現「取貨地點卡圓（硬寫 12px）＋其他全直角」的雜訊。 */ body.theme-sharp .header-dropdown, body.theme-sharp .create-menu, body.theme-sharp .ztor-cart, /* 0801 Dolly：右上「作品」篩選下拉也是浮層——同一顆 trigger 是膠囊（pill 不歸零）、掛在它下面的選單卻是直角，同一個控制項自己打架。彈窗同理：同一個 .ds-modal 在影片頁圓角 16、在商城頁變直角，登入／結帳這種跨頁共用的窗會隨頁面換形狀。照 0731「抽屜是浮在陳列面上的操作介面，不是畫廊商品面」那條，一起還原。 */ body.theme-sharp .mylib-sort__menu, /* 0802：選規格面板（桌機置中彈窗／手機底部 sheet）同理——它是浮在陳列面上的操作介面，而且跟 .ds-modal 是同一種東西，形狀不該因為開在商城頁就變。 */ body.theme-sharp .pdp-sheet, /* 0807：競標的出價／得標付款面板。這條還原的是**面板內部元素**的 radius token （快速加價鈕、輸入框、費用列…），不是面板外框——桌機的 .ds-drawer__panel 本來就沒有圓角，手機的上緣圓角是所有抽屜共通的（55-ds-drawer.css 的 media query）。 ⚠️ 0807 我一度連這條一起拔掉，結果商城頁的 theme-sharp 把面板裡的加價鈕和輸入框全部壓成直角。Dolly 要的是「彈窗外框方角、裡面的元素照常圓角」，兩件事分開：外框圓角在 90-bid-sheet.css（已撤除），內部 token 靠這條還原。 */ body.theme-sharp [data-ds-drawer="ztor-bid"], body.theme-sharp [data-ds-drawer="ztor-claim"], body.theme-sharp .ds-modal__panel { --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; } /* …但抽屜裡的「商品縮圖」仍屬商品陳列，跟商城卡一樣保持直角（0731 Dolly）。 */ body.theme-sharp .ztor-cart-line__media, body.theme-sharp .ztor-cart-line__media img, /* 選規格面板裡的商品縮圖同理（0802） */ body.theme-sharp .pdp-sheet-row__thumb, body.theme-sharp .pdp-sheet-row__thumb img { border-radius: 0; } /* ════════════════════════════════════════════════════════════════════════ 🟨 YELLOW STRIPE — ink foregrounds for text sitting directly on yellow ════════════════════════════════════════════════════════════════════════ */ /* Section header: title + the "查看更多 →" link sit directly on yellow → ink. */ .section-bg-surface .section-header__title, .section-bg-surface .section-link { color: var(--yellow-ink); } /* ── Section eyebrow (Dolly 2026-06-22 — back to the earlier treatment): • dark stripe → NO pill, just brand-colour text • light stripe → pill in a deep brand shade + dark text Lives here so every page stays consistent. */ .section-bg-page .section-eyebrow, .section-bg-surface .section-eyebrow { align-self: flex-start; display: inline-flex; align-items: center; width: fit-content; max-width: 100%; } .section-bg-page .section-eyebrow { /* ⬛ dark → no pill, brand-colour text */ color: var(--brand-500); } .section-bg-surface .section-eyebrow { /* 🟨 light → black pill, brand text */ padding: 5px 12px; border-radius: var(--radius-pill); background: var(--neutral-900); color: var(--brand-500); } /* Arrow now masks currentColor (see tokens.css .section-link__arrow), and the section-link is already ink on light stripes — so the arrow follows to ink automatically. No per-theme arrow swap needed. */ .section-bg-surface .section-header__sub { color: rgba(26, 23, 0, 0.72); } /* Films-rail tabs: unselected → dark translucent; selected → solid ink + underline */ .section-bg-surface .films-rail__tab { color: rgba(26, 23, 0, 0.55); } .section-bg-surface .films-rail__tab:hover { color: rgba(26, 23, 0, 0.8); } .section-bg-surface .films-rail__tab[aria-selected="true"] { color: var(--yellow-ink); border-bottom-color: var(--yellow-ink); } .section-bg-surface .films-rail__tabs { border-bottom-color: rgba(26, 23, 0, 0.18); } /* Glass-tabs (OTT / segment pill) on the yellow stripe: the glass container is white-on-dark glass and the item text is grey/brand-yellow — all three wash out on brand orange. Ink family instead (mirrors films-rail__tab above). Active pill: the yellow-ghost glow is brand-on-brand here → flat ink tint. */ .section-bg-surface .glass-tabs { background: rgba(26, 23, 0, 0.06); border-color: rgba(26, 23, 0, 0.18); } .section-bg-surface .glass-tabs__item { color: rgba(26, 23, 0, 0.62); } .section-bg-surface .glass-tabs__item:hover { color: var(--yellow-ink); } .section-bg-surface .glass-tabs__item--active, .section-bg-surface .glass-tabs__item--active:hover { color: var(--yellow-ink); background: rgba(26, 23, 0, 0.10); box-shadow: none; } /* Film cards have no card bg — title/meta sit directly on yellow */ .section-bg-surface .film-card__title { color: var(--yellow-ink); } .section-bg-surface .film-card__meta-text { color: rgba(26, 23, 0, 0.62); } .section-bg-surface .film-card__meta-tag { background: rgba(26, 23, 0, 0.08); color: rgba(26, 23, 0, 0.78); } .section-bg-surface .film-card__rank { -webkit-text-stroke-color: rgba(26, 23, 0, 0.26); text-stroke-color: rgba(26, 23, 0, 0.26); } /* Watched-progress fill: the default --yellow-500 IS the surface colour, so the bar disappears on this stripe. Drop to a deeper same-family orange so it reads (the track stays the translucent-white base). */ .section-bg-surface .film-card__progress-fill { background: var(--yellow-700); } /* Card edges on a yellow stripe (Dolly 2026-06-18, ported from web build). The cards carry a 1px white-4% (--border-subtle) border + a dark body/poster bg. On yellow the white border is invisible, so the dark bg bleeds to the edge and reads as a hard near-black line. Fix = a FAINT INK line (18%) + background-clip:padding-box so the dark bg stops at the border instead of painting under the semi-transparent line (which would re-darken it). */ .section-bg-surface .film-card__poster, .section-bg-surface .cocreation-card, .section-bg-surface .community-card, .section-bg-surface .activity-card, .section-bg-surface .ai-mosaic__tile { background-clip: padding-box; border-color: rgba(26, 23, 0, 0.18); } /* The poster's bottom darken-gradient also softens to ink-8% on yellow. */ .section-bg-surface .film-card__poster::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.08) 100%); opacity: 1; } /* Filled score orbs back their numeral with opaque black liquid, so they read on yellow already. The EMPTY orb needs two fixes here (Dolly 2026-07-14 — on orange it collapsed into a featureless black dot): 1. its track ring is white-10% (a grey ring on black, invisible on orange) → ink-18%, same family as the card borders above; 2. the "--" placeholder sits on the orb's INNER DISC, which `.section-bg-surface .ztor-score` keeps DARK (--bg-secondary) — so it must stay the LIGHT disabled colour exactly as on the dark stripe. (An earlier rule inked it → dark-on-dark, the invisible "--".) */ .section-bg-surface .ztor-score--empty { --ring-color: rgba(26, 23, 0, 0.18); } .section-bg-surface .ztor-score--empty .ztor-score__value { color: var(--text-disabled); } /* Resume rail is a yellow stripe on the logged-in home; its cards have no card bg, so the title (inherits white) + remaining (--text-secondary white) sit straight on yellow and must go ink. The extra .resume-card class raises specificity over refine-home.css's `body.rf-home .resume-card__remaining` (0,2,1) so the ink wins. */ .section-bg-surface .resume-card .resume-card__title { color: var(--yellow-ink); } .section-bg-surface .resume-card .resume-card__remaining { color: rgba(26, 23, 0, 0.66); } /* News LIST cards: no card bg, so title/excerpt/meta sit on yellow (the news section became a yellow stripe under the auto-zebra). The HERO card keeps white text on its dark cover image and is deliberately untouched. */ .section-bg-surface .news-card--list .news-card__title { color: var(--yellow-ink); } /* Classics cards: image + title only, title sits straight on the stripe. (Pinned dark today, but per the maintenance rule any text-on-stripe gets its yellow ink defined here so a future re-order can't strand it white.) */ .section-bg-surface .classic-card__title { color: var(--yellow-ink); } .section-bg-surface .news-card--list .news-card__excerpt { color: rgba(26, 23, 0, 0.72); } .section-bg-surface .news-card--list .news-card__meta { color: rgba(26, 23, 0, 0.60); } .section-bg-surface .news-card--list .news-card__meta-source { color: rgba(26, 23, 0, 0.82); } .section-bg-surface .news-card--list:hover .news-card__title { color: rgba(26, 23, 0, 0.60); } .section-bg-surface .news-list > .news-card--list:not(:last-child) { border-bottom-color: rgba(26, 23, 0, 0.14); } /* Category tag on a yellow stripe. On black it's a dark-glass pill with brand-yellow text (correct); on yellow that glass goes muddy/olive and the text washes out. Swap to a SOLID ink pill + saturated brand-yellow text — same colour code, far higher contrast. (Scoped to the list cards so it never touches a tag/badge sitting on a dark card inside a yellow section.) */ .section-bg-surface .news-card--list .news-card__tag { background: var(--yellow-ink); border-color: transparent; color: var(--yellow-500); } /* Text selection on a yellow stripe. The global brand-yellow highlight (tokens.css) vanishes on yellow → flip to a black highlight + brand-yellow text (keeps the brand colour on the glyphs). */ .section-bg-surface ::selection { background: var(--neutral-900); color: var(--yellow-500); } .section-bg-surface ::-moz-selection { background: var(--neutral-900); color: var(--yellow-500); }