/* =============================================================== TIME-OF-DAY PALETTES Each period defines the full set of CSS custom properties. The class on is set server-side by Flask as " " e.g. "dark night" or "light dawn". =============================================================== */ :root { --transition-atmo: 2.5s ease; } /* --- Dawn: warm amber glow --- */ .dark.dawn { --bg: #1a1410; --bg-warm: #221a12; --surface: rgba(255, 200, 120, 0.07); --surface-hover: rgba(255, 200, 120, 0.12); --border: rgba(255, 200, 120, 0.14); --text-primary: rgba(255, 235, 210, 1.0); --text-secondary: rgba(255, 220, 180, 0.85); --text-muted: rgba(255, 210, 160, 0.65); --accent: #d4915e; --accent-dim: rgba(212, 145, 94, 0.15); --accent-glow: rgba(212, 145, 94, 0.25); --progress-fill: #c07840; --progress-track: rgba(255, 180, 120, 0.08); --orb1: rgba(200, 140, 60, 0.06); --orb2: rgba(180, 100, 50, 0.04); --particle: rgba(255, 200, 130, 0.35); --flash-bg: rgba(212, 145, 94, 0.12); --flash-border: rgba(212, 145, 94, 0.25); --danger: #b05050; --danger-dim: rgba(176, 80, 80, 0.12); } /* --- Day: neutral warm cream --- */ .dark.day { --bg: #17140f; --bg-warm: #1d1914; --surface: rgba(230, 210, 180, 0.07); --surface-hover: rgba(230, 210, 180, 0.12); --border: rgba(230, 210, 180, 0.14); --text-primary: rgba(240, 230, 215, 1.0); --text-secondary: rgba(230, 215, 195, 0.85); --text-muted: rgba(220, 200, 175, 0.65); --accent: #b89870; --accent-dim: rgba(184, 152, 112, 0.14); --accent-glow: rgba(184, 152, 112, 0.22); --progress-fill: #a08060; --progress-track: rgba(200, 175, 140, 0.08); --orb1: rgba(180, 150, 100, 0.05); --orb2: rgba(160, 120, 80, 0.03); --particle: rgba(220, 195, 155, 0.30); --flash-bg: rgba(184, 152, 112, 0.12); --flash-border: rgba(184, 152, 112, 0.25); --danger: #a85555; --danger-dim: rgba(168, 85, 85, 0.12); } /* --- Afternoon: cool teal shift --- */ .dark.afternoon { --bg: #111518; --bg-warm: #151a1e; --surface: rgba(140, 190, 200, 0.07); --surface-hover: rgba(140, 190, 200, 0.12); --border: rgba(140, 190, 200, 0.14); --text-primary: rgba(210, 230, 235, 1.0); --text-secondary: rgba(180, 210, 220, 0.85); --text-muted: rgba(160, 195, 205, 0.65); --accent: #6a9ea8; --accent-dim: rgba(106, 158, 168, 0.14); --accent-glow: rgba(106, 158, 168, 0.22); --progress-fill: #5a8a94; --progress-track: rgba(130, 180, 195, 0.08); --orb1: rgba(100, 160, 180, 0.05); --orb2: rgba(80, 130, 160, 0.03); --particle: rgba(160, 210, 220, 0.30); --flash-bg: rgba(106, 158, 168, 0.12); --flash-border: rgba(106, 158, 168, 0.25); --danger: #a85555; --danger-dim: rgba(168, 85, 85, 0.12); } /* --- Evening: dusky rose --- */ .dark.evening { --bg: #181214; --bg-warm: #1e161a; --surface: rgba(200, 150, 170, 0.07); --surface-hover: rgba(200, 150, 170, 0.12); --border: rgba(200, 150, 170, 0.14); --text-primary: rgba(235, 215, 225, 1.0); --text-secondary: rgba(215, 185, 200, 0.85); --text-muted: rgba(200, 165, 180, 0.65); --accent: #b07888; --accent-dim: rgba(176, 120, 136, 0.14); --accent-glow: rgba(176, 120, 136, 0.22); --progress-fill: #986878; --progress-track: rgba(190, 140, 165, 0.08); --orb1: rgba(180, 120, 150, 0.05); --orb2: rgba(150, 90, 120, 0.03); --particle: rgba(210, 170, 190, 0.30); --flash-bg: rgba(176, 120, 136, 0.12); --flash-border: rgba(176, 120, 136, 0.25); --danger: #a85555; --danger-dim: rgba(168, 85, 85, 0.12); } /* --- Night: deep indigo --- */ .dark.night { --bg: #0e0f17; --bg-warm: #12131d; --surface: rgba(130, 140, 200, 0.07); --surface-hover: rgba(130, 140, 200, 0.12); --border: rgba(130, 140, 200, 0.14); --text-primary: rgba(210, 215, 240, 1.0); --text-secondary: rgba(180, 185, 220, 0.85); --text-muted: rgba(155, 160, 200, 0.65); --accent: #7a80b8; --accent-dim: rgba(122, 128, 184, 0.14); --accent-glow: rgba(122, 128, 184, 0.20); --progress-fill: #6268a0; --progress-track: rgba(120, 130, 190, 0.08); --orb1: rgba(100, 110, 180, 0.05); --orb2: rgba(80, 85, 150, 0.03); --particle: rgba(160, 170, 220, 0.28); --flash-bg: rgba(122, 128, 184, 0.12); --flash-border: rgba(122, 128, 184, 0.22); --danger: #9a5060; --danger-dim: rgba(154, 80, 96, 0.12); } /* =============================================================== LIGHT THEME – TIME-OF-DAY PALETTES Same hue families as dark, adapted for light backgrounds. =============================================================== */ /* --- Dawn: warm parchment with amber tones --- */ .light.dawn { --bg: #faf3ea; --bg-warm: #f5ecdf; --surface: rgba(180, 120, 60, 0.08); --surface-hover: rgba(180, 120, 60, 0.13); --border: rgba(180, 120, 60, 0.18); --text-primary: rgba(50, 35, 20, 1.0); --text-secondary: rgba(80, 55, 30, 0.85); --text-muted: rgba(120, 90, 50, 0.65); --accent: #b07030; --accent-dim: rgba(176, 112, 48, 0.12); --accent-glow: rgba(176, 112, 48, 0.20); --progress-fill: #c07840; --progress-track: rgba(180, 120, 60, 0.12); --orb1: rgba(220, 170, 90, 0.08); --orb2: rgba(200, 140, 60, 0.05); --particle: rgba(180, 120, 50, 0.18); --flash-bg: rgba(176, 112, 48, 0.10); --flash-border: rgba(176, 112, 48, 0.22); --danger: #b83030; --danger-dim: rgba(184, 48, 48, 0.10); } /* --- Day: warm cream with golden undertones --- */ .light.day { --bg: #f7f2ea; --bg-warm: #f0eadf; --surface: rgba(160, 130, 80, 0.07); --surface-hover: rgba(160, 130, 80, 0.12); --border: rgba(160, 130, 80, 0.16); --text-primary: rgba(40, 35, 25, 1.0); --text-secondary: rgba(70, 60, 40, 0.85); --text-muted: rgba(110, 95, 65, 0.65); --accent: #967040; --accent-dim: rgba(150, 112, 64, 0.12); --accent-glow: rgba(150, 112, 64, 0.18); --progress-fill: #a08060; --progress-track: rgba(160, 130, 80, 0.12); --orb1: rgba(200, 170, 110, 0.07); --orb2: rgba(180, 150, 90, 0.04); --particle: rgba(160, 130, 70, 0.15); --flash-bg: rgba(150, 112, 64, 0.10); --flash-border: rgba(150, 112, 64, 0.20); --danger: #b83030; --danger-dim: rgba(184, 48, 48, 0.10); } /* --- Afternoon: cool paper with teal accents --- */ .light.afternoon { --bg: #eff5f7; --bg-warm: #e8f0f3; --surface: rgba(70, 140, 160, 0.07); --surface-hover: rgba(70, 140, 160, 0.12); --border: rgba(70, 140, 160, 0.16); --text-primary: rgba(20, 35, 40, 1.0); --text-secondary: rgba(40, 65, 75, 0.85); --text-muted: rgba(70, 110, 125, 0.65); --accent: #3a7a88; --accent-dim: rgba(58, 122, 136, 0.12); --accent-glow: rgba(58, 122, 136, 0.18); --progress-fill: #5a8a94; --progress-track: rgba(70, 140, 160, 0.12); --orb1: rgba(100, 180, 200, 0.07); --orb2: rgba(80, 160, 180, 0.04); --particle: rgba(60, 140, 160, 0.15); --flash-bg: rgba(58, 122, 136, 0.10); --flash-border: rgba(58, 122, 136, 0.20); --danger: #b83030; --danger-dim: rgba(184, 48, 48, 0.10); } /* --- Evening: warm blush with rose tones --- */ .light.evening { --bg: #f7f0f2; --bg-warm: #f2e8ec; --surface: rgba(160, 90, 120, 0.07); --surface-hover: rgba(160, 90, 120, 0.12); --border: rgba(160, 90, 120, 0.16); --text-primary: rgba(45, 25, 35, 1.0); --text-secondary: rgba(80, 45, 60, 0.85); --text-muted: rgba(130, 80, 100, 0.65); --accent: #984868; --accent-dim: rgba(152, 72, 104, 0.12); --accent-glow: rgba(152, 72, 104, 0.18); --progress-fill: #986878; --progress-track: rgba(160, 90, 120, 0.12); --orb1: rgba(200, 130, 160, 0.07); --orb2: rgba(180, 110, 140, 0.04); --particle: rgba(160, 90, 120, 0.15); --flash-bg: rgba(152, 72, 104, 0.10); --flash-border: rgba(152, 72, 104, 0.20); --danger: #b83030; --danger-dim: rgba(184, 48, 48, 0.10); } /* --- Night: cool lavender with indigo accents --- */ .light.night { --bg: #f0f0f7; --bg-warm: #e8e8f2; --surface: rgba(90, 95, 160, 0.07); --surface-hover: rgba(90, 95, 160, 0.12); --border: rgba(90, 95, 160, 0.16); --text-primary: rgba(25, 25, 45, 1.0); --text-secondary: rgba(50, 50, 80, 0.85); --text-muted: rgba(85, 85, 130, 0.65); --accent: #5a60a0; --accent-dim: rgba(90, 96, 160, 0.12); --accent-glow: rgba(90, 96, 160, 0.18); --progress-fill: #6268a0; --progress-track: rgba(90, 95, 160, 0.12); --orb1: rgba(120, 125, 200, 0.07); --orb2: rgba(100, 105, 180, 0.04); --particle: rgba(90, 95, 160, 0.15); --flash-bg: rgba(90, 96, 160, 0.10); --flash-border: rgba(90, 96, 160, 0.20); --danger: #b83030; --danger-dim: rgba(184, 48, 48, 0.10); } /* =============================================================== RESET & BASE =============================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text-primary); min-height: 100vh; min-height: 100dvh; line-height: 1.6; transition: background var(--transition-atmo), color var(--transition-atmo); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* =============================================================== FILM GRAIN OVERLAY =============================================================== */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 128px 128px; } /* =============================================================== AMBIENT LIGHT ORBS =============================================================== */ .orb { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; transition: background var(--transition-atmo); } .orb--1 { width: 500px; height: 500px; top: -180px; left: -120px; background: var(--orb1); } .orb--2 { width: 400px; height: 400px; bottom: -150px; right: -100px; background: var(--orb2); } /* =============================================================== FLOATING PARTICLES =============================================================== */ .particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--particle); animation: drift linear infinite; opacity: 0; } @keyframes drift { 0% { transform: translateY(100vh) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-10vh) translateX(40px); opacity: 0; } } /* =============================================================== LAYOUT =============================================================== */ .page-wrapper { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 32px 16px 60px; padding-top: calc(32px + env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* =============================================================== NAVIGATION =============================================================== */ .top-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; } .top-nav .site-title { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 300; letter-spacing: 0.5px; color: var(--text-secondary); text-decoration: none; } .top-nav .spacer { flex: 1; } /* Desktop inline nav links (hidden on mobile) */ .desktop-nav { display: none; align-items: center; gap: 24px; } .desktop-nav__link { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--text-muted); transition: color 0.3s; } .desktop-nav__link:hover { color: var(--text-secondary); } .desktop-nav__link.active { color: var(--accent); } /* --------------------------------------------------------------- USER MENU (top-right avatar + dropdown) --------------------------------------------------------------- */ .user-menu { position: relative; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-family: inherit; font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: center; text-transform: uppercase; transition: border-color 0.3s; -webkit-tap-highlight-color: transparent; position: relative; } /* Expand touch target to 44x44 on touch devices */ @media (pointer: coarse) { .user-avatar::after { content: ''; position: absolute; inset: -7px; } } .user-avatar:hover { border-color: var(--accent-dim); } .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-warm); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; min-width: 140px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 200; } .user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown__name { font-size: 12px; color: var(--text-primary); text-transform: capitalize; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .user-dropdown__link { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); transition: color 0.3s; } .user-dropdown__link:hover { color: var(--text-secondary); } .user-dropdown__logout { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; transition: color 0.3s; } .user-dropdown__logout:hover { color: var(--text-secondary); } /* --------------------------------------------------------------- BOTTOM TAB BAR --------------------------------------------------------------- */ .bottom-tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-around; align-items: center; background: var(--bg); border-top: 1px solid var(--border); padding: 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); transition: background var(--transition-atmo), border-color var(--transition-atmo); } .bottom-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px; min-height: 44px; justify-content: center; transition: color 0.3s; -webkit-tap-highlight-color: transparent; } .bottom-tab svg { width: 20px; height: 20px; } .bottom-tab.active { color: var(--accent); } .bottom-tab:hover { color: var(--text-secondary); } .bottom-tab.active:hover { color: var(--accent); } /* --------------------------------------------------------------- DESKTOP: top nav links, hide bottom tabs --------------------------------------------------------------- */ @media (min-width: 769px) { .desktop-nav { display: flex; } .bottom-tabs { display: none; } } /* =============================================================== GREETING & QUOTE =============================================================== */ .greeting { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; font-weight: 300; color: var(--text-primary); margin-bottom: 8px; line-height: 1.4; } .daily-quote { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 13px; color: var(--text-muted); margin-bottom: 40px; line-height: 1.5; } /* =============================================================== FLASH MESSAGES =============================================================== */ .flash-messages { margin-bottom: 24px; } .flash-msg { padding: 10px 16px; background: var(--flash-bg); border: 1px solid var(--flash-border); border-radius: 6px; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; animation: flashIn 0.4s ease; } .flash-undo { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; } @keyframes flashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .auto-finish-banner { padding: 8px 14px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .auto-finish-banner__undo { background: none; border: none; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; } .auto-finish-banner__undo:hover { color: var(--accent-glow); } /* =============================================================== BOOK CARDS (dashboard) =============================================================== */ .book-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px; margin-bottom: 16px; transition: background 0.3s, border-color 0.3s; text-decoration: none; display: block; color: inherit; } .book-card:hover { background: var(--surface-hover); border-color: var(--accent-dim); } .book-card__title { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; font-weight: 400; color: var(--text-primary); margin-bottom: 2px; } .book-card__author { font-size: 12px; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 14px; } .book-card__stats { display: flex; gap: 20px; font-size: 11px; color: var(--text-secondary); letter-spacing: 0.3px; margin-top: 12px; } .book-card__stat-label { color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 1.2px; display: block; margin-bottom: 2px; } /* =============================================================== PROGRESS BAR =============================================================== */ .progress-bar { width: 100%; height: 4px; background: var(--progress-track); border-radius: 2px; overflow: hidden; } .progress-bar__fill { height: 100%; background: var(--progress-fill); border-radius: 2px; transition: width 0.6s ease; } .progress-bar__label { font-size: 11px; color: var(--text-muted); margin-top: 5px; display: flex; justify-content: space-between; } /* =============================================================== FORMS =============================================================== */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 6px; } .form-input { width: 100%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 16px; font-family: inherit; transition: border-color 0.3s; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-input:focus { border-color: var(--accent-dim); } .form-input::placeholder { color: var(--text-muted); } textarea.form-input { resize: vertical; min-height: 60px; line-height: 1.5; } .form-row { display: flex; flex-direction: column; gap: 0; } .form-row .form-group { flex: 1; } .status-toggle { display: flex; gap: 12px; margin-top: 4px; } .status-toggle__option { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: var(--text-muted); } .status-toggle__option input[type="radio"] { accent-color: var(--accent); } .status-toggle__option input[type="radio"]:checked + .status-toggle__label { color: var(--text); } /* =============================================================== BUTTONS =============================================================== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 12px; font-family: inherit; font-weight: 400; letter-spacing: 0.5px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all 0.3s; text-decoration: none; } .btn:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--accent-dim); } .btn--accent { background: var(--accent-dim); border-color: var(--accent-glow); color: var(--accent); } .btn--accent:hover { background: var(--accent-glow); } .btn--danger { color: var(--danger); border-color: var(--danger-dim); } .btn--danger:hover { background: var(--danger-dim); } .btn--small { padding: 7px 14px; font-size: 11px; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; justify-content: flex-end; } /* =============================================================== SECTION HEADERS =============================================================== */ .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--text-muted); margin-bottom: 16px; margin-top: 40px; } .section-label:first-child { margin-top: 0; } /* =============================================================== DETAIL PAGE: STATS ROW =============================================================== */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; } .stat-card__label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 4px; } .stat-card__value { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: 300; color: var(--text-primary); } .stat-card__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* =============================================================== PROGRESS HISTORY TABLE =============================================================== */ .history-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .history-entry:last-child { border-bottom: none; } .history-entry__date { color: var(--text-muted); font-size: 12px; } .history-entry__page { color: var(--text-secondary); } .history-entry__note { font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--text-muted); font-size: 12px; grid-column: 1 / -1; } .history-entry__actions { display: flex; gap: 6px; grid-column: 1 / -1; } @media (hover: hover) { .history-entry__actions { opacity: 0.4; transition: opacity 0.3s; } .history-entry:hover .history-entry__actions { opacity: 1; } } /* =============================================================== CHART CONTAINER =============================================================== */ .chart-container { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 28px; position: relative; } .chart-container svg { width: 100%; height: auto; display: block; } /* =============================================================== EMPTY STATE =============================================================== */ .empty-state { text-align: center; padding: 60px 20px; } .empty-state__text { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; color: var(--text-muted); margin-bottom: 20px; font-weight: 300; } /* =============================================================== MODAL / INLINE EXPAND =============================================================== */ .expandable { overflow: hidden; max-height: 0; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 16px; } .expandable.open { max-height: 600px; padding: 16px; } .inline-form { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px; overflow: hidden; } /* =============================================================== STATUS BADGES =============================================================== */ .badge { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--border); color: var(--text-muted); } .badge--reading { border-color: var(--accent-dim); color: var(--accent); } .badge--finished { border-color: rgba(100, 180, 100, 0.2); color: rgba(130, 200, 130, 0.7); } .badge--abandoned { border-color: var(--danger-dim); color: var(--danger); } .badge--want_to_read { border-color: rgba(130, 170, 220, 0.25); color: rgba(130, 170, 220, 0.75); } /* =============================================================== BACK LINK =============================================================== */ .back-link { font-size: 11px; color: var(--text-muted); text-decoration: none; letter-spacing: 0.5px; transition: color 0.3s; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; } .back-link:hover { color: var(--text-secondary); } .back-link::before { content: '\2190\00a0'; } /* =============================================================== CONFIRM DIALOG (pure CSS) =============================================================== */ .confirm-wrap { display: inline; } .confirm-wrap .confirm-yes { display: none; } .confirm-wrap.confirming .confirm-trigger { display: none; } .confirm-wrap.confirming .confirm-yes { display: inline-flex; } /* =============================================================== RATING =============================================================== */ .rating-form { display: flex; align-items: center; gap: 10px; } .rating-options { display: flex; gap: 4px; } .rating-options input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .rating-option { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; transition: all 0.15s ease; position: relative; } /* Expand touch target to 44x44 on touch devices */ @media (pointer: coarse) { .rating-option::after { content: ''; position: absolute; inset: -7px; } } .rating-option:hover { border-color: var(--accent); color: var(--text-secondary); } .rating-options input[type="radio"]:checked + .rating-option { background: var(--accent); color: var(--bg); border-color: var(--accent); } .rating-display { display: flex; align-items: baseline; gap: 8px; } .rating-display__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .rating-display__value { font-size: 15px; color: var(--text-secondary); } /* =============================================================== RESPONSIVE (mobile-first: base = smallest, scale UP) =============================================================== */ @media (max-width: 359px) { .page-wrapper { padding: 24px 12px 48px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .greeting { font-size: 16px; } .top-nav { gap: 10px; margin-bottom: 32px; } .top-nav .site-title { font-size: 13px; } .user-avatar { width: 26px; height: 26px; font-size: 11px; } .bottom-tab { font-size: 9px; padding: 4px 8px; } .bottom-tab svg { width: 18px; height: 18px; } .book-card { padding: 14px 16px; } .stat-card { padding: 10px 12px; } .stat-card__value { font-size: 17px; } .stats-grid { grid-template-columns: 1fr; } } @media (min-width: 481px) { .page-wrapper { padding: 48px 24px 80px; padding-top: calc(48px + env(safe-area-inset-top, 0px)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .greeting { font-size: 22px; } .top-nav { gap: 24px; } .form-row { flex-direction: row; gap: 14px; } .history-entry { grid-template-columns: 90px 60px 1fr auto; gap: 10px; font-size: 13px; } .history-entry__note { grid-column: auto; } .history-entry__actions { grid-column: auto; } } @media (min-width: 769px) { .page-wrapper { padding-bottom: 60px; } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .history-entry { grid-template-columns: 100px 70px 1fr auto; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .particle { display: none; } .orb { display: none; } body::after { display: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* =============================================================== THEME PICKER (Settings) =============================================================== */ .theme-picker { display: flex; gap: 12px; margin-bottom: 8px; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 0.3s, background 0.3s; flex: 1; } .theme-option:hover { background: var(--surface-hover); } .theme-option.selected { border-color: var(--accent); background: var(--accent-dim); } .theme-option input[type="radio"] { display: none; } .theme-option__swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; } .theme-option__swatch--dark { background: linear-gradient(135deg, #1a1410, #0e0f17); } .theme-option__swatch--light { background: linear-gradient(135deg, #faf3ea, #eff5f7); } .theme-option__label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); } .theme-option.selected .theme-option__label { color: var(--accent); } /* =============================================================== LOGIN =============================================================== */ .login-container { max-width: 360px; margin: 0 auto; } .inline-form form { display: flex; flex-direction: column; } .inline-form form > .btn { align-self: flex-end; } /* (user menu styles are in the NAVIGATION section above) */ /* =============================================================== PARTNER SECTIONS =============================================================== */ .partner-label { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 48px; } .partner-time { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-muted); } .partner-name { cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color 0.3s, color 0.3s; } .partner-name:hover { border-bottom-color: var(--text-muted); color: var(--text-secondary); } .form-input--inline { padding: 6px 10px; font-size: 16px; flex: 1; min-width: 0; } .book-card--partner { opacity: 0.65; } .book-card--partner:hover { opacity: 0.85; } /* =============================================================== HABIT BANNER (dashboard) =============================================================== */ .habit-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 32px; text-decoration: none; color: inherit; font-size: 12px; letter-spacing: 0.3px; transition: background 0.3s, border-color 0.3s; } .habit-banner:hover { background: var(--surface-hover); border-color: var(--accent-dim); } .habit-banner__user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .habit-banner__name { color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 1.2px; } .habit-banner__item { color: var(--text-secondary); } .habit-banner__check { color: var(--accent); } .habit-banner__dash { color: var(--text-muted); } .habit-banner__sep { color: var(--text-muted); } .habit-banner__divider { color: var(--border); display: none; } /* =============================================================== PARTNER NOTIFICATIONS (dashboard) =============================================================== */ .partner-notifs { padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 32px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .partner-notifs__title { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 6px; } .partner-notifs__item { padding: 2px 0; } /* =============================================================== HABIT FORM ROW =============================================================== */ .habit-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; } .habit-form .form-label { font-size: 10px; } .habit-form select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } /* =============================================================== HABIT CONTRIBUTION GRID =============================================================== */ .habit-grid { margin-bottom: 20px; } .habit-grid__label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 8px; } .habit-grid__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .habit-grid__svg { display: block; } .habit-grid__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 11px; color: var(--text-muted); } .habit-grid__legend { display: flex; align-items: center; gap: 4px; } .habit-grid__legend-label { font-size: 9px; letter-spacing: 0.5px; } .habit-grid__streak { font-size: 11px; color: var(--text-secondary); } /* =============================================================== HABIT PARTNER GRIDS =============================================================== */ .habit-partner-grids { opacity: 0.65; } /* =============================================================== HABIT LOG LIST (recent activity) =============================================================== */ .habit-log-list { margin-bottom: 16px; } .habit-log-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .habit-log-entry:last-child { border-bottom: none; } .habit-log-entry__date { color: var(--text-muted); font-size: 12px; } .habit-log-entry__user { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; } .habit-log-entry__detail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; } .habit-log-entry__type { color: var(--text-secondary); font-size: 12px; } .habit-log-entry__minutes { color: var(--text-muted); font-size: 12px; } .habit-log-entry__note { grid-column: 1 / -1; font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--text-muted); font-size: 12px; padding-left: 0; } .habit-log-entry__actions { display: flex; gap: 6px; grid-column: 1 / -1; } @media (hover: hover) { .habit-log-entry__actions { opacity: 0.4; transition: opacity 0.3s; } .habit-log-entry:hover .habit-log-entry__actions { opacity: 1; } } /* =============================================================== HABIT TYPE LIST =============================================================== */ .habit-type-list { margin-bottom: 12px; } .habit-type-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .habit-type-item:last-child { border-bottom: none; } .habit-type-item__name { color: var(--text-primary); flex: 1; } .habit-type-item__default { color: var(--text-muted); font-size: 11px; } /* =============================================================== HABIT RESPONSIVE (mobile-first: scale UP) =============================================================== */ @media (min-width: 481px) { .habit-banner { flex-direction: row; align-items: center; gap: 12px; } .habit-banner__divider { display: inline; } .habit-log-entry { grid-template-columns: 80px 60px 1fr auto; gap: 8px; } .habit-log-entry__detail { grid-column: auto; } .habit-log-entry__actions { grid-column: auto; } } @media (min-width: 769px) { .habit-form-row { grid-template-columns: 1fr 1fr; } .habit-log-entry { grid-template-columns: 90px 70px 1fr auto; gap: 10px; } .habit-log-entry__note { padding-left: 90px; } } /* =============================================================== LIGHT THEME OVERRIDES Adjustments for elements with hardcoded dark-mode values. =============================================================== */ /* Film grain: subtler on light backgrounds */ body.light::after { opacity: 0.025; } /* Badges with hardcoded colors need light-friendly versions */ .light .badge--finished { border-color: rgba(40, 140, 40, 0.25); color: rgba(30, 120, 30, 0.75); } .light .badge--want_to_read { border-color: rgba(50, 100, 180, 0.25); color: rgba(40, 80, 160, 0.80); } /* Select dropdown arrow: dark arrow for light backgrounds */ .light .habit-form select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0,0,0,0.3)'/%3E%3C/svg%3E"); }