/* ===================================================================== HỆ THIẾT KẾ — PWA quản lý phòng gym Hướng thị giác: "bảng điểm & sổ tay", lấy màu từ bảng hiệu của phòng — khiên đen, chữ vàng kim. Một tấm bảng đen duy nhất mang sức nặng thị giác (số liệu hôm nay, dưới dải vàng dập nổi); phần còn lại là sổ tay sáng ngả giấy, kẻ mảnh, chữ số cột thẳng. Điều hướng theo lối ứng dụng điện thoại, không theo lối web: - mỗi màn hình là một vùng cuộn riêng, thanh trên và thanh dưới đứng yên - màn gốc: tiêu đề lớn nằm trong nội dung, thu nhỏ về thanh trên khi cuộn - màn con: thanh trên gọn, nút quay lại bên trái, tiêu đề canh giữa - biểu mẫu mở dạng tấm trượt từ đáy (bottom sheet), không phải trang mới Một file, không build step. Mọi số đo nằm trên lưới 4px. ===================================================================== */ @import url("fonts.css"); /* ---- 1. Token: màu -------------------------------------------------- Lấy theo nhận diện của phòng: khiên đen, chữ vàng kim. Xám lệch ấm về phía vàng, không dùng xám trung tính. MỘT bảng màu duy nhất cho cả sáng lẫn tối: `light-dark(sáng, tối)` tự chọn theo `color-scheme` đang có hiệu lực. Trước đây bảng tối được chép ba lần (media query, data-theme, màn đăng nhập) và đã có lần lệch nhau thật — bản tối bật bằng tay còn giữ màu xanh của phiên bản cũ. Chép tay thì sớm muộn cũng lệch, nên đừng dựng lại kiểu đó. Muốn một vùng bất kỳ đổi chế độ: đặt `color-scheme` cho vùng đó, KHÔNG định nghĩa lại token màu. Xem `.screen--signin` làm mẫu. */ :root{ color-scheme:light dark; /* thang vàng kim, sáng dần rồi tối lại — đúng lối chữ dập nổi kim loại trên bảng hiệu. Chỉ dùng cho dải viền và con số chủ đạo. Không đổi theo chế độ: đây là màu thương hiệu, không phải màu nền. */ --gold-1:#fff3c4; --gold-2:#f0cf6b; --gold-3:#d4a72c; --gold-4:#a67c0c; --gold-5:#6b4e05; --c-plane: light-dark(#f4f2ec,#0a0906); --c-surface:light-dark(#fffdf8,#14120c); --c-sunken: light-dark(#eae5d9,#1d1a12); --c-line: light-dark(#ddd6c6,#2b271c); --c-ink: light-dark(#15120a,#ffffff); --c-ink-2: light-dark(#5c5545,#b4aa93); --c-ink-3: light-dark(#736b59,#7c7462); /* Nhấn phải gánh hai vai khác nhau: chữ trên nền sáng cần đủ tương phản nên dùng vàng sẫm, còn nút bấm mới được xài vàng kim thật với chữ đen. Một token không kham nổi cả hai, nên tách ra. */ --c-accent: light-dark(#8a6608,#f0cf6b); --c-accent-ink: light-dark(#ffffff,#1a1405); --c-accent-soft: light-dark(#f6ecd0,#2a2210); --c-accent-fill: light-dark(var(--gold-3),var(--gold-2)); --c-accent-fill-ink: #1a1405; /* bảng điểm: nền tối cố định ở cả hai chế độ — đây là chủ ý */ --c-board:#0a0906; --c-board-2:#1e1a10; --c-board-ink:#ffffff; --c-board-ink-2:#a99e84; --c-board-line:#2e2819; /* trạng thái: 4 vai trò cố định, tách khỏi màu nhấn. Cảnh báo phải ngả cam — để vàng như trước thì lẫn thẳng vào màu thương hiệu. Màu vạch (`--c-good` …) dùng cho vạch 3px nên giữ nguyên ở cả hai chế độ; chỉ nền và chữ mới đổi. */ --c-good:#1a7f37; --c-good-bg:light-dark(#e2f3e7,#0f2718); --c-good-ink:light-dark(#146c2e,#56d364); --c-warn:#c2650a; --c-warn-bg:light-dark(#fbe9d5,#2b1c08); --c-warn-ink:light-dark(#9a4f00,#e8a13c); --c-crit:#b42318; --c-crit-bg:light-dark(#fbe5e2,#2c1412); --c-crit-ink:light-dark(#9f1d13,#f98c82); --c-idle:#736b59; --c-idle-bg:light-dark(#eae5d9,#1d1a12); --c-idle-ink:light-dark(#5c5545,#b4aa93); --scrim:light-dark(rgba(10,9,6,.55),rgba(0,0,0,.65)); } /* Nút chuyển chế độ bằng tay. Chỉ ép `color-scheme`, không đụng token — nên không có gì để lệch. Chưa có màn nào bật hai thuộc tính này; để sẵn vì đặc tả yêu cầu cả hai đường, và vì thêm nút chuyển sau này chỉ tốn đúng một dòng JS đặt thuộc tính. */ :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} /* ---- 2. Token: nhịp, bo góc, chữ ------------------------------------ */ :root{ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-14:56px; --s-16:64px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-full:999px; --t-micro:11px; --t-xs:12px; --t-sm:13px; --t-md:15px; --t-base:16px; --t-lg:17px; --t-xl:20px; --t-2xl:26px; --t-title:31px; --t-hero:44px; --tap:44px; --gutter:var(--s-5); --w-app:480px; --icon:20px; --icon-lg:24px; --navbar-h:52px; --tabbar-h:60px; --z-nav:30; --z-bar:40; --z-sheet:50; --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* ---- 2b. Token: nhịp chuyển động ------------------------------------- Màu, khoảng cách, cỡ chữ đều có thang riêng, nhưng thời lượng thì trước đây nằm rải rác dưới dạng số trần — .12s, .15s, .18s, .22s, .26s, .28s, .3s, .34s, .36s, .42s, .5s. Mười một con số cho chừng ấy việc, và mỗi lần thêm một hiệu ứng lại đẻ thêm một con số nữa. Nay còn năm bậc. Ba đường cong, mỗi đường một vai. Dùng chung một đường cho cả vào lẫn ra là lỗi hay gặp nhất: vật đi ra mà cũng "hãm lại ở cuối" thì trông như bị dính. */ :root{ --d-press:80ms; /* lún xuống dưới ngón tay — chậm hơn là thấy trễ */ --d-1:140ms; /* đổi tại chỗ: nền, chữ, viền, vành lấy nét */ --d-2:220ms; /* hiện/ẩn vật nhỏ: thông báo, viên nền tab, lớp mờ */ --d-3:320ms; /* màn hình, tấm trượt, dòng danh sách nổi lên */ --d-4:500ms; /* khoảnh khắc dàn dựng lúc mở app */ /* Hai giá trị không thuộc thang trên vì chúng không phải nhịp chuyển cảnh — chúng là hành vi. Đổi chúng là đổi cái ứng dụng nói ra. */ --d-spin:700ms; /* nhịp của mọi dấu hiệu "đang chạy": vòng quay, vạch chờ */ --d-wait:400ms; /* chờ ngần này mới thừa nhận là chậm, dưới mức đó im */ --d-off:.01ms; /* "tắt" cho reduced-motion — không dùng 0 vì sự kiện animationend vẫn phải bắn, có chỗ đang chờ nó */ --e-out:cubic-bezier(.32,.72,0,1); /* vào rồi dừng — nhịp ứng dụng gốc */ --e-in:cubic-bezier(.4,0,1,1); /* đi ra: nhanh dần rồi biến mất */ --e-back:cubic-bezier(.2,1.25,.5,1); /* nhả tay: vượt nhẹ rồi lắng xuống */ --ease:var(--e-out); /* tên cũ, giữ lại để chỗ đang dùng khỏi phải sửa */ } /* ---- 3. Nền tảng và cảm giác chạm ------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;height:100dvh;overflow:hidden; /* cuộn nằm ở từng màn hình */ background:var(--c-plane);color:var(--c-ink); font:400 var(--t-base)/1.5 var(--font); font-synthesis-weight:none;-webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; /* bỏ ô xám khi chạm */ -webkit-touch-callout:none; user-select:none; /* chrome không bôi đen được */ touch-action:manipulation; /* bỏ trễ 300ms nhấn đúp */ } /* nội dung đọc được vẫn cho chọn */ .selectable,input,textarea{user-select:text;-webkit-user-select:text} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;text-wrap:balance} :focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-sm)} /* Vành lấy nét vẽ RA NGOÀI 2px, nên phần tử nằm trong hộp có `overflow:hidden` thì hai cạnh bên bị cắt sạch — đo được: dòng danh sách cách mép `.list` đúng 1px, mà vành cần 2px. Bàn phím Tab tới nơi mà không thấy đang ở đâu. Với mấy chỗ đó thì vẽ vành vào PHÍA TRONG. */ .list .row:focus-visible,.chips .chip:focus-visible{outline-offset:-3px} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .ic{width:var(--icon);height:var(--icon);flex:none;color:inherit} .ic-lg{width:var(--icon-lg);height:var(--icon-lg)} .eyebrow{font-size:var(--t-micro);font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--c-ink-3)} /* ---- 4. Khung ứng dụng và ngăn xếp màn hình -------------------------- */ .app{position:relative;height:100dvh;max-width:var(--w-app);margin-inline:auto; background:var(--c-plane);overflow:hidden} /* mỗi màn hình là một vùng cuộn độc lập, như một view trong ngăn xếp */ .screen{position:absolute;inset:0;display:flex;flex-direction:column; overflow:hidden;background:var(--c-plane)} .screen__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;scrollbar-width:none} .screen__scroll::-webkit-scrollbar{display:none} /* ---- 5. Thanh điều hướng trên ---------------------------------------- */ .navbar{position:relative;z-index:var(--z-nav);flex:none; display:flex;align-items:center;gap:var(--s-1); height:calc(var(--navbar-h) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--s-2) 0; background:color-mix(in srgb,var(--c-plane) 82%,transparent); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px)} /* tiêu đề canh giữa, không dính theo số lượng nút hai bên */ .navbar__title{position:absolute;inset-inline:56px;text-align:center; font-size:var(--t-lg);font-weight:700;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none} .navbar__side{display:flex;align-items:center;min-width:var(--tap)} .navbar__side--end{margin-inline-start:auto;justify-content:flex-end} /* đường kẻ chỉ hiện khi nội dung đã cuộn qua */ .navbar::after{content:"";position:absolute;inset:auto 0 0;height:1px; background:var(--c-line);opacity:0} .navbar--bordered::after{opacity:1} .iconbtn{position:relative;display:grid;place-items:center; width:var(--tap);height:var(--tap); flex:none;border:0;background:none;color:var(--c-ink); border-radius:var(--r-full);cursor:pointer; transition:background var(--d-1) var(--e-out),transform var(--d-2) var(--e-back)} .iconbtn:active{background:var(--c-sunken);transform:scale(.9); transition:transform var(--d-press) var(--e-out)} .iconbtn--accent{color:var(--c-accent)} /* tiêu đề lớn của màn gốc, nằm trong vùng cuộn */ .largetitle{padding:var(--s-1) var(--gutter) var(--s-4); font-size:var(--t-title);font-weight:800;letter-spacing:-.035em} .largetitle small{display:block;margin-top:2px; font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--c-ink-2)} /* khi cuộn, tiêu đề nhỏ trên thanh mới hiện ra và kẻ chân mới đậm lên */ @supports (animation-timeline:scroll()){ .screen--root .navbar__title{opacity:0; animation:nav-reveal linear both; animation-timeline:scroll(nearest);animation-range:20px 60px} .screen--root .navbar::after{ animation:nav-reveal linear both; animation-timeline:scroll(nearest);animation-range:20px 60px} @keyframes nav-reveal{to{opacity:1}} } @media (prefers-reduced-motion:reduce){ .screen--root .navbar__title{opacity:1;animation:none} } .page{padding:0 var(--gutter) var(--s-8)} /* Chừa chỗ cho thanh nút dán đáy. Phải hơn CHIỀU CAO THẬT của thanh đó (nút 44px + đệm trên dưới) chứ không phải chỉ bằng vùng chạm: đo trên máy 390px thấy dòng cuối danh sách vẫn bị che 31px khi cuộn hết cỡ. */ .page.has-cta{padding-bottom:calc(var(--tap) * 2 + var(--s-8))} /* Thanh tab dưới nằm ĐÈ lên vùng cuộn (absolute), nên màn nào có nó cũng phải tự chừa chỗ — cuộn hết cỡ mà không chừa thì 29px cuối vĩnh viễn nằm sau thanh tab. Màn có cả thanh nút dán đáy thì phải cộng cả hai. */ .screen--tabbed .page{padding-bottom:calc(var(--tabbar-h) + var(--s-8))} .screen--tabbed .page.has-cta{padding-bottom:calc(var(--tabbar-h) + var(--tap) * 2 + var(--s-8))} .section-label{margin:var(--s-6) 0 var(--s-2)} .page > .section-label:first-child{margin-top:var(--s-1)} /* ---- 6. Bảng điểm — điểm nhấn thị giác duy nhất ---------------------- */ .board{position:relative;overflow:hidden; background:radial-gradient(120% 140% at 100% 0%,var(--c-board-2),var(--c-board)); color:var(--c-board-ink);border-radius:var(--r-lg); padding:var(--s-6) var(--s-5) var(--s-5);margin-bottom:var(--s-3)} /* dải vàng dập nổi — chỉ trang trí, không mã hóa dữ liệu */ .board::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(to right, var(--gold-5),var(--gold-3) 18%,var(--gold-1) 34%, var(--gold-3) 52%,var(--gold-4) 72%,var(--gold-2))} .board .eyebrow{color:var(--c-board-ink-2)} .board__hero{display:flex;align-items:flex-end;gap:var(--s-3);margin-top:var(--s-2)} /* con số hôm nay là chỗ duy nhất được phép "kim loại" — chữ tô bằng thang vàng. Trình duyệt không cắt được nền thì rơi về màu vàng đặc, vẫn đọc tốt. */ .board__num{font-size:var(--t-hero);font-weight:800;line-height:1;letter-spacing:-.04em; color:var(--gold-2)} @supports (-webkit-background-clip:text){ .board__num{background:linear-gradient(160deg,var(--gold-1),var(--gold-3) 48%,var(--gold-2)); -webkit-background-clip:text;background-clip:text;color:transparent} } .board__unit{font-size:var(--t-md);color:var(--c-board-ink-2);padding-bottom:5px} .board__foot{display:flex;justify-content:space-between;align-items:flex-end; gap:var(--s-4);margin-top:var(--s-5); padding-top:var(--s-4);border-top:1px solid var(--c-board-line)} .board__stat{display:flex;flex-direction:column;gap:2px} .board__stat b{font-size:var(--t-xl);font-weight:800;letter-spacing:-.02em} .board__stat span{font-size:var(--t-xs);color:var(--c-board-ink-2)} .spark{display:flex;align-items:flex-end;gap:5px;height:34px} .spark i{display:block;width:6px;border-radius:2px 2px 0 0; background:var(--c-board-ink-2);opacity:.45} .spark i[data-today]{background:var(--gold-2);opacity:1} /* ---- 6b. Màn đăng nhập ---------------------------------------------- Cố ý tối ở cả hai chế độ, cùng lý do với bảng điểm: nhận diện của phòng là mặt tiền đen ăn đèn vàng ban đêm; cho nó sáng lên thì không còn là nó nữa. ĐÂY LÀ MẪU ĐỂ TÁI THEME MỘT VÙNG: ép `color-scheme` rồi thôi. Mọi token `light-dark()` bên trong tự nhảy sang nhánh tối, kể cả những token thêm về sau. Đừng chép lại danh sách màu — bản cũ chép và đã lệch mất một token so với bảng tối thật. */ .screen--signin{ color-scheme:dark; background:var(--c-plane);color:var(--c-ink)} /* cạnh sáng của tấm biển */ .screen--signin::before{content:"";position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(to right, var(--gold-5),var(--gold-3) 18%,var(--gold-1) 34%, var(--gold-3) 52%,var(--gold-4) 72%,var(--gold-2))} /* đèn hắt ra từ sau tấm biển, canh đúng vào logo. Đủ để nền không phẳng lì mà không thành vầng hào quang. */ .screen--signin::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 26% at 50% 26%,rgba(240,207,107,.16),transparent 70%)} .screen--signin .screen__scroll{position:relative} /* nằm trên vệt đèn */ .signin{display:flex;flex-direction:column;justify-content:center;min-height:100%} /* Logo là ảnh vuông nền đen. Đặt thẳng lên nền tối thì mắt vẫn thấy mép ô vuông, vì đen của ảnh không bao giờ trùng đúng đen của màn. Trộn kiểu "screen" cho đen của ảnh thành trong suốt, chỉ còn khiên vàng nổi lên. */ .signin__mark{margin:var(--s-10) 0 var(--s-8)} .signin__mark img{width:calc(var(--s-16) * 2);height:calc(var(--s-16) * 2); margin-inline:auto;mix-blend-mode:screen} .signin__note{margin:var(--s-8) 0 var(--s-10);text-align:center; font-size:var(--t-sm);line-height:1.7;color:var(--c-ink-3)} /* ---- 7. Ô số liệu ---------------------------------------------------- */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-bottom:var(--s-3)} .tile{display:flex;flex-direction:column;gap:var(--s-1); background:var(--c-surface);border:1px solid var(--c-line); border-radius:var(--r-md);padding:var(--s-4)} .tile--wide{grid-column:1/-1} .tile__label{font-size:var(--t-sm);color:var(--c-ink-2)} .tile__value{font-size:var(--t-2xl);font-weight:800;line-height:1.1;letter-spacing:-.03em} .tile__value .unit{font-size:var(--t-md);font-weight:600;color:var(--c-ink-2); margin-inline-start:3px} .tile__hint{font-size:var(--t-xs);color:var(--c-ink-3)} .pos{color:var(--c-good-ink)} .neg{color:var(--c-crit-ink)} /* ---- 8. Danh sách ---------------------------------------------------- */ .list{background:var(--c-surface);border:1px solid var(--c-line); border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s-3)} .row{position:relative;display:flex;align-items:center;gap:var(--s-3); min-height:var(--tap);padding:var(--s-3) var(--s-4);color:inherit; overflow:hidden;transition:background var(--d-1) var(--e-out)} /* Dòng danh sách bấm được bằng