/* ====== 1. VARIABLES & THEME SYSTEM ====== Light is the default, main theme (:root) — available to every user, free or Pro. Dark is an optional alternate palette, applied via a data-theme="dark" attribute on , toggled from auth.js. Both are full palettes: every token below gets redefined in the dark override, so backgrounds, text, borders, glows, hovers, inputs, and solid chrome surfaces (navbar, footer, dropdowns, popups) all shift together instead of the app just getting a darker background. */ :root { /* UI Elements — shared across both themes */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 24px; --nav-height: 70px; /* Transitions */ --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); --bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spacing Scale */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* Brand Colors */ --primary: #C4283F; --primary-glow: rgba(196, 40, 63, 0.18); --primary-soft: rgba(196, 40, 63, 0.08); --secondary: #7A1420; --secondary-glow: rgba(122, 20, 32, 0.16); --accent: #B0304A; --accent-glow: rgba(176, 48, 74, 0.18); /* Backgrounds - Warm Cream */ --bg-body: #FBF5F2; --bg-blob: radial-gradient(circle at 15% 50%, rgba(196, 40, 63, 0.06), transparent 35%), radial-gradient(circle at 85% 30%, rgba(122, 20, 32, 0.06), transparent 35%), radial-gradient(circle at 50% 100%, rgba(90, 20, 30, 0.045), transparent 40%); --glass-surface: rgba(255, 255, 255, 0.78); --glass-surface-hover: rgba(255, 255, 255, 0.94); --glass-border: rgba(122, 20, 32, 0.14); --glass-highlight: rgba(196, 40, 63, 0.045); --glass-shadow: 0 10px 32px rgba(90, 20, 30, 0.09); /* Text Colors — real dark-on-light contrast, not a tinted wash */ --text-main: #2A1418; --text-muted: #6E4D50; --text-dim: #A2888B; /* Hovers darken on a light surface (the inverse of dark mode, where hovers lighten). */ --lift-1: rgba(32, 16, 20, 0.035); --lift-2: rgba(32, 16, 20, 0.05); --lift-3: rgba(32, 16, 20, 0.07); --lift-4: rgba(32, 16, 20, 0.09); /* Recessed inputs/checkboxes: a soft warm-grey recess instead of a literal black box, which would look like a smudge on cream. */ --recess-1: rgba(122, 20, 32, 0.04); --recess-2: rgba(122, 20, 32, 0.06); --recess-3: rgba(122, 20, 32, 0.08); --recess-4: rgba(122, 20, 32, 0.10); --surface-navbar: rgba(255, 255, 255, 0.88); --surface-footer: rgba(255, 255, 255, 0.92); --surface-popup: #FFFDFB; --surface-dropdown: rgba(255, 255, 255, 0.94); /* Pro accent — gold, reused from the existing smart-banner gradient so "premium" reads consistently everywhere it shows up. Darkened from the dark-theme gold so it stays legible as text on cream instead of washing out. */ --gold: #B8860B; --gold-deep: #96690A; --gold-text: #8A6410; --gold-glow: rgba(184, 134, 11, 0.22); --gold-soft: rgba(184, 134, 11, 0.12); } /* ====== DARK THEME (optional, both plans) ====== */ html[data-theme="dark"] { /* Brand Colors - Blood Red & Dark */ --primary: #E8001C; --primary-glow: rgba(232, 0, 28, 0.55); --primary-soft: rgba(232, 0, 28, 0.13); --secondary: #8B0000; --secondary-glow: rgba(139, 0, 0, 0.5); --accent: #FF4444; --accent-glow: rgba(255, 68, 68, 0.4); /* Backgrounds - Deep Red-Tinted Black */ --bg-body: #080508; --bg-blob: radial-gradient(circle at 15% 50%, rgba(232, 0, 28, 0.12), transparent 35%), radial-gradient(circle at 85% 30%, rgba(139, 0, 0, 0.14), transparent 35%), radial-gradient(circle at 50% 100%, rgba(100, 0, 0, 0.1), transparent 40%); --glass-surface: rgba(20, 5, 5, 0.80); --glass-surface-hover: rgba(30, 8, 8, 0.92); --glass-border: rgba(139, 0, 0, 0.45); --glass-highlight: rgba(232, 0, 28, 0.06); --glass-shadow: 0 8px 32px rgba(32, 32, 32, 0.7); /* Text Colors */ --text-main: #FFFFFF; --text-muted: #C9A8A8; --text-dim: #6B3030; --lift-1: rgba(255, 255, 255, 0.03); --lift-2: rgba(255, 255, 255, 0.05); --lift-3: rgba(255, 255, 255, 0.08); --lift-4: rgba(255, 255, 255, 0.1); --recess-1: rgba(0, 0, 0, 0.2); --recess-2: rgba(0, 0, 0, 0.3); --recess-3: rgba(0, 0, 0, 0.4); --recess-4: rgba(0, 0, 0, 0.5); --surface-navbar: rgba(8, 3, 3, 0.94); --surface-footer: rgba(5, 5, 10, 0.95); --surface-popup: #150a0a; --surface-dropdown: rgba(10, 10, 20, 0.9); --gold: #d4af37; --gold-deep: #b8860b; --gold-text: #f0d68a; --gold-glow: rgba(85, 65, 0, 0.25); --gold-soft: rgba(212, 175, 55, 0.14); } /* ====== 2. RESET & BASE ====== */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", system-ui, -apple-system, sans-serif; } body { background-color: var(--bg-body); background-image: var(--bg-blob); background-attachment: fixed; color: var(--text-main); min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--nav-height); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; transition: var(--transition); } a :hover { color: var(--text-main); } button, input, select { font-family: inherit; outline: none; border: none; } /* Scrollbar Styling - Enhanced */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-body); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary), var(--secondary)); border-radius: var(--radius-sm); border: 2px solid var(--bg-body); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--secondary), var(--primary)); box-shadow: 0 0 10px var(--primary-glow); } /* Selection */ ::selection { background: var(--primary-soft); color: var(--text-main); } /* ====== SMART DUOLINGO-STYLE REMINDER BANNER ====== */ @keyframes smartBannerIn { from { opacity: 0; transform: translateY(-18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes smartBannerOut { from { opacity: 1; transform: translateY(0) scale(1); max-height: 200px; margin-bottom: 1.5rem; } to { opacity: 0; transform: translateY(-12px) scale(0.97); max-height: 0; margin-bottom: 0; padding: 0; } } .smart-banner { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; background: linear-gradient(135deg, rgba(212,175,55,0.14) 0%, rgba(90,100,64,0.15) 60%, rgba(61,67,72,0.13) 100%); border: 1.5px solid rgba(232, 0, 28, 0.4); border-radius: var(--radius-lg); padding: 1.1rem 1.4rem 1.1rem 1.4rem; margin-bottom: 1.5rem; box-shadow: 0 4px 24px rgba(212,175,55,0.12), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(16px); animation: smartBannerIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; overflow: hidden; } /* Subtle shimmer stripe */ .smart-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.04) 50%, transparent 62%); pointer-events: none; } .smart-banner-close { position: absolute; top: 0.65rem; right: 0.75rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; transition: var(--transition-fast); z-index: 2; } .smart-banner-close:hover { background: rgba(255,255,255,0.14); color: var(--text-main); transform: scale(1.12) rotate(90deg); } .smart-banner-left { display: flex; align-items: center; gap: 0.9rem; flex: 1; min-width: 0; } .smart-banner-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); animation: smartBannerIn 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .smart-banner-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .smart-banner-label { display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 4px; padding: 1px 7px; width: fit-content; margin-bottom: 0.15rem; } .smart-banner-title { font-size: 0.98rem; font-weight: 700; color: var(--text-main); line-height: 1.2; } .smart-banner-sub { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; max-width: 340px; } /* Pill row */ .smart-banner-pills { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; padding-right: 1.5rem; /* space for close btn */ } .smart-pill { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 99px; cursor: default; transition: var(--transition-fast); border: 1.5px solid transparent; white-space: nowrap; } .smart-pill span { font-weight: 400; font-size: 0.74rem; } .smart-pill:hover { transform: translateY(-2px) scale(1.07); } .smart-pill-s { background: rgba(212,175,55,0.14); border-color: rgba(212,175,55,0.4); color: #FF6060; } .smart-pill-m { background: rgba(90,100,64,0.15); border-color: rgba(90,100,64,0.45); color: #C97A7A; } .smart-pill-a { background: rgba(61,67,72,0.25); border-color: rgba(61,67,72,0.6); color: #B8BCC2; } .smart-pill-r { background: rgba(212,175,55,0.10); border-color: rgba(212,175,55,0.3); color: #FF4444; } .smart-pill-t { background: rgba(127,255,0,0.08); border-color: rgba(127,255,0,0.3); color: #FF4444; } @media (max-width: 768px) { .smart-banner { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; } .smart-banner-pills { padding-right: 0; } .smart-pill span { display: none; } .smart-pill { padding: 0.3rem 0.55rem; font-size: 0.82rem; } .smart-banner-sub { display: none; } } .smart-pill { cursor: pointer; } .smart-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ----- Small SMART badges next to goal-creator field labels ----- */ .smart-field-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid transparent; font-size: 0.62rem; font-weight: 800; cursor: pointer; vertical-align: middle; transition: var(--transition-fast); } .smart-field-badge:hover, .smart-field-badge:focus-visible { transform: scale(1.15); outline: none; } /* ----- SMART letter explanation popup ----- */ .smart-info-box { max-width: 420px; } .smart-info-heading { display: flex; align-items: center; gap: var(--space-md); } .smart-info-letter-badge { width: 44px; height: 44px; border-radius: var(--radius-md); border: 1.5px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; flex-shrink: 0; } #smart-info-word { margin: 2px 0 0; font-size: 1.15rem; } .smart-info-explanation { color: var(--text-main); font-size: 0.92rem; line-height: 1.6; margin: var(--space-md) 0; } .smart-info-field-hint { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); background: var(--recess-1); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; } .smart-info-field-hint i { color: var(--primary); } .smart-info-field-hint strong { color: var(--text-main); } .smart-list { list-style-type: none; margin-left: var(--space-lg); margin-bottom: var(--space-md); color: var(--text-muted); } .smart-list strong { color: var(--text-main); } .smart-list b { color: var(--primary); } .main { padding: var(--space-xl); max-width: 1400px; margin: 0 auto; transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); width: 100%; } .overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); margin: 5rem; } /* ====== 3. COMPONENTS ====== */ /* Glass Cards - Enhanced */ .card, .checklist-tasks-col, .checklist-templates-col, .categories { background: var(--glass-surface); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-radius: var(--radius-lg); padding: var(--space-xl); transition: var(--transition); position: relative; overflow: hidden; margin-bottom: var(--space-2xl); } .card img { width: 3rem; border-radius: var(--radius-md); margin-top: var(--space-md); } .card:hover { border-color: rgba(232, 0, 28, 0.45); background: var(--glass-surface-hover); box-shadow: 0 0 30px rgba(232, 0, 28, 0.18), var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: translateY(-3px); } .card-clickable { cursor: pointer; } .card-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .card h3 { font-size: 1.5rem; margin-bottom: var(--space-sm); background: linear-gradient(135deg, var(--text-main), var(--text-muted), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; } .card a:hover { color: var(--secondary); } /* Subtle shimmer effect on glass cards */ .checklist-tasks-col::before, .checklist-templates-col::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.03), transparent ); transition: left 0.5s ease; } .checklist-tasks-col:hover::before, .checklist-templates-col:hover::before { left: 100%; } .checklist-tasks-col:hover, .checklist-templates-col:hover { border-color: rgba(232, 0, 28, 0.4); background: var(--glass-surface-hover); box-shadow: 0 0 30px rgba(232, 0, 28, 0.15), var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: translateY(-3px); } /* Buttons - Modern & Clickable */ .checklist-add-btn, .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 0.7rem 1.4rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9rem; cursor: pointer; box-shadow: 0 4px 20px var(--primary-glow); transition: var(--transition); display: inline-flex; align-items: center; gap: var(--space-sm); position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); } /* Animated shine effect on button */ .checklist-add-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); transition: left 0.5s ease; } .checklist-add-btn:hover::before { left: 100%; } .checklist-add-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 30px var(--primary-glow), 0 0 20px var(--primary-glow); } .checklist-add-btn:active { transform: translateY(0) scale(0.98); } /* Template & Category Buttons */ .template-btn, .category-btn, .checklist-history-btn { background: var(--glass-highlight); color: var(--text-muted); border: 1px solid transparent; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); width: 100%; text-align: left; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 12px; font-size: 0.9rem; margin: var(--space-sm) 0; position: relative; overflow: hidden; } .template-btn::before, .category-btn::before, .checklist-history-btn::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: linear-gradient(to bottom, var(--primary), var(--secondary)); transform: scaleY(0); transition: transform 0.3s var(--bounce); } .template-btn:hover::before, .category-btn:hover::before, .checklist-history-btn:hover::before { transform: scaleY(1); } .template-btn:hover, .category-btn:hover, .checklist-history-btn:hover { background: var(--lift-4); color: var(--text-main); border-color: var(--glass-border); transform: translateX(5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .template-btn i, .category-btn i, .checklist-history-btn i { transition: var(--transition); } .template-btn:hover i, .category-btn:hover i, .checklist-history-btn:hover i { transform: scale(1.1); color: var(--primary); } /* Inputs & Selects */ input[type="text"], input[type="password"], select { background: var(--recess-3); border: 1px solid var(--glass-border); color: var(--text-main); padding: 0.7rem 1rem; border-radius: var(--radius-md); transition: var(--transition); font-size: 0.95rem; } input:focus, select:focus { border-color: var(--primary); background: var(--recess-4); box-shadow: 0 0 0 3px rgba(232, 0, 28, 0.18), 0 4px 12px rgba(0, 0, 0, 0.3); transform: translateY(-1px); } /* ====== 4. NAVBAR & LAYOUT ====== */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--surface-navbar); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-xl); z-index: 100; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .logo { height: 5rem; filter: drop-shadow(0 0 12px rgba(232, 0, 28, 0.5)); transition: var(--transition); } .logo:hover { filter: drop-shadow(0 0 20px rgba(232, 0, 28, 0.75)); transform: scale(1.05); } .username { display: flex; align-items: center; gap: var(--space-sm); font-weight: 500; font-size: 0.9rem; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--glass-highlight); border: 1px solid var(--glass-border); transition: var(--transition); } .username:hover { background: var(--lift-3); border-color: var(--primary); } .username i { font-size: 1.1rem; color: var(--primary); } .navbar-avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Sidebar - Floating on Desktop */ .sidebar { position: fixed; top: calc(var(--nav-height) + 1rem); left: 1rem; bottom: 1rem; width: 240px; background: var(--glass-surface); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-md); z-index: 90; transform: translateX(-120%); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.3s ease; box-shadow: var(--glass-shadow); opacity: 0; pointer-events: none; } .sidebar.open { transform: translateX(0); opacity: 1; pointer-events: auto; box-shadow: var(--glass-shadow), 0 0 40px rgba(232, 0, 28, 0.1); } .sidebar h2 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-dim); margin-bottom: var(--space-lg); padding-left: var(--space-md); font-weight: 700; } .sidebar li { margin-bottom: var(--space-xs); list-style-type: none; } .sidebar a { display: flex; align-items: center; gap: 12px; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--text-muted); font-weight: 500; font-size: 0.9rem; transition: var(--transition); position: relative; overflow: hidden; } .sidebar a::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--secondary)); transform: scaleY(0); transition: transform 0.3s var(--bounce); } .sidebar a:hover::before, .sidebar a.active::before { transform: scaleY(1); } .sidebar a:hover, .sidebar a.active { background: linear-gradient(90deg, rgba(232, 0, 28, 0.15), transparent); color: var(--primary); transform: translateX(3px); } .sidebar a i { font-size: 1.1rem; transition: var(--transition); } .sidebar a:hover i, .sidebar a.active i { transform: scale(1.15); } /* Burger Button */ .burger { position: fixed; bottom: var(--space-xl); right: var(--space-xl); width: 56px; height: 56px; background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; z-index: 101; box-shadow: 0 4px 24px var(--primary-glow); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition); } /* Overlay pour mobile/tablet */ .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 89; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sidebar-overlay.active { opacity: 1; pointer-events: auto; } .burger:hover { transform: scale(1.1); box-shadow: 0 8px 30px var(--primary-glow), 0 0 20px var(--primary-glow); } .burger:active { transform: scale(0.95); } .burger div { width: 22px; height: 2.5px; background: white; border-radius: 2px; transition: var(--transition); } /* ====== 5. MAIN CHECKLIST UI ====== */ .checklist-main { padding: var(--space-xl); max-width: 1400px; margin: 0 auto; transition: margin 0.3s ease; width: 100%; } .header { text-align: center; margin-bottom: var(--space-3xl); animation: fadeInDown 0.8s var(--bounce); } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .header h1 { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--text-main), var(--text-muted), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-sm); letter-spacing: -0.02em; line-height: 1.2; } .header p { color: var(--text-muted); font-size: 1.1rem; font-weight: 400; } /* Checklist / Routine Tabs */ .checklist-tabs { display: inline-flex; gap: 4px; margin: 0 auto var(--space-2xl); padding: 5px; background: var(--glass-highlight); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); width: fit-content; animation: fadeIn 1s ease; } .checklist-tab-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--text-muted); padding: 0.65rem 1.3rem; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9rem; font-family: inherit; cursor: pointer; transition: var(--transition-fast); } .checklist-tab-btn i { font-size: 0.85rem; } .checklist-tab-btn:hover { color: var(--text-main); } .checklist-tab-btn.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 4px 16px var(--primary-glow); } /* Progress Bar - Enhanced Glow */ .checklist-progress-container { margin-bottom: var(--space-3xl); position: relative; animation: fadeIn 1s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .checklist-progress-label { display: flex; justify-content: space-between; margin-bottom: var(--space-md); font-weight: 600; color: var(--accent); font-size: 0.9rem; } .checklist-progress-bar-bg { width: 100%; height: 10px; background: var(--lift-2); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } .checklist-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); background-size: 200% 100%; animation: shimmer 3s linear infinite; box-shadow: 0 0 20px var(--primary-glow), 0 0 10px var(--secondary-glow); width: 0%; transition: width 0.6s var(--bounce); border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Task Layout */ .checklist-flex { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-xl); animation: fadeInUp 0.8s var(--bounce); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Task Items - Enhanced */ .checklist-task-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-bottom: 1px solid var(--glass-border); transition: var(--transition); animation: slideIn 0.4s ease forwards; border-radius: var(--radius-sm); } @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .checklist-task-item:hover { background: var(--lift-1); border-color: rgba(232, 0, 28, 0.4); transform: translateX(3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .checklist-task-item.completed .checklist-task-label { text-decoration: line-through; opacity: 0.4; color: var(--text-muted); } /* Custom Checkbox - Enhanced */ .checklist-task-checkbox { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 2px solid var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; position: relative; transition: var(--transition); flex-shrink: 0; background: var(--recess-2); } .checklist-task-checkbox:hover { border-color: var(--primary); transform: scale(1.05); } .checklist-task-checkbox:checked { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow), 0 0 5px var(--secondary-glow); animation: checkboxPop 0.3s var(--bounce); } @keyframes checkboxPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .checklist-task-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; color: white; font-weight: 700; } .checklist-task-label { flex: 1; min-width: 0; /* without this, an 's intrinsic content width can force the flex row (and the page) wider than the viewport once someone types a long task name — this is what caused horizontal scrolling on long names */ font-size: 1rem; padding: var(--space-xs); border-radius: var(--radius-sm); transition: var(--transition); background: transparent; text-overflow: ellipsis; /* unfocused long text trails off with "…" instead of just being cut, so it's visually clear there's more to it */ } .checklist-task-label:focus { background: var(--recess-4); outline: 2px solid var(--primary); outline-offset: 2px; } /* Action Buttons */ .checklist-task-controls { display: flex; gap: var(--space-xs); opacity: 0; transition: opacity 0.2s ease; } .checklist-task-item:hover .checklist-task-controls { opacity: 1; } .checklist-action-btn { background: transparent; color: var(--text-muted); padding: 6px; cursor: pointer; border-radius: var(--radius-sm); font-size: 1rem; transition: var(--transition); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .checklist-action-btn:hover { color: var(--secondary); background: rgba(139, 0, 0, 0.15); transform: scale(1.1); } /* Drag handle for reordering tasks (mouse + touch via SortableJS) */ .task-drag-handle { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-dim); cursor: grab; flex-shrink: 0; touch-action: none; /* let SortableJS own touch gestures on the handle instead of the page scrolling */ transition: var(--transition-fast); } .task-drag-handle:hover { color: var(--text-muted); } .task-drag-handle:active { cursor: grabbing; } /* Placeholder shown in the list while a task is being dragged */ .task-drag-ghost { opacity: 0.4; background: var(--glass-highlight); } /* ====== TASK HOUR BADGE + CRONOMETER-STYLE TIME PICKER ====== */ /* Clickable time badge, sits just before the task label */ .checklist-task-hour { display: flex; align-items: center; gap: 6px; flex-shrink: 0; background: linear-gradient(135deg, rgba(232, 0, 28, 0.35), rgba(139, 0, 0, 0.35)); border: 1px solid var(--primary); color: var(--text-main); font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.7rem; border-radius: 99px; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 0 14px rgba(232, 0, 28, 0.35); } .checklist-task-hour i { color: var(--text-main); font-size: 0.75rem; } .checklist-task-hour:hover { transform: scale(1.06); box-shadow: 0 0 20px rgba(232, 0, 28, 0.55); filter: brightness(1.12); } /* No hour set yet — still bright/visible, but reads as "tap to set" rather than "already scheduled" */ .checklist-task-hour.empty { background: rgba(232, 0, 28, 0.14); border: 1px dashed var(--accent); color: var(--text-main); box-shadow: 0 0 10px rgba(232, 0, 28, 0.18); } .checklist-task-hour.empty i { color: var(--accent); } .checklist-task-hour.empty:hover { background: rgba(232, 0, 28, 0.26); border-style: solid; box-shadow: 0 0 16px rgba(232, 0, 28, 0.35); } .checklist-task-hour.empty:hover i { color: var(--text-main); } .checklist-task-item.completed .checklist-task-hour { opacity: 0.4; } /* Popup panel — compact "timer editor": chevron up/down to dial in the hour and minute, inspired by a native timer-edit sheet rather than a plain scroll list */ .time-picker-popup { position: fixed; z-index: 600; width: 252px; background: var(--surface-popup); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow), 0 0 30px rgba(232, 0, 28, 0.18); padding: var(--space-md); animation: fadeInDown 0.2s ease; } .time-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .time-picker-title { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; color: var(--text-main); } .time-picker-title i { color: var(--primary); } .time-picker-delete { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); cursor: pointer; font-size: 0.75rem; transition: var(--transition-fast); flex-shrink: 0; } .time-picker-delete:hover { background: rgba(239, 68, 68, 0.25); transform: scale(1.08); } .time-picker-display { display: flex; align-items: flex-start; justify-content: center; gap: 6px; } .time-picker-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; min-width: 0; } /* The AM/PM unit only needs to fit 2 letters, so it stays narrow instead of eating as much width as the hour/minute columns */ .time-picker-unit.time-picker-period { flex: 0 0 46px; } .time-picker-arrow { display: flex; align-items: center; justify-content: center; width: 100%; height: 22px; background: transparent; color: var(--text-dim); cursor: pointer; border-radius: var(--radius-sm); transition: var(--transition-fast); font-size: 0.75rem; } .time-picker-arrow:hover { color: var(--accent); background: rgba(232, 0, 28, 0.1); } .time-picker-arrow:active { transform: scale(0.88); } .time-picker-value { width: 100%; text-align: center; font-size: 1.65rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); padding: 4px 0 8px; border-bottom: 3px solid var(--glass-border); transition: var(--transition-fast); user-select: none; } .time-picker-period .time-picker-value { font-size: 1rem; letter-spacing: 0.03em; padding-top: 10px; } .time-picker-unit.active .time-picker-value { color: var(--text-main); border-bottom-color: var(--primary); box-shadow: 0 6px 10px -6px var(--primary-glow); background: rgba(232, 0, 28, 0.08); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .time-picker-colon { font-size: 1.3rem; font-weight: 800; color: var(--text-dim); align-self: flex-end; padding-bottom: 12px; } .time-picker-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: var(--space-md); } .time-picker-reminder-note { display: flex; align-items: center; gap: 6px; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--glass-border); font-size: 0.72rem; color: var(--text-dim); } .time-picker-reminder-note i { color: var(--accent); flex-shrink: 0; } .time-picker-save, .time-picker-cancel { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 0.45rem 0.85rem; border-radius: var(--radius-md); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: var(--transition-fast); border: 1px solid var(--glass-border); } .time-picker-save { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--primary-glow); } .time-picker-save:hover { filter: brightness(1.1); transform: translateY(-1px); } .time-picker-cancel { background: transparent; color: var(--text-muted); border-color: transparent; } .time-picker-cancel:hover { background: var(--lift-3); color: var(--text-main); } /* Categories Grid */ .categories { grid-column: 1 / -1; margin-top: var(--space-xl); display: flex; flex-direction: column; align-items: center; } .categories-list { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; } .category-btn { width: auto; background: rgba(232, 0, 28, 0.1); color: var(--accent); border: 1px solid rgba(232, 0, 28, 0.2); padding-right: 2.5rem; position: relative; } .category-btn:hover { background: rgba(232, 0, 28, 0.2); color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); border-color: var(--accent); } .category-delete { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.7rem; color: rgba(255, 255, 255, 0.4); transition: var(--transition); z-index: 2; } .category-delete:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; transform: translateY(-50%) scale(1.2); } /* Template Delete */ .user-tpl { justify-content: space-between; padding-right: var(--space-md); } .template-delete { opacity: 0; color: var(--text-muted); padding: 4px; border-radius: var(--radius-sm); transition: var(--transition); font-size: 0.9rem; } .user-tpl:hover .template-delete { opacity: 1; } .template-delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); transform: scale(1.1); } /* ====== CUSTOM DIALOGS (replaces native confirm()/prompt()) ====== */ .custom-dialog-overlay { position: fixed; inset: 0; /* Confirm/prompt dialogs must always sit above every other overlay (template library, systems modal, upgrade modal, etc. all use z-index 1000 or below) since they can be triggered from inside any of them — e.g. "Activate this System?" while the Systems modal is open. */ z-index: 1100; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: center; padding: var(--space-md); opacity: 0; transition: opacity 0.15s ease; } .custom-dialog-overlay.open { opacity: 1; } .custom-dialog-box { background: var(--glass-surface); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-xl); max-width: 420px; width: 100%; text-align: center; transform: translateY(8px) scale(0.98); transition: transform 0.15s ease; } .custom-dialog-overlay.open .custom-dialog-box { transform: translateY(0) scale(1); } .custom-dialog-icon { font-size: 1.8rem; color: var(--primary); margin-bottom: var(--space-md); } .custom-dialog-body p { color: var(--text-main); font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-md); } .custom-dialog-input { width: 100%; background: var(--recess-3); border: 1px solid var(--glass-border); color: var(--text-main); padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 1rem; /* 16px — prevents iOS auto-zoom on focus */ margin-top: var(--space-xs); } .custom-dialog-actions { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); } .custom-dialog-btn { flex: 1; min-height: 44px; /* real touch target on mobile, no separate override needed */ padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: var(--transition-fast); border: 1px solid var(--glass-border); } .custom-dialog-cancel { background: var(--lift-2); color: var(--text-muted); } .custom-dialog-cancel:hover { background: var(--lift-4); color: var(--text-main); } .custom-dialog-confirm { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border-color: transparent; } .custom-dialog-confirm:hover { filter: brightness(1.1); } .custom-dialog-danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: rgba(239, 68, 68, 0.4); } .custom-dialog-danger:hover { background: rgba(239, 68, 68, 0.25); } /* ====== HISTORY SECTION ====== */ .checklist-history { margin-top: 2rem; border-top: 1px solid var(--glass-border); padding-top: 1rem; } .checklist-history-btn { background: rgba(232, 0, 28, 0.1) !important; color: var(--text-muted) !important; border: 1px solid rgba(232, 0, 28, 0.2) !important; margin: 0 !important; } .checklist-history-btn:hover { background: rgba(232, 0, 28, 0.15) !important; color: var(--primary) !important; border-color: rgba(232, 0, 28, 0.5) !important; transform: none !important; box-shadow: 0 0 16px rgba(232, 0, 28, 0.15) !important; } .checklist-history-btn i { color: var(--primary); } .checklist-history-btn:hover i { transform: rotate(-20deg) scale(1.15) !important; color: var(--primary) !important; } .checklist-history-dropdown { background: var(--surface-dropdown) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; padding: 0.6rem !important; margin-top: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: fadeInDown 0.25s ease; list-style-type: none !important; } #history-list { list-style: none; display: flex; flex-direction: column; gap: 5px; } #history-list li { display: flex; align-items: center; gap: 10px; padding: 0.55rem 0.85rem !important; border-radius: var(--radius-sm); border-bottom: none !important; background: var(--lift-1); border: 1px solid transparent; cursor: pointer; transition: var(--transition); font-size: 0.85rem; color: var(--text-muted); } #history-list li:hover { background: rgba(232, 0, 28, 0.1); border-color: rgba(232, 0, 28, 0.3); color: var(--text-main); transform: translateX(4px); } #history-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: 0.7; } #history-list li small { font-size: 0.76rem; color: var(--primary); background: rgba(232, 0, 28, 0.1); border: 1px solid rgba(232, 0, 28, 0.3); padding: 2px 8px; border-radius: 99px; white-space: nowrap; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; margin-right: auto; } /* Quote Section */ .quote { text-align: center; margin-top: var(--space-3xl); opacity: 0.6; font-style: italic; font-size: 1.05rem; color: var(--text-muted); animation: fadeIn 1.5s ease 0.5s backwards; } /* Footer */ .footer { margin-top: 2rem; padding: var(--space-xl); text-align: center; color: var(--text-dim); font-size: 0.85rem; border-top: 1px solid var(--glass-border); background: var(--surface-footer); backdrop-filter: blur(10px); } /* ====== 5.5 DASHBOARD CARD SYSTEM (reusable across every page) ====== Originally lived as a page-scoped