/** * style.css * ------------------------------------------------------------ * Base styles shared by every page: fonts, color themes (light/dark), * the glass-card look, and the "day arc" signature element used on * the dashboard header. * * Page-specific styling (e.g. calendar layout tweaks) lives in its * own file (dashboard.css, etc.) and is added alongside each page — * this file only holds things every page needs. * ------------------------------------------------------------ */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"); /* ------------------------------------------------------------ 1. THEME VARIABLES data-theme="light" (default) or data-theme="dark" is set on by theme.js and toggled from Settings. ------------------------------------------------------------ */ :root, [data-theme="light"] { --bg-base: #f2f4f7; --bg-surface: rgba(255, 255, 255, 0.6); --bg-surface-solid: #ffffff; --text-primary: #2b2e3b; --text-muted: #6b7080; --border-subtle: rgba(54, 59, 116, 0.1); } [data-theme="dark"] { --bg-base: #14171f; --bg-surface: rgba(29, 33, 44, 0.6); --bg-surface-solid: #1d212c; --text-primary: #eef0f5; --text-muted: #9096a8; --border-subtle: rgba(255, 255, 255, 0.08); } /* ------------------------------------------------------------ 2. BASE ELEMENTS ------------------------------------------------------------ */ html { scroll-behavior: smooth; } body { background-color: var(--bg-base); color: var(--text-primary); font-family: "Inter", sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } h1, h2, h3, h4 { font-family: "Fraunces", serif; color: var(--text-primary); } .font-mono-data { font-family: "IBM Plex Mono", monospace; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------ 3. GLASSMORPHISM CARDS Used for dashboard widgets, goal cards, habit cards, etc. ------------------------------------------------------------ */ .glass-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 1rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 30px rgba(54, 59, 116, 0.08); } .solid-card { background: var(--bg-surface-solid); border: 1px solid var(--border-subtle); border-radius: 1rem; } /* ------------------------------------------------------------ 4. SIGNATURE ELEMENT — THE DAY ARC A horizontal gauge on the dashboard that visually fills as the day progresses (sunrise indigo -> midday amber -> evening sage). dashboard.js sets --day-progress (0 to 1) based on the current time. ------------------------------------------------------------ */ .day-arc { position: relative; height: 6px; border-radius: 999px; background: var(--border-subtle); overflow: hidden; } .day-arc::after { content: ""; position: absolute; inset: 0; width: calc(var(--day-progress, 0.3) * 100%); background: linear-gradient(90deg, #363b74 0%, #e8a33d 50%, #6b9080 100%); transition: width 0.6s ease; } /* ------------------------------------------------------------ 5. FOCUS STATES (accessibility — never remove outline, only restyle) ------------------------------------------------------------ */ :focus-visible { outline: 2px solid #e8a33d; outline-offset: 2px; } /* ------------------------------------------------------------ 6. SKELETON LOADING STATE Shown briefly while a page reads from LocalStorage, so lists don't flash from "empty" to "full" abruptly. ------------------------------------------------------------ */ .skeleton { background: linear-gradient( 90deg, var(--border-subtle) 25%, rgba(255, 255, 255, 0.15) 50%, var(--border-subtle) 75% ); background-size: 200% 100%; animation: skeleton-sheen 1.4s ease-in-out infinite; border-radius: 0.5rem; } @keyframes skeleton-sheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ------------------------------------------------------------ 7. PRINT STYLES Any element marked .no-print (sidebar, buttons, theme toggle) is hidden when the page is printed. Used by the Daily Planner's "Print" button so people can print just their schedule, not the whole app chrome around it. ------------------------------------------------------------ */ @media print { .no-print { display: none !important; } body { background: #ffffff !important; color: #000000 !important; } .glass-card, .solid-card { box-shadow: none !important; border: 1px solid #ccc !important; backdrop-filter: none !important; } } /* ------------------------------------------------------------ 8. FILTER TABS Reused on Goals, Habits, Reading, and Learning pages for filtering lists by type/status. ------------------------------------------------------------ */ .filter-tab { font-size: 0.8rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-muted); background: transparent; transition: all 0.15s ease; } .filter-tab:hover { border-color: #e8a33d; color: var(--text-primary); } .filter-tab-active { background: #363b74; border-color: #363b74; color: #ffffff; } /* ------------------------------------------------------------ 9. MOOD SELECTOR (Journal page) ------------------------------------------------------------ */ .mood-btn { font-size: 1.5rem; width: 3rem; height: 3rem; border-radius: 0.75rem; border: 2px solid transparent; background: rgba(0, 0, 0, 0.03); transition: all 0.15s ease; } .mood-btn:hover { background: rgba(0, 0, 0, 0.06); } .mood-btn-active { border-color: #e8a33d; background: rgba(232, 163, 61, 0.12); } /* ------------------------------------------------------------ 10. VISION BOARD BACKGROUND THEMES ------------------------------------------------------------ */ .board-theme-paper { background: var(--bg-surface-solid); } .board-theme-dawn { background: linear-gradient(135deg, #4b5299 0%, #e8a33d 100%); } .board-theme-dusk { background: linear-gradient(135deg, #14171f 0%, #363b74 100%); } .board-theme-sage { background: linear-gradient(135deg, #9cbbad 0%, #6b9080 100%); } .board-theme-dawn .vision-card-quote, .board-theme-dusk .vision-card-quote, .board-theme-sage .vision-card-quote { background: rgba(255, 255, 255, 0.9); }