/* ============================================================ 墨讀 · Mặc Độc — landing Nền tối là mặt bàn. Vật SÁNG duy nhất trên trang là chính sản phẩm: tờ giấy demo và ảnh chụp app. Không thẻ trang trí nào sáng. Nhờ vậy tương phản mang thông tin — sáng là sản phẩm, tối là mọi thứ còn lại — chứ không phải để cho đẹp. ============================================================ */ /* ---------- 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 ~149KB, 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`; 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. 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"; /* 42 chữ, giữ trục wght: 400 thân bài · 600 con dấu · 700 chữ hiệu. */ src: url("/font/noto-serif-sc.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } :root { /* mực & giấy — sắc ấm, lấy từ chính token của app rồi đảo vai */ --muc: #14120d; /* nền: mực loãng trên mặt bàn tối */ --muc-cao: #1f1b14; /* mặt nổi hiếm khi dùng */ --giay: #efe9dc; /* CHÍNH LÀ màu nền của app, nay là màu chữ */ --giay-mo: #c9c1ae; --giay-nhat: #948b77; --chi: #35301f; /* kẻ chỉ mảnh */ /* son — dùng ở ĐÚNG ba chỗ: con dấu, từ đang chạm, nút gửi */ --son: #e0654f; /* trên nền tối */ --son-dam: #b23529; /* ruột con dấu, y hệt app */ --ngoc: #86a890; --vang: #c9a86a; /* "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: "Nội dung 财经 trên YouTube" và chữ hiệu 墨讀 ở CHÂN TRANG cả ba trang đang vẽ bằng Noto Sans CJK JP, một mặt chữ KHÔNG CHÂN và của tiếng Nhật. Kết quả: cùng một trang có hai chữ hiệu 墨讀 trông khác nhau, đầu trang một kiểu chân trang một kiểu. 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; /* 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. */ --t-display: clamp(2.6rem, 8.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(64px, 12vw, 128px); /* khoảng giữa các mục */ --rong: 680px; /* dưới 80 ký tự mỗi dòng */ --khung-max: 1080px; /* bề rộng khung ngoài cùng */ } * { box-sizing: border-box; margin: 0; padding: 0; } html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } body { background: var(--muc); color: var(--giay); 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 rất mờ + hai vệt sáng lệch tâm, để nền không phẳng lì như một khối màu. Cùng thủ pháp với app, đảo sang tông tối. */ background-image: radial-gradient(ellipse 80% 50% at 15% 0%, rgba(224, 101, 79, 0.07), transparent 60%), radial-gradient(ellipse 70% 40% at 90% 30%, rgba(134, 168, 144, 0.05), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); background-attachment: fixed; } /* MÀU LINK GỐC. Trước đây KHÔNG có luật `a` nào ở mức gốc — chỉ có `.chan a`, `.dong-y a`, `.quay-lai`. Nên một liên kết nằm trong

rơi về màu mặc định của trình duyệt: xanh dương đậm trên nền #14120d, tương phản khoảng 1,3:1. Chỗ nó xảy ra là địa chỉ thư liên hệ trong mục "Ai làm cái này" — tức là đúng dòng người ta cần đọc được nhất để quyết định có tin hay không. Đặt ở gốc chứ không vá riêng `.than a`: 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. */ 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); } /* KHÔNG có lớp "cột chữ hẹp" nào ở đây, và đó là điểm chính. Bản đầu dựng trang theo mô hình một cột 680px — bố cục của BÀI BÁO. Trên màn 1194px nó để trống 464px bên phải suốt cả trang; ở 1440 và 1920 còn tệ hơn. Kéo cột đó sang trái cho thẳng hàng chỉ làm chỗ trống lộ ra rõ hơn, không chữa được gì — đó là vá triệu chứng. Thay bằng: mỗi mục có bố cục riêng dùng hết bề ngang, xếp chồng thành một cột ở điện thoại. Bề rộng đọc được vẫn giữ, nhưng giữ Ở TỪNG CỘT (`.than { max-width: 62ch }`) chứ không bằng cách bóp cả mục. */ .doi { display: grid; gap: clamp(30px, 4.5vw, 60px); } @media (min-width: 900px) { .doi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } /* Cột trái nhỉnh hơn khi nó mang lập luận còn cột phải mang bằng chứng. */ .doi.lech { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } } /* ---------- masthead ---------- */ .dau-trang { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 26px 18px; border-bottom: 1px solid var(--chi); } .hieu { display: flex; align-items: center; gap: 14px; } .hieu .glyph { font-family: var(--serif-cn); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: 3px; color: var(--giay); } .hieu .ten { font-size: var(--t-nho); color: var(--giay-nhat); letter-spacing: 0.06em; } /* Con dấu thật: ô vuông son ĐẶC, chữ màu giấy khoét ngược ra — đúng cách một con dấu 阳文 hoạt động. Viền rỗng ruột là cách vẽ của giao diện, không phải của con dấu. */ .dau { width: 34px; height: 34px; border-radius: 5px; background: var(--son-dam); color: var(--giay); font-size: 19px; font-weight: 600; transform: rotate(-5deg); box-shadow: 0 1px 0 rgba(0,0,0,0.35); } /* ---------- hero ---------- */ /* Ở điện thoại: một cột, lời hứa rồi tới sản phẩm. Từ 1000px: HAI CỘT — lời hứa trái, tờ giấy demo phải. Không phải để lấp chỗ trống: nó đặt lời hứa và bằng chứng cạnh nhau trong cùng một tầm mắt, và nó bó dòng chữ Hán về bề rộng đọc được. Một cột ở 1440px cho dòng chữ Hán dài gần 1000px — quá dài để đọc, mà nửa phải màn hình thì bỏ không. */ .hero { padding-block: clamp(48px, 11vw, 104px) 0; } @media (min-width: 1000px) { .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); 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. Người ta chạm để đọc nghĩa, không phải để xem trang nhún nhảy. `start` cắt sợi dây đó. */ align-items: start; } .hero .to-giay { margin-top: 0; } /* Bỏ trần 15ch: cột lưới đã bó bề rộng đọc được rồi, nên giữ thêm trần chỉ làm tiêu đề vỡ thành năm dòng ngắn trong một cột rộng gấp rưỡi nó. */ /* --t-display neo theo `vw`, đúng khi h1 chiếm cả bề ngang. Từ 1000px nó chỉ còn nằm trong một cột rộng ~500px, nên tính theo cả màn hình là tính sai vật chứa: đo ở 1194px được h1 cao 529px trong khung 834px, đẩy câu phụ đề xuống y=770–882 — BỊ CẮT bởi mép dưới màn hình, cùng với chỗ đăng ký. Cỡ chữ ở đây neo theo cột, không theo màn hình. */ .hero .dinh-vi { max-width: none; 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; text-wrap: balance; max-width: 15ch; } /* Nét bút loang dưới câu định vị. Đây là MỘT khoảnh khắc chuyển động duy nhất không do người dùng kích hoạt 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ó cũng làm người đọc phải đợi nội dung. */ .net-but { display: block; width: min(420px, 78%); height: 14px; margin: 18px 0 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: 26px 0 0; max-width: 46ch; font-size: var(--t-vua); line-height: 1.55; color: var(--giay-mo); } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 30px 0 0; } .hero-cta .nut { margin: 0; } .hero-cta-phu { font-size: var(--t-nho); color: var(--giay-nhat); max-width: 30ch; } /* Điểm dừng thứ hai, ngay sau loạt ảnh sản phẩm. */ .giua-cta { margin: 40px 0 0; } .giua-cta .nut { margin: 0; } /* ---------- tờ giấy demo: vật sáng đầu tiên trên trang ---------- */ .to-giay { position: relative; margin: clamp(34px, 7vw, 56px) 0 0; background: var(--giay); color: #211e18; border-radius: 3px; padding: clamp(26px, 5vw, 40px); /* Bóng nhiều lớp: một lớp sát để tách khỏi nền, một lớp xa và mềm để tờ giấy có vẻ NẰM TRÊN mặt bàn chứ không dán vào nền. */ box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.45), 0 40px 80px rgba(0,0,0,0.35); } /* CỐ Ý KHÔNG có lớp gradient giả "mép giấy vênh" ở đây. Đã thử: một ::before `position:absolute; inset:0` vẽ ĐÈ LÊN chữ, vì con của .to-giay không được định vị. Lớp trắng 50% ở góc trên làm dòng chữ Hán đầu tiên nhạt hẳn so với dòng cuối — tụt tương phản đúng chỗ quan trọng nhất của cả trang, để đổi lấy một hiệu ứng không ai nhận ra. Muốn thêm lại thì phải đặt nó dưới chữ (z-index âm) và đo tương phản sau khi đặt, chứ không đặt bằng mắt. */ .doan-demo { font-family: var(--serif-cn); font-size: clamp(1.25rem, 4.6vw, 1.6rem); /* 2.25 chứ không phải 2.15: mỗi