/* Token thiết kế "chốn riêng của bạn". Mọi màu, chữ, khoảng cách, bo góc, chuyển động của 4 phần đều lấy ở đây. Đặc tả và lý do: plans/261024-0209-cr-chon-rieng-cua-ban-bespoke-product/design-direction.md (mục 3–7). Hai lớp: - --cr-* : khung Chốn Riêng cố định (giá trị trùng trang chủ assets/css/site.css + lamp-effects.css). Không đổi theo khách. - --you-* : phần của khách. Mặc định là màu quán; trang khách ghi đè bằng color.js themeVars() + brief.js axisTokens(). */ :root { /* ---------- Khung CR: phòng tối, đèn vàng ---------- */ --cr-ink-0: #0a0908; /* tối nhất: màn mở đầu, khung cửa đèn */ --cr-ink: #0f0e0c; /* nền phòng tối (trang chủ --ink) */ --cr-ink-2: #171512; /* mặt khối trên nền tối */ --cr-ink-3: #211e1a; /* mặt khối nổi hơn, ô nhập */ --cr-paper: #f2ede3; /* chữ chính trên nền tối, 16.5:1 với --cr-ink */ --cr-muted: #a59d8f; /* chữ phụ trên nền tối, 7.2:1 */ --cr-dim: #5d564b; /* đèn tắt, nét đậm. KHÔNG dùng cho chữ (2.7:1) */ --cr-line: rgb(242 237 227 / .12); --cr-line-strong: rgb(242 237 227 / .24); --cr-lamp: #f2c14e; /* chụp đèn: nút chính, chữ được "bật". OKLCH(0.834 0.141 85.4) */ --cr-lamp-hi: #ffd56e; /* nút đèn khi rê chuột (trang chủ) */ --cr-lamp-ink: #1b1508; /* chữ trên nền vàng */ --cr-lamp-light: #fff4dc; /* ánh đèn phát ra: lõi quầng sáng, chữ đang sáng */ --cr-warm: #ffebc7; /* ánh đèn hắt lên mặt bàn (WARM 1.0, .92, .78 của shader) */ --cr-screen: #b8dbff; /* ánh màn hình laptop (COOL của shader), chỉ làm ánh phụ */ --cr-print: #ece4d4; /* giấy in ảnh dưới đèn */ --cr-print-edge: #d8cdb8; --cr-print-ink: #2a241c; --cr-wood: #2a1e14; /* mặt bàn gỗ tối (bố cục "Mặt bàn") */ --cr-wood-2: #3a2a1c; /* Quầng đèn: cùng hình vũng sáng của trang chủ (rộng hơn cao, lệch xuống dưới chụp đèn). */ --cr-pool: radial-gradient(ellipse 62% 46% at 50% 40%, rgb(255 214 120 / .30) 0%, rgb(242 193 78 / .11) 42%, rgb(242 193 78 / 0) 72%); --cr-pool-soft: radial-gradient(ellipse 70% 50% at 50% 42%, rgb(255 214 120 / .16) 0%, rgb(242 193 78 / .05) 45%, rgb(242 193 78 / 0) 74%); /* Khung cuối của cửa đèn: PHẢI giống hệt trang chủ page-door.js và trang đích bên chon-rieng-ops. */ --cr-door-frame: radial-gradient(circle at 50% 42%, rgba(242, 193, 78, 0.28), rgba(242, 193, 78, 0) 60%), #0f0e0c; --cr-grain: url("data:image/svg+xml;utf8,"); /* Màu cảm xúc "hôm nay": cố định cho mọi người (OKLCH cùng dải sáng), để lịch màu của ai cũng đọc giống nhau. */ --mood-chill: #82cb92; --mood-vui: #feb894; /* cam nắng, sắc 48°: ngoài ±30° quanh sắc đèn để không lẫn với ánh đèn */ --mood-vao-guong: #6cb2ec; --mood-met-xiu: #a496bf; --mood-cang: #ed835e; --mood-buon: #7d97a4; /* chỉ chủ trang thấy */ --mood-co-mat: #c8bca9; /* ô "có mặt": bạn bè thấy thay cho ngày buồn */ /* ---------- Phần của khách (mặc định = màu quán, chế độ đêm) ---------- */ --you-bg: var(--cr-ink); --you-surface: var(--cr-ink-2); --you-text: var(--cr-paper); --you-muted: var(--cr-muted); --you-line: var(--cr-line); --you-1: var(--cr-lamp); /* màu nhấn 1: chữ tên, nét, nhãn. Đủ 4.5:1 với --you-bg */ --you-2: #e9a46a; /* màu nhấn 2: cách màu 1 ít nhất 40 độ sắc */ --you-1-lit: #d9a94a; /* màu nhấn 1 "dưới đèn": mảng lớn (giấy, bìa sổ, ly) */ --you-2-lit: #c98a52; --you-on-1: var(--cr-lamp-ink); --r-scale: 1; /* trục tròn/thẳng */ --space-scale: 1; /* trục gần/xa */ --grain-opacity: .07; /* trục cũ/mới; trang chủ dùng .07 */ --tilt: 1.5deg; /* trục mềm/cứng: độ xô lệch của đồ trên bàn */ /* ---------- Chữ ---------- */ --font-display: "League Spartan", "Be Vietnam Pro", system-ui, sans-serif; /* giọng quán, to */ --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-whisper: "Fraunces", Georgia, "Times New Roman", serif; /* lời thì thầm; KHÔNG thêm Iowan/Charter: lệch dấu ư trên Chrome */ --font-label: "Chivo Mono", ui-monospace, Menlo, Consolas, monospace; /* nhãn kiểu phiếu studio */ --font-you: var(--font-display); /* giọng của khách, đổi theo data-voice */ --font-you-name: var(--font-you); /* tên khách: bộ font nhỏ theo giọng, xem [data-voice] */ --fs-hero: clamp(3.25rem, 15vw, 9.5rem); --fs-1: clamp(2.4rem, 9vw, 5.25rem); --fs-2: clamp(1.85rem, 6vw, 3.5rem); --fs-3: clamp(1.375rem, 3.8vw, 2.125rem); --fs-whisper: clamp(1.25rem, 4.8vw, 2rem); --fs-lead: clamp(1.0625rem, 2.6vw, 1.3125rem); --fs-body: 1rem; --fs-small: .875rem; --fs-label: .75rem; /* nhỏ nhất cho chữ; không dưới 12px */ --lh-hero: .94; /* đủ chỗ cho dấu chồng (Ễ, Ỗ, Ữ) khi chữ to; đừng hạ thấp hơn */ --lh-tight: 1; --lh-snug: 1.15; --lh-whisper: 1.3; --lh-body: 1.6; --track-hero: -.04em; --track-1: -.035em; --track-2: -.025em; --track-3: -.015em; --track-label: .08em; --measure: 34ch; /* dòng chữ thân trên điện thoại */ --measure-wide: 62ch; /* ---------- Khoảng cách (bậc 4px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --gut: clamp(16px, 4.5vw, 56px); /* lề hai bên, như trang chủ */ --section: calc(clamp(96px, 18vh, 200px) * var(--space-scale)); /* nhịp giữa hai chương */ --max: 1360px; --grid-gap: clamp(12px, 2vw, 24px); /* ---------- Bo góc ---------- */ --r-paper: 2px; /* ảnh in, giấy: gần như vuông */ --r-xs: 6px; --r-sm: 10px; --r: 14px; /* ảnh, thẻ: như trang chủ */ --r-lg: 22px; /* mép trên của tấm trượt từ đáy */ --r-pill: 999px; /* nút, chip */ --r-you: calc(var(--r) * var(--r-scale)); /* thẻ trên trang khách, theo trục tròn/thẳng */ /* ---------- Độ nổi (nền tối: bóng gần như không thấy, nên dựa vào quầng đèn + mép sáng) ---------- */ --shadow-print: 0 2px 6px rgb(0 0 0 / .35), 0 22px 44px -22px rgb(0 0 0 / .75); --shadow-lift: 0 4px 10px rgb(0 0 0 / .35), 0 34px 60px -24px rgb(0 0 0 / .8); --shadow-sheet: 0 -20px 60px rgb(0 0 0 / .55); --drop-print: drop-shadow(0 14px 18px rgb(0 0 0 / .45)); /* dùng khi phần tử đang chuyển động */ /* ---------- Lớp chồng ---------- */ --z-raised: 10; --z-sticky: 20; --z-nav: 50; --z-sheet: 70; --z-overlay: 80; --z-grain: 90; --z-intro: 100; --z-door: 300; --z-tap: 400; /* ---------- Chuyển động (luật Emil: vào/ra ease-out, UI dưới 300ms, không ease-in) ---------- */ --ease-out: cubic-bezier(.23, 1, .32, 1); /* phần tử vào/ra, phản hồi */ --ease-in-out: cubic-bezier(.77, 0, .175, 1); /* vật di chuyển trên màn (dải màu gom lại, camera bay) */ --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* tấm trượt từ đáy */ --ease-cr: cubic-bezier(.16, 1, .3, 1); /* cảnh dài kiểu trang chủ (--ease của site.css) */ --ease-door: cubic-bezier(.65, 0, .35, 1); /* cửa đèn chuyển trang (page-door của trang chủ) */ --ease-nay: cubic-bezier(.34, 1.36, .64, 1); /* vật đặt xuống hơi quá đà rồi nằm yên (hien_ra de nay); chỉ cho transform, không cho opacity, tên, đèn */ --ease-mem: cubic-bezier(.39, .575, .565, 1); /* hiện ra trôi đều rồi lắng chậm (hien_ra de mem); dùng với thời lượng dài */ --d-press: 140ms; --d-fast: 180ms; --d-ui: 240ms; --d-sheet: 380ms; --d-reveal: 640ms; --d-scene: 1100ms; --d-door: 500ms; --stagger: 60ms; --move: 1; /* nhịp của khách: still 0, soft .5, lively 1; giảm chuyển động 0 */ --rise: calc(16px * var(--move)); /* quãng trượt khi hiện ra */ color-scheme: dark; } /* Nhịp chuyển động theo brief (motion.tempo). still: chỉ còn mờ hiện và đổi màu. */ [data-tempo="still"] { --move: 0; } [data-tempo="soft"] { --move: .5; } [data-tempo="lively"] { --move: 1; } /* Ba chế độ sáng theo giờ khách hay tới (brief.room.visit_time). color.js ghi đè --you-* theo sắc của khách; các giá trị dưới đây là mặc định khi chưa có brief. */ [data-mode="sang"] { --you-bg: #f1ebe0; --you-surface: #e6ddcd; --you-text: #221c15; --you-muted: #62594f; --you-line: rgb(29 25 20 / .14); --you-1: #8a6410; --you-on-1: #f6f1e7; --you-1-lit: #f3d48a; color-scheme: light; } /* Nét đậm (viền nút --ghost, thanh nắm tấm trượt, gạch phiếu, gạch dưới ô nhập) trên nền sáng: màu kem của khung tối chìm hẳn vào nền, nên đổi sang mực tối. Độ đục .32 cho viền tương phản với nền khoảng 2:1, bằng chế độ đêm. */ [data-mode="sang"] { --cr-line-strong: rgb(29 25 20 / .32); } [data-mode="chieu"] { --you-bg: #1f1711; --you-surface: #2c2119; } /* Giọng chữ của khách (brief.type.voice): chỉ đổi chữ tên và tiêu đề của khách, chữ thân luôn là Be Vietnam Pro. */ [data-voice] { --you-name-weight: 800; --you-name-track: var(--track-hero); --you-name-lh: var(--lh-hero); --you-name-style: normal; --you-name-vari: normal; } /* Font cho TÊN khách: bộ nhỏ chỉ có chữ cái Việt + Latin, đúng độ đậm của tên (fonts.css, fetch-fonts.py NAME_FACES), tải trong khoảng 11–18 KB thay vì 40–90 KB. Ký tự ngoài bộ (emoji, ñ…) tự rơi về font đầy đủ phía sau. Gọn và máy chữ dùng thẳng font thân/nhãn vốn đã tải sẵn. Chỉ dùng cho tên; chữ khác giọng khách vẫn dùng --font-you. */ [data-voice] { --font-you-name: var(--font-you); } [data-voice="dam"] { --font-you-name: "CRCB Ten Dam", var(--font-you); } [data-voice="tron"] { --font-you-name: "CRCB Ten Tron", var(--font-you); } [data-voice="viet_tay"] { --font-you-name: "CRCB Ten Viet Tay", var(--font-you); } [data-voice="sach_cu"] { --font-you-name: "CRCB Ten Sach Cu", var(--font-you); } [data-voice="viet_tay"] { --font-you: "Shantell Sans", var(--font-body); --you-name-weight: 650; --you-name-track: -.01em; --you-name-lh: 1; } [data-voice="sach_cu"] { --font-you: "Fraunces", Georgia, serif; --you-name-weight: 450; --you-name-track: -.025em; --you-name-lh: 1; --you-name-style: italic; } [data-voice="gon"] { --font-you: "Be Vietnam Pro", var(--font-body); --you-name-weight: 300; --you-name-track: -.045em; --you-name-lh: 1; } [data-voice="tron"] { --font-you: "Baloo 2", var(--font-body); --you-name-weight: 750; --you-name-track: -.015em; --you-name-lh: 1; } [data-voice="dam"] { --font-you: "Bricolage Grotesque", var(--font-body); --you-name-weight: 800; --you-name-track: -.025em; --you-name-lh: .95; --you-name-vari: "opsz" 96; } [data-voice="may_chu"] { --font-you: "Chivo Mono", var(--font-label); --you-name-weight: 420; --you-name-track: -.03em; --you-name-lh: 1.04; } /* Giảm chuyển động: hệ điều hành bật, hoặc khách bật ở chân trang (html[data-motion="reduce"]). */ @media (prefers-reduced-motion: reduce) { :root { --move: 0; } } [data-motion="reduce"] { --move: 0; }