/* ============================================================================= Anakgym Design System (redesign 2026 — "athletic editorial" monochrome+blue) ----------------------------------------------------------------------------- Ported from the React redesign prototype (new_UI_1) into vanilla CSS tokens. This file is the FOUNDATION layer: design tokens (color/type/space/radius/ elevation/motion) + a small set of reusable primitives (kicker, display heading, card, sheet, dialog, scrim, nav, fab, chip, volume bar, button, toast). Individual screens get re-skinned on top of these in later passes. Scope is namespaced under `.ank` (added to /) and `--ank-*` custom properties so it never collides with the legacy stylesheets while we migrate screen-by-screen. Light + dark both supported. Dark follows the device by default; an explicit overrides the media query. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap'); /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ :root { /* --- type families --- */ --ank-font-sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --ank-font-display: 'Barlow Semi Condensed', 'Barlow', sans-serif; /* --- brand accent (single hue; tweakable, mirrors prototype default) --- */ --ank-accent: #6f93b8; --ank-accent-ink: #ffffff; /* text/icon on top of accent fill */ --ank-mention: #2f6fed; /* @mention text — a clear, true blue */ /* --- semantic status (kept muted to fit the monochrome palette) --- */ --ank-under: #c98a3c; /* "kurang" — under target */ --ank-optimal: var(--ank-accent); /* "optimal" — in zone */ --ank-over: #c4603f; /* "berlebih" — over target */ --ank-danger: #d2553f; --ank-like: #e0245e; /* heart "like" — a warm rose red */ /* --- type scale (scaled up from the 288px prototype for real devices) --- */ --ank-fs-kicker: 0.6875rem; /* 11px — uppercase eyebrow */ --ank-fs-meta: 0.75rem; /* 12px — captions, @handle, time */ --ank-fs-sm: 0.8125rem; /* 13px */ --ank-fs-body: 0.9375rem; /* 15px — default reading size */ --ank-fs-title: 1.0625rem; /* 17px — card/list titles */ --ank-fs-h2: 1.375rem; /* 22px — display section heads */ --ank-fs-h1: 1.75rem; /* 28px — screen headings */ --ank-fs-hero: 2.5rem; /* 40px — empty-state hero, big numbers */ --ank-fs-logo: 1.625rem; /* 26px — ANAKGYM wordmark */ /* --- tracking (letter-spacing) --- */ --ank-ls-kicker: 0.16em; --ank-ls-display: 0.05em; --ank-ls-logo: 0.05em; /* --- spacing scale (4pt base) --- */ --ank-sp-1: 4px; --ank-sp-2: 8px; --ank-sp-3: 12px; --ank-sp-4: 16px; --ank-sp-5: 20px; --ank-sp-6: 24px; --ank-sp-8: 32px; --ank-sp-10: 40px; /* --- radii --- */ --ank-r-sm: 8px; --ank-r-md: 11px; /* cards */ --ank-r-lg: 16px; /* dialogs */ --ank-r-xl: 20px; /* bottom sheets (top corners) */ --ank-r-pill: 999px; /* --- motion --- */ --ank-ease: cubic-bezier(.22, 1, .36, 1); --ank-dur-fast: .18s; --ank-dur: .26s; /* --- LIGHT palette (default) --- */ --ank-screen: #ffffff; /* app background */ --ank-surface: #ffffff; /* raised surfaces (cards, sheets, nav) */ --ank-soft: #f6f6f6; /* subtle fills / inset cards */ --ank-fill: #e4e4e4; /* track / disabled fill */ --ank-hair: #e6e6e6; /* hairline borders / dividers */ --ank-ink: #1a1a1a; /* primary text */ --ank-sub: #979797; /* secondary/muted text */ /* --- elevation --- */ --ank-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18); --ank-shadow-sheet: 0 -16px 40px rgba(0,0,0,.18); --ank-shadow-dialog: 0 24px 60px rgba(0,0,0,.22); --ank-scrim: rgba(6,6,7,.45); } /* DARK — via device preference … */ @media (prefers-color-scheme: dark) { :root:not([data-ank-theme="light"]) { --ank-screen: #0a0a0b; --ank-surface: #0e0e0f; --ank-soft: #141416; --ank-fill: #28282b; --ank-hair: #222224; --ank-ink: #f0f0f0; --ank-sub: #7e7e82; --ank-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6); --ank-shadow-sheet: 0 -16px 40px rgba(0,0,0,.5); --ank-shadow-dialog: 0 24px 60px rgba(0,0,0,.5); --ank-scrim: rgba(6,6,7,.55); --ank-mention: #6ea8ff; /* lighter blue for contrast on dark */ } } /* … and via explicit override (wins over the media query) */ :root[data-ank-theme="dark"] { --ank-screen: #0a0a0b; --ank-surface: #0e0e0f; --ank-soft: #141416; --ank-fill: #28282b; --ank-hair: #222224; --ank-ink: #f0f0f0; --ank-sub: #7e7e82; --ank-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6); --ank-shadow-sheet: 0 -16px 40px rgba(0,0,0,.5); --ank-shadow-dialog: 0 24px 60px rgba(0,0,0,.5); --ank-scrim: rgba(6,6,7,.55); --ank-mention: #6ea8ff; /* lighter blue for contrast on dark */ } /* --------------------------------------------------------------------------- 2. BASE (only applies under the .ank namespace) --------------------------------------------------------------------------- */ .ank { font-family: var(--ank-font-sans); background: var(--ank-screen); color: var(--ank-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ank *, .ank *::before, .ank *::after { box-sizing: border-box; } /* blended thin scrollbars (matches prototype) */ .ank * { scrollbar-width: thin; scrollbar-color: rgba(140,140,140,.28) transparent; } .ank *::-webkit-scrollbar { width: 5px; height: 5px; } .ank *::-webkit-scrollbar-track { background: transparent; } .ank *::-webkit-scrollbar-thumb { background: rgba(140,140,140,.28); border-radius: 8px; } .ank *::-webkit-scrollbar-thumb:hover { background: rgba(140,140,140,.45); } /* --------------------------------------------------------------------------- 3. TYPOGRAPHY PRIMITIVES --------------------------------------------------------------------------- */ .ank-kicker { font-family: var(--ank-font-sans); font-size: var(--ank-fs-kicker); letter-spacing: var(--ank-ls-kicker); text-transform: uppercase; font-weight: 600; color: var(--ank-sub); } .ank-logo { font-family: var(--ank-font-display); font-weight: 700; font-size: var(--ank-fs-logo); letter-spacing: var(--ank-ls-logo); text-transform: uppercase; line-height: 1; color: var(--ank-ink); } .ank-display { /* uppercase letterspaced section/screen heading */ font-family: var(--ank-font-display); text-transform: uppercase; letter-spacing: var(--ank-ls-display); line-height: 1.05; color: var(--ank-ink); } .ank-display--h1 { font-size: var(--ank-fs-h1); font-weight: 600; } .ank-display--h2 { font-size: var(--ank-fs-h2); font-weight: 600; } .ank-display--hero { font-size: var(--ank-fs-hero); font-weight: 700; letter-spacing: .02em; } .ank-title { font-size: var(--ank-fs-title); font-weight: 600; color: var(--ank-ink); } .ank-body { font-size: var(--ank-fs-body); line-height: 1.5; color: var(--ank-ink); } .ank-meta { font-size: var(--ank-fs-meta); color: var(--ank-sub); } .ank-num { font-family: var(--ank-font-display); font-weight: 700; letter-spacing: .01em; } /* --------------------------------------------------------------------------- 4. SURFACES — card / inset --------------------------------------------------------------------------- */ .ank-card { background: var(--ank-surface); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); box-shadow: var(--ank-shadow-card); } .ank-inset { /* quiet inset block (e.g. TDEE/insight card) */ background: var(--ank-soft); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); padding: var(--ank-sp-3); } .ank-divider { height: 1px; background: var(--ank-hair); border: 0; } /* --------------------------------------------------------------------------- 5. BUTTONS --------------------------------------------------------------------------- */ .ank-btn { font-family: var(--ank-font-sans); font-size: var(--ank-fs-body); font-weight: 600; border: 0; border-radius: var(--ank-r-sm); padding: 13px 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ank-sp-2); transition: filter var(--ank-dur-fast), background var(--ank-dur-fast); } .ank-btn--primary { background: var(--ank-accent); color: var(--ank-accent-ink); width: 100%; } .ank-btn--primary:active { filter: brightness(.94); } .ank-btn--ghost { background: transparent; color: var(--ank-ink); border: 1px solid var(--ank-hair); width: 100%; } .ank-btn--text { background: none; color: var(--ank-accent); padding: 6px 4px; } /* square icon button 36×36 */ .ank-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--ank-r-sm); border: 1px solid var(--ank-hair); background: var(--ank-surface); color: var(--ank-ink); cursor: pointer; } /* --------------------------------------------------------------------------- 6. CHIPS / BADGES --------------------------------------------------------------------------- */ .ank-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ank-fs-meta); font-weight: 500; padding: 5px 11px; border-radius: var(--ank-r-pill); border: 1px solid var(--ank-hair); background: var(--ank-surface); color: var(--ank-sub); cursor: pointer; } .ank-chip--active { color: var(--ank-ink); border-color: var(--ank-ink); font-weight: 600; } .ank-badge { /* category tag, outline style (SHARING/BERTANYA) */ font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ank-accent); color: var(--ank-accent); background: transparent; } .ank-badge--neutral { border-color: var(--ank-hair); color: var(--ank-sub); } /* segmented control (Ringkasan | Riwayat, Feed | Profil) */ .ank-segment { display: flex; gap: 4px; padding: 4px; background: var(--ank-soft); border: 1px solid var(--ank-hair); border-radius: 10px; } .ank-segment button { flex: 1; border: 0; background: none; cursor: pointer; font-family: var(--ank-font-sans); font-size: var(--ank-fs-sm); font-weight: 600; color: var(--ank-sub); padding: 9px 8px; border-radius: 7px; } .ank-segment button[aria-selected="true"] { background: var(--ank-surface); color: var(--ank-ink); box-shadow: var(--ank-shadow-card); } /* --------------------------------------------------------------------------- 7. VOLUME / PROGRESS BAR (muscle recap, macro bars) --------------------------------------------------------------------------- */ .ank-bar { height: 6px; border-radius: 3px; background: var(--ank-fill); overflow: hidden; } .ank-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ank-sub); } .ank-bar--accent > span { background: var(--ank-accent); } .ank-bar--under > span { background: var(--ank-under); } .ank-bar--over > span { background: var(--ank-over); } /* --------------------------------------------------------------------------- 8. AVATAR --------------------------------------------------------------------------- */ .ank-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ank-soft); border: 1px solid var(--ank-hair); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; font-family: var(--ank-font-display); font-weight: 700; color: var(--ank-sub); } .ank-avatar img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- 9. BOTTOM NAV + center FAB --------------------------------------------------------------------------- */ .ank-nav { display: flex; align-items: center; padding: 16px 14px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ank-hair); background: var(--ank-surface); } .ank-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ank-ink); } .ank-nav button[aria-current="true"] { color: var(--ank-accent); } .ank-nav .ank-nav-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; } .ank-nav button[aria-current="true"] .ank-nav-dot { background: var(--ank-accent); } .ank-nav .ank-fab { width: 40px; height: 40px; border-radius: 50%; border: 1.4px solid var(--ank-accent); background: transparent; color: var(--ank-accent); display: grid; place-items: center; cursor: pointer; } /* --------------------------------------------------------------------------- 10. OVERLAYS — scrim / sheet / dialog --------------------------------------------------------------------------- */ .ank-scrim { position: absolute; inset: 0; z-index: 50; background: var(--ank-scrim); display: flex; justify-content: center; } .ank-scrim--bottom { align-items: flex-end; } .ank-scrim--center { align-items: center; } .ank-sheet { width: 100%; max-height: 82%; overflow: hidden; background: var(--ank-surface); border-top: 1px solid var(--ank-hair); border-radius: var(--ank-r-xl) var(--ank-r-xl) 0 0; padding: 12px 20px 24px; box-shadow: var(--ank-shadow-sheet); } .ank-sheet-grip { width: 38px; height: 4px; border-radius: 3px; background: var(--ank-hair); margin: 0 auto 16px; } .ank-dialog { width: min(80%, 360px); background: var(--ank-surface); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-lg); padding: 22px 22px 20px; box-shadow: var(--ank-shadow-dialog); } /* full-page overlay (exercise picker, settings) slides in from the right */ .ank-page { position: absolute; inset: 0; z-index: 50; background: var(--ank-screen); overflow-y: auto; } /* --------------------------------------------------------------------------- 11. TOAST --------------------------------------------------------------------------- */ .ank-toast { display: flex; align-items: center; gap: 10px; background: var(--ank-surface); border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); padding: 12px 14px; box-shadow: var(--ank-shadow-dialog); font-size: var(--ank-fs-sm); color: var(--ank-ink); } .ank-toast .ank-toast-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ank-accent); display: grid; place-items: center; flex: 0 0 auto; } /* --------------------------------------------------------------------------- 12. MOTION (entrance animations, matching prototype keyframes) --------------------------------------------------------------------------- */ @keyframes ank-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes ank-slide-up { from { transform: translateY(100%) } to { transform: translateY(0) } } @keyframes ank-pop { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: scale(1) } } @keyframes ank-slide-left{ from { transform: translateX(100%) } to { transform: translateX(0) } } .ank-anim-fade { animation: ank-fade var(--ank-dur-fast) ease-out both; } .ank-anim-up { animation: ank-slide-up var(--ank-dur) var(--ank-ease) both; } .ank-anim-pop { animation: ank-pop .22s var(--ank-ease) both; } .ank-anim-left { animation: ank-slide-left var(--ank-dur) var(--ank-ease) both; } @media (prefers-reduced-motion: reduce) { .ank-anim-fade, .ank-anim-up, .ank-anim-pop, .ank-anim-left { animation: none; } } /* =========================================================================== 13. TUNE-UP 2026 — skeleton loaders, press feedback, screen/modal transitions, polished empty states. (Additive: namespaced .ank-*, no legacy collision.) =========================================================================== */ /* --- 13.1 Skeleton (shimmer) placeholders --- */ .ank-sk { background: var(--ank-fill); border-radius: var(--ank-r-sm); position: relative; overflow: hidden; } .ank-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: ank-shimmer 1.3s ease-in-out infinite; } @media (prefers-color-scheme: dark) { :root:not([data-ank-theme="light"]) .ank-sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); } } :root[data-ank-theme="dark"] .ank-sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); } @keyframes ank-shimmer { 100% { transform: translateX(100%); } } .ank-sk-line { height: 11px; border-radius: 6px; } .ank-sk-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; } .ank-sk-card { border: 1px solid var(--ank-hair); border-radius: var(--ank-r-md); background: var(--ank-surface); box-shadow: var(--ank-shadow-card); padding: 16px; margin-bottom: 12px; } .ank-sk-row { display: flex; align-items: center; gap: 10px; } /* --- 13.2 Tactile press feedback (subtle scale on active) --- */ .ank-btn, .ank-icon-btn, .wt-fab, .wt-chip, .ank-chip, .ank-segment button, .ank-nav button, .ank-empty-btn { transition: transform .09s var(--ank-ease), filter var(--ank-dur-fast), background var(--ank-dur-fast); } .ank-btn:active, .ank-icon-btn:active, .wt-fab:active, .wt-chip:active, .ank-chip:active, .ank-segment button:active, .ank-nav button:active, .ank-empty-btn:active { transform: scale(.96); } /* --- 13.3 Screen (tab) enter transition. Opacity ONLY — never transform — so it can't create a containing block for position:fixed children (coach sticky pills, workout topbar, etc.). Replays on every display:none → block in switchTab(). --- */ .wt-tab-panel { animation: ank-fade .22s ease-out; } .ank-workout-fs #tab-workout { animation: none; } /* full-screen workout has its own UX */ /* --- 13.4 Modal enter transition. Fade the overlay (opacity only); gently rise the inner box. Plays each time a modal goes display:none → flex. --- */ .wt-modal { animation: ank-fade .18s ease-out; } .wt-modal .wt-modal-inner { animation: ank-modal-in .24s var(--ank-ease) both; } @keyframes ank-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- 13.5 Polished empty state --- */ .ank-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 44px 24px; } .ank-empty-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--ank-soft); display: grid; place-items: center; color: var(--ank-accent); } .ank-empty-title { font-family: var(--ank-font-display); font-weight: 700; font-size: var(--ank-fs-title); letter-spacing: .02em; color: var(--ank-ink); } .ank-empty-sub { font-size: var(--ank-fs-sm); color: var(--ank-sub); line-height: 1.5; max-width: 280px; } .ank-empty-btn { margin-top: 4px; background: var(--ank-accent); color: var(--ank-accent-ink); border: 0; border-radius: var(--ank-r-sm); padding: 11px 22px; font-family: var(--ank-font-sans); font-weight: 600; font-size: var(--ank-fs-body); cursor: pointer; } @media (prefers-reduced-motion: reduce) { .ank-sk::after { animation: none; } .wt-tab-panel, .wt-modal, .wt-modal .wt-modal-inner { animation: none; } .ank-btn:active, .ank-icon-btn:active, .wt-fab:active, .wt-chip:active, .ank-chip:active, .ank-segment button:active, .ank-nav button:active, .ank-empty-btn:active { transform: none; } }