/* ========================================================================== Đá Sân Vườn Việt — design token Cổng vào duy nhất cho màu, chữ, khoảng cách. Một mã hex cứng trong main.css là bug — thêm token ở đây rồi dùng var(). Mọi tỉ lệ tương phản dưới đây được ĐO (WCAG 2.1 relative luminance) ngày 03.09.2026, không ước lượng. Đo lại trước khi đổi một cặp. ========================================================================== */ :root{ /* ── Nền và mực ─────────────────────────────────────────────────────── Rút từ chính vật liệu mà ấn phẩm viết về: nền là đá vôi ấm, mực là bazan. Nền hơi ngả vàng để thẻ trắng nổi lên trên nó — nếu nền cũng trắng thì thẻ biến mất và trang trôi thành một mảng. */ --ground: #F6F2EA; /* nền trang — đá vôi */ --ground-2: #EBE4D8; /* dải chìm một bậc */ --card: #FFFFFF; --ink: #1B1916; /* chữ chính — 15.71:1 trên ground · AAA */ --ink-2: #575046; /* chữ phụ — 7.12:1 trên ground · AAA */ --line: #E2DACB; /* kẻ, viền — trang trí, không mang chữ */ --line-2: #CEC3B0; /* ── Nhấn ───────────────────────────────────────────────────────────── Hai màu, cả hai lấy từ loại đá có thật trên site: rêu (đá xanh rêu Thanh Hoá) và hoàng thổ (sa thạch). Không màu nào là màu thương hiệu của một doanh nghiệp — satellite-sites.md § Identity. --moss đủ chuẩn ở CẢ HAI chiều nên dùng được vừa làm chữ trên nền sáng vừa làm nền đặc có chữ trắng. Đó là lý do chỉ cần một giá trị. */ --moss: #2F5D3F; /* chữ trên ground 6.82:1 · trên card 7.61:1 · chữ trắng lên trên 7.61:1 */ --moss-wash: #E8F0EA; /* nền chip — ink 15.10:1, moss 6.56:1 */ --ochre: #8A5410; /* chữ trên ground 5.60:1 · chữ trắng lên trên 6.26:1 */ --ochre-wash:#F7EBD8; /* nền chip — ink 14.89:1, ochre 5.31:1 */ --on-dark: #FFFFFF; /* 17.54:1 trên ink · AAA */ --on-dark-soft: rgba(255,255,255,.76); /* ≈ #C9C6C2 → 10.31:1 trên ink · AAA */ --sand: #D9B26A; /* nhấn trên dải tối — 8.79:1 trên ink · AAA */ --moss-lift: #8FBF9E; /* nhấn phụ trên dải tối — 8.45:1 trên ink · AAA */ --line-dark: rgba(255,255,255,.16); --tint-dark: rgba(255,255,255,.08); /* nền nhạt trên dải tối: chip, hover nút viền */ /* Lớp phủ mờ cho header dính và dock. Để ở đây chứ không viết thẳng vào main.css: một giá trị màu nằm ngoài file này là bug, kể cả khi nó là rgba() chứ không phải mã hex. Hai giá trị là --ground và --card ở độ đục tương ứng — đổi nền trang thì phải đổi cả hai. */ --veil: rgba(246,242,234,.90); --veil-card: rgba(255,255,255,.86); --sh-dock: 0 6px 18px -6px rgba(27,25,22,.32); /* ── Chữ ────────────────────────────────────────────────────────────── Fraunces: serif biên tập có trục opsz + SOFT/WONK, subset `vietnamese` đã kiểm bằng User-Agent desktop đầy đủ (Google trả sheet legacy không có unicode-range nếu UA lạ) — có U+1EA0–1EF9. Be Vietnam Pro: dựng riêng cho tiếng Việt, dấu không phải ghép. Cặp này cố tình khác cả ba site anh em, đều dùng sans đậm làm display: Plus Jakarta Sans (trendyshop) · Saira Condensed (lexus) · Bricolage Grotesque (congviencavoi). satellite-sites.md § Design is free yêu cầu thẳng "thử layout tổ chức chưa từng ship". */ --f-display: 'Fraunces', 'Be Vietnam Pro', Georgia, serif; --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-hero: clamp(2.05rem, 1.25rem + 2.6vw, 3.5rem); --t-h2: clamp(1.5rem, 1.12rem + 1.35vw, 2.2rem); --t-h3: clamp(1.05rem, .95rem + .42vw, 1.32rem); --t-card: clamp(.95rem, .91rem + .18vw, 1.04rem); --t-body: clamp(.97rem, .94rem + .13vw, 1.06rem); --t-small: .875rem; --t-micro: .75rem; /* ── Leading ────────────────────────────────────────────────────────── Sàn ĐO ĐƯỢC mà dự án trendyshop ghi lại, cùng phương pháp canvas (actualBoundingBox + fontBoundingBox, 200px): Be Vietnam Pro 400 · chữ thường có dấu chồng sàn 1.17 — cùng font, cùng chuỗi, Latin không dấu: 0.955 – 0.975 Tức tiếng Việt cần 1.25×–1.50× leading của tiếng Anh trong CÙNG font, nên `line-height: normal` là sai ở đây. ⚠️ Sàn của Fraunces CHƯA đo trên máy này. Ba giá trị dưới đây lấy sàn 1.27 của một display 800 đã đo (PJS) rồi cộng biên cho serif — dấu của serif cao hơn sans vì có chân và trục nghiêng. Nếu thắt lại, phải đo trước, chuỗi thử: 'ếồữẫặệộợừểỹọụgjpqy' và 'ĐƯỢC CHỌN NHIỀU'. */ --lh-tight: 1.30; /* h1 hero */ --lh-head: 1.34; /* h1–h4, copy do biên tập viên nhập */ --lh-body: 1.64; /* trên sàn 1.17 của BVP 400; ấn phẩm đọc dài nên nới hơn shop */ /* ── Khung ──────────────────────────────────────────────────────────── 1180px hẹp hơn shop (trendyshop 1280) vì đây là ấn phẩm để đọc: cột chữ quá rộng thì mắt mất dòng. --measure giữ đoạn văn trong tầm đọc. */ --container: 1180px; --gutter: clamp(16px, 4vw, 48px); --band: clamp(48px, 5.4vw, 88px); /* padding dọc một dải */ --measure: 68ch; /* ── Bo và bóng ─────────────────────────────────────────────────────── Bo nhỏ hơn shop: vật liệu đá là cạnh cắt, không phải góc lượn. */ --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-full: 999px; --sh-card: 0 1px 2px rgba(27,25,22,.05), 0 8px 20px -14px rgba(27,25,22,.28); --sh-lift: 0 2px 4px rgba(27,25,22,.06), 0 22px 40px -20px rgba(27,25,22,.36); /* ── Chuyển động ──────────────────────────────────────────────────────*/ --ease: cubic-bezier(.22, 1, .36, 1); --ease-2: cubic-bezier(.4, 0, .2, 1); --dur: .34s; /* Cỡ tên ấn phẩm ở chân trang. ĐO bằng scrollWidth chứ không ước từ ảnh: chuỗi "Đá Sân Vườn Việt" ở Fraunces 700 rộng 6,62px cho mỗi px cỡ chữ. Vùng chữ của container = --container trừ hai lần --gutter, nên cỡ tối đa là (container - 2*gutter) / 6,62. Đổi --container thì phải đổi cả cái này. */ --mark-size: 160px; /* container 1180 - 2*48 = 1084 → 1084/6,62 ≈ 163 */ /* Vùng chạm tối thiểu — coding-standards.md, sàn đo được, không phải gu */ --tap: 44px; } /* ══ Màn lớn ═══════════════════════════════════════════════════════════════ Ở 1180px cố định, trang chiếm 46% bề ngang màn 2K và 31% màn 4K — đọc thì được nhưng trông như bị ép vào giữa. Ba thứ phải lớn lên cùng nhau, không phải một: 1. --container. Nới, nhưng KHÔNG theo tỉ lệ màn hình: --measure giữ đoạn văn ở 68ch nên cột chữ không bao giờ dài quá tầm đọc; phần rộng thêm đi vào lưới thẻ và ảnh. 2. Cỡ chữ gốc. Nếu chỉ nới container mà giữ chữ 17px thì màn 4K vẫn ra chữ li ti trên một khung rộng — đúng cảm giác "bị ép nhỏ". Dùng % chứ không px: người dùng đặt cỡ chữ riêng trong trình duyệt vẫn được tôn trọng, ta chỉ nhân lên từ mốc của họ. 3. --gutter và --band. Khung rộng mà lề với khoảng dải giữ nguyên thì các dải dính sát nhau theo chiều dọc. --mark-size đi kèm --container theo đúng tỉ lệ 6,62 đã đo. */ @media (min-width: 1600px) { html { font-size: 103%; } :root { --container: 1360px; --gutter: 56px; --band: clamp(72px, 5.4vw, 100px); --mark-size: 188px; /* (1360 - 112) / 6,62 */ } } @media (min-width: 1920px) { html { font-size: 106%; } :root { --container: 1520px; --gutter: 64px; --band: clamp(84px, 5.4vw, 112px); --mark-size: 210px; /* (1520 - 128) / 6,62 */ } } @media (min-width: 2400px) { html { font-size: 112%; } :root { --container: 1780px; --gutter: 72px; --band: clamp(96px, 5vw, 128px); --mark-size: 247px; /* (1780 - 144) / 6,62 */ } } @media (min-width: 3000px) { html { font-size: 118%; } :root { --container: 2060px; --gutter: 80px; --band: clamp(112px, 5vw, 148px); --mark-size: 286px; /* (2060 - 160) / 6,64 — đo ra 1901px ở 287, thừa 1px */ } } /* Mốc cuối cho 4K không thu phóng. Đa số máy 4K chạy OS scaling 150–200% nên viewport CSS thực tế chỉ 1920–2560; mốc này dành cho số ít chạy 1:1, ở đó 2060px vẫn để lại hai dải lề rất rộng — đo được trang chỉ chiếm 54% bề ngang. */ @media (min-width: 3600px) { html { font-size: 122%; } :root { --container: 2320px; --gutter: 88px; --band: clamp(120px, 5vw, 164px); --mark-size: 322px; /* (2320 - 176) / 6,64 */ } }