/* ===== Chuyện Chúng Mình - luxury & minimalist (v43): ngà, be, champagne; Cormorant Garamond + Plus Jakarta Sans ===== */ /* avoid-ai-design-ignore-file: SD4 (chữ hoa giãn chữ cho tiêu đề mục, masthead, nút, nhãn số liệu là hướng "luxury & minimalist" người dùng chọn 21/10/2026, có ảnh tham chiếu) */ :root{ /* ===== MÀU (không còn đỏ). Tên cũ giữ làm bí danh để CSS riêng của các trang chưa làm lại vẫn chạy ===== */ --paper:#FBF8F3; /* nền trang (ngà) */ --surface:#FFFFFF; /* mặt giấy: modal, thẻ, ô nhập, phong bì */ --sand:#E8DDD3; /* khối nền */ --taupe:#D9C7BE; /* khung, viền đậm, gạch chân ô nhập */ --ink:#4A423C; /* chữ: 9.3:1 trên ngà */ --muted:#766A61; /* chữ phụ: 4.95:1 trên ngà, 5.24 trên trắng */ --art:#8A7F76; /* nét vẽ, icon (đồ họa, không cho chữ) */ --rule:#E6DED5; /* đường kẻ */ --champagne:#B39B82; /* trái tim, dấu sáp, nhấn đồ họa (không cho chữ) */ --champagne-ink:#7D6650; /* nút chính (chữ trắng 5.4:1), chữ "chưa đọc" (5.1:1) */ --champagne-deep:#6A5442; /* hover nút chính */ --scrim:43 35 29; /* lớp phủ trên ảnh (rgb): ngoại lệ duy nhất của luật cấm gradient */ --accent:var(--champagne); --accent-ink:var(--champagne-ink); --accent-deep:var(--champagne-deep); /* bí danh cũ */ --tint:var(--sand); /* bí danh cũ (khối "một lý do") */ --field:var(--surface); --field-line:var(--taupe); --contact:rgb(74 66 60 / .16); /* bóng tiếp xúc sắc 2px, CHỈ cho đồ vật (phong bì, hũ, vòng quay) */ --radius:2px; /* ảnh nhỏ; nút và ô nhập vuông góc */ --serif:'Cormorant Garamond',Georgia,serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; /* ===== THANG CHỮ: 6 bậc (390 -> 1440), mọi cỡ chữ lấy từ đây ===== hiển thị 40 -> 104 | h1 30 -> 56 | h2 20 -> 30 | h3 17 -> 21 | thân 15 -> 16 | nhỏ 12 -> 13. Ô nhập luôn 16px (iOS phóng to trang khi chữ ô nhập < 16px). Chữ vẽ trong đồ vật SVG co giãn theo hình, không tính. */ --t-display:clamp(40px,calc(16.23px + 6.095vw),104px); --t-h1:clamp(30px,calc(20.34px + 2.476vw),56px); --t-h2:clamp(20px,calc(16.29px + .952vw),30px); --t-h3:clamp(17px,calc(15.51px + .381vw),21px); --t-body:clamp(15px,calc(14.63px + .0952vw),16px); --t-small:clamp(12px,calc(11.63px + .0952vw),13px); /* ===== THANG KHOẢNG CÁCH ===== */ --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --s8:160px; --gap-sec:var(--s6); /* khoảng giữa các mục: 64 điện thoại, 160 từ 900 */ --gut:var(--s4); /* lề trang + khe cột: 24 điện thoại, 40 từ 900 */ --max:1200px; /* lưới 12 cột tối đa 1200 (gồm lề) */ --bar-h:52px; /* thanh menu cố định (chưa tính phần tai thỏ) */ /* ===== NHỊP CHUYỂN ĐỘNG (v44.8): common.js (motion, menu) đọc các biến này. Đổi tốc độ toàn site: CHỈ đổi --motion-scale. Giá trị gốc chọn để ở .75 ra đúng: chữ 450 | ảnh, bay ngang 600 | nét vẽ 700 | lệch lần lượt 50 | nền menu 200 | lệch trong hàng ảnh Album 40. Không theo hệ số (chậm có chủ đích): ảnh bìa, ảnh nền băng đếm ngược phóng chậm, đếm số liệu. ===== */ --motion-scale:.75; --motion-fast:calc(600ms * var(--motion-scale)); /* chữ, dòng danh sách, phong bì nhích lên */ --motion-base:calc(800ms * var(--motion-scale)); /* ảnh mở rèm, bay ngang, hàng ảnh Album */ --motion-slow:calc(933ms * var(--motion-scale)); /* nét vẽ tự vẽ, ngày + tên trên ảnh bìa */ --motion-stagger:calc(67ms * var(--motion-scale)); /* lệch giữa các phần tử cùng nhóm */ --motion-menu:calc(267ms * var(--motion-scale)); /* nền menu mở */ --motion-stagger-row:calc(53ms * var(--motion-scale)); /* lệch giữa các ảnh trong một hàng Album */ --bar:calc(var(--bar-h) + env(safe-area-inset-top)); } @media(min-width:900px){ :root{ --gut:var(--s5); --gap-sec:var(--s8) } } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--sans);font-size:var(--t-body);font-weight:300;line-height:1.7;color:var(--ink); background:var(--paper);overflow-x:hidden;font-variant-numeric:lining-nums tabular-nums; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* số lining + tabular kế thừa từ body. KHÔNG dùng thuộc tính gộp font (nó đặt lại font-variant-numeric về số kiểu cổ của Cormorant): luôn viết font-family / font-size / font-weight / line-height riêng. Ô nhập, nút: trình duyệt tự gán font riêng -> cho kế thừa lại. */ button,input,select,textarea{font-variant-numeric:inherit} /* thanh cuộn của hộp, tấm, danh sách cuộn riêng: mảnh, màu khung be (không dùng thanh xám mặc định) */ @supports not selector(::-webkit-scrollbar){ .modal,.menu-sheet,.sheet,.picker,.qlog{scrollbar-width:thin;scrollbar-color:var(--taupe) transparent} } .modal::-webkit-scrollbar,.menu-sheet::-webkit-scrollbar,.sheet::-webkit-scrollbar,.picker::-webkit-scrollbar,.qlog::-webkit-scrollbar{width:6px;height:6px} .modal::-webkit-scrollbar-thumb,.menu-sheet::-webkit-scrollbar-thumb,.sheet::-webkit-scrollbar-thumb,.picker::-webkit-scrollbar-thumb,.qlog::-webkit-scrollbar-thumb{background:var(--taupe)} .modal::-webkit-scrollbar-track,.menu-sheet::-webkit-scrollbar-track,.sheet::-webkit-scrollbar-track,.picker::-webkit-scrollbar-track,.qlog::-webkit-scrollbar-track{background:transparent} .modal::-webkit-scrollbar-button,.menu-sheet::-webkit-scrollbar-button,.sheet::-webkit-scrollbar-button,.picker::-webkit-scrollbar-button,.qlog::-webkit-scrollbar-button{display:none} body:not(.ready) .site{display:none} .site{overflow-x:clip;padding-top:var(--bar)} /* chừa sẵn chỗ cho thanh menu cố định: trang không đổi chiều cao khi JS chạy */ html{scroll-padding-top:calc(var(--bar) + var(--s3))} /* focus bằng bàn phím không lọt dưới thanh menu */ ::selection{background:var(--ink);color:var(--paper)} img{display:block;max-width:100%} a{color:inherit} b,strong{font-weight:500} :focus-visible{outline:1px solid var(--ink);outline-offset:4px} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} /* ===== Chữ dùng chung ===== Cormorant Garamond: số mặc định là số kiểu cổ -> body bật lining-nums tabular-nums cho mọi chỗ (số liệu, ngày, bộ đếm). Chữ hoa giãn chữ chỉ là kiểu hiển thị (text-transform); chữ nguồn theo quy tắc câu chữ. Chữ hoa nhiều dòng: line-height >= 1.12. */ .kicker{font-weight:400;font-size:var(--t-small);line-height:1.5;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .label{font-family:var(--sans);font-size:var(--t-small);font-weight:400;color:var(--muted);line-height:1.5} .sec-head{border-top:1px solid var(--rule);padding-top:var(--s3);margin-bottom:var(--s4)} .textlink{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;text-decoration:none; text-decoration-thickness:1px;text-underline-offset:4px} .textlink:hover,.textlink:focus-visible{text-decoration-line:underline} .danger{font-weight:500} /* chữ xóa ở bước xác nhận: đậm hơn, không đổi màu */ /* link chữ hoa nhỏ có gạch chân be (vd "XEM ALBUM") */ .more{display:inline-block;font-weight:400;font-size:var(--t-small);line-height:1.4;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink); text-decoration:none;border:0;border-bottom:1px solid var(--taupe);padding:0 0 var(--s1);background:none;cursor:pointer} .more:hover{border-bottom-color:var(--ink)} /* ===== Hình vẽ nét đơn (SVG , ký hiệu nằm trong từng trang): nét 1px màu --art, không tô ===== */ .art{fill:none;stroke:var(--art);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} svg.draw{display:block;width:40px;height:40px;overflow:visible} /* ===== Tiêu đề mục: hình vẽ phía trên, chữ hoa giãn chữ, căn giữa ===== */ .sec{padding-top:var(--gap-sec)} .sec-title{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-bottom:var(--s5);text-align:center} .sec-title h2{font-weight:300;font-size:var(--t-h2);line-height:1.3;font-family:var(--serif);text-transform:uppercase;letter-spacing:.14em} @media(min-width:900px){ .sec-title{margin-bottom:var(--s6)} } /* ===== LƯỚI 12 CỘT (từ 900px; dưới đó một cột theo mép .wrap) ===== */ @media(min-width:900px){ .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)} .g12 > .c-side{grid-column:1 / span 5} .g12 > .c-main{grid-column:6 / span 7} .g12 > .c-full{grid-column:1 / -1} } /* ===== Dải sau thanh trạng thái (PWA trên iPhone, status-bar-style black-translucent) ===== Nội dung tràn dưới giờ/pin (chữ trắng): nền ngà thì không đọc được -> dải champagne đậm cố định, cao đúng env(safe-area-inset-top). Ngoài app (Safari) và desktop inset = 0 nên không hiện. Trang chủ: ẩn khi còn ảnh bìa, index đặt --band-o theo cuộn. Menu toàn màn, màn đăng nhập: luôn hiện; ảnh lớn (nền tối): ẩn. */ body::before{content:"";position:fixed;left:0;right:0;top:0;z-index:99;height:env(safe-area-inset-top); background:var(--champagne-ink);opacity:var(--band-o,1);pointer-events:none;transition:opacity .2s} body:has(.menu-sheet:not([hidden]))::before,body:has(.auth:not(.hide))::before{opacity:1} body:has(.lightbox:not([hidden]))::before{opacity:0} /* ===== Thanh menu cố định (v44.6): cao 52px + phần tai thỏ, luôn hiện ===== common.js (mountUserChip -> mountNav) chèn