/* style.css One shared stylesheet for every page, so the whole app looks consistent and we only have to change a color or spacing rule in one place. The colours live in variables so the whole app can switch to the "calm colours" theme (a softer, less saturated palette some children find easier on the eyes) by flipping one class on . */ :root { --bg: #fef6fb; /* page background */ --accent: #d6488f; /* headings, active states */ --accent-soft: #ff9bc2; /* big friendly buttons */ --text: #3a2e3a; /* main text */ --text-soft: #6b5a66; /* secondary text */ --muted: #9b8a95; /* hints and inactive items */ --faint: #b7a8b2; /* completed/empty text */ --line: #f3d9e7; /* borders */ --tint: #fde7f1; /* soft highlight fills */ --tint-line: #f8e8f1; /* hairlines inside cards */ } body.calm-theme { --bg: #f6f4f2; --accent: #8d7386; --accent-soft: #b3a0ad; --text: #444046; --text-soft: #6d666e; --muted: #948e95; --faint: #aaa4ab; --line: #e6e1e4; --tint: #ede9ec; --tint-line: #eeeaed; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); padding-bottom: 90px; /* leaves room so content isn't hidden behind the bottom nav */ } .screen { max-width: 480px; margin: 0 auto; padding: 24px 20px 20px; min-height: 100vh; } /* ---------- Home page ---------- */ .home-header { text-align: center; margin-bottom: 32px; } .heart-icon { font-size: 56px; line-height: 1; } .home-header h1 { font-size: 28px; margin: 8px 0 0; color: var(--accent); } .home-nav { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .home-nav-button { display: flex; align-items: center; gap: 14px; background: white; border-radius: 18px; padding: 18px 20px; font-size: 18px; font-weight: 600; text-decoration: none; color: var(--text); box-shadow: 0 2px 8px rgba(214, 72, 143, 0.12); } .home-nav-icon { font-size: 26px; } .new-task-button { display: flex; align-items: center; justify-content: center; position: relative; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: var(--accent-soft); font-size: 38px; text-decoration: none; box-shadow: 0 4px 12px rgba(214, 72, 143, 0.3); } .plus-badge { position: absolute; bottom: -2px; right: -2px; background: var(--accent); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; } /* ---------- Bottom navigation bar ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: white; border-top: 1px solid var(--line); padding: 10px 0 max(10px, env(safe-area-inset-bottom)); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; text-decoration: none; color: var(--muted); font-weight: 600; } .bottom-nav-item span:first-child { font-size: 22px; } .bottom-nav-item.active { color: var(--accent); } /* ---------- Coming soon placeholder pages ---------- */ .coming-soon-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 70vh; } .coming-soon-icon { font-size: 48px; margin-bottom: 12px; } .coming-soon-screen p { color: var(--muted); } /* ---------- Task List page ---------- */ .tasks-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .tasks-date { font-size: 20px; font-weight: 700; color: var(--accent); } .new-task-small-button { background: var(--accent-soft); color: white; border: none; border-radius: 20px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; } .time-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .time-tab { flex: 1; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--text-soft); font-size: 14px; font-weight: 600; cursor: pointer; } .time-tab.active { background: var(--accent); border-color: var(--accent); color: white; } .task-group { margin-bottom: 28px; } .task-group-title { font-size: 16px; margin: 0 0 10px; color: var(--text-soft); } .task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .task-item { display: flex; align-items: center; gap: 12px; background: white; border-radius: 14px; padding: 14px 16px; box-shadow: 0 2px 6px rgba(214, 72, 143, 0.1); } .task-item.completed .task-name { text-decoration: line-through; color: var(--faint); } .task-checkbox { width: 26px; height: 26px; accent-color: var(--accent); flex-shrink: 0; } .task-name { flex-grow: 1; font-size: 16px; } .drag-handle { color: #d8c6d3; font-size: 18px; cursor: grab; flex-shrink: 0; } .task-item.dragging { opacity: 0.4; } .delete-task-btn { background: none; border: none; font-size: 16px; cursor: pointer; flex-shrink: 0; padding: 10px 6px; margin: -10px -2px; } .delete-choice-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } /* ---------- Celebration overlay ---------- */ .celebration-overlay { display: none; position: fixed; inset: 0; background: rgba(214, 72, 143, 0.35); align-items: center; justify-content: center; z-index: 10; } .celebration-overlay.visible { display: flex; } .celebration-card { background: white; border-radius: 24px; padding: 36px 28px; text-align: center; max-width: 320px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .celebration-trophy { font-size: 56px; margin-bottom: 12px; } .celebration-card h2 { margin: 0 0 20px; color: var(--accent); } .celebration-dismiss { background: var(--accent-soft); color: white; border: none; border-radius: 20px; padding: 12px 28px; font-size: 16px; font-weight: 700; cursor: pointer; } /* ---------- New Task screen ---------- */ .new-task-title { color: var(--accent); font-size: 24px; margin: 0 0 20px; } .field-label { font-weight: 700; font-size: 14px; color: var(--text-soft); margin: 20px 0 8px; } .text-field { width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--text); } /* !important so being "hidden" always wins, whatever else the element is */ .hidden-field { display: none !important; } .toggle-pair { display: flex; gap: 8px; } .toggle-option { flex: 1; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; } .toggle-option.active { background: var(--accent-soft); border-color: var(--accent-soft); color: white; } .days-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .day-chip { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; } .day-chip.active { background: var(--accent); border-color: var(--accent); color: white; } .time-band-picker { display: flex; gap: 8px; margin-top: 12px; } .time-band-chip { flex: 1; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--text-soft); font-size: 14px; font-weight: 600; cursor: pointer; } .time-band-chip.active { background: var(--accent); border-color: var(--accent); color: white; } .hour-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .hour-chip { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--text-soft); font-size: 16px; font-weight: 700; cursor: pointer; } .hour-chip.active { background: var(--accent); border-color: var(--accent); color: white; } .ampm-toggle { display: flex; gap: 8px; margin-top: 10px; margin-bottom: 8px; } .ampm-toggle .toggle-option { padding: 10px 8px; } .add-task-button { width: 100%; margin-top: 28px; background: var(--accent-soft); color: white; border: none; border-radius: 16px; padding: 16px; font-size: 17px; font-weight: 700; cursor: pointer; } /* ---------- Calendar page ---------- */ .calendar-title { color: var(--accent); font-size: 24px; margin: 0 0 16px; } .calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; } .cal-nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--accent); font-size: 22px; line-height: 1; font-weight: 700; cursor: pointer; flex-shrink: 0; } .cal-label { flex-grow: 1; text-align: center; font-size: 16px; font-weight: 700; color: var(--text-soft); } .calendar-empty-note { margin: 0 0 10px; text-align: center; color: var(--faint); font-size: 14px; } /* Day view: a vertical timeline with hour lines, events drawn as coloured blocks positioned by their start/end times */ .day-timeline { position: relative; background: white; border-radius: 14px; box-shadow: 0 2px 6px rgba(214, 72, 143, 0.1); overflow: hidden; } .timeline-hour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--tint-line); } .timeline-hour-label { position: absolute; top: 2px; left: 8px; font-size: 11px; font-weight: 700; color: var(--faint); } .timeline-events-layer { position: absolute; top: 0; bottom: 0; left: 56px; right: 6px; } .timeline-event { position: absolute; border-radius: 10px; padding: 6px 10px; overflow: hidden; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .timeline-event-name { display: block; font-size: 14px; font-weight: 700; } .timeline-event-time { display: block; font-size: 11px; opacity: 0.75; } /* Week view: one row per day, the hour axis across the top, events as coloured blocks placed along each row by their times */ .week-grid { display: grid; grid-template-columns: 44px 1fr; gap: 4px; align-items: start; } .week-time-axis { position: relative; height: 18px; } .week-axis-tick { position: absolute; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; } .week-day-label { border: 1px solid var(--line); background: white; border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 2px; cursor: pointer; align-self: stretch; } .week-day-date { display: block; font-size: 15px; color: var(--text-soft); } .week-day-label.today { background: var(--accent); border-color: var(--accent); color: white; } .week-day-label.today .week-day-date { color: white; } .week-day-track { position: relative; background: white; border-radius: 10px; min-height: 42px; overflow: hidden; } .week-day-track.today { background: var(--tint); } .week-event-block { position: absolute; height: 34px; min-width: 34px; border-radius: 8px; padding: 3px 6px; overflow: hidden; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .week-event-name { display: block; font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .week-event-time { display: block; font-size: 9px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Month view: standard 7-column month grid */ .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .month-header-cell { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 4px 0; } .month-cell { border: 1px solid var(--line); background: white; border-radius: 10px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 14px; font-weight: 600; font-family: inherit; color: var(--text-soft); cursor: pointer; padding: 0; } .month-cell.empty { background: transparent; border: none; cursor: default; } .month-cell.today { background: var(--accent); border-color: var(--accent); color: white; } .month-dots { display: flex; gap: 2px; } .month-event-dot { width: 6px; height: 6px; border-radius: 50%; } /* ---------- "+" chooser (Add Task or Add Event) ---------- */ .new-task-button { border: none; cursor: pointer; } .chooser-btn { display: block; padding: 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; } /* ---------- New Event screen ---------- */ .color-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .color-swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; } .color-swatch.active { border-color: var(--text); box-shadow: 0 0 0 3px white inset; } /* ---------- Settings page ---------- */ .settings-card { background: white; border-radius: 14px; padding: 16px; box-shadow: 0 2px 6px rgba(214, 72, 143, 0.1); } .settings-card-title { margin: 0 0 4px; font-size: 17px; color: var(--accent); } .settings-card-hint { margin: 0; font-size: 13px; color: var(--muted); } .settings-saved-note { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #2e9e5b; } .settings-card + .settings-card { margin-top: 16px; } /* ---------- Profiles (multiple children) ---------- */ /* The profile button in the bottom nav is a