/* ═══════════════════════════════════════════════════════════════════════ DLME! UI Polish Layer — March 2026 Crisp text · Subtle gradient animations · Refined spacing · Clean transitions Drop this AFTER style.css in ═══════════════════════════════════════════════════════════════════════ */ /* ── Updated Root Tokens ─────────────────────────────────────────────── */ :root { /* Refined backgrounds — slightly warmer, more depth */ --bg-dark: #0c0e13; --bg-card: #14171f; --bg-card-hover: #1a1e28; --surface: #181c26; --border: rgba(255, 255, 255, 0.05); --border-hover: rgba(255, 255, 255, 0.1); /* Slightly toned accents — less neon, more refined */ --hot-pink: #ff2d5e; --hot-pink-dim: #ff2d5e20; --electric-green: #00e87a; --electric-green-dim: #00e87a1a; --neon-yellow: #ffd634; --neon-yellow-dim: #ffd6341a; --cool-blue: #3d7fff; --cool-blue-dim: #3d7fff1a; --cyan: #00d4f0; --cyan-dim: #00d4f018; --soft-purple: #8855ee; /* Crisper text — better contrast hierarchy */ --text-primary: #f2f2f6; --text-secondary: #8a8ca6; --text-muted: #50526a; --text-bright: #ffffff; /* Refined radii */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 99px; /* Better shadows */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 30px rgba(255, 45, 94, 0.12); --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.25); --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.2); /* Transition tokens */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; } /* ── Enhanced Base ───────────────────────────────────────────────────── */ html { font-size: 16.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { line-height: 1.55; letter-spacing: 0.01em; background: var(--bg-dark); background-image: radial-gradient(ellipse at 50% 0%, rgba(255, 45, 94, 0.03) 0%, transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(61, 127, 255, 0.02) 0%, transparent 50%); background-attachment: fixed; } /* ── Crisp Typography ────────────────────────────────────────────────── */ /* Display headings — tighter tracking, cleaner weight */ h1, h2, h3, .logo-text, [class*="title"] { letter-spacing: -0.02em; text-rendering: geometricPrecision; } /* Monospace labels — spaced, uppercase, smaller */ .font-mono, [class*="label"], [class*="stat-label"], [class*="category"], [class*="metric-label"] { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } /* Body text gets slightly looser line-height */ p, .pitch-line, .pitch-sub, [class*="description"] { line-height: 1.65; } /* Numbers — tabular for alignment */ [class*="stat-value"], [class*="number"], [class*="count"], [class*="timer"], [class*="streak"] { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } /* ═══════════════════════════════════════════════════════════════════════ SPLASH / LOGIN SCREEN POLISH ═══════════════════════════════════════════════════════════════════════ */ .splash-bg { background: radial-gradient(ellipse at 25% 40%, rgba(255, 45, 94, 0.08) 0%, transparent 55%), radial-gradient(ellipse at 75% 20%, rgba(61, 127, 255, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 85%, rgba(255, 214, 52, 0.04) 0%, transparent 45%), var(--bg-dark); animation: splashShift 12s ease-in-out infinite alternate; } @keyframes splashShift { 0% { background-position: 0% 0%; filter: brightness(1); } 50% { filter: brightness(1.02); } 100% { background-position: 100% 100%; filter: brightness(1); } } .splash-content { padding: 2rem 1.5rem; max-width: 420px; width: 100%; } /* Logo polish */ .logo-text { font-size: 4rem; background: linear-gradient(135deg, var(--hot-pink) 0%, #ff6b8a 50%, var(--neon-yellow) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: logoGradient 6s ease-in-out infinite; } @keyframes logoGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .logo-tagline { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.25em; color: var(--text-secondary); margin-top: 0.5rem; } /* Pitch text */ .pitch-line { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 0.75rem; } .pitch-sub { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; } /* Form inputs — crisper */ .register-form input, .register-form select, .login-form input { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1rem; color: var(--text-primary); font-size: 0.95rem; transition: border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); width: 100%; } .register-form input:focus, .register-form select:focus, .login-form input:focus { border-color: var(--hot-pink); background: rgba(255, 45, 94, 0.04); box-shadow: 0 0 0 3px var(--hot-pink-dim); outline: none; } .register-form label, .login-form label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.4rem; display: block; } /* ═══════════════════════════════════════════════════════════════════════ BUTTONS — Global Polish ═══════════════════════════════════════════════════════════════════════ */ .btn { border-radius: var(--radius-md); font-weight: 600; font-size: 0.92rem; padding: 0.8rem 1.5rem; border: none; cursor: pointer; transition: all var(--duration-normal) var(--ease-out); position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .btn:hover::after { opacity: 1; } .btn:active { transform: scale(0.97); transition-duration: 80ms; } .btn-primary, .btn-lg { background: linear-gradient(135deg, var(--hot-pink) 0%, #e8285a 100%); color: white; box-shadow: 0 4px 16px rgba(255, 45, 94, 0.25); font-family: var(--font-display); letter-spacing: 0.04em; } .btn-primary:hover, .btn-lg:hover { box-shadow: 0 6px 24px rgba(255, 45, 94, 0.35); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════ CARDS — Global Polish ═══════════════════════════════════════════════════════════════════════ */ /* Any card-like container */ [class*="card"], [class*="panel"], [class*="section-card"], [class*="stat-box"], [class*="hero-card"], .watcher-card, .fast-config, .leaderboard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } [class*="card"]:hover, [class*="panel"]:hover { border-color: var(--border-hover); } /* ═══════════════════════════════════════════════════════════════════════ FASTING DASHBOARD POLISH ═══════════════════════════════════════════════════════════════════════ */ /* Top bar */ .top-bar, [class*="topbar"], [class*="top-bar"] { background: rgba(12, 14, 19, 0.85); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem; } /* Timer display — main fasting countdown */ [class*="timer-display"], [class*="countdown"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Fasting time range arrow */ [class*="fast-time"] { display: flex; align-items: center; justify-content: center; gap: 1rem; } /* Stats row */ [class*="stats-row"], [class*="stat-grid"] { display: flex; gap: 0.75rem; padding: 0.5rem 0; } [class*="stat-box"], [class*="stat-card"] { padding: 1rem; text-align: center; flex: 1; min-width: 0; } [class*="stat-value"] { font-family: var(--font-display); font-size: 1.6rem; color: var(--text-bright); line-height: 1.1; } [class*="stat-label"] { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); margin-top: 0.35rem; } /* Panic button — refined glow animation */ [class*="panic"], .btn-panic { position: relative; animation: panicPulse 3s ease-in-out infinite; } @keyframes panicPulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 45, 94, 0.2); } 50% { box-shadow: 0 0 40px rgba(255, 45, 94, 0.35); } } /* ═══════════════════════════════════════════════════════════════════════ NAV MENU POLISH ═══════════════════════════════════════════════════════════════════════ */ [class*="nav-menu"], [class*="dropdown-menu"], .nav-dropdown { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); overflow: hidden; } [class*="nav-item"], [class*="dropdown-item"], .nav-link { padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; transition: background var(--duration-fast) var(--ease-out); font-size: 0.92rem; font-weight: 500; color: var(--text-primary); border-radius: var(--radius-sm); } [class*="nav-item"]:hover, [class*="dropdown-item"]:hover, .nav-link:hover { background: rgba(255, 255, 255, 0.04); } [class*="nav-item"].active, [class*="dropdown-item"].active { background: rgba(255, 45, 94, 0.08); border-left: 3px solid var(--hot-pink); } /* ═══════════════════════════════════════════════════════════════════════ MODULE PAGES — WF, ST, FF, CT, T1 ═══════════════════════════════════════════════════════════════════════ */ /* Water Fight — cyan/teal theme */ [class*="wf-"] { --module-accent: var(--cyan); --module-accent-dim: var(--cyan-dim); } /* Step Up — orange/pink theme */ [class*="st-"] { --module-accent: #ff8c42; --module-accent-dim: rgba(255, 140, 66, 0.15); } /* Shared module hero/visualization area */ [class*="viz-container"], [class*="hero-viz"], [class*="wf-viz"], [class*="st-viz"] { margin: 1rem auto; position: relative; display: flex; align-items: center; justify-content: center; } /* Quick-add buttons across modules */ [class*="quick-add"] button, [class*="quick-btn"], .wf-quick-btn, .st-quick-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.55rem 1.1rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } [class*="quick-add"] button:hover, [class*="quick-btn"]:hover, .wf-quick-btn:hover, .st-quick-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-hover); transform: translateY(-1px); } [class*="quick-add"] button:active, [class*="quick-btn"]:active { transform: scale(0.95); } /* Goal buttons */ [class*="goal-btn"], [class*="goal-option"] { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } [class*="goal-btn"].active, [class*="goal-option"].active, [class*="goal-btn"]:hover, [class*="goal-option"]:hover { border-color: var(--electric-green); color: var(--electric-green); background: var(--electric-green-dim); } /* Sliders across all modules */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); outline: none; transition: background var(--duration-fast); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--text-bright); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform var(--duration-fast) var(--ease-spring); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.95); } /* Calendar grids (WF, ST, CT) */ [class*="calendar"] table, [class*="cal-grid"] { border-collapse: separate; border-spacing: 3px; } [class*="calendar"] td, [class*="cal-day"] { border-radius: var(--radius-sm); padding: 0.4rem; font-size: 0.75rem; font-family: var(--font-mono); text-align: center; transition: background var(--duration-fast), transform var(--duration-fast); } [class*="calendar"] td:hover, [class*="cal-day"]:hover { transform: scale(1.05); } [class*="calendar"] .today, [class*="cal-day"].today { outline: 2px solid var(--hot-pink); outline-offset: -1px; font-weight: 700; } /* Leaderboard rows */ [class*="leaderboard"] [class*="row"], [class*="board"] [class*="entry"], .lb-row { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; transition: background var(--duration-fast); } [class*="leaderboard"] [class*="row"]:hover, .lb-row:hover { background: rgba(255, 255, 255, 0.02); } [class*="leaderboard"] [class*="row"]:last-child, .lb-row:last-child { border-bottom: none; } /* ═══════════════════════════════════════════════════════════════════════ CYCLE TRACKER (CT) — Phase color refinements ═══════════════════════════════════════════════════════════════════════ */ [class*="ct-phase-menstruation"] { --phase-color: #e85d75; } [class*="ct-phase-follicular"] { --phase-color: #5bbf8e; } [class*="ct-phase-ovulation"] { --phase-color: #f0b742; } [class*="ct-phase-luteal"] { --phase-color: #9b7dd4; } /* ═══════════════════════════════════════════════════════════════════════ SUBTLE GRADIENT ANIMATIONS ═══════════════════════════════════════════════════════════════════════ */ /* Ambient gradient pulse on active fasting card */ .fasting-active .hero-card, [class*="hero"][class*="active"] { background: linear-gradient(135deg, rgba(255, 45, 94, 0.06) 0%, transparent 40%, rgba(61, 127, 255, 0.04) 100%), var(--bg-card); background-size: 200% 200%; animation: heroGradient 8s ease-in-out infinite; } @keyframes heroGradient { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } /* Module header shimmer — very subtle */ [class*="page-header"], [class*="module-header"] { position: relative; } [class*="page-header"]::before, [class*="module-header"]::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent); animation: headerShimmer 8s ease-in-out infinite; } @keyframes headerShimmer { 0%, 80%, 100% { left: -100%; } 40% { left: 200%; } } /* Success state glow — for held strong, goal reached, etc */ @keyframes successGlow { 0%, 100% { box-shadow: 0 0 15px rgba(0, 232, 122, 0.15); } 50% { box-shadow: 0 0 30px rgba(0, 232, 122, 0.3); } } .success-glow { animation: successGlow 2.5s ease-in-out infinite; } /* Streak fire animation */ @keyframes streakFire { 0%, 100% { text-shadow: 0 0 8px rgba(255, 214, 52, 0.4); transform: scale(1); } 50% { text-shadow: 0 0 16px rgba(255, 214, 52, 0.6); transform: scale(1.02); } } [class*="streak-count"], [class*="streak-number"] { animation: streakFire 3s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════════ SCROLLBAR POLISH ═══════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); } /* ═══════════════════════════════════════════════════════════════════════ FLOATING EMOJIS — slightly more refined ═══════════════════════════════════════════════════════════════════════ */ .floating-emoji, [class*="floating-food"], [class*="ambient-emoji"] { opacity: 0.12; filter: blur(0.5px); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════ LOADING / TRANSITION STATES ═══════════════════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .screen.active > * { animation: fadeUp 0.4s var(--ease-out) both; } .screen.active > *:nth-child(2) { animation-delay: 0.05s; } .screen.active > *:nth-child(3) { animation-delay: 0.1s; } .screen.active > *:nth-child(4) { animation-delay: 0.15s; } .screen.active > *:nth-child(5) { animation-delay: 0.2s; } /* ═══════════════════════════════════════════════════════════════════════ RESPONSIVE TIGHTENING ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { html { font-size: 15.5px; } .splash-content { padding: 1.5rem 1.25rem; } .logo-text { font-size: 3.2rem; } [class*="stat-value"] { font-size: 1.35rem; } [class*="card"], [class*="panel"] { border-radius: var(--radius-md); } .btn { padding: 0.7rem 1.2rem; } } @media (min-width: 481px) and (max-width: 768px) { .splash-content { max-width: 460px; } } /* ═══════════════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════ */ .text-gradient-pink { background: linear-gradient(135deg, var(--hot-pink), #ff6b8a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-green { background: linear-gradient(135deg, var(--electric-green), #40ffaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-cyan { background: linear-gradient(135deg, var(--cyan), #60e8ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .glow-border { border: 1px solid rgba(255, 45, 94, 0.2); box-shadow: inset 0 0 20px rgba(255, 45, 94, 0.05); } .glass { background: rgba(20, 23, 31, 0.7); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); } /* ═══════════════════════════════════════════════════════════════════════ FASTING WINDOW CARD — Clean Redesign ═══════════════════════════════════════════════════════════════════════ */ .card-fast { padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.06); background: linear-gradient(165deg, #14171f 0%, #111420 100%); } .card-fast .card-header { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: 1rem; margin-bottom: 1.5rem; } .card-fast .card-title { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.01em; } /* Date picker row */ .date-picker-row { margin-bottom: 1.25rem; } .date-picker-row label { font-family: var(--font-mono) !important; font-size: 0.6rem !important; letter-spacing: 0.14em !important; color: var(--text-muted) !important; text-transform: uppercase; margin-bottom: 0.4rem; display: block; } .date-picker-row input[type="date"] { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 0.75rem 1rem; color: var(--text-primary); font-family: var(--font-mono); font-size: 0.95rem; width: 100%; transition: border-color 200ms ease; } .date-picker-row input[type="date"]:focus { border-color: var(--hot-pink); outline: none; box-shadow: 0 0 0 3px var(--hot-pink-dim); } /* Time picker row — side by side, no arrow */ .time-picker-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; align-items: end; } /* HIDE the arrow divider */ .time-divider { display: none !important; } .time-group { width: 100% !important; } .time-group label { font-family: var(--font-mono) !important; font-size: 0.55rem !important; letter-spacing: 0.12em !important; color: var(--text-muted) !important; text-transform: uppercase; margin-bottom: 0.4rem; display: block; } .time-group input[type="time"] { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); padding: 0.75rem 0.85rem; color: var(--text-primary); font-family: var(--font-mono); font-size: 1.05rem; width: 100%; transition: border-color 200ms ease; } .time-group input[type="time"]:focus { border-color: var(--hot-pink); outline: none; box-shadow: 0 0 0 3px var(--hot-pink-dim); } /* Recurring toggle */ .recurring-toggle { margin-bottom: 1.25rem; padding: 0.6rem 0; } .recurring-toggle .toggle-label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; } /* Lock In button */ .card-fast .btn-primary, .card-fast .btn-block { width: 100%; padding: 0.9rem; font-size: 0.95rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--hot-pink) 0%, #e8285a 100%); box-shadow: 0 4px 20px rgba(255, 45, 94, 0.25); margin-top: 0.25rem; } .card-fast .btn-primary:hover { box-shadow: 0 6px 28px rgba(255, 45, 94, 0.4); transform: translateY(-1px); } /* Remove fast link */ #remove-fast-slot { text-align: center; margin-top: 0.75rem; } #remove-fast-slot button, #remove-fast-slot a { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); background: none; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-pill); padding: 0.4rem 1rem; cursor: pointer; transition: all 200ms ease; } #remove-fast-slot button:hover, #remove-fast-slot a:hover { color: var(--warning-red); border-color: rgba(255, 68, 68, 0.3); }