/* ════════════════════════════════════════════════════════════════ NBRE · theme-light.css — LIGHT THEME override (ivory+gold); NẠP CUỐI để cascade đúng Tách từ styles.css. THỨ TỰ NỐI (cascade): base → layout → components → estate-detail → editorial → detail-modules → overlays → theme-light. theme-light.css PHẢI nạp cuối. Đừng đảo thứ tự . ════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ LIGHT THEME — warm ivory + deep gold. Từ 03/08 hero & BẢN ĐỒ cũng đổi sáng (chủ chốt) — xem khối "MÀN HÌNH ĐẦU" ở CUỐI file, đừng sửa nửa vời. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* Sáng = ĐẢO VAI TRÒ của cùng 4 màu khoá (Ivory làm nền, Rich Black làm chữ). Bronze đậm hơn chút để đủ tương phản trên nền sáng. */ --ink: var(--nbre-ivory); --ink-2: color-mix(in srgb, #fff 60%, var(--nbre-ivory)); --ink-3: color-mix(in srgb, var(--nbre-stone) 12%, var(--nbre-ivory)); --line: color-mix(in srgb, var(--nbre-black) 12%, transparent); /* ☠️ 03/08 — ĐO ĐƯỢC: bộ ba này TRƯỢT chuẩn đọc trên nền Ivory, và `--gold` được dùng 76 chỗ riêng trang tài sản ⇒ cả trang /asset/ ở nền sáng nhìn "mờ" (chủ báo). champagne 82% → 2,22:1 · 66% → 3,25:1 · 52% → 4,71:1 (cần ≥ 4,5:1) Champagne là màu NHẠT; pha với đen ở tỉ lệ cao vẫn nhạt. Muốn đủ đọc trên nền giấy thì phần đen phải NHIỀU HƠN phần champagne — không phải "đậm lên một chút". Giữ nguyên THỨ BẬC cũ (gold nhạt nhất → bright đậm nhất) để chỗ nào đang nhấn vẫn nhấn. Đo lại bằng: mix champagne #d4c4ac với #0a0a0a theo tỉ lệ, so với nền #f5f2ec. ⚠️ Nền TỐI không dính lỗi này (champagne nguyên bản trên nền đen đủ tương phản) — nên đây là lỗi RIÊNG của theme sáng, sửa ở đây, đừng đụng base.css. */ --gold: color-mix(in srgb, var(--nbre-bronze) 50%, var(--nbre-black)); /* ≈5,0:1 */ --gold-soft: color-mix(in srgb, var(--nbre-bronze) 46%, var(--nbre-black)); /* ≈5,6:1 */ --gold-bright: color-mix(in srgb, var(--nbre-bronze) 42%, var(--nbre-black)); /* ≈6,3:1 */ --text: var(--nbre-black); /* Stone Grey NGUYÊN BẢN trên nền Ivory chỉ đạt 2.9:1 — dưới chuẩn đọc (4.5:1); nhãn, eyebrow, chú thích toàn site đều nhoè. Nền tối thì Stone lại đủ (6.1:1) — nên đây là lỗi RIÊNG của theme sáng: pha Stone với Rich Black để đậm lên, VẪN LÀ HỌ STONE (không đổi sang màu khác, không hạ xuống đen: chữ phụ vẫn phải chìm hơn chữ chính). Cả hai bậc đều phải QUA 4.5 (đều là câu chữ thật, không phải trang trí). ⬆ NÂNG 04/08 — chủ đối chiếu shynhsuperluxury.vn: nền trắng, chữ thân bài #515151 = 7,94:1. Ta đang #646467 trên nền ngà = ĐO ĐƯỢC 5,28:1. Qua chuẩn AA nhưng nhạt hơn hẳn khi cầm điện thoại ngoài sáng, mà >90% khách xem bằng điện thoại. Kéo cả hai bậc lên mốc AAA (7:1) — vẫn là họ Stone, chữ phụ vẫn chìm hơn chữ chính (chữ chính 17,72:1), chỉ hết nhạt. ĐO LẠI: --muted ≈ 7,3:1 · --muted-2 ≈ 6,2:1. ⚠️ Đo bằng cách TÔ MÀU RA CANVAS rồi đọc điểm ảnh. Đọc chuỗi computed style sẽ thấy "color(srgb 0.39 …)" và bộ đo tưởng là 0-255 ⇒ ra 18,75:1, số đẹp nhưng SAI. Đã dính bẫy này hai lần. */ --muted: color-mix(in srgb, var(--nbre-stone) 46%, var(--nbre-black)); --muted-2: color-mix(in srgb, var(--nbre-stone) 56%, var(--nbre-black)); --on-accent: var(--nbre-ivory); } /* ───────────────────────────────────────────────────────────────────────────── ☠️ 03/08 — NHÓM NÀY TỪNG CHỨA CẢ HERO VÀ CÁC PANEL TRÊN BẢN ĐỒ. Lý do cũ: bản đồ luôn tối bất kể theme, nên panel đè lên nó phải giữ bảng tối. Chủ chốt: chế độ Sáng đổi LUÔN BẢN ĐỒ (map.js · MAP_STYLE.light = positron) ⇒ nền dưới các panel ấy nay là GIẤY. Giữ chúng ở đây là chữ NGÀ trên nền NGÀ — đúng cái lỗi mà nhóm này sinh ra để tránh, chỉ là lật ngược chiều. ⇒ Đã CHUYỂN RA: .hero · .mapsearch · .mapctl · .legend · .dossier · .nav:not(.is-stuck) → xuống khối "MÀN HÌNH ĐẦU" ở cuối file. Còn lại ở đây là các lớp phủ KHÔNG nằm trên bản đồ (nút nổi, ngăn kéo, ảnh thẻ): nền tối của chúng là chủ ý, không phụ thuộc bản đồ. ⚠️ LUẬT GIỮ NGUYÊN: thêm lớp phủ nền kính TỐI mới thì vẫn phải khai vào đây. ───────────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] .cbar, :root[data-theme="light"] .fav-fab, :root[data-theme="light"] .fav-panel, :root[data-theme="light"] .booksheet, :root[data-theme="light"] .to-top, :root[data-theme="light"] .share-gate, :root[data-theme="light"] .ecard__img, :root[data-theme="light"] .val-page, :root[data-theme="light"] .qv-page { /* Tái lập bảng TỐI — phải trỏ vào PRIMITIVE (--nbre-*), tuyệt đối không dùng token ngữ nghĩa ở đây, vì chúng đang mang giá trị của theme sáng → tự trỏ chính nó. */ --gold: var(--nbre-bronze); --gold-soft: color-mix(in srgb, var(--nbre-bronze) 74%, var(--nbre-ivory)); --gold-bright: color-mix(in srgb, var(--nbre-bronze) 42%, var(--nbre-ivory)); --text: var(--nbre-ivory); --muted: color-mix(in srgb, var(--nbre-stone) 55%, var(--nbre-ivory)); --muted-2: var(--nbre-stone); --line: color-mix(in srgb, var(--nbre-stone) 22%, transparent); --ink-2: color-mix(in srgb, var(--nbre-ivory) 5%, var(--nbre-black)); --ink-3: color-mix(in srgb, var(--nbre-ivory) 9%, var(--nbre-black)); --on-accent: var(--nbre-black); color: var(--text); /* ép chữ kế thừa màu sáng (không chỉ đổi biến) */ } :root[data-theme="light"] .nav.is-stuck { background: color-mix(in srgb, var(--nbre-ivory) 85%, transparent); border-bottom-color: var(--line); } :root[data-theme="light"] .zbar__search, :root[data-theme="light"] .efdrop__btn { background: color-mix(in srgb, var(--nbre-black) 4%, transparent); } :root[data-theme="light"] .zbar__search:focus-within { background: color-mix(in srgb, var(--nbre-black) 6%, transparent); } :root[data-theme="light"] .efdrop__menu { background: color-mix(in srgb, var(--nbre-ivory) 98%, transparent); } /* hover/đang-chọn trong bộ lọc: rửa nền TRUNG TÍNH, không phải màu đồng (bronze diet — đồng chỉ còn ở hairline champagne của nút) */ :root[data-theme="light"] .eopt:hover { background: color-mix(in srgb, var(--nbre-black) 5%, transparent); } :root[data-theme="light"] .zbar__save, :root[data-theme="light"] .pager__num.is-active, :root[data-theme="light"] .langseg button.on { color: var(--text); } :root[data-theme="light"] .vignette { background: radial-gradient( 120% 80% at 50% 40%, transparent 62%, color-mix(in srgb, var(--nbre-stone) 10%, transparent) 100% ); } /* ── SỐ ĐIỆN THOẠI / EMAIL trên thẻ liên hệ: ĐỦ ĐỌC ở chế độ Sáng ─────────────────────── Đo được: chữ màu `--gold` trên nền Ivory chỉ đạt **2,23:1** — dưới xa chuẩn đọc 4,5:1. Đúng họ lỗi với Stone Grey đã ghi ở đầu file: màu hợp trên nền tối (11,6:1) thì nhoè trên nền sáng. Ở đây nó rơi trúng thứ QUAN TRỌNG NHẤT của cả hai trang — số điện thoại — nên không được để. `--gold-bright` ở theme sáng là bậc bronze ĐẬM NHẤT (52% bronze + đen) ⇒ ~5,1:1, vẫn nguyên họ đồng, không đổi sang màu khác. Áp cho CẢ /bio/ (đã live 02/08, dính cùng lỗi) lẫn thẻ trên trang tài sản. ⚠️ Đo lại bằng máy nếu đổi bronze — mắt nhìn ảnh chụp KHÔNG bắt được mức này. */ :root[data-theme="light"] a.epagent__v, :root[data-theme="light"] .epagent__title, :root[data-theme="light"] a.nbio__v, :root[data-theme="light"] .nbio__title { color: var(--gold-bright); } /* ═══════════════════════════════════════════════════════════════════════════════ MÀN HÌNH ĐẦU (HERO) Ở CHẾ ĐỘ SÁNG — chủ chốt 03/08: đổi LUÔN BẢN ĐỒ ═══════════════════════════════════════════════════════════════════════════════ ⚠️ ĐỔI KIỂU BẢN ĐỒ THÔI LÀ CHƯA ĐỦ — và đây là chỗ dễ làm nửa vời nhất. Hero không tối vì bản đồ tối; nó tối vì 5 lớp CSS chồng lên bản đồ: ① .hero__poster nền gradient đen phía sau (chống nháy khi tile chưa về) ② .hero__map.is-on bản đồ chỉ hiện 50% → phần còn lại là màu của ① ③ canvas filter grayscale(1) contrast(1.18) brightness(.62) — ép tối ④ .hero__maptint phủ đen 72% ở rìa ⑤ .hero__fade 3 lớp scrim đen (scrim trái giữ chữ đọc được trên bản đồ) Đổi positron mà để nguyên 5 lớp này thì màn hình đầu VẪN ĐEN — khách bấm nút Sáng vẫn thấy y như cũ. Tất cả đảo ở đây. Giữ NGUYÊN cấu trúc & vai trò từng lớp (poster chống nháy, scrim giữ tương phản cho chữ) — chỉ đảo tông. Bản đồ vẫn là VÂN NỀN, không tranh chấp với tiêu đề. */ /* ① nền chờ: giấy ấm thay vì mực đen */ :root[data-theme="light"] .hero__poster { background: radial-gradient( 64% 50% at 52% 60%, color-mix(in srgb, var(--nbre-bronze) 10%, transparent), transparent 60% ), radial-gradient( 120% 90% at 50% 26%, color-mix(in srgb, var(--nbre-stone) 12%, transparent), transparent 72% ), linear-gradient(180deg, var(--ink) 0%, var(--ink) 46%, var(--ink) 100%); } /* ② + ③ bản đồ giấy: KHÔNG hạ sáng nữa. Vẫn khử màu để giữ chất "vân nền" trầm, nhưng nâng nhẹ độ sáng cho positron khỏi xám xịt; opacity lên 0.62 vì nền dưới nay cùng tông sáng (0.5 trên giấy làm bản đồ gần như biến mất). */ :root[data-theme="light"] .hero__map.is-on { opacity: 0.62; } /* ☠️ 04/08 — chủ báo "chế độ sáng bản đồ nó TRẮNG ĐEN". Đúng: khi làm bản đồ chế độ sáng tôi bê nguyên `grayscale(1)` từ bản tối sang. Trên nền MỰC, khử màu hết là đúng — mọi thứ vốn đã gần đen, còn lại là sắc mực. Trên nền GIẤY thì khử sạch màu ra ảnh PHOTOCOPY: xám lạnh, chất văn phòng, trái hẳn bảng màu ngà + champagne của NBRE. Nay giữ khử màu VỪA PHẢI (0,45) để bản đồ vẫn là vân nền không tranh chấp, cộng sepia 0,28 kéo về tông GIẤY NGÀ ẤM — cùng họ với --nbre-ivory. Không đổi màu bản đồ bằng cách thay style: positron giữ nguyên, chỉ lọc ở CSS, nên tile vẫn dùng chung bộ nhớ đệm và đổi chế độ vẫn tức thì. */ :root[data-theme="light"] .hero__map .maplibregl-canvas-container canvas { filter: grayscale(0.45) sepia(0.28) contrast(0.94) brightness(1.04) saturate(0.85); } /* ④ vignette: đẩy rìa về phía giấy, không phải về phía mực */ :root[data-theme="light"] .hero__maptint { background: radial-gradient( 120% 100% at 50% 50%, transparent 46%, color-mix(in srgb, var(--nbre-ivory) 78%, transparent) 100% ); } /* ⑤ scrim: cùng công dụng (giữ chữ sắc nét trên bản đồ), đổi sang ngà. Lớp cuối vẫn tan vào var(--ink) — ở theme sáng --ink CHÍNH LÀ ivory, nên đoạn nối xuống thân trang tự khớp, không phải sửa. */ :root[data-theme="light"] .hero__fade { background: linear-gradient( 95deg, color-mix(in srgb, var(--nbre-ivory) 82%, transparent) 0%, color-mix(in srgb, var(--nbre-ivory) 58%, transparent) 24%, color-mix(in srgb, var(--nbre-ivory) 18%, transparent) 42%, transparent 56% ), radial-gradient( 135% 110% at 50% 42%, transparent 46%, color-mix(in srgb, var(--nbre-ivory) 45%, transparent) 78%, color-mix(in srgb, var(--nbre-ivory) 80%, transparent) 100% ), linear-gradient( 180deg, color-mix(in srgb, var(--nbre-ivory) 55%, transparent) 0%, transparent 18%, transparent 58%, var(--ink) 100% ); } /* ── NAV phủ lên hero: scrim ngà, không phải scrim mực ────────────────────── .nav:not(.is-stuck) vừa được GỠ khỏi nhóm "giữ bảng tối" ở đầu file (hero nay sáng ⇒ chữ nav phải là mực). Logo cũng bỏ ngoại lệ "luôn dùng bản trắng khi chưa is-stuck" — xem ui-chrome.js · syncLogos(). */ :root[data-theme="light"] .nav:not(.is-stuck)::before { background: linear-gradient( 180deg, color-mix(in srgb, var(--nbre-ivory) 82%, transparent) 0%, color-mix(in srgb, var(--nbre-ivory) 50%, transparent) 52%, transparent 100% ); } /* ── PANEL KÍNH TRÊN BẢN ĐỒ: kính NGÀ thay vì kính MỰC ────────────────────── Ba panel này (ô tìm · cụm nút · chú giải) và thẻ rê chuột đều gán nền `color-mix(--nbre-black …)` cứng trong layout.css/components.css — token màu chữ đã tự đảo theo theme, nhưng NỀN thì không, nên phải khai lại từng cái. Chừa nguyên độ mờ/blur để vẫn là "kính", chỉ đổi tông nền. */ :root[data-theme="light"] .mapsearch__field { background: color-mix(in srgb, var(--nbre-ivory) 74%, transparent); } :root[data-theme="light"] .mapsearch__results { background: color-mix(in srgb, var(--nbre-ivory) 92%, transparent); } :root[data-theme="light"] .mapctl { background: color-mix(in srgb, var(--nbre-ivory) 68%, transparent); } :root[data-theme="light"] .mapctl__div { background: color-mix(in srgb, var(--nbre-black) 14%, transparent); } :root[data-theme="light"] .legend { background: color-mix(in srgb, var(--nbre-ivory) 72%, transparent); } :root[data-theme="light"] .dossier { background: color-mix(in srgb, var(--nbre-ivory) 94%, transparent); box-shadow: 0 36px 90px -34px color-mix(in srgb, var(--nbre-black) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--nbre-bronze) 22%, transparent); } /* nút zoom/la bàn của MapLibre: icon đang bị invert(1) cho nền tối → trên nền giấy thành icon trắng vô hình. Bỏ invert, giữ nguyên độ mờ. */ :root[data-theme="light"] .maplibregl-ctrl-group { background: color-mix(in srgb, var(--nbre-ivory) 82%, transparent) !important; } :root[data-theme="light"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: none; opacity: 0.62; } :root[data-theme="light"] .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--nbre-ivory) 72%, transparent) !important; } /* ── ☠️ NGĂN KÉO MENU TRÊN ĐIỆN THOẠI — LỖI ĐANG SỐNG, không phải việc bản đồ ── Chủ nhắc 03/08: >90% khách xem bằng ĐIỆN THOẠI / iPad. iOS mặc định là chế độ SÁNG ⇒ phần lớn khách vào thẳng theme sáng (initTheme: đã lưu → HỆ THỐNG → tối). Nghĩa là nền sáng KHÔNG phải "tuỳ chọn ít ai bấm", nó là đường đi CHÍNH. Ngăn kéo (.nav__links ≤820px) gán cứng nền `--nbre-black 98%`, còn chữ dùng var(--muted). Ở theme sáng --muted là xám ĐẬM ⇒ xám đậm trên nền ĐEN. Trước 03/08 lỗi này ẩn một nửa: .nav:not(.is-stuck) còn nằm trong nhóm giữ-tối nên chỉ hỏng KHI ĐÃ CUỘN (nav is-stuck) rồi mới mở menu — đúng thao tác thường gặp nhất trên điện thoại. Nay hero sáng thì phải sửa hẳn: ngăn kéo sang GIẤY. */ @media (max-width: 820px) { :root[data-theme="light"] .nav__links { background: color-mix(in srgb, var(--nbre-ivory) 98%, transparent); border-left-color: var(--line); } /* scrim sau ngăn kéo vẫn TỐI — công dụng của nó là dìm trang phía sau xuống để mắt bám vào menu; scrim sáng trên nền sáng thì không còn tách lớp. */ :root[data-theme="light"] .nav::after { background: color-mix(in srgb, var(--nbre-black) 38%, transparent); } }