/* * Biến nền tảng — màu, chữ, nhịp khoảng cách. * Lấy nguyên từ bản thiết kế Claude Design, không tự đặt thêm màu mới. * Mọi file CSS khác đọc biến từ đây; đừng viết mã màu thẳng ở nơi khác. */ :root { /* ---- Màu thương hiệu ---- */ --tgs-muc: #0B0B0B; /* Ink Black — nền chủ đạo, chữ trên nền sáng */ --tgs-nga: #F3F0E8; /* Ivory — chữ trên nền tối, nền sáng */ --tgs-son: #D83A22; /* Vermilion Red — màu nhấn duy nhất */ /* ---- BƯỚC 19 · B-15-2 — hai biến thể son CHỈ dùng cho CHỮ NHỎ ---- * * `#D83A22` là màu thương hiệu và KHÔNG đổi. Nhưng nó trượt WCAG AA khi làm * màu chữ nhỏ: đo bằng `getComputedStyle` trên trang thật ngày 30/08 được * **4,05:1** trên nền ngà và **4,26:1** trên nền mực — cả hai đều dưới 4,5. * * Hai biến thể dưới đây CÙNG SẮC với son (hue 8,03° / 7,80° so với 7,91° của * son gốc — lệch nhiều nhất 0,12°), chỉ khác độ sáng, nên mắt vẫn đọc ra là * một màu. Bảng đầy đủ BỐN nền có thật trên site: * * nền | son gốc | tren-sang | tren-toi * --------------------------|---------|-----------|--------- * #F3F0E8 ngà | 4,05 | **5,18** | 3,54 * #E7E1D5 ngà đậm | 3,55 | **4,53** | 3,10 * #0B0B0B mực | 4,26 | 3,34 | **4,88** * #151515 mực nhạt | 3,95 | 3,10 | **4,53** * * CẶP CŨ `#C6351F` / `#DE4730` ĐÃ BỊ BỎ (30/08 11:55, quyết định người vận * hành gỡ B-19-1). Nó chỉ đạt trên hai nền CHÍNH và trượt trên hai nền phụ: * ngà đậm 4,10 và mực nhạt 4,39. Đừng đặt lại cặp đó. * * CHỖ CHẶT NHẤT LÀ 4,53 — sát ngưỡng 4,5. Ai đổi hai giá trị này về sau phải * đo lại đúng `#E7E1D5` và `#151515`, KHÔNG phải chỉ hai nền chính. * * DÙNG ĐÚNG CHỖ: cho CHỮ dưới 24px (mốc "chữ lớn" của WCAG 1.4.3 là 24px * weight 400, hoặc 18,66px in đậm). Tiêu đề ≥ 24px, viền, chấm vẫn dùng * `--tgs-son` — chữ lớn chỉ cần 3:1 nên son gốc đã đạt, và đổi màu ở đó là * đổi diện mạo thương hiệu mà không được gì. * * NGOẠI LỆ CÓ CHỦ Ý — `--tgs-son-tren-sang` CÒN LÀM NỀN cho `.tgs-nut--son` * (B-19-3). Ở đó nó không phải "màu chữ trên nền sáng" mà là khối màu đặc, * đậm hơn son một bậc, để chữ ngà `#F3F0E8` 10px đạt 5,18 thay vì 4,05. * Tên biến vì thế hơi hẹp so với chỗ dùng; đổi tên phải sửa cả hai nơi. */ --tgs-son-tren-sang: #BA321D; /* chữ nhỏ trên nền SÁNG (ngà) · nền nút son */ --tgs-son-tren-toi: #E24831; /* chữ nhỏ trên nền TỐI (mực) */ /* ---- Màu sản phẩm. Cũng là màu chọn được trong trang Made Personal ---- */ --tgs-cham: #2C3E62; /* Indigo Blue */ --tgs-rung: #3F5340; /* Forest Green */ --tgs-cat: #D9C9AE; /* Sand Beige */ --tgs-nau: #6B4A34; /* Cocoa Brown */ --tgs-da: #A8A29A; /* Stone Grey */ /* ---- Sắc độ dùng lại nhiều ---- */ --tgs-nga-72: rgba(243, 240, 232, 0.72); --tgs-nga-60: rgba(243, 240, 232, 0.60); --tgs-nga-55: rgba(243, 240, 232, 0.55); /* chân trang: .4 cho 3,46:1, không đạt AA — xem D9 */ --tgs-nga-45: rgba(243, 240, 232, 0.45); --tgs-nga-40: rgba(243, 240, 232, 0.40); --tgs-nga-30: rgba(243, 240, 232, 0.30); --tgs-nga-16: rgba(243, 240, 232, 0.16); --tgs-nga-12: rgba(243, 240, 232, 0.12); --tgs-nga-08: rgba(243, 240, 232, 0.08); --tgs-muc-92: rgba(11, 11, 11, 0.92); --tgs-muc-72: rgba(11, 11, 11, 0.72); --tgs-muc-50: rgba(11, 11, 11, 0.50); /* nhãn "Brand management" — trang Our Story */ --tgs-muc-60: rgba(11, 11, 11, 0.60); /* ghi chú nhỏ — trang Contact */ --tgs-muc-45: rgba(11, 11, 11, 0.45); --tgs-muc-35: rgba(11, 11, 11, 0.35); /* câu tiếng Nhật — trang Our Story */ --tgs-muc-40: rgba(11, 11, 11, 0.40); --tgs-muc-25: rgba(11, 11, 11, 0.25); /* kẻ chân ô nhập — trang Contact */ --tgs-muc-20: rgba(11, 11, 11, 0.20); --tgs-muc-14: rgba(11, 11, 11, 0.14); --tgs-muc-12: rgba(11, 11, 11, 0.12); /* kẻ giữa các dòng bảng kê — trang Contact */ --tgs-muc-05: rgba(11, 11, 11, 0.05); --tgs-muc-03: rgba(11, 11, 11, 0.03); --tgs-son-50: rgba(216, 58, 34, 0.50); /* * Hai màu đặc thêm, đo được từ bản gốc — không phải tôi tự nghĩ ra: * #151515 dùng đúng một chỗ: nền thẻ khi rê chuột trong dải Collection. * #E7E1D5 là nền bảng size trên nền ngà, tối hơn ngà một bậc. */ --tgs-muc-nhat: #151515; --tgs-nga-dam: #E7E1D5; /* ---- Chữ ---- * Ba họ chữ, đúng như bản thiết kế: * Noto Sans — chữ chạy, nhãn, nút * Noto Serif Display — tiêu đề lớn * Noto Serif JP — chỉ dùng cho câu tiếng Nhật ở trang Our Story */ --tgs-chu-than: 'Noto Sans', system-ui, -apple-system, sans-serif; --tgs-chu-de: 'Noto Serif Display', Georgia, serif; --tgs-chu-nhat: 'Noto Serif JP', 'Noto Serif Display', serif; /* Thang cỡ chữ. Tiêu đề co giãn theo bề ngang màn hình. */ --tgs-cd-nhan: 10px; /* nhãn đầu dải: "01 · Brand beginning" */ --tgs-cd-be: 13px; --tgs-cd-than: 16px; --tgs-cd-dan: 19px; /* đoạn dẫn nhập */ --tgs-cd-h3: clamp(22px, 2.2vw, 30px); --tgs-cd-h2: clamp(30px, 4.2vw, 58px); --tgs-cd-h1: clamp(40px, 7vw, 104px); --tgs-gian-nhan: 0.28em; /* giãn cách chữ cho nhãn đầu dải */ --tgs-gian-de: 0.02em; /* ---- Thang chữ hoa nhỏ — ĐẾM ĐƯỢC từ bản gốc, không ước lượng ---- * * Đếm cặp `font-size + letter-spacing` trong `_nguon/template.html`: * 10px / 0.24em — 21 lần → chữ trên NÚT * 10px / 0.28em — 18 lần → NHÃN đầu mỗi dải nội dung * 9px / 0.22em — 16 lần → chữ chú thích nhỏ nhất * 9.5px / 0.24em — 11 lần → nhãn phụ trong thẻ * 10px / 0.30em — 8 lần → nhãn trên ảnh hero * 11px / 0.16em — 1 lần → menu điều hướng (app.js: navBase) * * Trước phiên này `--tgs-cd-nhan` đang là 11px/0.16em — tức là lấy giá trị * của MENU (1 lần) làm mặc định cho NHÃN (18 lần). Đã đưa về 10px/0.28em và * tách menu ra token riêng bên dưới, nên menu không đổi hình. */ --tgs-cd-nut: 10px; --tgs-gian-nut: 0.24em; --tgs-cd-nhan-be: 9.5px; /* nhãn phụ trong thẻ */ --tgs-gian-be: 0.24em; --tgs-cd-nhan-ti: 9px; /* chú thích nhỏ nhất */ --tgs-gian-ti: 0.22em; /* * BƯỚC 17 · D4 — cỡ riêng cho NHÃN Ô NHẬP của form. * Không có trong bảng đếm bản gốc: bản gốc dùng 9px cho nhãn form, mà 9px * là cỡ nhỏ nhất toàn site đặt ở đúng chỗ nhận đơn hỏi hàng. Đây là ngoại lệ * CÓ CHỦ Ý, không phải cỡ thứ 15 đẻ ra vì thiếu kỷ luật (xem D14). * 11px = đúng cỡ menu chính, nên không đưa thêm bậc mới vào thang chữ. */ --tgs-cd-nhan-form: 11px; --tgs-gian-rong: 0.30em; /* nhãn trên ảnh hero, giãn rộng nhất */ --tgs-cd-nav: 11px; /* menu điều hướng */ --tgs-gian-nav: 0.16em; /* ---- Nhịp khoảng cách ---- * * BƯỚC 17 · D13 — SỬA CHÚ THÍCH, KHÔNG SỬA SỐ. Đọc trước khi "gom cho đúng * thang", vì chính chú thích cũ của `--tgs-k7` đã đẻ ra một cáo buộc oan. * * Thang này dùng cho khoảng cách BÊN TRONG khối: khe lưới, cách chữ, đệm * thẻ. Nó **KHÔNG phải** nguồn của đệm dọc các DẢI. * * Đệm dọc các dải lấy thẳng từ bản thiết kế của khách * (`_nguon/template.html`), đo được ở đó là 8 giá trị: * `120 · 130 · 140 · 150 · 160 · 170 · 180 · 190`. Theme hiện dùng 5 trong * số đó (120 · 140 · 150 · 160 · 190), cộng hai tổng bù overlap * (198 = 150+48 và 222 = 150+72). Trùng khớp `--tgs-k7` = 140 là NGẪU NHIÊN. * * Vì vậy: **đừng snap 150 → 140 "cho về thang"**. 150 là giá trị dày đặc * nhất của bản gốc (7 lần), 140 chỉ 3 lần. Snap là đổi thiết kế của khách, * và làm vỡ hai phép cộng overlap ràng vào nó (xem pages.css 13.2 và 14.2). * Bằng chứng đầy đủ: `DANH-GIA-UX-UI.md` mục 17.16 · `BAI_HOC.md` B-17-C9. */ --tgs-k1: 8px; --tgs-k2: 16px; --tgs-k3: 24px; --tgs-k4: 40px; --tgs-k5: 64px; --tgs-k6: 96px; --tgs-k7: 140px; /* đệm dọc chung; KHÔNG phải chuẩn cho đệm dải — xem trên */ /* ---- Bố cục ---- * Chốt của dự án: container 1440px, đệm ngang 56px — xem CLAUDE.md mục "Lưới". * 1440px là bề ngang KỂ CẢ đệm, đúng như bản thiết kế gốc * (`max-width:1440px; padding:0 56px`), nên lòng chữ thật là 1328px. * Đừng đổi về 1200px "cho đúng chuẩn MTS" — dự án này cố ý rộng hơn. * * --tgs-le là đệm ngang hiện hành; layout.css hạ giá trị này ở màn hình nhỏ * để mọi nơi dùng container tự co theo, không phải sửa từng chỗ. */ --tgs-rong: 1440px; /* bề ngang tối đa của container, gồm cả đệm */ --tgs-le: 56px; /* đệm ngang, đo được dùng nhất quán 33 lần ở bản gốc */ /* ---- Chuyển động ---- * Bản gốc dùng cubic-bezier(.16,1,.3,1) cho mọi hiệu ứng hiện dần. * Giữ nguyên để nhịp cảm giác không đổi. */ --tgs-nhip: cubic-bezier(0.16, 1, 0.3, 1); --tgs-lau: 1.1s; --tgs-vua: 0.35s; } /* Người dùng tắt hiệu ứng thì tôn trọng, không ép chuyển động. */ @media (prefers-reduced-motion: reduce) { :root { --tgs-lau: 0.01s; --tgs-vua: 0.01s; } }