/* ===== BenchMark custom styles (merged from all Stitch screens + app chrome) ===== */ html { /* No rubber-band refresh pulling the app shell around on mobile. */ overscroll-behavior-y: none; } body { min-height: max(884px, 100dvh); background-color: #131313; color: #e5e2e1; font-family: 'Geist', sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* kills 300ms tap delay + double-tap zoom */ } button, .navItem, .drawerLink { -webkit-user-select: none; user-select: none; } /* Notch / home-indicator safe areas (standalone PWA + modern phones) */ #bottomNav { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } header.sticky { padding-top: calc(8px + env(safe-area-inset-top, 0px)); } #logger > header { padding-top: calc(8px + env(safe-area-inset-top, 0px)); } .sheet-panel { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important; } /* Keep FABs clear of the taller nav on notched phones */ #d-fabStack, #c-fabAdd, #w-fabAdd { margin-bottom: env(safe-area-inset-bottom, 0px); } /* Custom scrollbar (from weight tracker screen) */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #131313; } ::-webkit-scrollbar-thumb { background: #353534; border-radius: 9999px; } /* Progress Ring Animation (dashboard) */ @keyframes progress { 0% { stroke-dasharray: 0, 100; } } .circular-chart { display: block; margin: 0 auto; max-width: 80%; max-height: 250px; } .circle-bg { fill: none; stroke: #2a2a2a; stroke-width: 3.8; } .circle { fill: none; stroke-width: 3.8; stroke-linecap: round; animation: progress 1s ease-out forwards; transition: stroke-dasharray 0.5s ease; } /* Calorie budget ring (calories screen) */ .progress-ring__circle { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; } /* Glass card (calories + workouts screens) */ .glass-card { background: rgba(30, 30, 30, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Hidden horizontal scrollbars */ .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Depth strokes (workouts + profile screens) */ .depth-stroke { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .inner-border { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .inner-border-active { box-shadow: inset 0 0 0 1px #2D5A27; } .inner-border-gold { box-shadow: inset 0 0 0 1px #D4AF37; } /* Bento grid (workouts screen) */ .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Weight trend chart animations (weight tracker screen) */ .graph-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawGraph 1.5s ease-out forwards; } @keyframes drawGraph { to { stroke-dashoffset: 0; } } .data-point { opacity: 0; animation: fadeIn 0.5s ease-out forwards; } .data-point:nth-child(1) { animation-delay: 0.2s; } .data-point:nth-child(2) { animation-delay: 0.4s; } .data-point:nth-child(3) { animation-delay: 0.6s; } .data-point:nth-child(4) { animation-delay: 0.8s; } .data-point:nth-child(5) { animation-delay: 1.0s; } .data-point:nth-child(6) { animation-delay: 1.2s; } @keyframes fadeIn { to { opacity: 1; } } /* ===== App chrome (sheets, toasts, drawer, swipe, boot) ===== */ /* Self-contained layout so the splash paints immediately, before the Tailwind CDN script (at the end of ) has loaded. */ #bootLoader { position: fixed; inset: 0; z-index: 100; background: #131313; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; overflow: hidden; transition: opacity 0.2s ease; } .boot-glow { position: absolute; width: 420px; height: 420px; border-radius: 9999px; background: radial-gradient(circle, rgba(45, 90, 39, 0.35) 0%, rgba(161, 212, 148, 0.08) 45%, transparent 70%); filter: blur(20px); animation: bootGlow 2.4s ease-in-out infinite alternate; pointer-events: none; } @keyframes bootGlow { from { transform: scale(0.9); opacity: 0.7; } to { transform: scale(1.1); opacity: 1; } } .boot-mark { animation: bootMark 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; filter: drop-shadow(0 0 24px rgba(161, 212, 148, 0.35)); } @keyframes bootMark { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .boot-mark-arc { stroke-dashoffset: 660; animation: bootArc 0.5s ease-out 0.05s forwards; } @keyframes bootArc { to { stroke-dashoffset: 0; } } .boot-word { animation: bootWord 0.3s ease-out 0.1s both; text-shadow: 0 0 32px rgba(161, 212, 148, 0.25); } @keyframes bootWord { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .boot-spinner { width: 28px; height: 28px; border: 3px solid #2a2a2a; border-top-color: #a1d494; border-radius: 9999px; animation: spin 0.8s linear infinite, bootFade 0.3s ease-out 0.25s both; } @keyframes bootFade { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } /* Bottom sheet */ .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 70; opacity: 0; transition: opacity 0.2s ease; } .sheet-backdrop.open { opacity: 1; } .sheet-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; margin: 0 auto; max-width: 480px; background: #1E1E1E; border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: none; border-radius: 0.75rem 0.75rem 0 0; padding: 20px 20px 32px; max-height: 88dvh; overflow-y: auto; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1); } .sheet-panel.open { transform: translateY(0); } .sheet-grab { width: 36px; height: 4px; background: #353534; border-radius: 9999px; margin: 0 auto 16px; } /* Form fields inside sheets (ghost inputs per design system). !important needed: the Tailwind CDN forms plugin injects element styles at runtime AFTER this stylesheet and would otherwise paint inputs white. */ .bm-field { width: 100% !important; background-color: #2A2A2A !important; border: 1px solid transparent !important; border-radius: 0.5rem !important; padding: 12px 16px !important; color: #e5e2e1 !important; font-family: 'Geist', sans-serif; font-size: 16px !important; outline: none !important; box-shadow: none !important; transition: border-color 0.15s ease; } .bm-field:focus { border-color: #2D5A27 !important; } .bm-field.invalid { border-color: #ffb4ab !important; } .bm-field::placeholder { color: #8c9387 !important; } select.bm-field { appearance: none; background-image: none !important; } /* Date/time picker indicators on dark background */ .bm-field::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* Logger set inputs — keep them transparent despite the forms plugin */ .set-row input[type="number"] { background-color: transparent !important; border: none !important; box-shadow: none !important; color: #e5e2e1 !important; padding: 4px !important; } /* Hide number spinners in the logger grid (they break the compact layout) */ .set-row input[type="number"]::-webkit-outer-spin-button, .set-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .set-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Workout name ghost input */ #lg-name { background-color: transparent !important; border: none !important; box-shadow: none !important; color: #e5e2e1 !important; padding: 0 !important; } .bm-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; font-weight: 500; color: #c2c9bb; display: block; margin-bottom: 8px; text-transform: uppercase; } /* Toasts */ .toast { pointer-events: auto; display: flex; align-items: center; gap: 8px; background: #2A2A2A; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; padding: 10px 18px; font-family: 'Geist', sans-serif; font-size: 14px; color: #e5e2e1; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; max-width: 100%; } .toast.show { opacity: 1; transform: translateY(0); } .toast .material-symbols-outlined { font-size: 18px; } .toast.success .material-symbols-outlined { color: #a1d494; } .toast.error .material-symbols-outlined { color: #ffb4ab; } .toast.info .material-symbols-outlined { color: #e9c349; } /* Swipe-to-delete rows */ .swipe-wrap { position: relative; overflow: hidden; border-radius: 0.5rem; } .swipe-actions { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: stretch; background: #93000a; border-radius: 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .swipe-wrap.swiping .swipe-actions, .swipe-wrap.open .swipe-actions { opacity: 1; pointer-events: auto; } .swipe-actions button { width: 76px; display: flex; align-items: center; justify-content: center; color: #ffdad6; } .swipe-row { position: relative; z-index: 1; transition: transform 0.2s ease; touch-action: pan-y; } /* Completed set rows transition to forest green border (design system) */ .set-row { border: 1px solid transparent; transition: border-color 0.25s ease, opacity 0.25s ease; } .set-row.done { border-color: #2D5A27; } /* View transitions */ .view { animation: viewIn 0.25s ease; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Drawer */ #drawer { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1); } /* Barcode video */ .scan-video { width: 100%; border-radius: 0.75rem; background: #0e0e0e; aspect-ratio: 3 / 4; object-fit: cover; }