/* ═══════════════════════════════════════════════════════════════ STYLE.CSS — SpoonSync ═══════════════════════════════════════════════════════════════ CSS (Cascading Style Sheets) controls how everything looks. It works by targeting HTML elements with "selectors" and then applying visual rules to them. The basic syntax is always: selector { property: value; property: value; } "Cascading" means rules can override each other — more specific selectors win over more general ones. If two rules conflict, the more specific one (or the later one) wins. */ /* ══════════════════════════════════════════ RESET & BASE Browsers have their own built-in styles (margins, padding, font sizes). We remove those first so we start from a clean slate. ══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* * means "select every element." *::before and *::after select pseudo-elements (decorative bits that CSS can generate, like the checkmark on our checkbox). box-sizing: border-box — by default, if you set width:200px and then add padding:20px, the element becomes 240px wide. border-box changes this so padding is INCLUDED in the width. Much more intuitive. This is standard practice in modern CSS. margin: 0; padding: 0; — strip all browser default spacing. */ /* ══════════════════════════════════════════ CSS CUSTOM PROPERTIES (VARIABLES) Define colors, sizes, and other values once, then reuse them throughout. If you want to change the green color, you change it in one place here and it updates everywhere. ══════════════════════════════════════════ */ :root { /* :root targets the element — the very top of the page. Variables defined here are available everywhere in the CSS. Custom properties always start with two dashes: --name. Use them with var(--name). */ /* ── Energy tier colors ── Each tier has four shades: main color, background tint, mid tint, soft tint */ --high: #16a34a; /* Rich green — main accent */ --high-bg: #f0fdf4; /* Very light green — barely visible */ --high-mid: #bbf7d0; /* Medium green — for badges */ --high-soft: #dcfce7; /* Soft green — for hover states */ --medium: #d97706; /* Amber/orange */ --medium-bg: #fffbeb; --medium-mid: #fde68a; --medium-soft: #fef3c7; --low: #dc2626; /* Red — note: low energy, not failure */ --low-bg: #fff1f2; --low-mid: #fecaca; --low-soft: #fee2e2; /* ── Neutral colors ── */ --surface: #ffffff; /* White — card backgrounds */ --bg: #f8f7f5; /* Warm off-white — content box background */ --page-bg: #dedad4; /* Slightly darker warm gray — the outer page background */ --border: #e5e3df; /* Light warm gray — lines and outlines */ --text: #1c1917; /* Near-black — main text */ --text-muted: #78716c; /* Medium gray — secondary text */ --text-faint: #a8a29e; /* Light gray — placeholder/hint text */ /* ── Spacing & shape ── */ --radius-sm: 6px; /* Small rounded corners */ --radius: 10px; /* Standard rounded corners */ --radius-lg: 16px; /* Large rounded corners (modals) */ /* ── Shadows ── Box shadows use: x-offset y-offset blur spread color Multiple shadows are separated by commas. rgba(0,0,0,.08) = black at 8% opacity. */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06); --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); /* ── Font stack ── Lists fonts in order of preference. If Inter fails to load, the browser tries system-ui (the OS default font), then -apple-system (Apple's system font), then sans-serif (the browser's default sans-serif). */ --font: 'Inter', system-ui, -apple-system, sans-serif; } /* ══════════════════════════════════════════ BASE BODY STYLES Applied to the entire page. ══════════════════════════════════════════ */ /* ── Dark mode overrides ── */ [data-theme="dark"] { --surface: #28251f; --bg: #1c1916; --page-bg: #0f0e0c; --border: #3d3a35; --text: #f2f0ed; --text-muted: #a8a29e; --text-faint: #6b6560; --high-soft: rgba(22, 163, 74, .15); --high-mid: rgba(22, 163, 74, .25); --medium-soft: rgba(217, 119, 6, .15); --medium-mid: rgba(217, 119, 6, .25); --low-soft: rgba(220, 38, 38, .15); --low-mid: rgba(220, 38, 38, .25); } [data-theme="dark"] .app-header { background: rgba(28, 25, 22, 0.96); } /* Buttons that use --text as background need dark text in dark mode, because --text flips to near-white */ [data-theme="dark"] .btn-primary { color: var(--bg); } [data-theme="dark"] .btn-primary:hover { background: #e8e4df; } [data-theme="dark"] .btn-primary:active { background: #d8d4cf; } [data-theme="dark"] .nav-btn.active { color: var(--bg); } [data-theme="dark"] .priority-opt.selected { color: var(--bg); } [data-theme="dark"] .priority-opt.selected span { color: rgba(0, 0, 0, .5); } [data-theme="dark"] .mood-card.selected { color: var(--bg); } [data-theme="dark"] .mood-card.selected .mood-desc { color: rgba(0, 0, 0, .45); } body { font-family: var(--font); /* Use our Inter font stack */ background: var(--page-bg); /* The outer background — visible around the content box */ color: var(--text); /* Default text color */ min-height: 100vh; /* At least as tall as the screen (vh = viewport height) */ font-size: 15px; /* Base font size — everything else is relative to this */ line-height: 1.5; /* Space between lines (1.5x the font size) */ -webkit-font-smoothing: antialiased; /* Makes text look smoother on Mac/iOS */ } /* ══════════════════════════════════════════ APP SHELL The main container that centers content and limits its width on wide screens. ══════════════════════════════════════════ */ #app { max-width: 720px; margin: 40px auto; /* 40px top/bottom gap from the page edge */ padding: 0 20px 80px; background: var(--bg); /* The content box color */ border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.08); min-height: calc(100vh - 80px); /* Box fills most of the viewport height */ } /* ══════════════════════════════════════════ HEADER ══════════════════════════════════════════ */ .app-header { position: sticky; /* Sticks to the top as you scroll */ top: 0; /* Stuck to the very top edge */ z-index: 100; /* z-index controls stacking order. Higher numbers appear on top. 100 ensures the header appears above task cards when scrolling. z-index only works on elements with a position set. */ background: rgba(248, 247, 245, 0.96); border-radius: 16px 16px 0 0; /* rgba = red, green, blue, alpha (opacity). 0.92 = 92% opaque — slightly see-through, so you can faintly see content scrolling behind the header. */ backdrop-filter: blur(8px); /* Blurs whatever is behind this element. Pairs with the semi-transparent background to create a "frosted glass" effect. Modern CSS magic. */ border-bottom: 1px solid var(--border); margin: 0 -20px; /* Negative margin! Cancels the #app padding so the header extends edge-to-edge while content below stays padded */ padding: 0 20px; /* Re-add padding inside the header itself */ } .header-inner { display: flex; /* Flexbox — makes children sit in a row */ align-items: center; /* Vertically center the logo and nav */ justify-content: space-between; /* Push logo left, nav right */ height: 60px; } .wordmark { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; } /* rem = "root em" — relative to the base font size. 1.25rem = 1.25 × 15px = 18.75px. letter-spacing: -0.02em tightens the letters slightly, which looks more polished for logos at larger sizes. */ .wordmark-spoon { color: var(--text); } /* "Working" — dark */ .wordmark-sync { color: var(--high); } /* "Mind" — green */ .main-nav { display: flex; gap: 4px; } .theme-toggle { background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); font-size: 1rem; line-height: 1; transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; } .theme-toggle:hover { background: var(--border); color: var(--text); } /* gap adds space BETWEEN flex children, not around the edges */ .nav-btn { background: none; /* No fill */ border: none; /* No outline */ padding: 6px 14px; border-radius: var(--radius-sm); font-family: var(--font); /* Buttons don't inherit font by default — must set it */ font-size: .875rem; /* 0.875 × 15px = ~13px */ font-weight: 500; color: var(--text-muted); cursor: pointer; /* Shows hand cursor on hover */ transition: background .15s, color .15s; /* transition makes property changes animate smoothly instead of jumping instantly. ".15s" = 150 milliseconds. We list exactly which properties to animate for performance. */ } .nav-btn:hover { background: var(--border); color: var(--text); } /* :hover is a pseudo-class — it applies when the mouse is over the element. The transition above makes this change smooth. */ .nav-btn.active { background: var(--text); color: #fff; } /* .nav-btn.active matches elements with BOTH classes. (No space between them = must have both.) This is the selected state — dark background, white text. */ /* ══════════════════════════════════════════ FEATURE SECTIONS The main content areas (Tasks and Timer). Only the "active" one is visible at a time. ══════════════════════════════════════════ */ .feature { display: none; padding-top: 28px; } /* All feature sections are hidden by default */ .feature.active { display: block; } /* The active one becomes visible. JS swaps this class. */ /* ══════════════════════════════════════════ ENERGY BAR The "Today's energy" row at the top of the task view. ══════════════════════════════════════════ */ .energy-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .energy-bar-label { font-size: .8125rem; /* 13px */ font-weight: 500; color: var(--text-muted); white-space: nowrap; /* Prevent the label from wrapping to a new line */ } .energy-btns { display: flex; gap: 8px; } .energy-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; /* Very large radius = pill shape (fully rounded ends) */ border: 1.5px solid var(--border); background: var(--surface); font-family: var(--font); font-size: .8125rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all .15s; /* "all" animates every changing property */ } .energy-btn:hover { border-color: #ccc; color: var(--text); } /* Starred states — one for each energy level */ .energy-btn.starred[data-level="high"] { background: var(--high-soft); border-color: var(--high); color: var(--high); } .energy-btn.starred[data-level="medium"] { background: var(--medium-soft); border-color: var(--medium); color: var(--medium); } .energy-btn.starred[data-level="low"] { background: var(--low-soft); border-color: var(--low); color: var(--low); } /* .energy-btn.starred[data-level="high"] is a combined selector: - .energy-btn = must have this class - .starred = must also have this class - [data-level="high"] = must have this HTML attribute with this value All three conditions must be true at once. */ .energy-btn.starred::after { content: ' ✦'; font-size: .7rem; } /* ::after is a pseudo-element — CSS can insert content after an element without adding anything to the HTML. Here it appends a star symbol to starred energy buttons. content: ' ✦' is the text to insert (space + star). */ .energy-dot { width: 8px; height: 8px; border-radius: 50%; /* 50% of width/height = perfect circle */ flex-shrink: 0; /* Don't let flexbox shrink this element */ } .high-dot { background: var(--high); } .medium-dot { background: var(--medium); } .low-dot { background: var(--low); } /* ══════════════════════════════════════════ TABS The High / Medium / Low tab bar. ══════════════════════════════════════════ */ .tabs-row { display: flex; gap: 0; border-bottom: 2px solid var(--border); /* The gray line under the tabs */ margin-bottom: 24px; } .tab-btn { display: flex; align-items: center; gap: 7px; padding: 10px 18px; border: none; background: none; font-family: var(--font); font-size: .9375rem; /* 15px */ font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2.5px solid transparent; /* Invisible underline, ready to become colored */ margin-bottom: -2px; /* Negative margin! The tab row has border-bottom: 2px. We move each tab down 2px so its own border-bottom sits exactly ON TOP of the row's border-bottom, hiding it. When a tab is active, its colored border shows instead. */ transition: color .15s, border-color .15s; } .tab-btn:hover { color: var(--text); } /* Active tab underline color matches its energy tier */ .tab-btn.active[data-tab="high"] { color: var(--high); border-bottom-color: var(--high); } .tab-btn.active[data-tab="medium"] { color: var(--medium); border-bottom-color: var(--medium); } .tab-btn.active[data-tab="low"] { color: var(--low); border-bottom-color: var(--low); } .tab-btn.suggested::after { content: ' ✦'; font-size: .65rem; opacity: .7; } /* Appends a star to the tab matching today's energy level */ .tab-pip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .high-pip { background: var(--high); } .medium-pip { background: var(--medium); } .low-pip { background: var(--low); } .tab-badge { background: var(--border); color: var(--text-muted); font-size: .7rem; font-weight: 600; padding: 1px 6px; border-radius: 999px; min-width: 20px; text-align: center; transition: background .15s, color .15s; } /* Badge colors change to match the active tab's tier color */ .tab-btn.active[data-tab="high"] .tab-badge { background: var(--high-mid); color: var(--high); } .tab-btn.active[data-tab="medium"] .tab-badge { background: var(--medium-mid); color: var(--medium); } .tab-btn.active[data-tab="low"] .tab-badge { background: var(--low-mid); color: var(--low); } /* Note the space between .tab-btn.active[...] and .tab-badge — a space means "descendant selector." This targets .tab-badge INSIDE an active tab button. It does NOT apply to tab-badge in inactive tabs. */ /* ══════════════════════════════════════════ TASK CARDS ══════════════════════════════════════════ */ .task-area { min-height: 300px; } /* Reserve space so the layout doesn't collapse when the list is empty */ #task-list { display: flex; flex-direction: column; gap: 10px; } /* flex-direction: column stacks children vertically instead of the default horizontal row. gap adds space between cards. */ .task-card { display: flex; align-items: flex-start; /* Align children to the top */ gap: 12px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, opacity .3s, transform .3s; position: relative; /* Required for the accent bar's absolute positioning */ overflow: hidden; /* Clips the accent bar to the card's rounded corners */ } .task-card:hover { box-shadow: var(--shadow); } /* Slightly larger shadow on hover = card "lifts" */ .task-card.completed { opacity: .5; } /* Fade completed tasks to 50% opacity */ .task-card.completing { animation: completeSlide .4s ease forwards; /* animation: name duration easing fill-mode "forwards" means the element stays in its final animated state rather than snapping back to the start. */ } @keyframes completeSlide { /* @keyframes defines a named animation. 0% is the start state, 100% is the end state. The browser smoothly transitions between them. */ 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(12px); opacity: 0; } /* Slides 12px to the right and fades out simultaneously */ } /* The colored left-edge accent bar */ .task-card-accent { position: absolute; /* Removed from normal flow, positioned relative to .task-card */ left: 0; top: 0; bottom: 0; /* Stretch full height */ width: 3px; border-radius: 3px 0 0 3px; /* border-radius shorthand: top-left top-right bottom-right bottom-left So only the left corners are rounded (matching the card's corner). */ } /* Color the accent bar based on the card's data-tier attribute */ .task-card[data-tier="high"] .task-card-accent { background: var(--high); } .task-card[data-tier="medium"] .task-card-accent { background: var(--medium); } .task-card[data-tier="low"] .task-card-accent { background: var(--low); } /* ── Checkbox ── */ .task-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; margin-top: 1px; /* Tiny nudge to align with the text baseline */ appearance: none; -webkit-appearance: none; /* appearance: none removes the browser's default checkbox styling so we can style it ourselves completely. -webkit- is a vendor prefix for older Safari/Chrome. */ } .task-check:hover { border-color: var(--high); background: var(--high-soft); } .task-check.checked { background: var(--high); border-color: var(--high); } .task-check.checked::after { /* The checkmark inside the circle — drawn entirely with CSS! We create a rectangle, hide two of its four borders, and rotate it 45° to make an "L" shape that looks like a ✓. */ content: ''; /* Required for ::after — even empty string works */ display: block; width: 5px; height: 9px; border: 2px solid white; border-top: none; /* Hide the top border — L shape */ border-left: none; /* Hide the left border — L shape */ transform: rotate(45deg) translateY(-1px); /* Tilt the L into a checkmark */ } /* ── Task body ── */ .task-body { flex: 1; min-width: 0; } /* flex: 1 makes this element grow to fill available space, pushing the action buttons to the far right. min-width: 0 is a flexbox quirk fix — without it, long task names can overflow past the card's edge instead of wrapping. Setting min-width: 0 allows the text to shrink. */ .task-name { font-size: .9375rem; /* 15px */ font-weight: 500; color: var(--text); word-break: break-word; /* Break very long words instead of overflowing */ } .completed .task-name { text-decoration: line-through; color: var(--text-faint); } /* .completed .task-name — "inside .completed, find .task-name" Strikes through the task name when the card has .completed class. */ .task-meta { display: flex; flex-wrap: wrap; /* Allow items to wrap to a new line if needed */ align-items: center; gap: 8px; margin-top: 5px; } .task-cat { font-size: .75rem; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--border); color: var(--text-muted); } .task-priority { font-size: .7rem; color: var(--text-faint); letter-spacing: .05em; /* Slight spacing between the ✦ stars */ } .task-due { font-size: .75rem; color: var(--text-muted); display: flex; align-items: center; gap: 3px; } /* These classes are added by JS based on how close the due date is */ .task-due.overdue { color: var(--low); font-weight: 600; } .task-due.due-soon { color: var(--medium); font-weight: 600; } /* ── Task action buttons (edit/delete) ── */ .task-actions-row { display: flex; gap: 4px; margin-left: auto; /* Pushes this group to the far right */ flex-shrink: 0; /* Don't let it compress */ } .task-icon-btn { background: none; border: none; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-faint); font-size: .85rem; line-height: 1; transition: background .15s, color .15s; } .task-icon-btn:hover { background: var(--border); color: var(--text); } .task-icon-btn.delete:hover { background: var(--low-soft); color: var(--low); } /* Delete button gets a red tint on hover as a warning signal */ /* ══════════════════════════════════════════ EMPTY STATE Shown when a tab has no tasks. ══════════════════════════════════════════ */ .empty-state { display: flex; flex-direction: column; align-items: center; /* Center children horizontally */ justify-content: center; /* Center children vertically */ gap: 8px; padding: 64px 0; color: var(--text-faint); text-align: center; } .empty-icon { font-size: 2rem; opacity: .4; } .empty-state p { font-size: .9375rem; } .empty-sub { font-size: .8125rem !important; } /* !important forces this rule to win even if another selector with equal specificity conflicts. Use sparingly — it can make CSS hard to debug. Here it overrides the .empty-state p rule above. */ .hidden { display: none !important; } /* Our utility class. Any element with class="hidden" disappears. !important ensures it always wins, even against more specific rules. JS adds/removes this class constantly throughout the app. */ /* ══════════════════════════════════════════ BOTTOM BAR The row with "Add Task" and secondary buttons. ══════════════════════════════════════════ */ .bottom-bar { display: flex; align-items: center; gap: 12px; margin-top: 32px; } .bottom-bar-right { display: flex; gap: 8px; margin-left: auto; } /* margin-left: auto pushes this group to the right */ /* ══════════════════════════════════════════ BUTTON STYLES Two reusable button designs used throughout the app. ══════════════════════════════════════════ */ .btn-primary { background: var(--text); /* Dark fill */ color: #fff; border: none; padding: 9px 18px; border-radius: var(--radius); font-family: var(--font); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; } .btn-primary:hover { background: #333; } .btn-primary:active { transform: scale(.98); } /* :active applies while the button is being clicked. scale(.98) shrinks it slightly — a tactile "press" feel. */ .btn-ghost { background: none; color: var(--text-muted); border: 1.5px solid var(--border); padding: 8px 14px; border-radius: var(--radius); font-family: var(--font); font-size: .875rem; font-weight: 500; cursor: pointer; transition: all .15s; } .btn-ghost:hover { border-color: #bbb; color: var(--text); } /* ══════════════════════════════════════════ MODALS The popup dialogs for adding tasks and managing categories. ══════════════════════════════════════════ */ .modal-overlay { position: fixed; /* Fixed to the viewport — doesn't scroll with the page */ inset: 0; /* Shorthand for top:0; right:0; bottom:0; left:0 — full screen */ background: rgba(0,0,0,.4); /* 40% black = dark translucent backdrop */ backdrop-filter: blur(4px); /* Blur the content behind */ z-index: 200; /* Above the header (z-index: 100) and everything else */ display: flex; align-items: center; /* Center modal vertically */ justify-content: center; /* Center modal horizontally */ padding: 20px; } .modal { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 480px; /* Never wider than 480px, but shrinks on smaller screens */ box-shadow: var(--shadow-lg); animation: modalIn .2s ease; } @keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } /* The modal scales from 96%→100% and moves up 8px as it appears. Combined with the fade-in, this creates a smooth "pop up" feeling. */ } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .modal-header h2 { font-size: 1.1rem; font-weight: 700; } .modal-close { background: none; border: none; font-size: .875rem; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: background .15s; } .modal-close:hover { background: var(--border); color: var(--text); } /* ── Form fields ── */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .field label { font-size: .8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; /* Makes label text ALL CAPS */ letter-spacing: .04em; /* Slightly wider letter spacing — common for ALL CAPS labels */ } .optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); font-size: .75rem; } .field input[type="text"], .field input[type="date"], .field select { /* This selector targets three different element types at once. Each line is a separate selector; they all get the same rules. */ padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); /* Inputs don't inherit font — must specify */ font-size: .9375rem; color: var(--text); background: var(--surface); outline: none; /* Remove the browser's default blue focus ring */ transition: border-color .15s; width: 100%; } .field input:focus, .field select:focus { border-color: #999; } /* :focus applies when the element is active/selected (clicked into). We darken the border to signal "this field is active." */ .field-error { font-size: .8125rem; color: var(--low); } /* Red error message below a field */ /* ── Priority selector ── */ .priority-row { display: flex; gap: 6px; } .priority-opt { flex: 1; /* Each option takes equal width */ display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); font-family: var(--font); font-size: .8rem; color: var(--text-muted); cursor: pointer; transition: all .15s; } .priority-opt span { font-size: .65rem; color: var(--text-faint); } .priority-opt:hover { border-color: #bbb; color: var(--text); } .priority-opt.selected { border-color: var(--text); background: var(--text); /* Dark fill when selected */ color: #fff; } .priority-opt.selected span { color: rgba(255,255,255,.7); } /* ── Tier selector (in categories modal) ── */ .tier-row { display: flex; gap: 8px; } .tier-opt { flex: 1; padding: 8px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); font-family: var(--font); font-size: .875rem; font-weight: 500; cursor: pointer; transition: all .15s; color: var(--text-muted); } /* Each tier option gets its own color when selected */ .tier-opt.selected.high-tier { background: var(--high-soft); border-color: var(--high); color: var(--high); } .tier-opt.selected.medium-tier { background: var(--medium-soft); border-color: var(--medium); color: var(--medium); } .tier-opt.selected.low-tier { background: var(--low-soft); border-color: var(--low); color: var(--low); } .tier-opt:not(.selected):hover { border-color: #bbb; } /* :not(.selected) — "only if it does NOT have the .selected class" We want the hover effect only on unselected options. */ .modal-footer { display: flex; gap: 10px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); } /* ── Categories list ── */ #cat-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; max-height: 220px; overflow-y: auto; /* If there are many categories, the list scrolls vertically instead of making the modal taller and taller. */ } .cat-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--bg); } .cat-item-name { flex: 1; font-size: .9375rem; font-weight: 500; } .cat-item-tier { font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; } .cat-item-tier.high { background: var(--high-soft); color: var(--high); } .cat-item-tier.medium { background: var(--medium-soft); color: var(--medium); } .cat-item-tier.low { background: var(--low-soft); color: var(--low); } .cat-delete { background: none; border: none; color: var(--text-faint); font-size: .8rem; cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); transition: all .15s; } .cat-delete:hover { background: var(--low-soft); color: var(--low); } .cat-nudge { background: var(--medium-soft); color: var(--medium); font-size: .8125rem; font-weight: 500; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 16px; } .cat-divider { height: 1px; background: var(--border); margin-bottom: 20px; } .cat-form-heading { font-size: .8125rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; } /* ══════════════════════════════════════════ TIMER: CONFIG VIEW The setup screen shown before a session starts. ══════════════════════════════════════════ */ .timer-heading { font-size: 1.1rem; font-weight: 700; margin-bottom: 28px; color: var(--text); } .config-row { display: flex; gap: 16px; margin-bottom: 36px; } .config-stepper { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 12px; } .stepper-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; text-align: center; } .stepper-control { display: flex; align-items: center; gap: 10px; } .stepper-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg); font-size: 1rem; line-height: 1; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all .15s; } .stepper-btn:hover { border-color: var(--text); color: var(--text); background: var(--surface); } .stepper-val { font-size: 1.5rem; font-weight: 700; color: var(--text); min-width: 2.5ch; /* ch = the width of the "0" character. 2.5ch holds "99" comfortably */ text-align: center; } .stepper-unit { font-size: .75rem; color: var(--text-faint); } /* ── Mood selector ── */ .mood-section { margin-bottom: 28px; } .mood-section-label { display: flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; } .mood-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .work-mood-dot { background: var(--high); } .break-mood-dot { background: var(--medium); } .mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); /* CSS Grid — a powerful 2D layout system. repeat(4, 1fr) = 4 equal-width columns. "fr" = "fraction" — each column gets 1 equal share of space. We have 4 moods, so 4 columns gives one card per column. */ gap: 8px; } .mood-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: all .15s; text-align: center; } .mood-card:hover { border-color: #bbb; } .mood-card.selected { border-color: var(--text); background: var(--text); color: #fff; } .mood-emoji { font-size: 1.4rem; line-height: 1; } .mood-name { font-size: .75rem; font-weight: 600; color: inherit; } /* color: inherit — use whatever color the parent has. When selected, the parent (.mood-card) has color: #fff, so this inherits white. Without it, it might stay gray. */ .mood-desc { font-size: .65rem; color: var(--text-faint); line-height: 1.3; } .mood-card.selected .mood-desc { color: rgba(255,255,255,.6); } .config-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; } .btn-large { padding: 11px 28px; font-size: 1rem; } /* Modifier class — adds extra padding to make a button larger */ .music-note { font-size: .8125rem; color: var(--text-faint); font-style: italic; } /* ══════════════════════════════════════════ TIMER: ACTIVE VIEW The countdown screen shown during a session. ══════════════════════════════════════════ */ #timer-active { display: flex; flex-direction: column; align-items: center; /* Center everything horizontally */ padding-top: 12px; gap: 20px; /* Space between each element */ } .timer-phase-label { font-size: .75rem; font-weight: 700; letter-spacing: .15em; /* Wide tracking for ALL CAPS label */ color: var(--text-muted); text-transform: uppercase; transition: color .4s; } .timer-phase-label.work { color: var(--high); } /* Green during work */ .timer-phase-label.break { color: var(--medium); } /* Amber during break */ /* ── The SVG ring ── */ .timer-ring-wrap { position: relative; /* Parent for the absolutely-positioned text */ width: 220px; height: 220px; } .timer-ring { width: 100%; height: 100%; transform: rotate(-90deg); /* SVG circles start at the 3 o'clock position and go clockwise. Rotating -90° makes the ring start at 12 o'clock (top), which is what we expect for a timer. */ } .ring-track { fill: none; /* Don't fill the inside of the circle */ stroke: var(--border); /* The border/outline color */ stroke-width: 6; /* Thickness of the ring */ } .ring-progress { fill: none; stroke: var(--high); /* Green by default (work phase) */ stroke-width: 6; stroke-linecap: round; /* Rounded ends on the dash */ transition: stroke-dashoffset .9s linear, stroke .4s; /* stroke-dashoffset is the key property for the animation. We animate it smoothly over 0.9s. stroke (the color) transitions over 0.4s when phase changes. */ stroke-dasharray: 552.92; /* stroke-dasharray sets the pattern of dashes. With one value, the entire stroke is one long dash. 552.92 = the full circumference of our circle (2 × π × 88). Combined with stroke-dashoffset, this creates the "drain" effect. How it works: - dasharray: 552.92 = one dash that's the full circle length - dashoffset: 0 = dash starts at position 0 = full ring visible - dashoffset: 552.92 = dash is offset the full length = invisible - JS sets dashoffset to (circumference × progress) as time passes, making the ring appear to drain away. */ stroke-dashoffset: 0; /* Full ring visible at start */ } .ring-progress.break-phase { stroke: var(--medium); } .timer-display { position: absolute; inset: 0; /* Fill the ring-wrap container completely */ display: flex; flex-direction: column; align-items: center; justify-content: center; /* Center the text in the middle of the ring */ gap: 4px; } .timer-time { font-size: 2.75rem; font-weight: 700; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; /* tabular-nums makes all digits the same width. Without this, "11:11" is narrower than "08:00" because "1" is naturally thinner than "8". The counter would jiggle left and right as digits change. tabular-nums fixes this. */ } .timer-cycle-label { font-size: .8rem; color: var(--text-faint); } /* ── Cycle progress dots ── */ .cycle-dots { display: flex; gap: 8px; } .cycle-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); /* Gray by default (upcoming cycle) */ transition: background .3s; } .cycle-dot.work-done { background: var(--high); } /* Green = completed cycle */ .cycle-dot.active { background: var(--text); } /* Dark = current cycle */ /* ── Now playing ── */ .now-playing { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; /* Pill shape */ padding: 7px 16px; font-size: .875rem; color: var(--text-muted); max-width: 340px; } .now-playing-icon { color: var(--text-faint); font-size: .9rem; } .now-playing-text { overflow: hidden; white-space: nowrap; /* Force text onto one line */ text-overflow: ellipsis; /* Show "..." if text is too long */ max-width: 260px; } .timer-controls { display: flex; align-items: center; gap: 12px; } /* ══════════════════════════════════════════ TIMER: DONE VIEW The "Session complete" screen. ══════════════════════════════════════════ */ #timer-done { display: flex; justify-content: center; padding-top: 60px; } .timer-done-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-muted); } .done-icon { font-size: 2.5rem; color: var(--high); } .timer-done-inner h2 { font-size: 1.4rem; color: var(--text); } .timer-done-inner p { font-size: .9375rem; } /* ══════════════════════════════════════════ CELEBRATION CANVAS The transparent full-screen layer that JS draws confetti particles on. ══════════════════════════════════════════ */ #celebration-canvas { position: fixed; /* Fixed to viewport — follows scrolling */ inset: 0; /* Full screen */ pointer-events: none; /* pointer-events: none makes the canvas completely invisible to mouse clicks. Clicks pass right through it to whatever is underneath. Critical — otherwise the canvas would block all interaction with the app below it. */ z-index: 1000; /* Above everything — even modals */ width: 100%; height: 100%; }