/* * RiceCookerReview UI — "poster / editorial-bold" * Chỉ nạp ở is_front_page() và is_category() (rcr_ui_assets()). * * Ngôn ngữ hình riêng, cố ý khác tám site đã dựng: * bestrvw "editorial" → bo 10px, đổ bóng, hero ảnh lớn * offago "index board" → bo 2px, bảng liệt kê, mono nhãn + số * tem "mosaic" → bo 18px, ô lệch cỡ, rating in đè lên ảnh * tof "spec sheet" → bo 4px, bảng chuyển vị kẻ kín * adb "split rail" → bo 8px, hai cột, rail dính * afr "countdown" → bo 12px, thang dọc, số hạng rỗng ruột * mwr "Q&A first" → bo 6px, câu hỏi bằng serif * ppc "three tracks"→ bo 0, ba hình dạng thẻ, đơn sắc * rcr "poster" → **KHÔNG CÓ HỘP NÀO** nên bo góc gần như không * xuất hiện (chỉ ô ảnh, 2px). Nội dung nằm thẳng * trên trang, ngăn bằng kẻ ngang nặng. Một **dải * ĐẢO MÀU tràn viền** (nền mực, chữ giấy) mang câu * khẩu hiệu cỡ 4–8rem. Mục lục đặt bằng chữ có hàng * chấm dẫn. * * ⚠️ Cả rcr lẫn ppc đều gần đơn sắc — đó là hệ quả của việc bảy site trước đã * dùng hết teal (×2), xanh mực, tím, xanh lá, đỏ rượu và hệ góc-màu. Hai bộ này * vẫn khác nhau ở cả ba tiêu chí kiểm chéo của mục 9: ppc là giấy suốt, kẻ * mảnh, chữ nhỏ, ba hình dạng thẻ; rcr là dải đảo màu tràn viền, chữ 4–8rem, * không thẻ nào. Thêm một sắc gỉ sắt dùng RẤT tiết chế (số hiệu, kẻ, hàng chấm) * để hai site không cùng đơn sắc tuyệt đối. * Sắc gỉ sắt #9a3d1f: hue 15°, sáng 36%, bão hoà 66% — cách xa cam Amazon * #FF9900 (hue 36°, sáng 50%, bão hoà 100%), không gây nhầm thương hiệu. * * Theme cha bật dark bằng [data-theme="dark"] trên , KHÔNG dùng * prefers-color-scheme — mọi khối dark viết theo đúng selector đó. */ /* ========================================================================== Token ========================================================================== */ .rcr { --rcr-ink: var(--color-text, #1a1d21); --rcr-dim: var(--color-text-muted, #6b7280); --rcr-line: var(--color-border, #e5e2dc); --rcr-rule: var(--color-border-strong, #d1cec6); --rcr-paper: var(--color-bg, #fdfbf7); --rcr-face: var(--color-surface, #fff); --rcr-rust: #9a3d1f; /* Mặt ô ảnh cố định trắng ở CẢ HAI theme: ảnh Amazon là JPEG nền trắng đặc, đặt lên ô tối chỉ tạo ra một mảng trắng chói. Chỉ viền đổi màu. */ --rcr-plate: #fff; --rcr-plate-line: #e4e0d8; --rcr-r: 2px; color: var(--rcr-ink); padding-bottom: var(--space-16, 4rem); } [data-theme="dark"] .rcr { --rcr-rust: #e8a184; --rcr-plate-line: #3a4049; } .rcr *, .rcr *::before, .rcr *::after { box-sizing: border-box; } .rcr-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .rcr b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== Măng-sét (flag) ⚠️ Tên là `.rcr-flag` chứ không phải `.rcr-plate-name`: tiền tố `rcr-plate` đã là ô ảnh sản phẩm, đặt trùng đầu chuỗi thì đọc code rất dễ nhầm hai thứ không liên quan gì nhau (CSS thì không sao, nhưng grep và mắt người thì có). ========================================================================== */ .rcr-flag { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0 10px; border-bottom: 3px solid var(--rcr-ink); } .rcr-flag__t { margin: 0; font-size: clamp(.86rem, 1.7vw, 1.05rem); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; line-height: 1; } .rcr-flag__n { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rcr-rust); } /* ========================================================================== Dải đảo màu — khối nhận diện của hướng này ========================================================================== */ .rcr-band { background: var(--rcr-ink); color: var(--rcr-paper); margin-top: 0; padding: clamp(30px, 6vw, 74px) 0 clamp(26px, 5vw, 60px); /* tràn ra hết bề ngang cửa sổ dù nằm trong khung có max-width */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ⚠️ BẮT BUỘC. Theme cha có `h1,h2,h3,h4,h5,h6 { color: var(--color-text) }` và `p { color: var(--color-text-secondary) }` trong core/typography.css. Đó là khai báo KHỚP TRỰC TIẾP, mà khai báo khớp trực tiếp luôn thắng giá trị KẾ THỪA — bất kể specificity. Nên `color` đặt trên .rcr-band không xuống được tới

/

bên trong: h1 lấy --color-text, đúng bằng --rcr-ink là nền của chính dải này → chữ trùng khít nền, mất hẳn, ở CẢ hai theme. `.rcr-band *` có specificity (0,1,0) > `h1` (0,0,1) nên kéo lại được. Mọi bề mặt ĐẢO MÀU sau này đều phải có dòng tương đương. ⚠️ CHỈ `.rcr-band *`, TUYỆT ĐỐI không gộp `.rcr-band` vào rule này: cùng specificity mà đứng sau nên `inherit` sẽ ghi đè `color: var(--rcr-paper)` của chính dải, và mọi thứ lại kế thừa về màu mực của trang — hỏng y như cũ. */ .rcr-band * { color: inherit; } .rcr-band__in { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .rcr-shout { margin: 0; font-size: clamp(2.6rem, 11vw, 7.5rem); line-height: .86; letter-spacing: -.045em; font-weight: 800; text-transform: uppercase; max-width: 14ch; } .rcr-band p { margin: clamp(18px, 3vw, 30px) 0 0; max-width: 46ch; font-size: clamp(.95rem, 1.5vw, 1.15rem); line-height: 1.5; opacity: .82; } .rcr-band p b { opacity: 1; font-weight: 800; } /* ========================================================================== Bài dẫn ========================================================================== */ .rcr-sec { padding-top: clamp(34px, 5vw, 62px); } .rcr-rule { display: flex; align-items: baseline; gap: 14px; padding-bottom: 9px; margin-bottom: clamp(18px, 3vw, 26px); border-bottom: 2px solid var(--rcr-ink); } .rcr-rule h2 { margin: 0; font-size: .84rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; line-height: 1; } .rcr-rule span { margin-left: auto; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rcr-dim); } .rcr-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: start; } .rcr-lead__t { display: block; margin: 0; font-size: clamp(1.6rem, 4.2vw, 2.9rem); line-height: 1.03; letter-spacing: -.032em; font-weight: 800; color: inherit; text-decoration: none; } a.rcr-lead__t:hover { color: var(--rcr-rust); } .rcr-lead__d { margin: 16px 0 0; max-width: 48ch; color: var(--rcr-dim); font-size: .95rem; line-height: 1.6; } .rcr-lead__m { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rcr-line); font-size: .84rem; color: var(--rcr-dim); } .rcr-lead__m b { color: var(--rcr-ink); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; } /* Ba ô ảnh của bài dẫn — chỗ DUY NHẤT có ảnh cỡ lớn trên trang chủ */ .rcr-shots { display: grid; grid-template-columns: 1fr; gap: 10px; } .rcr-shots__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* ========================================================================== Mục lục đặt bằng chữ — cách poster này chừa lối vào cho 22 chuyên mục ========================================================================== */ .rcr-toc { columns: 2; column-gap: clamp(28px, 5vw, 64px); } .rcr-toc__i { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--rcr-line); color: inherit; text-decoration: none; break-inside: avoid; } .rcr-toc__i:hover .rcr-toc__t { color: var(--rcr-rust); } .rcr-toc__n { flex: 0 0 auto; width: 1.9em; font-size: .74rem; font-weight: 800; letter-spacing: .04em; color: var(--rcr-rust); } .rcr-toc__t { font-size: .95rem; font-weight: 650; letter-spacing: -.012em; } /* Hàng chấm dẫn — dấu hiệu mục lục tạp chí */ .rcr-toc__dots { flex: 1 1 auto; min-width: 14px; align-self: flex-end; height: 0; margin-bottom: .28em; border-bottom: 1px dotted var(--rcr-rule); } .rcr-toc__c { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--rcr-dim); } /* ========================================================================== Danh sách guide đặt bằng chữ ========================================================================== */ .rcr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rcr-line); } .rcr-list li { border-bottom: 1px solid var(--rcr-line); } .rcr-item { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 4px 14px 0; color: inherit; text-decoration: none; } /* Hover KHÔNG dùng --rcr-face: ở light mode nó là #FFFFFF còn nền trang là #FDFBF7 — lệch nhau 2/255, mắt không thấy gì, hover coi như không tồn tại. Trộn thẳng từ --rcr-ink nên độ đậm luôn tương đối với theme đang bật, không phụ thuộc hai token nền tình cờ gần nhau hay không. */ .rcr-item:hover { background: color-mix(in srgb, var(--rcr-ink) 7%, transparent); } .rcr-item__n { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--rcr-rust); } .rcr-item__t { font-size: clamp(1rem, 1.8vw, 1.22rem); font-weight: 700; line-height: 1.24; letter-spacing: -.022em; } .rcr-item:hover .rcr-item__t { text-decoration: underline; } .rcr-item__s { display: block; margin-top: 6px; font-size: .8rem; color: var(--rcr-dim); } .rcr-item__m { justify-self: end; text-align: right; white-space: nowrap; font-size: .82rem; color: var(--rcr-dim); } .rcr-item__m b { display: block; color: var(--rcr-ink); font-size: .95rem; font-weight: 800; letter-spacing: -.018em; } /* ========================================================================== Ô ảnh ========================================================================== */ .rcr-plate { display: block; position: relative; aspect-ratio: 1; background: var(--rcr-plate); border: 1px solid var(--rcr-plate-line); border-radius: var(--rcr-r); overflow: hidden; } .rcr-plate img { display: block; width: 100%; height: 100%; object-fit: contain; /* KHÔNG cover — cover cắt mất thân sản phẩm */ padding: 8%; } .rcr-plate::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .12), transparent 72%); pointer-events: none; } .rcr-plate--empty { background: var(--rcr-face); border-style: dashed; } .rcr-plate--empty::after { display: none; } /* ========================================================================== Chuyên mục + điều hướng ========================================================================== */ .rcr-crumb { display: flex; align-items: center; gap: 9px; margin: 0; padding-top: 16px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rcr-dim); } .rcr-crumb a { color: inherit; text-decoration: none; } .rcr-crumb a:hover { color: var(--rcr-rust); } .rcr-band--cat { padding: clamp(24px, 4vw, 52px) 0 clamp(22px, 3.5vw, 42px); } .rcr-band--cat .rcr-shout { font-size: clamp(2rem, 7.5vw, 5rem); max-width: 18ch; } .rcr-stats { display: flex; flex-wrap: wrap; gap: 10px 38px; margin-top: clamp(18px, 3vw, 28px); } .rcr-stat b { display: block; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; } .rcr-stat span { display: block; margin-top: 5px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .rcr-pager { margin-top: 30px; display: flex; justify-content: center; } .rcr-pager .page-numbers { display: inline-block; min-width: 38px; padding: 8px 11px; margin: 0 2px; text-align: center; font-size: .82rem; font-weight: 700; color: inherit; text-decoration: none; border-bottom: 2px solid transparent; font-variant-numeric: tabular-nums; } .rcr-pager .page-numbers:hover { border-bottom-color: var(--rcr-rule); } .rcr-pager .page-numbers.current { border-bottom-color: var(--rcr-rust); color: var(--rcr-rust); } .rcr-empty { padding: 40px 20px; text-align: center; color: var(--rcr-dim); border-top: 1px solid var(--rcr-line); border-bottom: 1px solid var(--rcr-line); } /* Colophon — ghi chú cuối, chữ nhỏ, ba cột như chân trang tạp chí */ .rcr-colophon { columns: 3; column-gap: clamp(24px, 4vw, 48px); margin-top: 6px; } .rcr-colophon h3 { margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .rcr-colophon p { margin: 0 0 18px; font-size: .84rem; line-height: 1.62; color: var(--rcr-dim); break-inside: avoid; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { .rcr-lead { grid-template-columns: minmax(0, 1fr); } .rcr-colophon { columns: 1; } } @media (max-width: 640px) { .rcr-toc { columns: 1; } .rcr-item { grid-template-columns: 2.2em minmax(0, 1fr); row-gap: 6px; } .rcr-item__m { grid-column: 2; justify-self: start; text-align: left; } .rcr-item__m b { display: inline; } } @media (prefers-reduced-motion: reduce) { .rcr-item, .rcr-toc__i { transition: none; } }