/* ========================================================================== tokens.css — Toàn bộ biến thiết kế. Muốn đổi tông cả trang thì sửa ở đây. Trang có hai giao diện, chọn bằng thuộc tính data-theme trên thẻ : data-theme="dark" "đèn cao áp trong đêm" — nền đen xanh, chữ trắng ngà như phim nhựa, điểm nhấn vàng natri của đèn đường. data-theme="light" "giấy in ban ngày" — nền giấy ngả ấm, chữ đen xanh, điểm nhấn vàng cháy đủ tối để đọc được trên nền sáng. Quy ước đặt tên, cứ theo đúng thì đổi giao diện không phải sờ vào file khác: --bg --surface nền trang, nền khối nổi --fg --fg-muted --fg-faint ba bậc chữ --accent vàng ĐỌC ĐƯỢC: chữ, viền mảnh, outline focus --accent-solid vàng RỰC: dùng làm nền mảng, chấm, thanh chạy --on-accent màu chữ nằm TRÊN nền --accent-solid --border --border-strong đường kẻ Đừng dùng thẳng các biến bảng màu thô (--ink, --bone, --sodium…) ở file khác: chúng chỉ tồn tại cho giao diện tối, sang giao diện sáng là sai màu. ========================================================================== */ :root { /* --- Bảng màu thô, giao diện tối --------------------------------------- */ --ink: #06070a; /* nền chính, đen ngả xanh */ --ink-raise: #0c0e13; /* khối nổi lên: thẻ, panel */ --ink-line: #191d27; /* đường kẻ, viền */ --bone: #efebe2; /* chữ chính, trắng ngà ấm */ --bone-dim: #a8a49c; /* chữ phụ */ --steel: #8b94a4; /* chữ mờ, nhãn, metadata (≥6:1 trên nền tối) */ --sodium: #ffb23a; /* vàng đèn cao áp: link, hover, số liệu sống */ --sodium-dim: #6b4a17; /* vàng tắt: viền, nền nhạt của điểm nhấn */ --night: #3b2bff; /* chàm: chỉ dùng cho quầng sáng, không dùng cho chữ */ /* --- Ngữ nghĩa (giao diện tối là mặc định) ----------------------------- */ --bg: var(--ink); --surface: var(--ink-raise); --fg: var(--bone); --fg-muted: var(--bone-dim); --fg-faint: var(--steel); --accent: var(--sodium); --accent-solid: var(--sodium); --on-accent: var(--ink); --border: var(--ink-line); --border-strong: #2a303d; /* Màu pha sẵn — nơi cần alpha nên không lồng var() vào rgba() được */ --glow-near: rgba(59, 43, 255, 0.28); /* tâm quầng sáng sau hero */ --glow-far: rgba(59, 43, 255, 0.08); /* rìa quầng sáng */ /* Dải mờ và chữ chú thích nằm ĐÈ LÊN ẢNH, không nằm trên nền trang. Ảnh thì tối sáng thế nào là chuyện của ảnh, không đổi theo giao diện — nên hai biến này cố tình giữ nguyên ở cả hai bên. Cho chúng lật theo giao diện sáng là chữ đen trên ảnh tối, không đọc được. */ --photo-scrim: rgba(6, 7, 10, 0.92); --photo-fg: #d5d1c9; --accent-wash: rgba(255, 178, 58, 0.09); /* vệt sáng quét qua hàng dự án */ --pulse-ring: rgba(255, 178, 58, 0.55); /* vòng sóng của chấm nhịp */ /* Con trỏ tuỳ biến trộn màu kiểu difference nên luôn dùng màu sáng: trên nền tối nó ra trắng, trên nền giấy nó ra đen. Đổi theo giao diện là mất luôn độ tương phản ở một trong hai bên. */ --cursor-ink: #efebe2; --grain-opacity: 0.045; /* hạt phim: nền tối chịu được nhiều hạt hơn */ /* --- Chữ -------------------------------------------------------------- */ --font-display: 'Archivo', 'Arial Narrow', Impact, sans-serif; --font-body: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace; /* Thang chữ — clamp để không cần media query cho cỡ chữ */ --t-hero: clamp(3.5rem, 15.5vw, 15rem); --t-xxl: clamp(2.6rem, 7.4vw, 6.5rem); --t-xl: clamp(2rem, 4.6vw, 3.6rem); --t-lg: clamp(1.4rem, 2.4vw, 2rem); --t-md: clamp(1.05rem, 1.35vw, 1.25rem); --t-base: 1rem; --t-sm: 0.875rem; --t-xs: 0.8125rem; --t-mono: 0.75rem; /* cỡ chữ của nhãn kỹ thuật và chữ mono nhỏ (tối thiểu 12px) */ /* --- Nhịp khoảng cách ------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; --section-y: clamp(6rem, 14vh, 11rem); /* khoảng thở dọc giữa các section */ /* --- Bố cục ----------------------------------------------------------- */ --page-x: clamp(1.25rem, 4.5vw, 4.5rem); --max-w: 100rem; --radius: 2px; /* gần như vuông — chất kỹ thuật */ --radius-lg: 4px; /* --- Chuyển động ------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo.out — dùng nhiều nhất */ --ease-io: cubic-bezier(0.76, 0, 0.24, 1); /* vào/ra đối xứng */ --dur-fast: 0.25s; --dur-base: 0.55s; --dur-slow: 1.1s; /* --- Lớp chồng -------------------------------------------------------- */ --z-grain: 1; --z-content: 2; --z-nav: 50; --z-cursor: 90; --z-transition: 95; --z-preloader: 100; color-scheme: dark; } /* ========================================================================== Giao diện sáng. Chỉ ghi đè lớp ngữ nghĩa — bảng màu thô ở trên giữ nguyên để những chỗ cố tình cần màu của ban đêm (con trỏ) vẫn lấy được. ========================================================================== */ :root[data-theme="light"] { --bg: #f4f1e9; /* giấy ngả ấm, không phải trắng tinh */ --surface: #fbf9f4; /* khối nổi lên sáng hơn nền một bậc */ --fg: #14161c; /* đen ngả xanh, cùng họ với --ink */ --fg-muted: #3f434d; --fg-faint: #5a5f6b; /* ≥5:1 trên --bg và --surface */ --accent: #8f5000; /* vàng cháy — 5.5:1 trên nền giấy, đọc được */ --accent-solid: #f2a01e; /* vàng rực, chỉ làm nền chứ không làm chữ */ --on-accent: #0a0c11; --border: #e2dcd1; --border-strong: #c9c1b3; --glow-near: rgba(59, 43, 255, 0.075); --glow-far: rgba(59, 43, 255, 0.022); --accent-wash: rgba(242, 160, 30, 0.16); --pulse-ring: rgba(242, 160, 30, 0.50); --grain-opacity: 0.026; /* hạt tối trên giấy lộ rõ hơn, phải bớt đi */ color-scheme: light; } /* Thanh nav trộn màu kiểu difference để chữ tự đảo khi trôi qua khối sáng. Trên nền giấy phép trừ đó kéo chữ đen về xám nhạt, mất luôn độ tương phản — nên giao diện sáng dùng chồng màu bình thường. Bỏ phép trừ thì mất luôn thứ nó đang gánh: nav trong suốt, chữ của section cuộn lên đè thẳng vào chữ nav, hai lớp chữ chồng nhau đọc không ra. Trả lại bằng một dải nền mờ dần từ màu giấy xuống trong suốt — nội dung chui xuống dưới thì nhoè đi thay vì đâm xuyên qua. */ :root[data-theme="light"] .nav { mix-blend-mode: normal; background: linear-gradient(to bottom, var(--bg) 42%, transparent); } /* Lúc bấm đổi giao diện: cho màu chạy sang nhau trong khoảng 0.3 giây rồi gỡ class ra. Để transition thường trực trên * thì mọi lần hover, mọi lần ScrollTrigger đổi màu đều phải đi qua bộ nội suy — trả giá cả phiên chỉ để đẹp một cái chớp mắt. */ html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after { transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), fill 0.3s var(--ease-out) !important; } /* Người dùng bật "giảm chuyển động" — rút mọi thời lượng về gần 0. JS đọc thêm cờ này qua matchMedia để tắt hẳn scrub và pin. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01s; --dur-base: 0.01s; --dur-slow: 0.01s; } html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after { transition: none !important; } }