/* ============================================================ 墨讀 · Mặc Độc — landing Nền GIẤY, cùng chất liệu với app (frontend/src/styles.css): mực trên giấy, son cho đúng những chỗ app cũng dùng son. Người đi từ landing sang màn đăng nhập của app phải thấy vẫn là một nhà. Bản trước là "mặt bàn tối, sản phẩm là vật sáng duy nhất" — đẹp, nhưng mở app ra thì mọi thứ đảo màu, và đó là lý do nó bị thay. Vật NỔI trên trang (thẻ giấy có viền mảnh + bóng) vẫn là sản phẩm hoặc bằng chứng về sản phẩm; chữ thì nằm thẳng trên giấy. ============================================================ */ /* ---------- chữ: TỰ HOST, đã cắt ---------- Trước đây nạp từ Google Fonts và đo được ~810KB: tám tệp con Noto Serif SC để vẽ đúng 42 chữ Hán, cộng Newsreader đầy đủ. Nay ~150KB, và quan trọng không kém — mất luôn một tệp CSS bên thứ ba đang CHẶN VẼ TRANG cùng hai lượt preconnect. Tái tạo bằng `scripts/cat-font.sh` (kèm bước dựng glyph pinyin thanh ba mà Newsreader không có); giấy phép OFL của cả hai bộ chữ nằm ở `/font/OFL.txt`. `font-display: swap` giữ nguyên: chữ phải đọc được ngay, kể cả khi font chưa về. Đó cũng là lý do stack dự phòng phải là serif thật (Georgia), không phải `serif` chung chung. */ @font-face { font-family: "Newsreader"; /* Còn nguyên trục opsz — mặt chữ này vẽ cả tiêu đề 83px lẫn thân bài 17px, nên `font-optical-sizing: auto` ở body có thứ để làm việc. */ src: url("/font/newsreader-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; /* opsz ghim ở 16: mặt này chỉ dùng cho vài cụm in đậm cỡ ~17px. */ src: url("/font/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; /* Cắt hẹp về ASCII + nguyên âm có dấu thanh pinyin: bản nghiêng dùng ở ĐÚNG .kn-pinyin và .kn-en. Có test khoá điều đó — dùng nghiêng cho chữ tiếng Việt sẽ rơi về Georgia nghiêng ngay giữa câu. */ src: url("/font/newsreader-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Noto Serif SC"; /* Chỉ những chữ trang dùng, giữ trục wght: 400 thân bài · 600 con dấu và chữ trong khung nghĩa · 700 chữ hiệu. */ src: url("/font/noto-serif-sc.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } :root { /* Giấy & mực — CHÍNH LÀ token của app (--paper, --paper-deep, --paper-card, --ink, --ink-soft, --hairline, --cinnabar), đổi tên sang tiếng Việt cho cùng lối với phần còn lại của landing. */ --nen: #efe9dc; /* app --paper: nền trang */ --nen-sau: #e7dfce; /* app --paper-deep: tấm nền sau vật minh hoạ */ --the: #f5f1e8; /* app --paper-card: thẻ giấy nổi */ --muc: #211e18; /* app --ink: chữ chính */ --muc-mo: #4c473c; /* app --ink-soft: thân bài */ /* KHÔNG phải --ink-faint (#8b8270) của app: màu đó chỉ đạt 3,14:1 trên giấy. App dùng nó cho nhãn phụ trong giao diện đã đăng nhập; landing là trang công khai và chú thích ở đây là chữ người ta cần đọc, nên hạ tối tới khi đạt AA trên CẢ ba mặt giấy (4,84:1 trên mặt tối nhất --nen-sau). */ --muc-nhat: #665e4e; --chi: #d8cfba; /* app --hairline: kẻ chỉ mảnh */ /* Viền của Ô NHẬP và ô đánh dấu. Không dùng --chi: WCAG 1.4.11 đòi ranh giới của thứ bấm/gõ được đạt 3:1 với nền, --chi chỉ ~1,3:1 — ô email sẽ tan vào tấm giấy. #8b8270 đạt 3,37:1 trên --the. */ --vien: #8b8270; /* son — app --cinnabar. Chữ Hán-Việt, liên kết, nhãn mục, nút. */ --son: #b23529; --son-dam: #b23529; /* nền nút + con dấu; tách tên để đổi riêng được */ /* vàng — app --gold. Chỉ để trang trí (viền trái câu đang nghe, y như `.vcue.active` của app), KHÔNG BAO GIỜ làm màu chữ: 2,69:1. */ --vang: #a98a52; /* "Noto Serif SC" PHẢI có trong ngăn xếp này, không chỉ ở --serif-cn. Newsreader không có glyph Hán, nên một chữ Hán lẫn trong câu tiếng Việt rơi xuống font hệ thống — đo bằng CDP: chữ hiệu 墨讀 ở CHÂN TRANG từng vẽ bằng Noto Sans CJK JP, một mặt chữ KHÔNG CHÂN và của tiếng Nhật. Trình duyệt chọn font theo TỪNG KÝ TỰ, nên đặt sau Newsreader là đúng: chữ Latin vẫn Newsreader, chỉ chữ Hán mới rơi sang đây. */ --serif: "Newsreader", "Noto Serif SC", Georgia, "Times New Roman", serif; --serif-cn: "Noto Serif SC", "Songti SC", serif; --bong-the: 0 1px 2px rgba(33, 30, 24, 0.05), 0 8px 24px rgba(33, 30, 24, 0.06); /* app --shadow-card */ --bong-sheet: 0 -2px 40px rgba(33, 30, 24, 0.18); /* app --shadow-sheet */ /* Thang chữ theo Elements of Typographic Style — tỉ lệ quãng năm (1.5) ở đầu thang, thu dần về 1.25 ở thân bài. */ /* Sàn 2.25rem chứ không phải 2.6rem: ở 320px, 41,6px không đủ chỗ cho "Học tiếng Trung" trong 280px và dòng vỡ thành "Học tiếng / Trung" — cắt đúng giữa cụm. 10.5vw giữ gần nguyên cỡ ở 390 (41px). */ --t-display: clamp(2.25rem, 10.5vw, 5.2rem); --t-lon: clamp(1.9rem, 4.6vw, 2.9rem); --t-vua: clamp(1.25rem, 2.4vw, 1.5rem); --t-than: clamp(1.0rem, 1.6vw, 1.125rem); --t-nho: 0.875rem; --long: clamp(20px, 5.5vw, 32px); /* lề trong khung */ --khoang: clamp(72px, 12vw, 128px); /* khoảng giữa các mục */ --khung-max: 1140px; /* = --shell-max-desktop của app */ /* Bề rộng tối đa của KHỐI CHỮ khi trang còn một cột (điện thoại, iPad dọc). Chỉ chặn chữ — tiêu đề, lời hứa, biểu mẫu — không chặn các tấm minh hoạ: ở iPad Pro dọc (1024) tấm 720px cạnh thẻ 960px làm mép phải so le cả trang. */ --cot: 720px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Không để một chữ đứng trơ ở dòng cuối ("…lời người / nói."). Trình duyệt chưa hỗ trợ thì ngắt như thường — không mất gì. */ p, li, summary, figcaption { text-wrap: pretty; } html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } body { background-color: var(--nen); color: var(--muc); font-family: var(--serif); font-size: var(--t-than); line-height: 1.65; /* serif cần thoáng hơn sans */ font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Vân giấy — CÙNG thủ pháp và cùng số với body của app: hai vệt màu lệch tâm cực nhạt + nhiễu mờ, để giấy không phẳng lì như một khối màu. */ background-image: radial-gradient(circle at 18% 12%, rgba(178, 53, 41, 0.035), transparent 38%), radial-gradient(circle at 86% 78%, rgba(93, 122, 104, 0.04), transparent 42%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-attachment: fixed; } /* MÀU LINK GỐC. Từng KHÔNG có luật `a` nào ở mức gốc, nên một liên kết trong

rơi về màu mặc định của trình duyệt — xanh dương đậm, tương phản khoảng 1,3:1 trên nền tối hồi đó. Lỗi này không thuộc về một lớp nào, nó thuộc về việc thiếu một mặc định; nên đặt ở gốc. */ a { color: var(--son); text-underline-offset: 3px; } /* Một glyph Hán đứng cạnh chữ Latin thổi phồng hộp dòng nó nằm trong (~1.45x ở cùng font-size), và font dự phòng còn đổi hộp dòng mà không đổi nét — nên cùng một trang lệch một kiểu lúc font chưa nạp, lệch kiểu khác sau khi nạp. `line-height: 1` chốt hộp dòng, ô vuông cố định ở nơi gọi mới là thứ căn với hàng xóm. Lý do đầy đủ nằm trong frontend/src/styles.css của app. CỐ Ý KHÔNG có font-size ở đây và CỐ Ý KHÔNG nudge bằng transform. */ .cjk-mark { display: inline-grid; place-items: center; align-self: center; font-family: var(--serif-cn); line-height: 1; } /* LỀ NGANG CỦA CẢ TRANG NẰM Ở ĐÂY, và chỉ ở đây. Mọi lớp dùng CHUNG phần tử với .khung (.hero, .muc, .form-khoi, .chan…) PHẢI dùng `margin-block` / `padding-block`, KHÔNG BAO GIỜ dùng shorthand `margin` hay `padding`: shorthand đặt lại cả bốn cạnh, nên nó xoá sạch trục ngang mà .khung vừa đặt — cùng độ đặc hiệu, đứng sau nên thắng, không có cảnh báo nào. Đã xảy ra HAI lần: `padding` làm cả trang dính mép trái ở điện thoại, rồi `margin` trong .form-khoi và .chan xoá mất `margin-inline: auto` nên biểu mẫu và chân trang văng sang sát mép trái ở màn rộng — mà ở điện thoại thì không thấy, vì ở đó `auto` vốn đã bằng 0. Có test tĩnh khoá điều này: xem `noi-dung.test.js`. */ .khung { width: 100%; max-width: var(--khung-max); margin-inline: auto; padding-inline: var(--long); } /* "Hán-Việt" KHÔNG được ngắt dòng ở dấu gạch nối. Nó là thuật ngữ trung tâm của cả luận điểm bán hàng, và trình duyệt coi gạch nối là chỗ ngắt hợp lệ nên nó vỡ thành "Hán-" / "Việt" ngay ở tiêu đề — đã xảy ra hai lần trên cùng một màn hình 1440px. */ .lien { white-space: nowrap; } /* Ghim từng CỤM chứ không ghim cả câu: dòng phụ dưới nút màn đầu từng rớt đúng chữ "email" xuống một dòng riêng ở MỌI bề rộng. */ .nowrap { white-space: nowrap; } /* ============================================================ BỐ CỤC THEO LOẠI MÀN - Điện thoại: một cột. - iPad dọc (820, 1024): VẪN một cột, chặn ở --cot. iPad Pro dọc rộng 1024 — đủ để chia hai cột, nhưng chia ra thì màn đầu thành hai cột hẹp dưới một khoảng trống cao 1366px. Đúng lỗi app đã gặp ở màn đăng nhập, và app sửa bằng đúng điều kiện `orientation: landscape` dưới đây. - iPad ngang (1180, 1366) và máy tính: hai cột. Mọi nhánh hai cột dùng CÙNG MỘT điều kiện, để không có khổ nào một mục đã chia cột còn mục bên cạnh chưa. ============================================================ */ /* ---------- masthead: chữ hiệu y như app (KhungCong.jsx / .brand) ---------- */ .dau-trang { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 18px; border-bottom: 1px solid var(--chi); } .hieu { display: flex; align-items: center; gap: 14px; color: var(--muc); text-decoration: none; } .hieu .glyph { font-family: var(--serif-cn); font-weight: 700; font-size: clamp(24px, 6vw, 30px); line-height: 1; letter-spacing: 2px; color: var(--muc); } /* Giãn 0.42em như `.brand .latin` của app. Căn baseline với chữ hiệu ăn ở app vì hai thứ cùng một hàng flex `align-items: baseline`; ở đây hàng có cả con dấu, nên căn giữa hàng và để chữ nhỏ tự đứng giữa. */ .hieu .ten { font-size: 12.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muc-nhat); font-weight: 500; } /* Con dấu viền: đúng `.brand .seal` của app — ô vuông viền son, chữ son, nghiêng -4°. Bản trước là con dấu ĐẶC ở góc PHẢI, lặp lại chính chữ hiệu bên trái. */ .dau { width: 30px; height: 30px; border: 1.5px solid var(--son); border-radius: 5px; color: var(--son); font-size: 17px; font-weight: 600; transform: rotate(-4deg); } /* Link đăng ký ở masthead. CHỈ từ 760px: ở điện thoại nút màn đầu đã nằm trong tầm mắt ngay dưới, hai lời mời trong một màn 390px là nhiễu. */ .dau-cta { display: none; font-size: var(--t-nho); color: var(--muc); text-decoration: none; padding: 10px 16px; border: 1px solid var(--vien); border-radius: 6px; transition: border-color 0.16s, color 0.16s; } .dau-cta:hover { border-color: var(--son); color: var(--son); } .dau-cta:focus-visible { outline: 2px solid var(--son); outline-offset: 3px; } @media (min-width: 760px) { .dau-cta { display: inline-block; } } /* ---------- hero ---------- */ /* Điện thoại và iPad dọc: một cột, lời hứa rồi tới sản phẩm. Màn nằm ngang từ 1000px: HAI CỘT — lời hứa trái, tờ giấy demo phải, cùng một tầm mắt. */ .hero { padding-block: clamp(44px, 9vw, 96px) 0; } .hero .loi-hua { max-width: var(--cot); } @media (min-width: 1000px) and (orientation: landscape) { .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); /* `center` khoá chiều dọc hai cột vào nhau: tờ giấy bên phải cao thấp theo từ đang chạm, nên mỗi lần chạm sang từ khác thì TIÊU ĐỀ VÀ NÚT bên trái cũng bị đẩy — đo được 25px ở 1194px. `start` cắt sợi dây đó. */ align-items: start; } .hero .to-giay { margin-top: 0; } /* --t-display neo theo `vw`, đúng khi h1 chiếm cả bề ngang. Ở đây nó chỉ còn nằm trong một cột ~520px, nên tính theo cả màn hình là tính sai vật chứa: đo ở 1194px từng được h1 cao 529px trong khung 834px, đẩy câu phụ đề xuống dưới mép màn hình cùng với nút đăng ký. Cỡ chữ ở đây neo theo cột, không theo màn hình. */ .hero .dinh-vi { font-size: clamp(2.9rem, 4.6vw, 4.1rem); } } .dinh-vi { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.022em; font-weight: 400; color: var(--muc); } /* Nhãn mục: đúng `.eyebrow` của app — viết hoa, giãn rộng, màu son. */ .nhan-hero, .nhan-muc { color: var(--son); font-size: 12.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.6; } .nhan-hero { margin-bottom: 16px; } /* Nhãn màn đầu DÀI gấp ba nhãn mục (43 ký tự). Ở 0.3em nó vỡ hai dòng ngay cả ở 1366px và để "VIỆT" đứng một mình; nhãn dài thì giãn hẹp lại. */ .nhan-hero { letter-spacing: 0.14em; } .nhan-muc { margin-bottom: 12px; } /* Nét bút loang dưới câu định vị. Đây là chuyển động DUY NHẤT tự chạy trên cả trang — mọi mục khác hiện thẳng, không trượt-mờ. Hiệu ứng trượt-mờ rải đều từng mục là dấu hiệu trang máy sinh, và nó làm người đọc phải đợi nội dung. (Chữ sáng dần ở mục video chạy theo CUỘN, tức là do người đọc kéo.) */ .net-but { display: block; width: min(420px, 78%); height: 14px; margin-block: 18px 0; overflow: visible; } .net-but path { fill: none; stroke: var(--son); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: ve-net 1.1s cubic-bezier(0.25, 0.6, 0.3, 1) 0.35s forwards; } @keyframes ve-net { to { stroke-dashoffset: 0; } } .phu-de { margin-block: 26px 0; max-width: 46ch; font-size: var(--t-vua); line-height: 1.55; color: var(--muc-mo); } .phu-de strong { color: var(--muc); font-weight: 500; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block: 30px 0; } .hero-cta .nut { margin: 0; } .hero-cta-phu { font-size: var(--t-nho); color: var(--muc-nhat); } /* Điểm dừng thứ hai, ngay sau ba thẻ sản phẩm. */ .giua-cta { margin-block: 40px 0; } .giua-cta .nut { margin: 0; } /* ---------- tờ giấy demo ---------- Khuôn của MÀN ĐĂNG NHẬP app (`.spec`): đoạn văn trong một thẻ giấy, khung nghĩa trồi lên đè mép dưới thẻ, viền son phía trên — đúng cảnh người ta thấy trong reader khi chạm một từ. Ai đi từ đây sang màn đăng nhập thấy cùng một tờ giấy, cùng câu báo. */ .to-giay { position: relative; margin-block: clamp(36px, 7vw, 56px) 0; } /* Tấm nền sau tờ giấy: `.gate-art` của app. Ở điện thoại thì không — tấm nền ăn thêm hai lề trong một màn 390px, và đoạn chữ Hán mất chỗ đúng lúc nó cần chỗ nhất. */ @media (min-width: 700px) { .to-giay { padding: clamp(28px, 4vw, 44px) clamp(24px, 3.4vw, 40px); background: var(--nen-sau); border-radius: 22px; } } .to-giay-bai { background: var(--the); border: 1px solid var(--chi); border-radius: 14px; box-shadow: var(--bong-the); /* Đáy dày hơn đỉnh: khung nghĩa đè lên 22px cuối. */ padding: 22px clamp(20px, 4vw, 28px) 40px; } .nhan-demo { margin-bottom: 6px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muc-nhat); } .doan-demo { font-family: var(--serif-cn); font-size: clamp(1.25rem, 4.6vw, 1.5rem); /* 2.25 chứ không phải 2.15: mỗi