/* * Krito Journal — application styles * * Phase 6: CSS custom properties design system with light/dark mode support. * Theme is controlled by the data-theme attribute on , falling back * to prefers-color-scheme when no explicit preference is set. */ /* ── Design Tokens: Light (default) ──────────────────────── */ :root { --bg: #faf8f5; --bg-secondary: #f0ede8; --surface: #ffffff; --hover: #f5f3f0; --border: #e0ddd8; --text: #2c2c2c; --text-secondary:#6b6b6b; --text-muted: #9c9890; --text-subtle: #c0bcb7; --accent: #5c6b56; --accent-dark: #4d5a48; --accent-soft: #e8ede6; --accent-ring: rgba(92, 107, 86, 0.15); --success-bg: #e8ede6; --success-text: #3a5436; --success-border:#c8d8c5; --danger-bg: #fdecea; --danger-text: #7d2920; --danger-border: #f5c6c2; --mood-1: #c47272; --mood-2: #c49a5a; --mood-3: #9c9890; --mood-4: #7aa87a; --mood-5: #5c8a5c; --mood-1-bg: #fdf6f6; --mood-2-bg: #fdf9f3; --mood-4-bg: #f5faf5; --mood-5-bg: #f3f8f3; --canvas-outer: #dedad5; --canvas-toolbar:#f5f3f0; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-remove: rgba(0, 0, 0, 0.55); } /* ── Design Tokens: Dark (OS preference) ─────────────────── */ @media (prefers-color-scheme: dark) { :root { --bg: #1c1917; --bg-secondary: #252220; --surface: #211f1c; --hover: #2c2a26; --border: #3a3630; --text: #e8e4de; --text-secondary:#a09890; --text-muted: #6b6560; --text-subtle: #4a4540; --accent: #7a9474; --accent-dark: #8aa884; --accent-soft: #1e2a1e; --accent-ring: rgba(122, 148, 116, 0.20); --success-bg: #1a2a1a; --success-text: #90c890; --success-border:#2a4a2a; --danger-bg: #2a1c1c; --danger-text: #e09090; --danger-border: #5a2e2e; --mood-1: #a85a5a; --mood-2: #a87840; --mood-3: #7a7060; --mood-4: #608060; --mood-5: #508050; --mood-1-bg: #261a1a; --mood-2-bg: #261e14; --mood-4-bg: #1a261a; --mood-5-bg: #182418; --canvas-outer: #2a2520; --canvas-toolbar:#252220; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-remove: rgba(0, 0, 0, 0.70); } } /* ── Design Tokens: Dark (manual override) ───────────────── */ [data-theme="dark"] { --bg: #1c1917; --bg-secondary: #252220; --surface: #211f1c; --hover: #2c2a26; --border: #3a3630; --text: #e8e4de; --text-secondary:#a09890; --text-muted: #6b6560; --text-subtle: #4a4540; --accent: #7a9474; --accent-dark: #8aa884; --accent-soft: #1e2a1e; --accent-ring: rgba(122, 148, 116, 0.20); --success-bg: #1a2a1a; --success-text: #90c890; --success-border:#2a4a2a; --danger-bg: #2a1c1c; --danger-text: #e09090; --danger-border: #5a2e2e; --mood-1: #a85a5a; --mood-2: #a87840; --mood-3: #7a7060; --mood-4: #608060; --mood-5: #508050; --mood-1-bg: #261a1a; --mood-2-bg: #261e14; --mood-4-bg: #1a261a; --mood-5-bg: #182418; --canvas-outer: #2a2520; --canvas-toolbar:#252220; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-remove: rgba(0, 0, 0, 0.70); } /* ── Design Tokens: Light (manual override) ──────────────── */ /* Restores light theme when OS is dark but user chose light. */ [data-theme="light"] { --bg: #faf8f5; --bg-secondary: #f0ede8; --surface: #ffffff; --hover: #f5f3f0; --border: #e0ddd8; --text: #2c2c2c; --text-secondary:#6b6b6b; --text-muted: #9c9890; --text-subtle: #c0bcb7; --accent: #5c6b56; --accent-dark: #4d5a48; --accent-soft: #e8ede6; --accent-ring: rgba(92, 107, 86, 0.15); --success-bg: #e8ede6; --success-text: #3a5436; --success-border:#c8d8c5; --danger-bg: #fdecea; --danger-text: #7d2920; --danger-border: #f5c6c2; --mood-1: #c47272; --mood-2: #c49a5a; --mood-3: #9c9890; --mood-4: #7aa87a; --mood-5: #5c8a5c; --mood-1-bg: #fdf6f6; --mood-2-bg: #fdf9f3; --mood-4-bg: #f5faf5; --mood-5-bg: #f3f8f3; --canvas-outer: #dedad5; --canvas-toolbar:#f5f3f0; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-remove: rgba(0, 0, 0, 0.55); } /* ── Reset / Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } /* ── Layout ────────────────────────────────────────────────── */ .main-content { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.5rem; font-weight: 600; } /* ── Nav bar ───────────────────────────────────────────────── */ .app-nav { border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: 720px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-weight: 600; font-size: 1rem; color: var(--accent); letter-spacing: -0.01em; } .nav-brand:hover { text-decoration: none; } .nav-links { display: flex; align-items: center; gap: 1.25rem; } .nav-links a { font-size: 0.875rem; color: var(--text-secondary); } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-user { font-size: 0.875rem; color: var(--text-secondary); cursor: default; } /* Logout button inside nav looks like a link */ .btn-link { background: none; border: none; cursor: pointer; padding: 0; font-size: 0.875rem; color: var(--text-secondary); font-family: inherit; } .btn-link:hover { color: var(--text); } /* ── Theme toggle ──────────────────────────────────────────── */ .theme-toggle { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; line-height: 1; transition: background 150ms; } .theme-toggle:hover { background: var(--bg-secondary); color: var(--text); } /* ── Flash messages ────────────────────────────────────────── */ .flash { padding: 0.75rem 1rem; font-size: 0.875rem; text-align: center; } .flash-notice { background: var(--success-bg); color: var(--success-text); border-bottom: 1px solid var(--success-border); } .flash-alert { background: var(--danger-bg); color: var(--danger-text); border-bottom: 1px solid var(--danger-border); } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer; transition: background 200ms, color 200ms; font-family: inherit; text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); color: #fff; text-decoration: none; } .btn-secondary { background: var(--bg-secondary); color: var(--text); } .btn-secondary:hover { background: var(--hover); } .btn-danger { background: var(--danger-bg); color: var(--danger-text); } .btn-danger:hover { background: var(--danger-border); } /* ── Forms ─────────────────────────────────────────────────── */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.375rem; } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="date"], .form-group input[type="number"], .form-group textarea, .form-group select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9375rem; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color 200ms, box-shadow 200ms; outline: none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .form-group textarea { resize: vertical; min-height: 10rem; line-height: 1.7; } .form-errors { background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.875rem; color: var(--danger-text); } .form-errors ul { padding-left: 1.25rem; } /* ── Entries list ──────────────────────────────────────────── */ .entries-list { display: flex; flex-direction: column; gap: 0.75rem; } .entry-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; transition: box-shadow 150ms; } .entry-card:hover { box-shadow: var(--shadow-card); } .entry-card a { text-decoration: none; } .entry-card-link { display: block; text-decoration: none; color: inherit; } .entry-card-date { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.25rem; } .entry-card-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.375rem; } .entry-card-preview { font-size: 0.875rem; color: var(--text-secondary); } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } /* ── Calendar ──────────────────────────────────────────────── */ .calendar-page { } /* Day-of-week header row — sits above the Turbo Frame */ .calendar-day-headers { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px 8px 0 0; border-bottom: none; } .calendar-day-header { padding: 0.5rem 0; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; } /* Month header (inside the Turbo Frame) */ .calendar-month-header { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; border: 1px solid var(--border); border-top: none; background: var(--surface); } .calendar-month-title { font-size: 0.9375rem; font-weight: 600; color: var(--text); } .calendar-nav-btn { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-secondary); font-size: 1.25rem; line-height: 1; transition: background 150ms, color 150ms; text-decoration: none; } .calendar-nav-btn:hover { background: var(--bg-secondary); color: var(--text); text-decoration: none; } /* Calendar grid */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; } .calendar-day { position: relative; min-height: 4.5rem; border-top: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); transition: background 150ms; } /* Remove right border from last column */ .calendar-day:nth-child(7n) { border-right: none; } .calendar-day a { display: flex; flex-direction: column; align-items: flex-start; padding: 0.4375rem 0.5rem; width: 100%; height: 100%; text-decoration: none; color: inherit; } .calendar-day a:hover { background: var(--hover); text-decoration: none; } /* Day number */ .calendar-day-number { font-size: 0.8125rem; font-weight: 500; color: var(--text); line-height: 1.5rem; min-width: 1.5rem; height: 1.5rem; text-align: center; border-radius: 50%; padding: 0 0.125rem; } /* Today highlight */ .calendar-day--today .calendar-day-number { background: var(--accent); color: #fff; } /* Days outside the current month */ .calendar-day--other-month { background: var(--bg); } .calendar-day--other-month .calendar-day-number { color: var(--text-subtle); } /* Entry presence dot */ .calendar-day-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--text-subtle); margin-top: 0.375rem; } /* Entry count badge for multiple entries */ .calendar-day-count { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.125rem; line-height: 1; } /* Mood-colored dots and subtle background tints */ .mood-1 .calendar-day-dot { background: var(--mood-1); } .mood-2 .calendar-day-dot { background: var(--mood-2); } .mood-3 .calendar-day-dot { background: var(--mood-3); } .mood-4 .calendar-day-dot { background: var(--mood-4); } .mood-5 .calendar-day-dot { background: var(--mood-5); } .calendar-day.mood-1 { background: var(--mood-1-bg); } .calendar-day.mood-2 { background: var(--mood-2-bg); } .calendar-day.mood-4 { background: var(--mood-4-bg); } .calendar-day.mood-5 { background: var(--mood-5-bg); } /* De-saturate mood tints for other-month days */ .calendar-day--other-month.mood-1, .calendar-day--other-month.mood-2, .calendar-day--other-month.mood-4, .calendar-day--other-month.mood-5 { filter: saturate(0.3); } /* ── Canvas / Drawing ──────────────────────────────────────── */ .canvas-section { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; /* Background shows briefly before first JS render and around the paper when zoomed out. Matches the outer fill drawn in #redraw(). */ background: var(--canvas-outer); } .canvas-toolbar { display: flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.75rem; background: var(--canvas-toolbar); border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 0.375rem; } /* Thin vertical divider between tool groups */ .canvas-toolbar .canvas-tool-group + .canvas-tool-group::before { content: ""; display: block; width: 1px; height: 1.25rem; background: var(--border); margin-right: 0.125rem; } .canvas-tool-group { display: flex; align-items: center; gap: 0.25rem; } .canvas-tool-group--right { margin-left: auto; } /* Zoom group: − [100%] + ⊡ */ .canvas-tool-group--zoom { gap: 0.125rem; } .canvas-zoom-label { min-width: 2.75rem; text-align: center; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); user-select: none; } .canvas-color-btn { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 150ms, border-color 150ms; } .canvas-color-btn:hover { transform: scale(1.15); } .canvas-color-btn.active { border-color: var(--text); transform: scale(1.1); } .canvas-width-btn { width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 150ms, border-color 150ms; } .canvas-width-btn:hover { background: var(--bg-secondary); } .canvas-width-btn.active { background: var(--accent-soft); border-color: var(--accent); } .canvas-width-dot { width: var(--s); height: var(--s); border-radius: 50%; background: var(--text); display: block; } .canvas-action-btn { min-width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 0.875rem; line-height: 1; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; padding: 0 0.375rem; font-family: inherit; flex-shrink: 0; transition: background 150ms, color 150ms; } .canvas-action-btn:hover { background: var(--bg-secondary); color: var(--text); } /* Reset-zoom button: slightly wider to fit the ⊡ glyph */ .canvas-action-btn--reset { font-size: 1rem; } .drawing-canvas { display: block; width: 100%; /* Disable ALL browser touch handling on this element so pointer events fire at full fidelity and the page doesn't scroll while drawing. */ touch-action: none; cursor: crosshair; /* No CSS background — JS renders the paper fill inside #redraw() */ background: transparent; } /* ------------------------------------------------------------------ */ /* Image upload */ /* ------------------------------------------------------------------ */ .image-drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 200ms, background 200ms; background: var(--bg-secondary); } .image-drop-zone:hover, .image-drop-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); } .upload-icon { width: 2rem; height: 2rem; color: var(--text-secondary); margin-bottom: 0.5rem; } .upload-hint { margin: 0; font-size: 0.875rem; color: var(--text-secondary); } .upload-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .upload-hint-sub { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--text-secondary); opacity: 0.75; } .image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .image-preview-item { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--bg-secondary); } .preview-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .preview-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--shadow-remove); color: #fff; font-size: 0.9rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 150ms; } .preview-remove:hover { background: rgba(180, 30, 30, 0.8); } .existing-images { margin-top: 1rem; } .existing-images-label { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.5rem; } .upload-error { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 6px; padding: 0.5rem 0.75rem; } /* ------------------------------------------------------------------ */ /* Image gallery (show page) */ /* ------------------------------------------------------------------ */ .image-gallery { margin-top: 1.5rem; } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } @media (min-width: 480px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-item { border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--bg-secondary); } .gallery-link { display: block; width: 100%; height: 100%; } .gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; } .gallery-thumb:hover { transform: scale(1.04); } .gallery-more { aspect-ratio: 1; border-radius: 8px; border: 2px dashed var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 200ms; } .gallery-more:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .canvas-section--display .drawing-canvas { cursor: default; } /* ── Mood badge (entry show page) ─────────────────────────── */ .mood-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-secondary); } .mood-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; } .mood-badge.mood-1 .mood-badge-dot { background: var(--mood-1); } .mood-badge.mood-2 .mood-badge-dot { background: var(--mood-2); } .mood-badge.mood-3 .mood-badge-dot { background: var(--mood-3); } .mood-badge.mood-4 .mood-badge-dot { background: var(--mood-4); } .mood-badge.mood-5 .mood-badge-dot { background: var(--mood-5); } /* ================================================================== */ /* PHASE 6 — Typography & Design Enhancements */ /* ================================================================== */ /* ── Font tokens ─────────────────────────────────────────────────── */ :root { --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { font-family: var(--font-sans); } /* ── Brand: serif to match the journaling feel ───────────────────── */ .nav-brand { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0.01em; } /* ── Page headings ───────────────────────────────────────────────── */ .page-heading { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; color: var(--text); margin-bottom: 1.75rem; line-height: 1.25; } /* ── Field: bottom-border-only inputs (journal page aesthetic) ───── */ .field { margin-bottom: 1.75rem; } .field > label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field textarea { width: 100%; padding: 0.375rem 0; border: none; border-bottom: 1.5px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font-family: var(--font-serif); font-size: 1rem; line-height: 1.6; outline: none; transition: border-color 220ms ease; -webkit-appearance: none; appearance: none; } .field input[type="date"] { font-family: var(--font-sans); } .field input:focus, .field textarea:focus { border-bottom-color: var(--accent); } .field textarea { resize: vertical; min-height: 14rem; line-height: 1.85; } /* Larger title field */ .field--title input { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; padding-bottom: 0.5rem; } /* Comfortable body textarea */ .field--body textarea { font-size: 1rem; min-height: 16rem; } /* ── Input mode toggle (Type / Draw) ────────────────────────────── */ .entry-mode-toggle { margin-bottom: 1.5rem; } .input-mode-bar { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 1.125rem; } .input-mode-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; border-radius: 7px; border: none; background: transparent; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 150ms, color 150ms, box-shadow 150ms; min-height: 2rem; white-space: nowrap; } .input-mode-btn:hover { color: var(--text); } .input-mode-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--border); } /* ── Form section dividers ──────────────────────────────────────── */ .form-section { margin-bottom: 1.5rem; } .form-section-heading { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.125rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .form-section-heading::before, .form-section-heading::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Form actions ────────────────────────────────────────────────── */ .form-actions { display: flex; align-items: center; gap: 1.25rem; padding-top: 1.5rem; margin-top: 0.5rem; border-top: 1px solid var(--border); } /* ── Mood selector (entry form) ─────────────────────────────────── */ .mood-selector { border: none; padding: 0; margin: 0; } .mood-options { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; } .mood-option { position: relative; display: block; } .mood-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Base circle */ .mood-label { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); user-select: none; } .mood-label:hover { transform: scale(1.12); } /* Mood-colored rings + tinted backgrounds */ .mood-label.mood-1 { border-color: var(--mood-1); color: var(--mood-1); background: var(--mood-1-bg); } .mood-label.mood-2 { border-color: var(--mood-2); color: var(--mood-2); background: var(--mood-2-bg); } .mood-label.mood-3 { border-color: var(--mood-3); color: var(--mood-3); background: var(--bg-secondary); } .mood-label.mood-4 { border-color: var(--mood-4); color: var(--mood-4); background: var(--mood-4-bg); } .mood-label.mood-5 { border-color: var(--mood-5); color: var(--mood-5); background: var(--mood-5-bg); } /* Selected: filled */ .mood-option input[type="radio"]:checked + .mood-label.mood-1 { background: var(--mood-1); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--mood-1) 40%, transparent); } .mood-option input[type="radio"]:checked + .mood-label.mood-2 { background: var(--mood-2); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--mood-2) 40%, transparent); } .mood-option input[type="radio"]:checked + .mood-label.mood-3 { background: var(--mood-3); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--mood-3) 40%, transparent); } .mood-option input[type="radio"]:checked + .mood-label.mood-4 { background: var(--mood-4); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--mood-4) 40%, transparent); } .mood-option input[type="radio"]:checked + .mood-label.mood-5 { background: var(--mood-5); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--mood-5) 40%, transparent); } /* "None" option: pill shape */ .mood-label.mood-none { width: auto; padding: 0 0.875rem; border-radius: 999px; font-size: 0.75rem; border-color: var(--border); color: var(--text-muted); background: transparent; } .mood-option input[type="radio"]:checked + .mood-label.mood-none { background: var(--bg-secondary); border-color: var(--text-muted); color: var(--text-secondary); } /* ── Entry cards (index) ────────────────────────────────────────── */ .entries-list { gap: 0.625rem; } .entry-card { padding: 1.125rem 1.375rem; border-left-width: 3px; transition: transform 150ms ease, box-shadow 150ms ease; } .entry-card:hover { transform: translateX(2px); box-shadow: var(--shadow-card); } /* Mood-colored left border on cards */ .entry-card.mood-1 { border-left-color: var(--mood-1); } .entry-card.mood-2 { border-left-color: var(--mood-2); } .entry-card.mood-3 { border-left-color: var(--mood-3); } .entry-card.mood-4 { border-left-color: var(--mood-4); } .entry-card.mood-5 { border-left-color: var(--mood-5); } .entry-card-date { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3125rem; } .entry-card-title { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; color: var(--text); margin-bottom: 0.3125rem; } .entry-card-link:hover .entry-card-title { color: var(--accent); } .entry-card-preview { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; } /* ── Entry show page ─────────────────────────────────────────────── */ .entry-show { max-width: 680px; } .entry-show-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; } .entry-date { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } .entry-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--text); margin-bottom: 1.75rem; letter-spacing: -0.02em; } .entry-body { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.85; color: var(--text); margin-bottom: 2rem; } .entry-body p + p { margin-top: 1.1em; } .entry-actions { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); } /* ── Auth pages ─────────────────────────────────────────────────── */ .auth-container { max-width: 400px; margin: 4rem auto 0; padding: 0 1rem; } .auth-brand { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; color: var(--accent); text-align: center; margin-bottom: 2rem; letter-spacing: 0.01em; } .auth-title { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 400; color: var(--text); text-align: center; margin-bottom: 2rem; line-height: 1.3; } .auth-form { display: flex; flex-direction: column; gap: 0; } /* Auth forms use full-border inputs (conventional login feel) */ .auth-form .field input { border: 1px solid var(--border); border-radius: 8px; padding: 0.625rem 0.875rem; font-family: var(--font-sans); font-size: 0.9375rem; background: var(--surface); transition: border-color 200ms, box-shadow 200ms; } .auth-form .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .auth-form .btn-primary { width: 100%; justify-content: center; padding: 0.6875rem 1rem; font-size: 0.9375rem; margin-top: 0.5rem; border-radius: 8px; } .auth-switch { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--text-secondary); } .auth-switch a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* ── Index page header ───────────────────────────────────────────── */ .journal-index-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; } .journal-index-header h1 { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; color: var(--text); } /* ── Button refinements ──────────────────────────────────────────── */ .btn-primary { font-family: var(--font-sans); letter-spacing: 0.01em; } .btn-ghost { background: none; border: none; cursor: pointer; padding: 0; font-size: 0.875rem; color: var(--text-secondary); font-family: var(--font-sans); text-decoration: none; } .btn-ghost:hover { color: var(--text); text-decoration: none; } /* ── Empty state refinement ─────────────────────────────────────── */ .empty-state { font-family: var(--font-serif); font-style: italic; font-size: 1rem; } .empty-state a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }