/* --- tokens.css --- */ /* Hobonichi-Adwoa · design tokens Aesthetic: Claude-desktop minimalism · emerald + ruby · small type · generous space */ :root { /* Surface — near-black, low chroma */ --bg-0: #0A0A0C; --bg-1: #111114; --bg-2: #16161B; --bg-3: #1C1C22; --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.1); /* Ink — warm off-white scale */ --ink-0: #E8E6E1; --ink-1: #A8A6A0; --ink-2: #6E6C66; --ink-3: #4A4A45; /* Accents — emerald (primary) + ruby (alert/secondary) */ --emerald: #10B981; --emerald-deep: #047857; --emerald-glow: rgba(16, 185, 129, 0.14); --ruby: #E11D48; --ruby-deep: #BE123C; --ruby-glow: rgba(225, 29, 72, 0.14); /* Semantic */ --ok: var(--emerald); --bad: var(--ruby); --warn: #D4A24E; /* Extended accent palette (Part A) */ --color-emerald: #10B981; --color-sapphire: #4A7FA5; /* cool blue — scripture, prayer, faith data */ --color-clay: #B5674D; /* warm terracotta — finance, stewardship, earth */ --color-violet: #7B5EA7; /* deep purple — dreams, ideas, creative/prophetic */ --color-gold: #D4A24E; --color-ruby: #C0392B; --color-amber: #F59E0B; /* Type scale — small by design */ --fs-xs: 10px; --fs-sm: 11px; --fs-base: 11px; /* extremely small body */ --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-hero: 24px; /* Type families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Space scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Radii */ --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px; /* Motion */ --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --motion-med: 220ms cubic-bezier(0.4, 0, 0.2, 1); --motion-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --topbar-h: 40px; --canvas-max: 760px; } /* --- themes.css --- */ /* themes.css · 4 themes × 3 modes Apply via attributes on : data-theme + data-mode. */ /* ════════════════════ THEMES ════════════════════ */ :root[data-theme="claude-dark"] { --bg-0: #050608; --bg-1: #0C0E11; --bg-2: #14171C; --bg-3: #1B1F26; --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(16, 185, 129, 0.20); --ink-0: #ECF4EE; --ink-1: #A5B5AB; --ink-2: #6B7C73; --ink-3: #44504A; --emerald: #10B981; --emerald-deep: #047857; --emerald-bright: #34D399; --emerald-glow: rgba(16, 185, 129, 0.18); --emerald-mist: rgba(16, 185, 129, 0.06); --ruby: #E11D48; --ruby-deep: #BE123C; --ruby-glow: rgba(225, 29, 72, 0.16); --paper: #F5EFD8; --paper-ink: #2A2620; --paper-rule: rgba(42, 38, 32, 0.18); --paper-margin: #E7DEC2; --glass-bg: rgba(5, 6, 8, 0.78); --glass-blur: blur(20px) saturate(160%); --grad-hero: linear-gradient(135deg, #10B981 0%, #047857 35%, #0A1410 100%); --grad-surface: radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.10) 0%, transparent 50%), radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.04) 0%, transparent 60%), var(--bg-0); --grad-card: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%); --grad-emerald: linear-gradient(135deg, #34D399 0%, #10B981 50%, #047857 100%); --grad-emerald-glow: radial-gradient(at 30% 0%, rgba(52, 211, 153, 0.35) 0%, transparent 60%); --grad-topbar: linear-gradient(90deg, rgba(16, 185, 129, 0.06), transparent 40%); } :root[data-theme="claude-light"] { --bg-0: #F6F1E5; --bg-1: #EFE8D6; --bg-2: #E5DCC4; --bg-3: #D9CFB3; --line: rgba(42, 38, 32, 0.10); --line-strong: rgba(42, 38, 32, 0.18); --ink-0: #2A2620; --ink-1: #5A5249; --ink-2: #847A6D; --ink-3: #B5AC9C; --emerald: #047857; --emerald-deep: #065F46; --emerald-bright: #10B981; --emerald-glow: rgba(4, 120, 87, 0.14); --emerald-mist: rgba(4, 120, 87, 0.05); --ruby: #BE123C; --ruby-deep: #9F1239; --ruby-glow: rgba(190, 18, 60, 0.12); --paper: #F5EFD8; --paper-ink: #2A2620; --paper-rule: rgba(42, 38, 32, 0.16); --paper-margin: #E7DEC2; --glass-bg: rgba(246, 241, 229, 0.80); --glass-blur: blur(20px) saturate(120%); --grad-hero: linear-gradient(135deg, #10B981 0%, #047857 35%, #2A2620 100%); --grad-surface: radial-gradient(at 0% 0%, rgba(4, 120, 87, 0.08) 0%, transparent 55%), radial-gradient(at 100% 100%, rgba(190, 18, 60, 0.05) 0%, transparent 60%), var(--bg-0); --grad-card: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%); --grad-emerald: linear-gradient(135deg, #10B981 0%, #047857 50%, #065F46 100%); --grad-emerald-glow: radial-gradient(at 30% 0%, rgba(16, 185, 129, 0.22) 0%, transparent 60%); --grad-topbar: linear-gradient(90deg, rgba(4, 120, 87, 0.05), transparent 40%); } :root[data-theme="github-dark"] { --bg-0: #0D1117; --bg-1: #161B22; --bg-2: #1F252E; --bg-3: #283038; --line: rgba(240, 246, 252, 0.06); --line-strong: rgba(240, 246, 252, 0.12); --ink-0: #C9D1D9; --ink-1: #8B949E; --ink-2: #6E7681; --ink-3: #484F58; --emerald: #3FB950; --emerald-deep: #238636; --emerald-bright: #56D364; --emerald-glow: rgba(63, 185, 80, 0.14); --emerald-mist: rgba(63, 185, 80, 0.05); --ruby: #F85149; --ruby-deep: #DA3633; --ruby-glow: rgba(248, 81, 73, 0.14); --paper: #F5EFD8; --paper-ink: #2A2620; --paper-rule: rgba(42, 38, 32, 0.18); --paper-margin: #E7DEC2; --glass-bg: rgba(13, 17, 23, 0.78); --glass-blur: blur(20px) saturate(140%); --grad-hero: linear-gradient(135deg, #3FB950 0%, #238636 35%, #0D1117 100%); --grad-surface: radial-gradient(at 0% 0%, rgba(63, 185, 80, 0.08) 0%, transparent 55%), radial-gradient(at 100% 100%, rgba(63, 185, 80, 0.03) 0%, transparent 60%), var(--bg-0); --grad-card: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%); --grad-emerald: linear-gradient(135deg, #56D364 0%, #3FB950 50%, #238636 100%); --grad-emerald-glow: radial-gradient(at 30% 0%, rgba(86, 211, 100, 0.30) 0%, transparent 60%); --grad-topbar: linear-gradient(90deg, rgba(63, 185, 80, 0.05), transparent 40%); } :root[data-theme="catppuccin-mocha"] { --bg-0: #1E1E2E; --bg-1: #181825; --bg-2: #313244; --bg-3: #45475A; --line: rgba(205, 214, 244, 0.08); --line-strong: rgba(205, 214, 244, 0.16); --ink-0: #CDD6F4; --ink-1: #BAC2DE; --ink-2: #7F849C; --ink-3: #585B70; --emerald: #A6E3A1; --emerald-deep: #74C7A0; --emerald-bright: #C9F0BD; --emerald-glow: rgba(166, 227, 161, 0.14); --emerald-mist: rgba(166, 227, 161, 0.05); --ruby: #F38BA8; --ruby-deep: #EB5E83; --ruby-glow: rgba(243, 139, 168, 0.14); --paper: #F5EFD8; --paper-ink: #2A2620; --paper-rule: rgba(42, 38, 32, 0.18); --paper-margin: #E7DEC2; --glass-bg: rgba(30, 30, 46, 0.78); --glass-blur: blur(20px) saturate(140%); --grad-hero: linear-gradient(135deg, #A6E3A1 0%, #74C7A0 35%, #1E1E2E 100%); --grad-surface: radial-gradient(at 0% 0%, rgba(166, 227, 161, 0.08) 0%, transparent 55%), radial-gradient(at 100% 100%, rgba(243, 139, 168, 0.06) 0%, transparent 60%), var(--bg-0); --grad-card: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%); --grad-emerald: linear-gradient(135deg, #C9F0BD 0%, #A6E3A1 50%, #74C7A0 100%); --grad-emerald-glow: radial-gradient(at 30% 0%, rgba(201, 240, 189, 0.30) 0%, transparent 60%); --grad-topbar: linear-gradient(90deg, rgba(166, 227, 161, 0.05), transparent 40%); } /* ════════════════════ MODES ════════════════════ */ :root[data-mode="regular"] { --fs-xs: 11px; --fs-sm: 12px; --fs-base: 12px; --fs-md: 14px; --fs-lg: 17px; --fs-xl: 20px; --fs-hero: 28px; } :root[data-mode="extreme"] { --fs-xs: 13px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 17px; --fs-lg: 22px; --fs-xl: 28px; --fs-hero: 42px; } :root[data-mode="regular"] .entry-row, :root[data-mode="extreme"] .entry-row { padding: var(--sp-4) var(--sp-3); } :root[data-mode="extreme"] .score-tile { padding: var(--sp-5) var(--sp-6); } :root[data-mode="extreme"] .kcard, :root[data-mode="extreme"] .prayer-card, :root[data-mode="extreme"] .quiz-card { padding: var(--sp-4) var(--sp-5); } /* ════════════════════ TWEAKS ════════════════════ */ /* scripture cursive */ :root[data-tweak-scripture-cursive="on"] .scripture, :root[data-tweak-scripture-cursive="on"] .daily-ribbon, :root[data-tweak-scripture-cursive="on"] .bp-quote { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-style: italic; font-size: calc(var(--fs-base) + 2px); letter-spacing: 0.005em; } /* jump glow */ :root[data-tweak-jump-glow="on"] .palette-input:focus { box-shadow: 0 0 0 1px var(--emerald), 0 0 24px var(--emerald-glow); } :root[data-tweak-jump-glow="on"] .palette-item.is-focused { box-shadow: 0 0 16px var(--emerald-glow); } /* page animations */ :root[data-tweak-animations="off"] *, :root[data-tweak-animations="off"] *::before, :root[data-tweak-animations="off"] *::after { animation: none !important; transition: none !important; } /* gradient intensity — scales glows + surface intensity */ :root[data-tweak-gradient="soft"] body { background: var(--bg-0) !important; } :root[data-tweak-gradient="soft"] .kpi-card.is-hero::before, :root[data-tweak-gradient="soft"] .general-card::before, :root[data-tweak-gradient="soft"] body.welcome-mode #canvas::before { opacity: 0.15; } :root[data-tweak-gradient="bold"] .kpi-card.is-hero::before, :root[data-tweak-gradient="bold"] .general-card::before { opacity: 0.55; } :root[data-tweak-gradient="bold"] body.welcome-mode #canvas::before { opacity: 1; } :root[data-tweak-gradient="bold"] .btn.is-primary { box-shadow: 0 6px 20px var(--emerald-glow), 0 0 32px var(--emerald-glow), inset 0 1px 0 rgba(255,255,255,0.18); } /* --- base.css --- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--grad-surface, var(--bg-0)); background-attachment: fixed; color: var(--ink-0); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65; font-weight: 400; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--motion-med); min-height: 100vh; } a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-2); transition: color var(--motion-fast), border-color var(--motion-fast); } a:hover { color: var(--emerald); border-color: var(--emerald); } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; } h1 { font-size: var(--fs-lg); } h2 { font-size: var(--fs-sm); color: var(--ink-1); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; } h3 { font-size: var(--fs-base); color: var(--ink-1); } p { margin: 0 0 var(--sp-3); } small, .meta { font-size: var(--fs-xs); color: var(--ink-2); letter-spacing: 0.02em; } code, .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95em; } code { color: var(--emerald); background: var(--emerald-glow); padding: 1px 4px; border-radius: var(--r-1); } kbd { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2); letter-spacing: 0; } button, input, textarea, select { font: inherit; color: var(--ink-0); background: var(--bg-2); border: 1px solid var(--line); outline: none; border-radius: var(--r-2); padding: 4px 8px; } button { cursor: pointer; background: transparent; padding: 4px 10px; } button:hover { border-color: var(--emerald); color: var(--emerald); } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bg-2); color: var(--ink-0); background-image: linear-gradient(45deg, transparent 50%, var(--emerald) 50%), linear-gradient(135deg, var(--emerald) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 24px; cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-sm); } select:focus, input:focus, textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald-glow); } select option { background: var(--bg-2); color: var(--ink-0); font-family: var(--font-mono); } input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; position: relative; padding: 0; flex-shrink: 0; transition: background var(--motion-fast), border-color var(--motion-fast); } input[type="checkbox"]:hover { border-color: var(--emerald); } input[type="checkbox"]:checked { background: var(--emerald); border-color: var(--emerald); } input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); } ::selection { background: var(--emerald-glow); color: var(--ink-0); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-1); border-left: 1px solid var(--line); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--emerald-deep), var(--bg-3)); border-radius: 5px; border: 2px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--emerald), var(--emerald-deep)); } ::-webkit-scrollbar-corner { background: var(--bg-1); } html { scrollbar-color: var(--emerald-deep) var(--bg-1); scrollbar-width: thin; } /* --- layout.css --- */ /* Top-tucked chrome · canvas-first */ #topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); background: var(--glass-bg, rgba(10, 10, 12, 0.78)); backdrop-filter: var(--glass-blur, blur(20px) saturate(140%)); -webkit-backdrop-filter: var(--glass-blur, blur(20px) saturate(140%)); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 var(--sp-4); z-index: 100; font-size: var(--fs-sm); } #topbar::before { content: ''; position: absolute; inset: 0; background: var(--grad-topbar, transparent); pointer-events: none; } .tb-left, .tb-right { position: relative; z-index: 1; } .tb-left { display: flex; align-items: center; gap: var(--sp-1); color: var(--ink-1); } .tb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; } .tb-nav { background: transparent; border: 0; color: var(--ink-2); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-2); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); margin-right: 2px; } .tb-nav:hover { background: var(--bg-2); color: var(--emerald); } .tb-nav:active { transform: scale(0.92); } .tb-crumb { cursor: pointer; padding: 3px var(--sp-2); border-radius: var(--r-2); letter-spacing: 0.02em; transition: background var(--motion-fast), color var(--motion-fast); } .tb-crumb:hover { background: var(--bg-2); color: var(--ink-0); } .tb-crumb.is-active { color: var(--emerald); } .tb-sep { color: var(--ink-3); } .tb-btn { background: transparent; border: 0; color: var(--ink-2); font-size: var(--fs-xs); padding: 4px var(--sp-2); border-radius: var(--r-2); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.04em; transition: background var(--motion-fast), color var(--motion-fast); } .tb-btn:hover { background: var(--bg-2); color: var(--ink-0); } #canvas { margin-top: var(--topbar-h); padding: var(--sp-7) var(--sp-5) var(--sp-9); min-height: calc(100vh - var(--topbar-h)); } .page { max-width: var(--canvas-max); margin: 0 auto; } .page-head { margin-bottom: var(--sp-7); display: flex; align-items: baseline; gap: var(--sp-4); } .page-title { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.015em; } .page-meta { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; } /* --- components.css --- */ /* Components — sparse on purpose */ .stack { display: flex; flex-direction: column; gap: var(--sp-3); } .row { display: flex; align-items: center; gap: var(--sp-2); } .wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2); font-size: var(--fs-xs); background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; color: var(--ink-1); letter-spacing: 0.02em; } .chip.emerald { color: var(--emerald); border-color: var(--emerald-glow); background: var(--emerald-glow); } .chip.ruby { color: var(--ruby); border-color: var(--ruby-glow); background: var(--ruby-glow); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: inline-block; } .dot.emerald { background: var(--emerald); } .dot.ruby { background: var(--ruby); } .dot.pulse { animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } input[type="text"], textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; width: 100%; font-size: var(--fs-base); color: var(--ink-0); transition: border-color var(--motion-fast); } input[type="text"]::placeholder, textarea::placeholder { color: var(--ink-3); } input[type="text"]:focus, textarea:focus { border-bottom-color: var(--emerald); } textarea { resize: vertical; min-height: 120px; font-family: var(--font-sans); line-height: 1.7; } .btn { background: transparent; border: 1px solid var(--line-strong); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-2); color: var(--ink-0); letter-spacing: 0.02em; transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast); } .btn:hover { background: var(--bg-2); border-color: var(--emerald-glow); color: var(--emerald); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.is-primary { background: var(--grad-emerald, var(--emerald)); color: var(--bg-0); border-color: var(--emerald); font-weight: 500; box-shadow: 0 4px 12px var(--emerald-glow), inset 0 1px 0 rgba(255,255,255,0.15); } .btn.is-primary:hover { background: var(--grad-emerald, var(--emerald)); filter: brightness(1.08); box-shadow: 0 8px 20px var(--emerald-glow), inset 0 1px 0 rgba(255,255,255,0.2); color: var(--bg-0); } .btn.is-danger { color: var(--ruby); border-color: var(--ruby-glow); } .btn.is-danger:hover { background: var(--ruby-glow); color: var(--ruby); } /* Command palette */ .palette-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); } .palette-overlay.is-open { opacity: 1; pointer-events: auto; } .palette { width: min(520px, 92vw); background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6); overflow: hidden; } .palette-input { width: 100%; padding: var(--sp-4); background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-0); font-size: var(--fs-md); outline: none; letter-spacing: -0.005em; } .palette-input::placeholder { color: var(--ink-3); } .palette-list { max-height: 56vh; overflow-y: auto; padding: var(--sp-2); } .palette-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-2); cursor: pointer; transition: background var(--motion-fast); color: var(--ink-0); } .palette-item:hover, .palette-item.is-focused { background: var(--bg-2); } .palette-item .item-mark { font-family: var(--font-mono); color: var(--ink-2); width: 14px; text-align: center; } .palette-item .item-meta { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: 0.04em; } .palette-group { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; padding: var(--sp-3) var(--sp-3) var(--sp-1); } /* Miracle panel */ #miracle { position: fixed; right: var(--sp-4); bottom: var(--sp-4); width: 380px; max-height: 520px; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); display: none; flex-direction: column; z-index: 90; overflow: hidden; } #miracle.is-open { display: flex; } .miracle-head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-2); font-size: 9px; color: var(--ink-2); letter-spacing: 0.16em; text-transform: uppercase; } .miracle-version { margin-left: auto; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; } .miracle-log { flex: 1; overflow-y: auto; padding: var(--sp-3); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-3); } .miracle-turn { line-height: 1.65; } .miracle-turn.you { color: var(--ink-0); } .miracle-turn.bot { color: var(--ink-1); } .miracle-turn.is-streaming .m-stream-body::after { content: '▍'; display: inline-block; margin-left: 2px; color: var(--emerald); animation: m-blink 900ms steps(1) infinite; } @keyframes m-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } .m-tool-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 10px; font-family: var(--font-mono); } .m-tool-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: lowercase; } .m-tool-chip.is-running { color: var(--ink-2); border-color: var(--ink-3); animation: m-pulse 1200ms ease-in-out infinite; } .m-tool-chip.is-done { color: var(--emerald); border-color: var(--emerald); } .m-tool-chip.is-error { color: var(--ruby); border-color: var(--ruby); } @keyframes m-pulse { 50% { opacity: 0.55; } } .miracle-turn .who { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; margin-right: var(--sp-2); font-family: var(--font-mono); } .miracle-input { border-top: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .miracle-input input { flex: 1; background: transparent; border: 0; outline: none; font-size: var(--fs-sm); color: var(--ink-0); min-width: 0; } .m-send { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--emerald); color: var(--bg-0); border: 0; border-radius: var(--r-2); cursor: pointer; flex-shrink: 0; transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; box-shadow: 0 0 0 0 var(--emerald-glow); } .m-send:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--emerald-glow); } .m-send:active { transform: translateY(0) scale(0.96); } .m-send svg { display: block; } /* Entry list */ .entry-list { list-style: none; padding: 0; margin: 0; } .entry-row { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); cursor: pointer; transition: background var(--motion-fast); } .entry-row:hover { background: var(--bg-1); } .entry-row .title { color: var(--ink-0); } .entry-row .title .meta { color: var(--ink-3); margin-left: var(--sp-2); font-size: var(--fs-xs); font-family: var(--font-mono); } .entry-row .meta-id { color: var(--ink-3); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: 0.04em; } /* Daily page */ .daily-ribbon { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--sp-3); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; } .daily-one-line { font-size: var(--fs-md); color: var(--ink-0); margin-bottom: var(--sp-7); font-weight: 400; letter-spacing: -0.012em; border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); } .daily-section { margin-bottom: var(--sp-7); } .daily-section .label { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--sp-3); } .daily-grats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); } .daily-grats input { font-size: var(--fs-sm); } .daily-metrics { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-5); font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.05em; } .daily-metrics span strong { color: var(--ink-0); font-weight: 500; margin-right: 4px; } /* ──────────────────────────────────────── Brand · Topbar v2 ──────────────────────────────────────── */ .tb-brand { font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.02em; background: var(--grad-emerald, linear-gradient(135deg, #34D399, #10B981, #047857)); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; padding-right: var(--sp-1); } .tb-user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; margin-left: var(--sp-2); border-radius: 100px; font-size: var(--fs-xs); color: var(--ink-1); background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast); } .tb-user:hover { border-color: var(--emerald-glow); color: var(--ink-0); } .tb-user-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--grad-emerald, linear-gradient(135deg, #10B981, #047857)); color: var(--bg-0); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; letter-spacing: 0; box-shadow: 0 2px 8px var(--emerald-glow); } .tb-user-name { letter-spacing: 0.02em; } .tb-btn .icon, .icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } /* ──────────────────────────────────────── Welcome / Onboarding ──────────────────────────────────────── */ body.welcome-mode #topbar, body.welcome-mode #miracle, body.welcome-mode #palette, body.welcome-mode #drawer, body.login-gate-mode #topbar, body.login-gate-mode #miracle, body.login-gate-mode #palette, body.login-gate-mode #drawer, body.login-gate-mode #sidebar, body.login-gate-mode .bottom-nav { display: none !important; } body.welcome-mode #canvas, body.login-gate-mode #canvas { margin-top: 0; padding: 0; min-height: 100vh; background: var(--grad-surface, var(--bg-0)); background-attachment: fixed; } body.login-gate-mode .login-stage { padding-left: 0; padding-right: 0; } body.welcome-mode #canvas::before { content: ''; position: fixed; inset: 0; background: var(--grad-emerald-glow); opacity: 0.6; pointer-events: none; z-index: 0; } .welcome-stage { position: relative; z-index: 1; } .welcome-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-7) var(--sp-4); } .welcome-card { width: min(560px, 100%); background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-4); padding: var(--sp-7) var(--sp-7) var(--sp-5); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } .welcome-mark { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); } .welcome-mark .word { font-weight: 700; font-size: 18px; letter-spacing: 0.08em; background: var(--grad-emerald, linear-gradient(135deg, #34D399, #10B981, #047857)); -webkit-background-clip: text; background-clip: text; color: transparent; } .welcome-version { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; } .welcome-greeting { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--ink-0); margin-bottom: var(--sp-5); letter-spacing: -0.012em; } .welcome-step-icon { color: var(--emerald); } .welcome-step { margin-bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); } .welcome-step input[type="text"] { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; color: var(--ink-0); width: 100%; outline: none; font-size: 13px; transition: border-color var(--motion-fast); } .welcome-step input[type="text"]:focus { border-bottom-color: var(--emerald); } .welcome-meta { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; letter-spacing: 0.005em; } .welcome-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .welcome-chips .chip { cursor: pointer; } .welcome-grid { grid-template-columns: 1fr 1fr; } .welcome-progress { display: flex; gap: 4px; margin-bottom: var(--sp-3); } .welcome-progress span { flex: 1; height: 2px; background: var(--bg-3); border-radius: 1px; transition: background var(--motion-fast); } .welcome-progress span.is-done { background: var(--emerald-deep); } .welcome-progress span.is-active { background: var(--emerald); } .welcome-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-bottom: var(--sp-4); } .welcome-scripture { text-align: center; font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 12px; color: var(--emerald); opacity: 0.85; border-top: 1px solid var(--line); padding-top: var(--sp-4); line-height: 1.5; } .welcome-blessing { display: flex; flex-direction: column; gap: var(--sp-3); } .welcome-seat { font-size: 14px; color: var(--ink-0); line-height: 1.55; } .welcome-seat .emerald { color: var(--emerald); font-weight: 600; } .welcome-calling { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 13px; color: var(--ink-1); border-left: 2px solid var(--emerald); padding-left: 12px; line-height: 1.6; } /* ──────────────────────────────────────── KPI cards · Dashboard v2 ──────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); } .kpi-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); position: relative; display: flex; flex-direction: column; gap: var(--sp-1); transition: border-color var(--motion-fast); } .kpi-card:hover { border-color: var(--emerald-glow); } .kpi-card.is-hero { background: var(--grad-card, linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%)); border-color: var(--emerald-glow); position: relative; overflow: hidden; } .kpi-card.is-hero::before { content: ''; position: absolute; inset: 0; background: var(--grad-emerald-glow); opacity: 0.35; pointer-events: none; } .kpi-card.is-hero > * { position: relative; z-index: 1; } .kpi-icon { color: var(--ink-2); position: absolute; top: var(--sp-3); right: var(--sp-3); } .kpi-card.is-hero .kpi-icon { color: var(--emerald); } .kpi-label { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; } .kpi-num { font-size: 28px; font-family: var(--font-mono); color: var(--ink-0); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0; } .kpi-card.is-hero .kpi-num { font-size: 40px; } .kpi-num.emerald { color: var(--emerald); } .kpi-num.ruby { color: var(--ruby); } .kpi-trend { font-size: var(--fs-xs); color: var(--ink-2); letter-spacing: 0.02em; line-height: 1.4; } .kpi-spark { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-top: var(--sp-2); } .kpi-spark span { flex: 1; background: var(--bg-3); border-radius: 1px; transition: background var(--motion-fast); } .kpi-spark span.peak { background: var(--emerald); } /* General card */ .general-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); display: grid; grid-template-columns: 56px 1fr 32px; gap: var(--sp-4); align-items: center; } .general-portrait { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-emerald, linear-gradient(135deg, #34D399, #10B981, #047857)); color: var(--bg-0); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; letter-spacing: 0; box-shadow: 0 6px 18px var(--emerald-glow); } .general-card { position: relative; overflow: hidden; } .general-card::before { content: ''; position: absolute; inset: 0; background: var(--grad-emerald-glow); opacity: 0.3; pointer-events: none; } .general-card > * { position: relative; z-index: 1; } .general-quote { font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 15px; color: var(--ink-0); line-height: 1.55; letter-spacing: 0.005em; margin-bottom: 6px; } .general-attrib { font-size: var(--fs-xs); color: var(--ink-2); letter-spacing: 0.02em; } .general-ref { color: var(--emerald); margin-left: var(--sp-2); font-family: var(--font-mono); font-size: 10px; } .general-cycle { background: transparent; border: 0; color: var(--ink-2); cursor: pointer; padding: var(--sp-2); border-radius: var(--r-2); transition: color var(--motion-fast), background var(--motion-fast); } .general-cycle:hover { color: var(--emerald); background: var(--bg-2); } .score-icon { color: var(--ink-2); margin-bottom: 4px; display: block; } .score-tile:hover .score-icon { color: var(--emerald); } /* + new button anchored on every domain page-head */ .new-btn { margin-left: auto; font-size: var(--fs-xs); padding: 4px var(--sp-3); } /* Scripture echo in Miracle replies */ .scripture { display: block; margin-top: 6px; font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 11px; color: var(--emerald); opacity: 0.85; letter-spacing: 0.005em; line-height: 1.55; } /* Theme picker */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); } .theme-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; text-align: left; transition: border-color var(--motion-fast); } .theme-tile:hover { border-color: var(--emerald-glow); } .theme-tile.is-active { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald-glow); } .theme-swatch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: var(--sp-2); border-radius: var(--r-1); overflow: hidden; } .theme-swatch > div { aspect-ratio: 1/1; } .theme-label { font-size: var(--fs-xs); color: var(--ink-0); letter-spacing: 0.02em; } /* Mode picker */ .mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .mode-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; text-align: left; transition: border-color var(--motion-fast); } .mode-tile:hover { border-color: var(--emerald-glow); } .mode-tile.is-active { border-color: var(--emerald); } .mode-id { font-size: var(--fs-sm); color: var(--ink-0); text-transform: capitalize; margin-bottom: 4px; font-weight: 500; } .mode-tile .meta { font-size: var(--fs-xs); color: var(--ink-2); text-transform: none; letter-spacing: 0; } /* Tweak toggles */ .tweak-rows { display: flex; flex-direction: column; gap: var(--sp-2); } .tweak-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-1); cursor: pointer; } .tweak-row input { width: auto; accent-color: var(--emerald); cursor: pointer; } /* Settings sub-blocks */ .settings-block { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); } .settings-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); margin-bottom: var(--sp-3); } .settings-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); } .settings-stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-1); } .settings-stat .num { color: var(--ink-0); font-family: var(--font-mono); } .settings-cheats { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); } .cheat { display: flex; gap: var(--sp-3); align-items: center; color: var(--ink-1); } .cheat kbd, .cheat code { font-size: var(--fs-xs); } /* Empty states — quiet */ .empty { padding: var(--sp-6) 0; color: var(--ink-2); font-size: var(--fs-sm); } .empty code { background: transparent; color: var(--emerald); padding: 0; } /* ──────────────────────────────────────── Phase 1 ──────────────────────────────────────── */ /* Wider canvas for kanban + week grid */ .page-wide { max-width: 1100px; } /* Kanban — projects */ .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); } .lane { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); min-height: 220px; min-width: 0; } .lane-head { display: flex; justify-content: space-between; font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--sp-3); } .lane-head .meta { font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.05em; } .lane-body { display: flex; flex-direction: column; gap: var(--sp-2); } .kcard { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); } .kcard:hover { border-color: var(--emerald-glow); background: var(--bg-3); } .kcard-title { font-size: var(--fs-sm); color: var(--ink-0); margin-bottom: 4px; line-height: 1.4; word-break: normal; overflow-wrap: anywhere; } .kcard-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .kcard-meta .meta { font-family: var(--font-mono); } /* Plans — venture-grouped list */ .venture-list { display: flex; flex-direction: column; gap: var(--sp-7); } .venture-name { font-size: var(--fs-sm); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--sp-3); font-weight: 500; } .plan-row { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--motion-fast); } .plan-row:hover { background: var(--bg-1); } .plan-main .plan-title { font-size: var(--fs-sm); color: var(--ink-0); } .plan-main .plan-thesis { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; line-height: 1.5; } .plan-stats { display: flex; align-items: center; gap: var(--sp-2); } .plan-stats .meta { font-family: var(--font-mono); } /* Schedule — week grid */ .week-nav { margin-left: auto; display: flex; gap: var(--sp-1); } .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .week-col { background: var(--bg-0); min-height: 460px; display: flex; flex-direction: column; } .week-col.is-today { background: var(--bg-1); } .week-col-head { padding: var(--sp-3); border-bottom: 1px solid var(--line); } .week-col.is-today .week-col-head { border-bottom-color: var(--emerald-glow); } .week-dow { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; } .week-dom { font-size: var(--fs-lg); color: var(--ink-0); font-family: var(--font-mono); margin-top: 2px; } .week-col.is-today .week-dom { color: var(--emerald); } .week-col-body { padding: var(--sp-2); flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); } .week-empty { color: var(--ink-3); font-size: 9px; padding: var(--sp-2); text-align: center; } .event-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 6px var(--sp-2); cursor: pointer; transition: border-color var(--motion-fast); } .event-card:hover { border-color: var(--emerald-glow); } .event-time { font-size: 9px; color: var(--emerald); font-family: var(--font-mono); letter-spacing: 0.04em; } .event-title { font-size: var(--fs-xs); color: var(--ink-0); margin: 2px 0; line-height: 1.4; } .event-loc { font-size: 9px; color: var(--ink-3); } /* Entry drawer */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 150; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); } .drawer-overlay.is-open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(480px, 92vw); background: var(--bg-1); border-left: 1px solid var(--line-strong); z-index: 160; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--motion-med); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45); } .drawer[aria-hidden="false"] { transform: translateX(0); } .drawer-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); } .drawer-domain { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.18em; } .drawer-id { color: var(--ink-3); font-size: var(--fs-xs); margin-left: auto; letter-spacing: 0.05em; } .drawer-close { background: transparent; border: 0; color: var(--ink-2); font-size: 20px; padding: 0 var(--sp-2); cursor: pointer; line-height: 1; transition: color var(--motion-fast); } .drawer-close:hover { color: var(--ink-0); } .drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); } .drawer-field { display: flex; flex-direction: column; gap: 4px; } .drawer-label { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; } .drawer-field input, .drawer-field textarea, .drawer-field select { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; color: var(--ink-0); font-size: var(--fs-sm); font-family: var(--font-sans); width: 100%; outline: none; transition: border-color var(--motion-fast); } .drawer-field input:focus, .drawer-field textarea:focus, .drawer-field select:focus { border-bottom-color: var(--emerald); } .drawer-field select { appearance: none; cursor: pointer; padding-right: 16px; } .drawer-field textarea { min-height: 80px; line-height: 1.6; resize: vertical; } .drawer-section { padding-top: var(--sp-3); border-top: 1px solid var(--line); } .drawer-section-title { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--sp-2); } .drawer-link-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); cursor: pointer; color: var(--ink-1); transition: color var(--motion-fast); } .drawer-link-row:hover { color: var(--ink-0); } .drawer-link-row .meta { margin-left: auto; font-family: var(--font-mono); } .drawer-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); background: var(--bg-0); gap: var(--sp-3); } .drawer-actions { display: flex; gap: var(--sp-2); } .drawer-actions .btn { padding: 6px 14px; font-size: var(--fs-sm); } .drawer-actions .btn.is-primary { background: var(--emerald); color: #000; border-color: var(--emerald); font-weight: 500; } .drawer-actions .btn.is-primary:hover { background: var(--emerald-bright, #34D399); box-shadow: 0 0 12px var(--emerald-glow); } .drawer-actions .btn.is-danger { color: var(--ruby); border-color: var(--ruby-glow); } .drawer-actions .btn.is-danger:hover { background: var(--ruby-glow); color: var(--ruby); border-color: var(--ruby); } /* ──────────────────────────────────────── Phase 2 ──────────────────────────────────────── */ /* Finance */ .fin-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-7); } .fin-cell { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .fin-label { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--sp-2); } .fin-val { font-size: var(--fs-lg); font-family: var(--font-mono); color: var(--ink-0); letter-spacing: -0.01em; } .fin-val.emerald { color: var(--emerald); } .fin-val.ruby { color: var(--ruby); } .fin-cats { display: flex; flex-direction: column; gap: var(--sp-2); } .fin-cat { display: grid; grid-template-columns: 100px 1fr 80px; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); color: var(--ink-1); } .fin-cat .num { text-align: right; color: var(--ink-0); font-family: var(--font-mono); } .fin-bar { height: 4px; background: var(--bg-2); border-radius: 2px; overflow: hidden; position: relative; } .fin-bar span { display: block; height: 100%; background: var(--emerald); border-radius: 2px; opacity: 0.6; transition: width var(--motion-med); } /* Prayer */ .prayer-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); } .prayer-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); display: flex; flex-direction: column; gap: var(--sp-1); } .prayer-card:hover { border-color: var(--emerald-glow); background: var(--bg-2); } .prayer-card.is-answered { border-color: var(--emerald-glow); } .prayer-intensity { font-size: var(--fs-xs); color: var(--emerald); letter-spacing: 0.2em; font-family: var(--font-mono); } .prayer-subject { font-size: var(--fs-sm); color: var(--ink-0); line-height: 1.5; } .prayer-meta { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; font-family: var(--font-mono); margin-top: var(--sp-1); } /* Fasting */ .fast-active { background: var(--bg-1); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); padding: var(--sp-4); margin-bottom: var(--sp-7); cursor: pointer; } .fast-active .label { margin-bottom: var(--sp-3); } .fast-active-row { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--sp-3); align-items: center; } .fast-active-type { font-size: var(--fs-xs); color: var(--emerald); text-transform: uppercase; letter-spacing: 0.14em; } .fast-active-purpose { font-size: var(--fs-sm); color: var(--ink-0); margin-top: 2px; } .fast-active-elapsed { color: var(--emerald); font-size: var(--fs-md); } .ribbon { display: grid; grid-template-columns: repeat(90, 1fr); gap: 1px; height: 24px; } .ribbon-cell { background: var(--bg-2); border-radius: 1px; transition: background var(--motion-fast); } .ribbon-cell.is-active { background: var(--emerald); opacity: 0.85; } /* ═══ EVENT / MEAL completion ═══ */ .event-card { display: flex; align-items: flex-start; gap: 8px; } .event-card .event-body { flex: 1; } .event-card.is-done .event-title { text-decoration: line-through; opacity: 0.55; } .event-card.is-done .event-time, .event-card.is-done .event-loc { opacity: 0.5; } .meal-card { display: flex; align-items: flex-start; gap: 6px; } .meal-card .meal-body { flex: 1; } .meal-card.is-done .meal-items { text-decoration: line-through; opacity: 0.55; } .meal-card.is-done .meal-cost { opacity: 0.5; } /* ═══ MUSIC WRAPPED ═══ */ .music-wrapped { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); } .wrapped-card { background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--emerald)) 18%, var(--bg-1)) 0%, var(--bg-1) 100%); border: 1px solid var(--accent, var(--emerald)); border-radius: var(--r-3); padding: var(--sp-4); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; min-height: 120px; } .wrapped-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); pointer-events: none; } .wrapped-icon { color: var(--accent); margin-bottom: 4px; opacity: 0.9; } .wrapped-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .wrapped-value { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-lg); color: var(--ink-0); line-height: 1.2; letter-spacing: -0.01em; min-height: 1.8em; position: relative; z-index: 1; } .wrapped-badge { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); } .music-bars { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .music-bar-row { display: grid; grid-template-columns: 30px 1.2fr 2fr 36px; align-items: center; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line); } .music-bar-row:last-child { border-bottom: 0; } .music-bar-rank { color: var(--ink-2); font-size: var(--fs-xs); } .music-bar-name { color: var(--ink-0); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .music-bar-track { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .music-bar-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), #34D399); border-radius: 3px; } .music-bar-num { font-family: var(--font-mono); text-align: right; color: var(--emerald); font-size: var(--fs-sm); } /* In-app notification toast */ .mr-toast { position: fixed; top: 60px; right: 16px; background: var(--bg-2); border: 1px solid var(--emerald); border-left: 3px solid var(--emerald); border-radius: var(--r-3); padding: 10px 14px; z-index: 250; min-width: 240px; max-width: 320px; box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 16px var(--emerald-glow); animation: toastIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .mr-toast.is-leaving { animation: toastOut 480ms ease both; } .mr-toast-title { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--emerald); margin-bottom: 4px; } .mr-toast-body { font-size: var(--fs-sm); color: var(--ink-1); line-height: 1.4; } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { to { opacity: 0; transform: translateX(40px); } } /* Settings anchor nav (responsive section pills) */ .settings-anchor-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); } .settings-anchor-nav a { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border: 0; padding: 4px 10px; border-radius: 12px; background: var(--bg-2); transition: background 150ms ease, color 150ms ease, transform 150ms ease; cursor: pointer; } .settings-anchor-nav a:hover { background: var(--emerald-mist, rgba(16,185,129,0.06)); color: var(--emerald); transform: translateY(-1px); } .daily-section.is-flash { animation: anchorFlash 1200ms ease both; } @keyframes anchorFlash { 0% { box-shadow: 0 0 0 4px var(--emerald-glow); } 100% { box-shadow: 0 0 0 0 transparent; } } /* Dev disclosure */ .dev-disclosure { margin: var(--sp-5) 0; border: 1px dashed var(--line-strong); border-radius: var(--r-3); background: rgba(255,255,255,0.015); padding: 0 var(--sp-3); } .dev-disclosure[open] { border-color: var(--emerald-glow); background: var(--bg-1); padding: var(--sp-3); } .dev-disclosure-summary { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; padding: var(--sp-2) 0; list-style: none; outline: none; } .dev-disclosure-summary::-webkit-details-marker { display: none; } .dev-disclosure-summary::marker { display: none; } .dev-glyph { color: var(--ink-3); font-size: 14px; transition: transform 200ms ease, color 200ms ease; } .dev-disclosure[open] .dev-glyph { color: var(--emerald); transform: rotate(45deg); } .dev-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-1); } .dev-hint { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.04em; } @media (max-width: 640px) { .dev-hint { display: none; } } /* Contact · support section */ .contact-block { line-height: 1.6; } .contact-row { display: flex; align-items: center; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px dashed var(--line); } .contact-row:last-of-type { border-bottom: 0; } .contact-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); min-width: 100px; } .contact-val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--emerald); text-decoration: none; border-bottom: 1px dotted var(--emerald-glow); flex: 1; } .contact-val:hover { color: var(--emerald-bright, #34D399); border-bottom-color: var(--emerald); } .contact-actions .btn.is-primary { background: var(--emerald); color: #000; border-color: var(--emerald); } /* Feedback form card */ .feedback-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); margin-top: var(--sp-4); position: relative; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .feedback-head { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); } .fb-kind { flex: 1; background: transparent !important; border: 0 !important; padding: 0 !important; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-lg); color: var(--ink-0); cursor: pointer; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; background-image: linear-gradient(45deg, transparent 50%, var(--emerald) 50%), linear-gradient(135deg, var(--emerald) 50%, transparent 50%) !important; background-position: calc(100% - 4px) 8px, calc(100% - 9px) 8px !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; padding-right: 22px !important; } .fb-close { background: transparent; border: 0; color: var(--ink-2); font-size: 18px; cursor: pointer; padding: 0 6px; line-height: 1; margin-left: auto; } .fb-close:hover { color: var(--ink-0); } #fb-msg { width: 100%; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); color: var(--ink-0); font-family: inherit; font-size: var(--fs-md); line-height: 1.55; resize: vertical; min-height: 120px; transition: border-color 150ms ease, box-shadow 150ms ease; } #fb-msg::placeholder { color: var(--ink-3); font-style: italic; } #fb-msg:focus { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald-glow); outline: none; } .fb-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-3); } .fb-status { flex: 1; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; } #fb-send { background: var(--emerald); color: #000; border: 0; border-radius: var(--r-3); padding: 10px 22px; font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.02em; cursor: pointer; transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; } #fb-send:hover { background: var(--emerald-bright, #34D399); box-shadow: 0 4px 12px var(--emerald-glow); } #fb-send:active { transform: scale(0.96); } /* Sidebar contact footer */ .sb-contact { margin-top: auto; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-contact a { color: var(--emerald); text-decoration: none; border-bottom: 1px dotted var(--emerald-glow); } .sb-contact a { display: flex; align-items: center; gap: 8px; } .sb-contact a:hover { border-bottom-color: var(--emerald); } .sb-contact-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .sidebar:not(.is-expanded) .sb-contact-label { display: none; } .sidebar:not(.is-expanded) .sb-contact a { justify-content: center; } .sb-contact-label { opacity: 0; transform: translateX(-8px); transition: opacity 180ms ease, transform 180ms ease; } .sidebar.is-expanded .sb-contact-label { opacity: 1; transform: translateX(0); } /* Login + signup page */ .login-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: radial-gradient(ellipse at 30% 0%, rgba(16,185,129,0.10) 0%, transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(123,94,167,0.06) 0%, transparent 60%), var(--bg-0); } .login-card { width: 100%; max-width: 420px; background: var(--bg-1); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); padding: var(--sp-6) var(--sp-5); box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 32px var(--emerald-glow); } .login-mark { text-align: center; margin-bottom: var(--sp-5); } .login-word { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-hero); font-weight: 400; letter-spacing: 0.04em; color: var(--emerald); display: block; } .login-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .login-tabs { display: flex; gap: 2px; background: var(--bg-2); border-radius: var(--r-3); padding: 3px; margin-bottom: var(--sp-4); } .login-tab { flex: 1; padding: 8px 12px; background: transparent; border: 0; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-radius: var(--r-2); transition: background 150ms ease, color 150ms ease; } .login-tab.is-active { background: var(--bg-3); color: var(--emerald); } .login-form { display: flex; flex-direction: column; gap: var(--sp-3); } .login-field { display: flex; flex-direction: column; gap: 4px; } .login-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .login-field input { padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-3); color: var(--ink-0); font-family: inherit; font-size: var(--fs-md); transition: border-color 150ms ease, box-shadow 150ms ease; } .login-field input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald-glow); } .login-advanced { font-size: var(--fs-xs); color: var(--ink-3); } .login-advanced summary { cursor: pointer; padding: 4px 0; } .login-advanced input { width: 100%; margin-top: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 6px 10px; color: var(--ink-1); font-family: var(--font-mono); font-size: 10px; } .login-submit { margin-top: var(--sp-2); padding: 12px 16px; background: var(--emerald); color: #000; border: 0; border-radius: var(--r-3); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0.02em; cursor: pointer; transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .login-submit:hover { background: var(--emerald-bright, #34D399); box-shadow: 0 4px 16px var(--emerald-glow); } .login-error { color: var(--ruby); min-height: 1em; } .login-footer { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--ink-3); } .login-footer a { color: var(--emerald); text-decoration: none; } /* User-menu dropdown */ .tb-user-menu { position: fixed; background: var(--bg-1); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); box-shadow: 0 12px 36px rgba(0,0,0,0.5); z-index: 200; min-width: 200px; overflow: hidden; animation: fade-in 180ms ease both; } .tb-user-menu-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); } .tb-user-menu-name { font-size: var(--fs-sm); color: var(--ink-0); font-weight: 500; } .tb-user-menu-email { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; } .tb-user-menu-item { width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink-1); padding: 10px var(--sp-3); font-size: var(--fs-sm); cursor: pointer; border-radius: 0; transition: background 120ms ease, color 120ms ease; } .tb-user-menu-item:hover { background: var(--bg-2); color: var(--emerald); } .tb-user-menu-item.is-danger:hover { color: var(--ruby); } .tb-user-menu-item.is-primary { color: var(--emerald); font-weight: 500; } /* PWA install banner */ .install-banner { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--bg-2); border: 1px solid var(--emerald); border-radius: var(--r-3); padding: 8px 12px; display: flex; align-items: center; gap: 8px; z-index: 160; font-size: 11px; color: var(--ink-1); font-family: var(--font-mono); box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 16px var(--emerald-glow); animation: installRise 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; max-width: calc(100vw - 32px); } .install-text { letter-spacing: 0.04em; } .install-banner .btn { font-size: 10px; padding: 3px 10px; } .install-banner .install-x { padding: 0 6px; font-size: 14px; line-height: 1; color: var(--ink-3); border: 0; } .install-banner .install-x:hover { color: var(--ink-0); } .install-banner.is-leaving { animation: installFall 280ms ease both; } @keyframes installRise { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes installFall { to { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); } } /* SW update banner — non-destructive alternative to auto-reload on controllerchange */ .update-banner { position: fixed; bottom: calc(100px + env(safe-area-inset-bottom, 0)); left: 50%; transform: translateX(-50%); background: var(--bg-2); border: 1px solid var(--emerald); border-radius: var(--r-3); padding: 8px 12px; display: flex; align-items: center; gap: 8px; z-index: 160; font-size: 11px; color: var(--ink-1); font-family: var(--font-mono); box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 16px var(--emerald-glow); animation: installRise 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; max-width: calc(100vw - 32px); } .update-banner-text { letter-spacing: 0.04em; } .update-banner-reload { font-size: 10px; padding: 3px 10px; } .update-banner-dismiss { padding: 0 6px; font-size: 14px; line-height: 1; color: var(--ink-3); background: transparent; border: 0; cursor: pointer; } .update-banner-dismiss:hover { color: var(--ink-0); } /* Login "already in" stacked actions */ .login-already-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); } /* Daily page scripture quote (full text, not just ref) */ .daily-scripture { margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: linear-gradient(135deg, rgba(16,185,129,0.06), transparent); border-left: 3px solid var(--emerald); border-radius: 0 var(--r-2) var(--r-2) 0; display: flex; flex-direction: column; gap: 4px; } .daily-scripture-text { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--ink-0); line-height: 1.55; } .daily-scripture-ref { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-sapphire); align-self: flex-end; } /* Bible today's refresher card — gradient horizontal banner */ .bible-today-card { background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(74,127,165,0.08) 50%, rgba(212,175,55,0.10) 100%); border: 1px solid var(--emerald); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; box-shadow: 0 8px 24px rgba(16,185,129,0.10); position: relative; overflow: hidden; } .bible-today-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(212,175,55,0.18), transparent 60%); pointer-events: none; } .bible-today-card.is-empty { background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent); border: 1px dashed var(--line-strong); box-shadow: none; } .bible-today-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); position: relative; } .bible-today-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--emerald); } .bible-today-date { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-sm); color: var(--ink-1); } .bible-today-passage { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-xl); color: var(--color-gold); margin-bottom: var(--sp-2); letter-spacing: -0.01em; position: relative; } .bible-today-quote { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--ink-0); line-height: 1.5; border-left: 3px solid var(--color-gold); padding-left: var(--sp-3); margin: 0 0 var(--sp-2); position: relative; } .bible-today-notes { font-size: var(--fs-sm); color: var(--ink-1); line-height: 1.6; position: relative; } .bible-today-more { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--emerald); letter-spacing: 0.08em; position: relative; } .bible-today-empty { font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; } /* Bible 66-book grid */ .bible-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; } .bible-cell { aspect-ratio: 1 / 1; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-1); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: default; transition: border-color var(--motion-fast); } .bible-cell.nt { background: var(--bg-2); } .bible-cell.deutero { background: var(--bg-1); border-color: rgba(212, 175, 55, 0.10); } .bible-cell.tewahedo { background: var(--bg-1); border-color: rgba(192, 57, 43, 0.10); } .bible-cell.pseudo { background: var(--bg-0); border-color: rgba(255, 255, 255, 0.04); opacity: 0.7; } /* Progress-fill bar (rises from bottom). Width=cell width, height = % */ .bible-cell-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--emerald-bright, #34D399) 70%, transparent) 0%, var(--emerald) 60%, var(--emerald-deep) 100%); z-index: 0; transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; height: 0; } .bible-cell.deutero .bible-cell-fill { background: linear-gradient(180deg, #E5C46A 0%, #D4AF37 60%, #8B7424 100%); } .bible-cell.tewahedo .bible-cell-fill { background: linear-gradient(180deg, #D85948 0%, #C0392B 60%, #7E1F14 100%); } .bible-cell.pseudo .bible-cell-fill { background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.32) 100%); } .bible-cell.has { cursor: pointer; border-color: var(--emerald-glow); } .bible-cell.deutero.has { border-color: rgba(212, 175, 55, 0.40); } .bible-cell.tewahedo.has { border-color: rgba(192, 57, 43, 0.40); opacity: 1; } .bible-cell.pseudo.has { border-color: var(--line-strong); opacity: 1; } .bible-cell.is-complete { border-color: var(--emerald); box-shadow: 0 0 8px var(--emerald-glow); } .bible-cell.is-complete .bible-cell-fill { box-shadow: inset 0 -2px 0 var(--emerald-bright, #34D399); } .bible-cell.has:hover { border-color: var(--emerald); transform: translateY(-1px); } .bible-abbr { font-size: 8px; color: var(--ink-3); letter-spacing: 0.04em; font-family: var(--font-mono); position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,0.5); } .bible-cell.has .bible-abbr { color: #fff; } .bible-cell.is-complete .bible-abbr { color: #000; font-weight: 600; } .bible-count { position: absolute; top: 2px; right: 3px; font-size: 7px; color: var(--emerald-bright, #34D399); font-family: var(--font-mono); z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,0.5); } .bible-cell.is-complete .bible-count { color: #000; } /* Overall protocanon progress bar at top of /bible page */ .bible-progress-bar { position: relative; height: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin-bottom: var(--sp-5); } .bible-progress-fill { height: 100%; background: linear-gradient(90deg, var(--emerald-deep), var(--emerald), var(--emerald-bright, #34D399)); transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 8px var(--emerald-glow); } .bible-progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-0); text-shadow: 0 1px 2px rgba(0,0,0,0.6); pointer-events: none; } @media (max-width: 900px) { .bible-grid { grid-template-columns: repeat(9, 1fr); } .fin-summary { grid-template-columns: 1fr 1fr; } } /* ──────────────────────────────────────── Phase 3 ──────────────────────────────────────── */ /* Dreams */ .dream-types { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); } /* Meals — slot × day grid */ .meal-grid { display: grid; grid-template-columns: 80px repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .meal-corner { background: var(--bg-0); } .meal-day-head { background: var(--bg-0); padding: var(--sp-3); border-bottom: 1px solid var(--line); } .meal-day-head.is-today { background: var(--bg-1); } .meal-day-head.is-today .week-dom { color: var(--emerald); } .meal-slot-label { background: var(--bg-0); padding: var(--sp-3); font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.14em; border-right: 1px solid var(--line); display: flex; align-items: center; } .meal-cell { background: var(--bg-0); padding: var(--sp-2); min-height: 56px; display: flex; flex-direction: column; gap: var(--sp-1); } .meal-cell.is-today { background: var(--bg-1); } .meal-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 4px var(--sp-2); cursor: pointer; transition: border-color var(--motion-fast); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); } .meal-card:hover { border-color: var(--emerald-glow); } .meal-items { font-size: 10px; color: var(--ink-0); line-height: 1.4; } .meal-cost { font-size: 9px; color: var(--emerald); } .meal-empty { color: var(--ink-3); font-size: 9px; text-align: center; } /* ──────────────────────────────────────── Phase 4 ──────────────────────────────────────── */ .daily-ribbon .emerald { color: var(--emerald); } /* Daily quiz card */ .daily-quiz { background: var(--bg-1); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); padding: var(--sp-4); margin-bottom: var(--sp-7); } .daily-quiz-head { display: flex; justify-content: space-between; font-size: 9px; color: var(--emerald); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--sp-2); } .daily-quiz-head .num { color: var(--ink-2); font-family: var(--font-mono); } .daily-quiz-q { font-size: var(--fs-md); color: var(--ink-0); line-height: 1.55; margin-bottom: var(--sp-3); } /* Generic quiz answer + actions */ .quiz-answer { font-size: var(--fs-sm); color: var(--ink-1); margin-bottom: var(--sp-3); } .quiz-answer summary { cursor: pointer; font-size: var(--fs-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.14em; } .quiz-answer summary:hover { color: var(--emerald); } .quiz-answer > div { padding-top: var(--sp-2); line-height: 1.6; } .quiz-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; } /* Quizzes page */ .quiz-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); margin-bottom: var(--sp-3); } .quiz-meta { display: flex; justify-content: space-between; font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--sp-2); } .quiz-meta .num { color: var(--ink-1); font-family: var(--font-mono); } .quiz-q { font-size: var(--fs-md); color: var(--ink-0); margin-bottom: var(--sp-3); line-height: 1.55; } .quiz-choices { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-1); } .quiz-choices li { padding: var(--sp-1) var(--sp-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); } /* ──────────────────────────────────────── Phase 5 ──────────────────────────────────────── */ /* Blog editor — tabs */ .blog-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-6); } .blog-tab { background: transparent; border: 0; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color var(--motion-fast), border-color var(--motion-fast); } .blog-tab:hover { color: var(--ink-0); } .blog-tab.is-active { color: var(--emerald); border-bottom-color: var(--emerald); } .blog-pane { display: flex; flex-direction: column; gap: var(--sp-4); } .blog-pane textarea { font-family: var(--font-sans); line-height: 1.65; min-height: 200px; } /* Variants */ .variant-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .variant-add .drawer-label { margin-right: var(--sp-2); } .variant-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); } .variant-head { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); } .variant-platform { text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-0); font-weight: 500; font-size: var(--fs-xs); } .variant-head .num { font-family: var(--font-mono); color: var(--ink-3); } .variant-head .num.ruby { color: var(--ruby); } .variant-actions { margin-left: auto; display: flex; gap: var(--sp-1); } .variant-actions .btn { padding: 2px var(--sp-2); font-size: 10px; } .variant-card textarea { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); font-family: var(--font-sans); line-height: 1.6; resize: vertical; width: 100%; } .variant-card textarea:focus { border-color: var(--emerald); } .variant-foot { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-xs); } .variant-foot input { flex: 1; background: transparent; border-bottom: 1px solid var(--line); padding: 4px 0; font-size: var(--fs-xs); } .variant-foot input:focus { border-color: var(--emerald); } .variant-foot a { color: var(--emerald); font-family: var(--font-mono); } /* ──────────────────────────────────────── Phase 7 ──────────────────────────────────────── */ /* FTI gauge */ .fti-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-5); align-items: center; } .fti-num { font-size: 64px; font-family: var(--font-mono); color: var(--emerald); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-align: center; } .fti-meta { display: flex; flex-direction: column; gap: var(--sp-3); } .fti-bar { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; } .fti-bar span { display: block; height: 100%; background: var(--emerald); border-radius: 3px; transition: width var(--motion-slow); } .fti-components { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); } .fti-comp { display: grid; grid-template-columns: 120px 1fr 30px; gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); } .fti-comp-name { color: var(--ink-2); text-transform: capitalize; } .fti-comp-val { color: var(--ink-0); text-align: right; font-family: var(--font-mono); } .fti-comp-bar { height: 3px; background: var(--bg-2); border-radius: 2px; overflow: hidden; } .fti-comp-bar span { display: block; height: 100%; background: var(--emerald); opacity: 0.6; } /* Scoreboard */ .scoreboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); } .score-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); } .score-tile:hover { border-color: var(--emerald-glow); background: var(--bg-2); } .score-name { font-size: 9px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 4px; } .score-num { font-size: var(--fs-lg); color: var(--ink-0); font-family: var(--font-mono); } /* Year heatmap */ .year-heatmap { display: grid; grid-template-columns: repeat(53, 1fr); grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 2px; height: 90px; } .hm-cell { background: var(--bg-2); border-radius: 1px; } .hm-cell.is-active { background: var(--emerald); opacity: 0.85; } .hm-cell:hover { outline: 1px solid var(--line-strong); } @media (max-width: 900px) { .scoreboard { grid-template-columns: repeat(3, 1fr); } .fti-row { grid-template-columns: 80px 1fr; } .fti-num { font-size: 40px; } .fti-components { grid-template-columns: 1fr; } .year-heatmap { grid-template-columns: repeat(26, 1fr); } } /* --- book.css --- */ /* book.css — Skeuomorphic Hobonichi 3D spread · one day = one spread Rule height = 22px · text sits on rule · section labels use same rhythm */ /* ════════════ TOKENS ════════════ */ :root { --paper-cream: #f5f0e8; --paper-back: #ede8da; --paper-rule: #d4cfc4; --paper-rule-soft: #e2dccd; --paper-ink: #2A2620; --paper-muted: #8a8275; --paper-faint: #b3aa9b; --rule-h: 22px; } .book-switch { display: flex; justify-content: center; gap: var(--sp-1); margin-bottom: var(--sp-5); } /* ════════════ SURFACE ════════════ */ .book-surface { padding: var(--sp-7) var(--sp-4); display: flex; justify-content: center; align-items: center; min-height: 640px; background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.35) 0%, transparent 70%), var(--bg-0); border-radius: var(--r-3); position: relative; } .book-surface::before { content: ''; position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: min(900px, 92%); height: 24px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), transparent 70%); filter: blur(20px); pointer-events: none; } /* ════════════ CONTAINER ════════════ */ .book-container { perspective: 2000px; perspective-origin: 50% 60%; display: flex; justify-content: center; width: 100%; } /* ════════════ BOOK ════════════ */ .book { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: min(900px, 96vw); aspect-ratio: 1.42 / 1; transform-style: preserve-3d; transform: rotateX(2deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4)); } .book.is-opening { animation: bookOpen 800ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes bookOpen { 0% { transform: rotateX(2deg) rotateY(-80deg) scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotateX(2deg) rotateY(0deg) scale(1); opacity: 1; } } /* ════════════ SPINE ════════════ */ .book-spine { position: absolute; top: -6px; bottom: -6px; left: 50%; transform: translateX(-50%); width: 10px; background: linear-gradient(to right, #2b1c0d 0%, #3b2a1a 30%, #1d1108 50%, #3b2a1a 70%, #2b1c0d 100%); z-index: 3; box-shadow: -2px 0 8px rgba(0,0,0,0.45), 2px 0 8px rgba(0,0,0,0.45); border-radius: 2px; } .book-spine::before, .book-spine::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #58422a; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); } .book-spine::before { top: 30px; } .book-spine::after { bottom: 30px; } .spine-counter { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%) rotate(-90deg); transform-origin: center; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.18em; color: rgba(255, 240, 220, 0.40); } /* ════════════ PAGES ════════════ */ .book-page { position: relative; transform-style: preserve-3d; } .book-page.left { transform-origin: right center; } .book-page.right { transform-origin: left center; } .book-page-face { position: relative; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; } .page-paper { flex: 1; padding: 28px 38px 60px; background-color: var(--paper-cream); background-image: url("data:image/svg+xml;utf8,"); color: var(--paper-ink); font-family: 'Inter', system-ui, sans-serif; position: relative; overflow: hidden; line-height: var(--rule-h); } .book-page.left .page-paper { box-shadow: inset -18px 0 30px rgba(42,38,32,0.10); border-radius: 4px 0 0 4px; } .book-page.right .page-paper { box-shadow: inset 18px 0 30px rgba(42,38,32,0.10); border-radius: 0 4px 4px 0; } .page-edge-shadow { position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; } .book-page.left .page-edge-shadow { right: 0; background: linear-gradient(to right, transparent, rgba(0,0,0,0.18)); } .book-page.right .page-edge-shadow { left: 0; background: linear-gradient(to left, transparent, rgba(0,0,0,0.18)); } /* ════════════ CORNER MICRO-GRAPHICS ════════════ */ .page-corner-grid { position: absolute; top: 16px; left: 16px; width: 56px; height: 56px; opacity: 0.85; pointer-events: none; } .book-page.left .bp-corner, .book-page.left .bp-date-block { padding-left: 68px; } .page-corner-habit { position: absolute; top: 22px; right: 16px; width: 48px; height: 36px; opacity: 0.7; pointer-events: none; } .book-page.right .bp-corner, .book-page.right .bp-date-block { padding-right: 60px; } .book-page.right .right-align { text-align: right; } /* ════════════ DATE HEADER ════════════ */ .bp-corner { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-muted); height: var(--rule-h); line-height: var(--rule-h); } .bp-date-block { height: 64px; display: flex; align-items: flex-end; } .book-page.right .bp-date-block { justify-content: flex-end; } .bp-date { font-family: 'Inter', sans-serif; font-size: clamp(3rem, 8vw, 5rem); font-weight: 100; line-height: 1; letter-spacing: -0.045em; color: var(--paper-ink); display: inline-flex; align-items: baseline; gap: 10px; } .bp-weekday { font-size: 11px; color: var(--paper-muted); letter-spacing: 0.20em; font-weight: 400; text-transform: uppercase; } .bp-date-rule { height: 1px; background: var(--paper-rule); margin-bottom: 4px; } /* ════════════ RULED LINES — single source of truth ════════════ */ .rule-line { height: var(--rule-h); line-height: var(--rule-h); border-bottom: 1px solid var(--paper-rule); display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--paper-ink); padding: 0 2px; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rule-line.is-empty { color: var(--paper-faint); } .rule-line.italic { font-style: italic; } .rule-line .dim { color: rgba(42,38,32,0.30); } /* Section row: label + icon, sits ON its own ruled line */ .section-row { font-size: 9px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-muted); border-bottom: 1px solid var(--paper-rule); margin-top: 4px; } .section-icon { display: inline-flex; align-items: center; color: #aaa; width: 14px; height: 14px; } .section-label { white-space: nowrap; } .section-bar { flex: 1; height: 1px; background: linear-gradient(to right, var(--paper-rule-soft), transparent); margin-left: 6px; margin-right: 4px; } /* ════════════ LINE VARIANTS ════════════ */ .task-line { padding-left: 2px; } .task-tick { display: inline-flex; align-items: center; color: var(--paper-muted); flex-shrink: 0; } .task-title { flex: 1; overflow: hidden; text-overflow: ellipsis; } .task-title.is-done { text-decoration: line-through; opacity: 0.55; color: var(--paper-muted); } .task-prio { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--paper-muted); } .sched-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--paper-muted); min-width: 56px; } .sched-title { flex: 1; overflow: hidden; text-overflow: ellipsis; } .prayer-type { font-family: 'EB Garamond', Georgia, serif; font-size: 14px; color: #C0392B; width: 14px; text-align: center; } .prayer-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; } .prayer-cadence { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--paper-muted); margin-left: auto; } .idea-bullet { color: #D4AF37; font-size: 12px; width: 12px; text-align: center; } .idea-title { flex: 1; overflow: hidden; text-overflow: ellipsis; } .fast-flame { color: #C0392B; font-size: 12px; width: 14px; text-align: center; } .fast-type { flex: 1; font-style: italic; } .fast-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--paper-muted); margin-left: auto; } /* ════════════ SCRIPTURE FOOTER ════════════ */ .bp-quote { position: absolute; bottom: 22px; left: 38px; right: 38px; font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 10.5px; line-height: 1.55; color: rgba(42,38,32,0.65); border-top: 1px solid var(--paper-rule); padding-top: 8px; text-align: center; } /* ════════════ CORNER CURL ════════════ */ .corner-curl { position: absolute; bottom: 0; width: 50px; height: 50px; background: linear-gradient(135deg, transparent 50%, var(--paper-back) 50%, #d6cfba 100%); transform-origin: bottom right; pointer-events: none; opacity: 0; transition: opacity 220ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .book-page.right .corner-curl { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); box-shadow: -4px -4px 12px rgba(0,0,0,0.18); } .book-page.left .corner-curl { left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); background: linear-gradient(225deg, transparent 50%, var(--paper-back) 50%, #d6cfba 100%); box-shadow: 4px -4px 12px rgba(0,0,0,0.18); } .book-page.right:hover .corner-curl { opacity: 1; transform: rotateY(-15deg) rotateX(5deg); } .book-page.left:hover .corner-curl { opacity: 1; transform: rotateY(15deg) rotateX(5deg); } /* ════════════ FLIP ANIMATION ════════════ */ .page-flipper { position: absolute; top: 0; width: 50%; height: 100%; pointer-events: none; transform-style: preserve-3d; z-index: 5; opacity: 0; visibility: hidden; } .book.is-flipping-next .page-flipper { right: 0; left: auto; transform-origin: left center; visibility: visible; opacity: 1; animation: flipNext 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000) both; } .book.is-flipping-prev .page-flipper { left: 0; right: auto; transform-origin: right center; visibility: visible; opacity: 1; animation: flipPrev 600ms cubic-bezier(0.645, 0.045, 0.355, 1.000) both; } @keyframes flipNext { 0% { transform: rotateY(0deg); } 50% { box-shadow: -30px 0 60px rgba(0,0,0,0.18); } 100% { transform: rotateY(-180deg); } } @keyframes flipPrev { 0% { transform: rotateY(0deg); } 50% { box-shadow: 30px 0 60px rgba(0,0,0,0.18); } 100% { transform: rotateY(180deg); } } .page-flipper-front, .page-flipper-back { position: absolute; inset: 0; background: var(--paper-cream); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .page-flipper-back { background: var(--paper-back); transform: rotateY(180deg); } .book.is-flipping-next .book-page.right .page-paper, .book.is-flipping-prev .book-page.left .page-paper { opacity: 0.55; transition: opacity 200ms ease; } /* Mobile slide */ .book.slide-out-left { animation: slideOutLeftBook 220ms ease both; } .book.slide-out-right { animation: slideOutRightBook 220ms ease both; } @keyframes slideOutLeftBook { to { transform: translateX(-30vw); opacity: 0; } } @keyframes slideOutRightBook { to { transform: translateX(30vw); opacity: 0; } } /* ════════════ NAV ════════════ */ .book-nav { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); } .book-nav-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-1); border: 1px solid var(--line); color: var(--ink-1); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast); } .book-nav-btn:hover { border-color: var(--emerald); color: var(--emerald); transform: scale(1.05); } .book-nav-btn:active { transform: scale(0.92); } .book-progress { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-2); letter-spacing: 0.1em; } /* ════════════ YEAR VIEW ════════════ */ .book-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); } .book-month { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); cursor: pointer; transition: border-color var(--motion-fast), transform var(--motion-fast); } .book-month:hover { border-color: var(--emerald-glow); transform: translateY(-2px); } .book-month-name { font-size: 9px; letter-spacing: 0.18em; color: var(--ink-2); text-transform: uppercase; } .book-month-num { font-size: var(--fs-hero); font-family: 'JetBrains Mono', monospace; color: var(--ink-0); margin: 4px 0 12px; } .book-month-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .book-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 8px; font-family: 'JetBrains Mono', monospace; color: var(--ink-3); text-align: center; letter-spacing: 0.06em; margin-bottom: 4px; } .book-month-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .book-month-day { aspect-ratio: 1/1; background: var(--bg-2); border-radius: 3px; display: flex; align-items: center; justify-content: center; position: relative; font-size: 0.55rem; font-family: 'JetBrains Mono', monospace; color: #999; user-select: none; } .book-month-day[data-date] { cursor: pointer; background: var(--bg-2); transition: background 120ms ease, color 120ms ease, transform 120ms ease; } .book-month-day[data-date]:hover { background: rgba(124, 158, 138, 0.20); color: var(--ink-0); transform: scale(1.08); } .book-month-day[data-date]:focus-visible { outline: 1px solid var(--emerald); outline-offset: 1px; } .book-month-day.is-today { border: 1px solid var(--ink-0); color: var(--ink-0); font-weight: 600; } .book-month-day.is-current { background: var(--ink-0); color: var(--bg-0); font-weight: 600; } .book-month-day.is-current.is-today { background: var(--emerald); border-color: var(--emerald); color: #000; } .book-month-day.has-entry::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: #7c9e8a; } .book-month-day.is-current.has-entry::after, .book-month-day.is-today.has-entry::after { background: var(--emerald-bright, #34D399); } .book-month-day.is-empty { background: transparent; cursor: default; pointer-events: none; } /* ════════════ MOBILE ════════════ */ @media (max-width: 640px) { .book { grid-template-columns: 1fr; aspect-ratio: 0.7 / 1; width: 92vw; transform: none; } .book-spine { display: none; } .book-page.left { display: none; } .book-page.right .page-paper { border-radius: 4px; box-shadow: inset 0 0 30px rgba(42,38,32,0.08); } .book-page.right .bp-corner, .book-page.right .bp-date-block { padding-right: 0; padding-left: 0; text-align: left; } .book-year { grid-template-columns: 1fr 1fr; } .page-paper { padding: 22px 22px 60px; } .bp-quote { left: 22px; right: 22px; bottom: 18px; } .page-corner-habit { display: none; } } /* ════════════ REDUCED MOTION ════════════ */ @media (prefers-reduced-motion: reduce) { .book.is-opening, .book.is-flipping-next .page-flipper, .book.is-flipping-prev .page-flipper, .book.slide-out-left, .book.slide-out-right { animation: none !important; visibility: hidden !important; transform: none !important; opacity: 1 !important; } .corner-curl { display: none; } } /* --- motion.css --- */ /* MODULE 1 — CSS Motion Design System Keyframes, animation tokens, page transitions, stagger system */ /* ═══ ENTRANCE ANIMATIONS ═══ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes slideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } /* ═══ EXIT ANIMATIONS ═══ */ @keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } } @keyframes slideOutLeft { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-40px); } } /* ═══ PULSE / GLOW ═══ */ @keyframes pulseRing { 0%, 100% { box-shadow: 0 0 0 0 var(--emerald-glow); } 50% { box-shadow: 0 0 0 6px transparent; } } @keyframes pulseScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes glowPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ═══ BAR / FILL ═══ */ @keyframes fillWidth { from { width: 0; } } @keyframes fillHeight { from { height: 0; } } /* ═══ HEATMAP WAVE ═══ */ @keyframes hmWave { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } /* ═══ COUNT-UP (CSS counter + JS --target-count) ═══ */ @keyframes countUp { from { --_n: 0; } } @property --_n { syntax: ''; initial-value: 0; inherits: false; } /* ═══ SHIMMER (skeleton loader) ═══ */ @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* ═══ CONFETTI ═══ */ @keyframes confettiFall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--dx, 0), calc(var(--dy, 0) + 200px)) rotate(720deg); opacity: 0; } } /* ═══ CHECKMARK DRAW ═══ */ @keyframes checkDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } /* ═══ STREAK FIRE ═══ */ @keyframes fireFlicker { 0%, 100% { transform: scaleY(1) translateY(0); } 25% { transform: scaleY(1.15) translateY(-1px); } 75% { transform: scaleY(0.95) translateY(1px); } } /* ═══ EQUALIZER BARS ═══ */ @keyframes eqBar { 0%, 100% { height: 30%; } 50% { height: 100%; } } /* ═══ STAGGER SYSTEM ═══ */ .stagger-children > *:nth-child(1) { animation-delay: 0ms; } .stagger-children > *:nth-child(2) { animation-delay: 40ms; } .stagger-children > *:nth-child(3) { animation-delay: 80ms; } .stagger-children > *:nth-child(4) { animation-delay: 120ms; } .stagger-children > *:nth-child(5) { animation-delay: 160ms; } .stagger-children > *:nth-child(6) { animation-delay: 200ms; } .stagger-children > *:nth-child(7) { animation-delay: 240ms; } .stagger-children > *:nth-child(8) { animation-delay: 280ms; } .stagger-children > *:nth-child(9) { animation-delay: 320ms; } .stagger-children > *:nth-child(10) { animation-delay: 360ms; } .stagger-children > *:nth-child(11) { animation-delay: 400ms; } .stagger-children > *:nth-child(12) { animation-delay: 440ms; } .stagger-children > *:nth-child(n+13) { animation-delay: 480ms; } /* ═══ MOUNT CLASSES ═══ */ .anim-fadeUp { animation: fadeUp 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } .anim-fadeIn { animation: fadeIn 220ms ease both; } .anim-scaleIn { animation: scaleIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .anim-slideRight { animation: slideRight 280ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* Page entrance */ .page { animation: fadeUp 280ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* KPI grid stagger */ .kpi-grid { --stagger: 50ms; } .kpi-card { animation: fadeUp 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } .kpi-grid > :nth-child(1) { animation-delay: 0ms; } .kpi-grid > :nth-child(2) { animation-delay: 50ms; } .kpi-grid > :nth-child(3) { animation-delay: 100ms; } .kpi-grid > :nth-child(4) { animation-delay: 150ms; } .kpi-grid > :nth-child(5) { animation-delay: 200ms; } .kpi-grid > :nth-child(6) { animation-delay: 250ms; } .kpi-grid > :nth-child(7) { animation-delay: 300ms; } .kpi-grid > :nth-child(8) { animation-delay: 350ms; } .kpi-grid > :nth-child(9) { animation-delay: 400ms; } /* Scoreboard stagger */ .scoreboard { --stagger: 30ms; } .score-tile { animation: scaleIn 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .scoreboard > :nth-child(1) { animation-delay: 0ms; } .scoreboard > :nth-child(2) { animation-delay: 30ms; } .scoreboard > :nth-child(3) { animation-delay: 60ms; } .scoreboard > :nth-child(4) { animation-delay: 90ms; } .scoreboard > :nth-child(5) { animation-delay: 120ms; } .scoreboard > :nth-child(6) { animation-delay: 150ms; } .scoreboard > :nth-child(7) { animation-delay: 180ms; } .scoreboard > :nth-child(8) { animation-delay: 210ms; } .scoreboard > :nth-child(9) { animation-delay: 240ms; } .scoreboard > :nth-child(10) { animation-delay: 270ms; } .scoreboard > :nth-child(11) { animation-delay: 300ms; } .scoreboard > :nth-child(12) { animation-delay: 330ms; } .scoreboard > :nth-child(13) { animation-delay: 360ms; } .scoreboard > :nth-child(14) { animation-delay: 390ms; } .scoreboard > :nth-child(15) { animation-delay: 420ms; } .scoreboard > :nth-child(16) { animation-delay: 450ms; } .scoreboard > :nth-child(17) { animation-delay: 480ms; } .scoreboard > :nth-child(18) { animation-delay: 510ms; } /* FTI bar fill */ .fti-bar span, .fti-comp-bar span { animation: fillWidth 600ms cubic-bezier(0.4, 0, 0.2, 1) 200ms both; } /* Heatmap cell wave */ .year-heatmap .hm-cell { animation: hmWave 150ms ease both; } .year-heatmap .hm-cell:nth-child(10n) { animation-delay: 50ms; } .year-heatmap .hm-cell:nth-child(20n) { animation-delay: 100ms; } .year-heatmap .hm-cell:nth-child(30n) { animation-delay: 150ms; } .year-heatmap .hm-cell:nth-child(40n) { animation-delay: 200ms; } .year-heatmap .hm-cell:nth-child(50n) { animation-delay: 250ms; } /* Entry list stagger */ .entry-list .entry-row { animation: fadeUp 220ms cubic-bezier(0.4, 0, 0.2, 1) both; } .entry-list > :nth-child(1) { animation-delay: 0ms; } .entry-list > :nth-child(2) { animation-delay: 40ms; } .entry-list > :nth-child(3) { animation-delay: 80ms; } .entry-list > :nth-child(4) { animation-delay: 120ms; } .entry-list > :nth-child(5) { animation-delay: 160ms; } .entry-list > :nth-child(6) { animation-delay: 200ms; } .entry-list > :nth-child(7) { animation-delay: 240ms; } .entry-list > :nth-child(8) { animation-delay: 280ms; } .entry-list > :nth-child(9) { animation-delay: 320ms; } .entry-list > :nth-child(10) { animation-delay: 360ms; } .entry-list > :nth-child(11) { animation-delay: 400ms; } .entry-list > :nth-child(12) { animation-delay: 440ms; } /* General card */ .general-card { animation: fadeUp 400ms cubic-bezier(0.4, 0, 0.2, 1) 100ms both; } /* Breadcrumb stagger */ .tb-crumb { animation: slideRight 200ms cubic-bezier(0.4, 0, 0.2, 1) both; } .tb-left > :nth-child(1) { animation-delay: 0ms; } .tb-left > :nth-child(2) { animation-delay: 80ms; } .tb-left > :nth-child(3) { animation-delay: 160ms; } .tb-left > :nth-child(4) { animation-delay: 240ms; } .tb-left > :nth-child(5) { animation-delay: 320ms; } /* ═══ SPARKLE SHOWER (MIRACLE brand tap) ═══ */ .sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; } .sparkle-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle, #6EE7B7 0%, #34D399 35%, #10B981 60%, transparent 80%); box-shadow: 0 0 8px rgba(52, 211, 153, 0.5), 0 0 16px rgba(16, 185, 129, 0.3); animation: sparkleFall var(--dur, 3500ms) cubic-bezier(0.34, 0.4, 0.4, 1) forwards; opacity: 0; } @keyframes sparkleFall { 0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; } 10% { transform: translate(0, 4vh) scale(1) rotate(calc(var(--rot) * 0.2)); opacity: 1; } 40% { opacity: 1; } 75% { opacity: 0.7; } 100% { transform: translate(var(--drift, 0), 110vh) scale(0.6) rotate(var(--rot, 180deg)); opacity: 0; } } /* Respect reduce-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; } } /* --- domains.css --- */ /* MODULE 3 — Domain Visual Identity Tokens Each domain: color token, icon glyph ref, background texture, accent animation */ /* ═══ DOMAIN COLOR TOKENS ═══ */ [data-domain="dreams"] { --dom: #6C63FF; --dom-glow: rgba(108,99,255,0.14); --dom-mist: rgba(108,99,255,0.05); } [data-domain="ideas"] { --dom: #F59E0B; --dom-glow: rgba(245,158,11,0.14); --dom-mist: rgba(245,158,11,0.05); } [data-domain="bible"] { --dom: #D4AF37; --dom-glow: rgba(212,175,55,0.14); --dom-mist: rgba(212,175,55,0.05); } [data-domain="plans"] { --dom: #3B82F6; --dom-glow: rgba(59,130,246,0.14); --dom-mist: rgba(59,130,246,0.05); } [data-domain="projects"] { --dom: #10B981; --dom-glow: rgba(16,185,129,0.14); --dom-mist: rgba(16,185,129,0.05); } [data-domain="prayer"] { --dom: #F43F5E; --dom-glow: rgba(244,63,94,0.14); --dom-mist: rgba(244,63,94,0.05); } [data-domain="fasting"] { --dom: #64748B; --dom-glow: rgba(100,116,139,0.14); --dom-mist: rgba(100,116,139,0.05); } [data-domain="tasks"] { --dom: #F8FAFC; --dom-glow: rgba(248,250,252,0.10); --dom-mist: rgba(248,250,252,0.04); } [data-domain="schedule"] { --dom: #14B8A6; --dom-glow: rgba(20,184,166,0.14); --dom-mist: rgba(20,184,166,0.05); } [data-domain="finance"] { --dom: #10B981; --dom-glow: rgba(16,185,129,0.14); --dom-mist: rgba(16,185,129,0.05); } [data-domain="people"] { --dom: #8B5CF6; --dom-glow: rgba(139,92,246,0.14); --dom-mist: rgba(139,92,246,0.05); } [data-domain="testimony"] { --dom: #C0392B; --dom-glow: rgba(192,57,43,0.14); --dom-mist: rgba(192,57,43,0.05); } [data-domain="music"] { --dom: #60A5FA; --dom-glow: rgba(96,165,250,0.14); --dom-mist: rgba(96,165,250,0.05); } [data-domain="books"] { --dom: #92400E; --dom-glow: rgba(146,64,14,0.14); --dom-mist: rgba(146,64,14,0.05); } [data-domain="blog"] { --dom: #6B7280; --dom-glow: rgba(107,114,128,0.14); --dom-mist: rgba(107,114,128,0.05); } [data-domain="quizzes"] { --dom: #84CC16; --dom-glow: rgba(132,204,22,0.14); --dom-mist: rgba(132,204,22,0.05); } [data-domain="meals"] { --dom: #F97316; --dom-glow: rgba(249,115,22,0.14); --dom-mist: rgba(249,115,22,0.05); } [data-domain="daily"] { --dom: var(--emerald); --dom-glow: var(--emerald-glow); --dom-mist: rgba(16,185,129,0.05); } /* ═══ DOMAIN-TINTED PAGE TITLES ═══ */ [data-domain] .page-title { color: var(--dom); } [data-domain] .label { color: var(--dom); opacity: 0.7; } /* ═══ DOMAIN BACKGROUND TEXTURES ═══ */ [data-domain="dreams"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1.5px 1.5px at 20px 30px, rgba(108,99,255,0.12) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 60px 80px, rgba(108,99,255,0.08) 50%, transparent 50%), radial-gradient(1px 1px at 120px 50px, rgba(108,99,255,0.06) 50%, transparent 50%); background-size: 140px 120px; } [data-domain="ideas"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(245,158,11,0.03) 10px, rgba(245,158,11,0.03) 11px ); } [data-domain="bible"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1px 1px at 8px 8px, rgba(212,175,55,0.08) 50%, transparent 50%); background-size: 16px 16px; } [data-domain="plans"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px); background-size: 32px 32px; } [data-domain="projects"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(16,185,129,0.04) 1px, transparent 1px), linear-gradient(rgba(16,185,129,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(16,185,129,0.02) 1px, transparent 1px 8px) 4px 0; background-size: 24px 24px, 24px 24px, 8px 8px; } [data-domain="prayer"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(244,63,94,0.06) 0%, transparent 60%); } [data-domain="fasting"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 23px, rgba(100,116,139,0.04) 23px, rgba(100,116,139,0.04) 24px ); } [data-domain="tasks"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(248,250,252,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(248,250,252,0.02) 1px, transparent 1px); background-size: 20px 20px; } [data-domain="schedule"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 59px, rgba(20,184,166,0.05) 59px, rgba(20,184,166,0.05) 60px ); } [data-domain="finance"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( -45deg, transparent, transparent 14px, rgba(16,185,129,0.02) 14px, rgba(16,185,129,0.02) 15px ); } [data-domain="people"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(2px 2px at 30px 30px, rgba(139,92,246,0.06) 50%, transparent 50%); background-size: 60px 60px; } [data-domain="testimony"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(192,57,43,0.05) 0%, transparent 70%); } [data-domain="music"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 3px, rgba(96,165,250,0.03) 3px, rgba(96,165,250,0.03) 4px ); background-size: 4px 4px; } [data-domain="books"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 23px, rgba(146,64,14,0.04) 23px, rgba(146,64,14,0.04) 24px ); } [data-domain="blog"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 19px, rgba(107,114,128,0.04) 19px, rgba(107,114,128,0.04) 20px ), linear-gradient(90deg, rgba(107,114,128,0.04) 1px, transparent 1px) 60px 0; background-size: auto, 1px auto; } [data-domain="quizzes"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(2px 2px at 15px 15px, rgba(132,204,22,0.06) 50%, transparent 50%); background-size: 30px 30px; } [data-domain="meals"] .page::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, rgba(249,115,22,0.04) 0%, transparent 50%); } /* ═══ DOMAIN ACCENT ON ENTRY ROWS ═══ */ [data-domain] .entry-row:hover { border-left: 2px solid var(--dom); } [data-domain] .entry-row .dot { background: var(--dom); } /* ═══ DOMAIN ACCENT ON BUTTONS ═══ */ [data-domain] .btn.is-primary { background: var(--dom); color: #000; } [data-domain] .btn.is-primary:hover { box-shadow: 0 4px 12px var(--dom-glow); } /* ═══ DOMAIN-SPECIFIC CARD ANIMATIONS ═══ */ /* Dreams: slow float on cards */ [data-domain="dreams"] .entry-row { animation: dreamFloat 6s ease-in-out infinite; } @keyframes dreamFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Prayer: streak fire on active items */ [data-domain="prayer"] .entry-row .dot { animation: fireFlicker 1.5s ease-in-out infinite; } /* Music: equalizer hint on hover */ [data-domain="music"] .entry-row:hover .dot { animation: eqBar 0.8s ease-in-out infinite; width: 3px; border-radius: 1px; } /* Bible: shimmer on verse text */ [data-domain="bible"] .scripture { background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.08) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s linear infinite; } /* Quizzes: bounce on score reveal */ [data-domain="quizzes"] .kpi-num { animation: scoreBounce 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes scoreBounce { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Testimony: glory burst on new entry */ @keyframes gloryBurst { 0% { box-shadow: 0 0 0 0 rgba(192,57,43,0.3); } 50% { box-shadow: 0 0 0 12px rgba(192,57,43,0); } 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } } [data-domain="testimony"] .entry-row.is-new { animation: gloryBurst 800ms ease-out; } /* Finance: number count-up feel via opacity stagger */ [data-domain="finance"] .num { animation: fadeUp 400ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* Tasks: strikethrough on completion */ @keyframes strikeThrough { from { width: 0; } to { width: 100%; } } [data-domain="tasks"] .entry-row.is-done .title::after { content: ''; position: absolute; left: 0; top: 50%; height: 1px; background: var(--ink-2); animation: strikeThrough 300ms ease-out forwards; } [data-domain="tasks"] .entry-row .title { position: relative; } /* Schedule: time-slot highlight sweep */ [data-domain="schedule"] .entry-row.is-now { background: linear-gradient(90deg, var(--dom-mist), transparent); background-size: 200% 100%; animation: shimmer 4s linear infinite; } /* Books: reading progress fill */ [data-domain="books"] .progress-fill { animation: fillWidth 800ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* Plans: milestone ping */ @keyframes milestonePing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } [data-domain="plans"] .milestone.is-done::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--dom); animation: milestonePing 600ms ease-out forwards; } [data-domain="plans"] .milestone { position: relative; } /* --- micro.css --- */ /* MODULE 6 — Micro-Interaction System + MODULE 7 — Skeleton Loaders */ /* ═══ 1. STAT TILE HOVER ═══ */ .score-tile { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms ease, box-shadow 180ms ease; } .score-tile:hover { transform: translateY(-2px); border-color: var(--dom, var(--emerald)); box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 1px var(--dom, var(--emerald-glow)); } /* ═══ 2. RIPPLE ON + NEW BUTTON ═══ */ .btn.is-primary { position: relative; overflow: hidden; } .btn.is-primary .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.20); transform: scale(0); animation: rippleExpand 400ms ease-out forwards; pointer-events: none; } @keyframes rippleExpand { to { transform: scale(4); opacity: 0; } } /* ═══ 3. HEATMAP CELL HOVER TOOLTIP ═══ */ .hm-cell { position: relative; cursor: pointer; } .hm-cell::after { content: attr(title); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) scale(0.8); background: var(--bg-3); color: var(--ink-1); font-size: 9px; font-family: var(--font-mono); padding: 2px 6px; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 150ms ease, transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; } .hm-cell:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } /* ═══ 4. NAV BREADCRUMB — handled in motion.css stagger ═══ */ /* ═══ 5. SCORE BAR SEGMENT FILL ═══ */ .fti-comp-bar span { transform-origin: left; animation: fillWidth 500ms cubic-bezier(0.4, 0, 0.2, 1) both; } .fti-components > :nth-child(1) .fti-comp-bar span { animation-delay: 0ms; } .fti-components > :nth-child(2) .fti-comp-bar span { animation-delay: 50ms; } .fti-components > :nth-child(3) .fti-comp-bar span { animation-delay: 100ms; } .fti-components > :nth-child(4) .fti-comp-bar span { animation-delay: 150ms; } .fti-components > :nth-child(5) .fti-comp-bar span { animation-delay: 200ms; } /* ═══ 6. JUMP PALETTE — results stagger + highlight sweep ═══ */ .palette-results .palette-item { animation: fadeUp 180ms cubic-bezier(0.4, 0, 0.2, 1) both; } .palette-results > :nth-child(1) { animation-delay: 0ms; } .palette-results > :nth-child(2) { animation-delay: 30ms; } .palette-results > :nth-child(3) { animation-delay: 60ms; } .palette-results > :nth-child(4) { animation-delay: 90ms; } .palette-results > :nth-child(5) { animation-delay: 120ms; } .palette-results > :nth-child(6) { animation-delay: 150ms; } .palette-results > :nth-child(7) { animation-delay: 180ms; } .palette-item.is-focused { background: linear-gradient(90deg, var(--emerald-glow), transparent); background-size: 200% 100%; animation: highlightSweep 600ms ease forwards; } @keyframes highlightSweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } /* ═══ 7. CSS COUNTER ANIMATION (domain card count) — needs JS --target-count ═══ */ /* ═══ 8. SETTINGS TOGGLE SWITCH ═══ */ .toggle { position: relative; width: 36px; height: 20px; background: var(--bg-3); border-radius: 10px; border: 1px solid var(--line); cursor: pointer; transition: background 180ms ease; } .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--ink-2); border-radius: 50%; transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), background 180ms ease; } .toggle.is-on { background: var(--emerald-glow); border-color: var(--emerald); } .toggle.is-on::after { transform: translateX(16px); background: var(--emerald); } /* ═══ 9. ENTRY SAVE — collapse + checkmark ═══ */ .save-exit { animation: fadeOut 200ms ease forwards; } .save-success { animation: fadeUp 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both; display: flex; align-items: center; gap: 8px; color: var(--emerald); font-size: var(--fs-sm); } .save-success svg { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkDraw 400ms ease 100ms forwards; } /* ═══ 10. STREAK BADGE PULSE ═══ */ .streak-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--dom, var(--emerald)); animation: pulseScale 5s ease-in-out infinite; } .streak-badge .fire { animation: fireFlicker 1.5s ease-in-out infinite; display: inline-block; } /* ═══ MODULE 7 — SKELETON LOADERS ═══ */ .skeleton { background: var(--bg-2); border-radius: var(--r-3); position: relative; overflow: hidden; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 60%, transparent 100% ); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } .skeleton-row { height: 48px; margin-bottom: 4px; } .skeleton-card { height: 88px; margin-bottom: 8px; } .skeleton-kpi { height: 100px; } .skeleton-heatmap { height: 80px; width: 100%; } .skeleton-text { height: 12px; width: 60%; margin-bottom: 8px; border-radius: 2px; } .skeleton-text.short { width: 35%; } .skeleton-text.long { width: 85%; } .skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } /* Crossfade from skeleton to real content */ .skeleton-active { opacity: 1; transition: opacity 200ms ease; } .skeleton-done { opacity: 0; position: absolute; pointer-events: none; } .content-revealed { animation: fadeUp 220ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* ═══ EMPTY STATE ═══ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-5); text-align: center; animation: fadeUp 400ms cubic-bezier(0.4, 0, 0.2, 1) both; } .empty-state-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--dom-mist, var(--emerald-mist, rgba(16,185,129,0.06))); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); color: var(--dom, var(--emerald)); font-size: 24px; } .empty-state-title { font-size: var(--fs-md); color: var(--ink-1); margin-bottom: var(--sp-2); } .empty-state-hint { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); } /* --- mobile.css --- */ /* MODULE 5 — Mobile Interaction Layer Bottom nav, drawer transitions, pull-to-refresh, safe areas */ /* ═══ 5a. BOTTOM NAVIGATION BAR ═══ */ /* Hover-zone behind the nav — invisible 24px strip that triggers reveal */ .bottom-nav-hover-zone { position: fixed; bottom: 0; left: 0; right: 0; height: 24px; z-index: 119; pointer-events: none; } @media (hover: hover) { .bottom-nav-hover-zone { pointer-events: auto; } } /* Bottom nav has TWO display modes, kept separate so transforms never collide: · Touch/mobile (pointer: coarse OR narrow viewport): full-width pinned bar. Always fully visible at rest. Only translateY animates — translateX is never set, so taps can't make the bar slide sideways. · Desktop (pointer: fine, wider viewport): centered floating card with a peek tab. translateX(-50%) is constant (for centering); translateY animates between peek/full/hidden. */ .bottom-nav { position: fixed; bottom: 0; height: 64px; padding-bottom: env(safe-area-inset-bottom, 0); background: var(--glass-bg, rgba(10,10,12,0.92)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-top: 1px solid var(--emerald-glow); display: flex; align-items: center; justify-content: space-around; z-index: 120; will-change: transform; transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 -8px 24px rgba(0,0,0,0.5); } /* ── Touch / mobile mode (default) ── */ .bottom-nav { left: 0; right: 0; width: 100%; border-radius: 0; transform: translateY(0); /* visible at rest, like the Windows taskbar */ } .bottom-nav.is-hidden { transform: translateY(100%); /* slides straight down on scroll-down */ } /* Peek indicator is irrelevant when always visible — hide it on touch */ .bottom-nav::before { display: none; } /* ── Desktop / hover-capable mode ── Only kicks in on devices that actually have hover. Touch tablets stay in the mobile mode above so a tap never produces sideways motion. */ @media (hover: hover) and (pointer: fine) and (min-width: 641px) { .bottom-nav { left: 50%; right: auto; width: min(100%, 520px); border-radius: 18px 18px 0 0; transform: translateX(-50%) translateY(calc(100% - 8px)); } .bottom-nav.is-revealed, .bottom-nav:hover, .bottom-nav:focus-within { transform: translateX(-50%) translateY(0); } .bottom-nav.is-hidden { transform: translateX(-50%) translateY(100%); } .bottom-nav::before { content: ''; display: block; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 36px; height: 3px; background: var(--emerald); border-radius: 2px; opacity: 0.6; transition: opacity 200ms ease; } .bottom-nav.is-revealed::before, .bottom-nav:hover::before, .bottom-nav:focus-within::before { opacity: 0; } } #canvas { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0) + var(--sp-4)); } @media (hover: hover) and (pointer: fine) and (min-width: 641px) { /* Desktop nav peeks instead of sitting full-height, so canvas needs less room */ #canvas { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0) + var(--sp-5)); } } .bnav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border: 0; background: transparent; color: var(--ink-2); font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 150ms ease, transform 150ms ease, background 150ms ease; position: relative; border-radius: var(--r-2); } .bnav-item:hover { color: var(--emerald); background: var(--emerald-mist, rgba(16,185,129,0.06)); transform: translateY(-2px); } .bnav-item:active { transform: scale(0.92); } .bnav-item svg { width: 20px; height: 20px; } .bnav-item .bnav-label { opacity: 0; transform: translateY(4px); transition: opacity 150ms ease, transform 150ms ease; } .bnav-item.is-active { color: var(--emerald); } .bnav-item.is-active .bnav-label { opacity: 1; transform: translateY(0); } .bnav-item.is-active::after { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--emerald); border-radius: 0 0 2px 2px; } /* Center jump button */ .bnav-jump { width: 48px; height: 48px; border-radius: 50%; background: var(--emerald); color: #000; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; box-shadow: 0 4px 12px var(--emerald-glow); transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease; margin-top: -12px; } .bnav-jump:active { transform: scale(0.92); } .bnav-jump svg { width: 22px; height: 22px; } /* ═══ 5d. ENTRY DRAWER (bottom sheet on mobile) ═══ */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.60); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .drawer-sheet { position: fixed; bottom: 0; left: 0; right: 0; max-height: 85dvh; background: var(--bg-1); border-radius: var(--r-4) var(--r-4) 0 0; z-index: 201; transform: translateY(100%); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overscroll-behavior: contain; } .drawer-sheet.is-open { transform: translateY(0); } .drawer-handle { width: 32px; height: 4px; background: var(--ink-3); border-radius: 2px; margin: 8px auto 0; } @media (min-width: 641px) { .drawer-sheet { left: auto; width: 480px; max-height: 100vh; top: 0; bottom: 0; right: 0; border-radius: var(--r-4) 0 0 var(--r-4); transform: translateX(100%); } .drawer-sheet.is-open { transform: translateX(0); } .drawer-handle { display: none; } } /* ═══ FLOATING LABELS ═══ */ .float-field { position: relative; margin-bottom: var(--sp-3); } .float-field input, .float-field textarea, .float-field select { width: 100%; padding: 18px var(--sp-3) 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-3); font-size: var(--fs-base); color: var(--ink-0); transition: border-color 150ms ease; } .float-field input:focus, .float-field textarea:focus, .float-field select:focus { border-color: var(--emerald); } .float-field label { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); font-size: var(--fs-sm); color: var(--ink-2); pointer-events: none; transition: transform 150ms ease, font-size 150ms ease, color 150ms ease; transform-origin: left center; } .float-field input:focus + label, .float-field input:not(:placeholder-shown) + label, .float-field textarea:focus + label, .float-field textarea:not(:placeholder-shown) + label, .float-field select:focus + label, .float-field select:valid + label { transform: translateY(-22px) scale(0.85); color: var(--emerald); } /* ═══ PULL-TO-REFRESH ═══ */ .ptr-spinner { position: fixed; top: calc(var(--topbar-h) + 8px); left: 50%; transform: translateX(-50%) scale(0); width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--emerald); border-radius: 50%; z-index: 90; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .ptr-spinner.is-visible { transform: translateX(-50%) scale(1); } .ptr-spinner.is-refreshing { animation: spin 600ms linear infinite; } @keyframes spin { to { transform: translateX(-50%) scale(1) rotate(360deg); } } /* ═══ SCROLL-SNAP ON DOMAIN PAGES ═══ */ @media (max-width: 640px) { .domain-swipe-container { scroll-snap-type: x mandatory; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .domain-swipe-container::-webkit-scrollbar { display: none; } .domain-swipe-container > .page { scroll-snap-align: start; min-width: 100vw; } } /* ═══ OFFLINE INDICATOR ═══ */ .offline-bar { position: fixed; top: 0; left: 0; right: 0; height: 24px; background: var(--ruby-deep); color: #fff; font-size: 9px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; z-index: 300; transform: translateY(-100%); transition: transform 300ms ease; } .offline-bar.is-visible { transform: translateY(0); } .offline-bar.is-visible ~ #topbar { top: 24px; } .offline-bar.is-visible ~ #canvas { margin-top: calc(var(--topbar-h) + 24px); } /* ═══ EXISTING DRAWER → BOTTOM SHEET (all viewports) ═══ */ .drawer { position: fixed !important; bottom: 0 !important; left: 50% !important; right: auto !important; top: auto !important; width: min(100%, 680px) !important; max-height: 85dvh !important; height: auto !important; border-radius: var(--r-4) var(--r-4) 0 0 !important; border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; transform: translateX(-50%) translateY(100%) !important; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1) !important; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.5); } .drawer[aria-hidden="false"] { transform: translateX(-50%) translateY(0) !important; } .drawer::before { content: ''; display: block; width: 36px; height: 4px; background: var(--ink-3); border-radius: 2px; margin: 10px auto 0; } .drawer-overlay.is-open { background: rgba(0, 0, 0, 0.6); } @media (max-width: 640px) { .drawer { left: 0 !important; right: 0 !important; width: 100% !important; transform: translateY(100%) !important; border-left: none !important; border-right: none !important; } .drawer[aria-hidden="false"] { transform: translateY(0) !important; } } /* ═══ MOBILE SAFE AREAS ═══ */ @supports (padding: env(safe-area-inset-top)) { #topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); } #canvas { margin-top: calc(var(--topbar-h) + env(safe-area-inset-top)); } } /* ═══ FLUID RESPONSIVE LAYER ═══ Continuous scaling from ~320px to ~1440px+ using clamp() + container queries. No abrupt breakpoint jumps — every dimension grows/shrinks with the viewport. Touch targets stay ≥44px (Apple HIG / Material). iOS inputs stay ≥16px so Safari doesn't zoom on focus. */ /* Never let any layer cause horizontal overflow — defensive global */ html, body { max-width: 100%; overflow-x: hidden; } *, *::before, *::after { min-width: 0; } img, video, svg, canvas { max-width: 100%; height: auto; } /* ─── Topbar: fluid padding, container queries hide labels when chrome runs out */ #topbar { container-type: inline-size; container-name: topbar; padding: 0 clamp(6px, 1.5vw, var(--sp-4)); font-size: clamp(var(--fs-xs), 1.2vw, var(--fs-sm)); gap: clamp(2px, 0.6vw, 6px); } .tb-left { min-width: 0; flex: 1 1 auto; gap: clamp(2px, 0.6vw, var(--sp-1)); } .tb-right { gap: clamp(2px, 0.4vw, 4px); flex-shrink: 0; } .tb-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tb-btn { padding: clamp(4px, 0.8vw, var(--sp-2)); gap: clamp(2px, 0.5vw, 6px); min-height: 44px; min-width: 44px; justify-content: center; } .tb-user { padding: clamp(2px, 0.6vw, 4px) clamp(4px, 1vw, var(--sp-2)); gap: clamp(4px, 1vw, 8px); min-height: 44px; } /* When the topbar is narrow, collapse decorative bits */ @container topbar (max-width: 720px) { .tb-btn kbd, .tb-btn .kbd { display: none; } } @container topbar (max-width: 560px) { .tb-sep { display: none; } .tb-user-name { display: none; } /* Icon-only "jump" / "nes" buttons */ #tb-palette > *:not(.icon), #tb-miracle > *:not(.icon) { display: none; } } @container topbar (max-width: 380px) { .tb-brand { display: none; } } /* ─── Canvas: fluid padding so content uses the screen at every width */ #canvas { padding-left: clamp(var(--sp-3), 3vw, var(--sp-5)); padding-right: clamp(var(--sp-3), 3vw, var(--sp-5)); padding-top: clamp(var(--sp-4), 4vw, var(--sp-7)); padding-bottom: calc(clamp(var(--sp-5), 5vw, var(--sp-9)) + env(safe-area-inset-bottom, 0)); } /* ─── Page head: title + meta wrap naturally instead of overflowing */ .page-head { flex-wrap: wrap; row-gap: clamp(2px, 0.6vw, var(--sp-1)); margin-bottom: clamp(var(--sp-4), 5vw, var(--sp-7)); } .page-title { font-size: clamp(var(--fs-md), 2.4vw, var(--fs-lg)); } /* ─── Login: fluid card that scales from phone to desktop without breakpoints */ .login-stage { padding: clamp(var(--sp-3), 3vw, var(--sp-5)); } .login-card { padding: clamp(var(--sp-4), 4vw, var(--sp-6)) clamp(var(--sp-3), 3.5vw, var(--sp-5)); max-width: min(420px, 100%); } .login-mark { margin-bottom: clamp(var(--sp-4), 4vw, var(--sp-5)); } .login-word { font-size: clamp(28px, 6vw, var(--fs-hero)); } .login-tabs { margin-bottom: clamp(var(--sp-3), 3vw, var(--sp-4)); } .login-tab { padding: clamp(10px, 2vw, 14px) clamp(8px, 2vw, 12px); font-size: clamp(10px, 1.2vw, 12px); min-height: 44px; } .login-field input { padding: clamp(10px, 2vw, 14px) clamp(10px, 2vw, 14px); min-height: 44px; /* iOS Safari zooms inputs <16px on focus — keep ≥16px always */ font-size: max(16px, clamp(14px, 1.2vw, var(--fs-md))); } .login-submit { padding: clamp(12px, 2.5vw, 16px); min-height: 48px; font-size: clamp(14px, 1.6vw, var(--fs-md)); } /* ─── Universal touch targets + iOS no-zoom inputs everywhere ─── */ .btn { min-height: 44px; } .chip { min-height: 36px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], textarea, select { font-size: max(16px, var(--fs-base)); } @media (max-width: 640px) { .page-head { align-items: stretch; gap: var(--sp-2); } .page-meta.prayer-summary { display: flex; flex-wrap: wrap; gap: 6px; line-height: 1.3; } .page-meta.prayer-summary span { border: 1px solid var(--line); border-radius: var(--r-1); padding: 5px 8px; background: rgba(255,255,255,0.025); } .new-btn { display: flex; align-items: center; width: 100%; margin-left: 0; justify-content: center; min-height: 48px; } .daily-section { margin-bottom: var(--sp-5); } .prayer-wall { grid-template-columns: 1fr; gap: var(--sp-2); } .prayer-card { min-height: 112px; padding: var(--sp-4); border-radius: var(--r-2); } .prayer-subject { font-size: max(16px, var(--fs-md)); line-height: 1.45; } .prayer-meta { line-height: 1.5; overflow-wrap: anywhere; } .empty-prayer { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-1); } .empty-title { color: var(--ink-0); font-size: max(16px, var(--fs-md)); margin-bottom: var(--sp-1); } .empty-copy { color: var(--ink-2); line-height: 1.5; } .drawer { max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0))) !important; padding-bottom: env(safe-area-inset-bottom, 0); } .drawer-head { padding: var(--sp-3); gap: var(--sp-2); } .drawer-body { padding: var(--sp-4) var(--sp-3); gap: var(--sp-3); } .drawer-field input, .drawer-field textarea, .drawer-field select { min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); padding: 10px 12px; } .drawer-field textarea { min-height: 112px; } .drawer-foot { align-items: stretch; flex-direction: column; padding: var(--sp-3); } .drawer-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .drawer-actions .btn { min-height: 48px; } .contact-actions .btn { flex: 1 1 100%; text-align: center; } .feedback-card { padding: var(--sp-3); } .feedback-head { align-items: stretch; } .fb-kind { font-size: max(18px, var(--fs-md)); } .fb-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); } } /* ─── Bitmoji popup: fluid scale instead of fixed mobile shrink */ .bm-popup { transform: scale(clamp(0.7, 0.5 + 0.001 * 100vw, 1)); transform-origin: bottom right; } /* --- rewards.css --- */ /* MODULE 4 — Psychological Reward Architecture CSS Streak badges, momentum meter, completion flash, open loops panel */ /* ═══ 4a. STREAK ENGINE ═══ */ .streak-display { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-xs); } .streak-count { font-weight: 500; color: var(--dom, var(--emerald)); min-width: 18px; text-align: center; } .streak-fire { display: inline-block; animation: fireFlicker 1.5s ease-in-out infinite; font-size: 12px; line-height: 1; } .streak-bump { animation: streakBump 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes streakBump { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } } .streak-warning { position: fixed; bottom: 80px; right: var(--sp-4); background: var(--bg-3); border: 1px solid var(--ruby-glow); border-radius: var(--r-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--ruby); font-family: var(--font-mono); z-index: 150; animation: fadeUp 300ms cubic-bezier(0.4, 0, 0.2, 1) both; cursor: pointer; } .streak-warning::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ruby); margin-right: 6px; animation: pulseScale 2s ease-in-out infinite; } /* ═══ 4b. MOMENTUM METER ═══ */ .momentum-bar { margin-bottom: var(--sp-5); animation: fadeUp 400ms cubic-bezier(0.4, 0, 0.2, 1) both; } .momentum-label { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--sp-1); } .momentum-track { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .momentum-fill { height: 100%; border-radius: 3px; width: 0; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .momentum-fill[data-level="low"] { background: var(--ink-3); } .momentum-fill[data-level="mid"] { background: var(--emerald); } .momentum-fill[data-level="high"] { background: linear-gradient(90deg, var(--emerald), var(--ruby)); } /* ═══ 4c. COMPLETION BIAS TRIGGER ═══ */ .completion-flash { position: fixed; inset: 0; background: rgba(16, 185, 129, 0.08); z-index: 400; pointer-events: none; animation: completionFlash 650ms ease forwards; } @keyframes completionFlash { 0% { opacity: 0; } 23% { opacity: 1; } 69% { opacity: 1; } 100% { opacity: 0; } } .confetti-particle { position: fixed; width: 8px; height: 8px; z-index: 401; pointer-events: none; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); animation: confettiFall 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } /* ═══ 4d. ZEIGARNIK OPEN LOOPS PANEL ═══ */ .open-loops { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; margin-bottom: var(--sp-5); animation: fadeUp 300ms cubic-bezier(0.4, 0, 0.2, 1) both; } .open-loops-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); cursor: pointer; user-select: none; } .open-loops-title { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; } .open-loops-count { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ruby); background: var(--ruby-glow); padding: 1px 6px; border-radius: 8px; } .open-loops-chevron { color: var(--ink-3); transition: transform 200ms ease; } .open-loops.is-collapsed .open-loops-chevron { transform: rotate(-90deg); } .open-loops-body { max-height: 300px; overflow: hidden; transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1); } .open-loops.is-collapsed .open-loops-body { max-height: 0; } .open-loop-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); cursor: pointer; transition: background 120ms ease; } .open-loop-item:hover { background: var(--bg-2); } .open-loop-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .open-loop-title { font-size: var(--fs-sm); color: var(--ink-0); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .open-loop-age { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-3); flex-shrink: 0; } /* ═══ MODULE 8c — FOCUS MODE ═══ */ .focus-overlay { position: fixed; inset: 0; z-index: 180; pointer-events: none; opacity: 0; transition: opacity 400ms ease; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%); } body.focus-mode .focus-overlay { opacity: 1; } body.focus-mode .scoreboard, body.focus-mode .year-heatmap, body.focus-mode .daily-section:last-child, body.focus-mode .bottom-nav { opacity: 0.1; pointer-events: none; transition: opacity 400ms ease; } body.focus-mode .open-loops, body.focus-mode .kpi-grid { position: relative; z-index: 181; } /* ═══ MODULE 8a — TIME-OF-DAY AMBIENT ═══ */ body[data-time="morning"] { --ambient-tint: rgba(255, 180, 80, 0.02); } body[data-time="midday"] { --ambient-tint: transparent; } body[data-time="evening"] { --ambient-tint: rgba(80, 120, 255, 0.02); } body[data-time="night"] { --ambient-tint: rgba(0, 0, 0, 0.04); } body::after { content: ''; position: fixed; inset: 0; background: var(--ambient-tint, transparent); pointer-events: none; z-index: -1; transition: background 2s ease; } /* ═══ MODULE 8b — CONTEXTUAL GREETING SIGNAL LINE ═══ */ .signal-line { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); height: 16px; overflow: hidden; position: relative; } .signal-line-item { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 300ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .signal-line-item.is-active { opacity: 1; } /* --- sidebar.css --- */ /* Collapsible sidebar — desktop primary nav */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 56px; background: var(--glass-bg, rgba(10,10,12,0.92)); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-right: 1px solid var(--line); z-index: 110; display: flex; flex-direction: column; transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .sidebar.is-expanded { width: 200px; } @media (max-width: 640px) { .sidebar { display: none; } } .sb-head { height: var(--topbar-h, 40px); display: flex; align-items: center; padding: 0 var(--sp-3); border-bottom: 1px solid var(--line); flex-shrink: 0; } .sb-toggle { background: transparent; border: 0; display: flex; align-items: center; gap: 10px; color: var(--ink-0); cursor: pointer; width: 100%; padding: 0; } .sb-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--r-2); background: var(--grad-emerald, linear-gradient(135deg, #34D399, #10B981, #047857)); box-shadow: 0 2px 8px var(--emerald-glow); position: relative; } .sb-mark::after { content: 'M'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: #000; } .sb-brand { font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity 180ms ease, transform 180ms ease; } .sidebar.is-expanded .sb-brand { opacity: 1; transform: translateX(0); } .sb-nav { display: flex; flex-direction: column; padding: var(--sp-2) 0; overflow-y: auto; overflow-x: hidden; flex: 1; scrollbar-width: thin; } .sb-nav::-webkit-scrollbar { width: 4px; } .sb-nav::-webkit-scrollbar-thumb { background: var(--bg-3); } .sb-sep { height: 1px; background: var(--line); margin: var(--sp-2) var(--sp-3); } .sb-item { display: flex; align-items: center; gap: 12px; padding: 8px var(--sp-3); background: transparent; border: 0; color: var(--ink-2); cursor: pointer; font-size: var(--fs-sm); text-align: left; width: 100%; position: relative; transition: background 120ms ease, color 120ms ease; } .sb-item:hover { background: var(--bg-2); color: var(--ink-0); } .sb-item.is-active { color: var(--emerald); background: var(--emerald-mist, rgba(16,185,129,0.06)); } .sb-item.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--emerald); border-radius: 0 2px 2px 0; } .sb-icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; } .sb-label { white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity 180ms ease, transform 180ms ease; letter-spacing: 0.01em; } .sidebar.is-expanded .sb-label { opacity: 1; transform: translateX(0); } /* Layout offset when sidebar is mounted */ body.has-sidebar #topbar { left: 56px; transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1); } body.has-sidebar #canvas { padding-left: calc(56px + var(--sp-5)); transition: padding-left 220ms cubic-bezier(0.4, 0, 0.2, 1); } body.has-sidebar.welcome-mode #canvas { padding-left: var(--sp-5); } body.has-sidebar .sidebar.is-expanded ~ #topbar, body.has-sidebar:has(.sidebar.is-expanded) #topbar { left: 200px; } body.has-sidebar:has(.sidebar.is-expanded) #canvas { padding-left: calc(200px + var(--sp-5)); } @media (max-width: 640px) { body.has-sidebar #topbar { left: 0; } body.has-sidebar #canvas { padding-left: var(--sp-5); } } /* Contact toast (sidebar email copy feedback) */ .sb-contact-toast { position: fixed; left: 64px; bottom: 16px; z-index: 200; padding: 8px 12px; background: var(--bg-2, #15171b); border: 1px solid var(--line); border-radius: var(--r-2, 6px); font-size: var(--fs-xs, 11px); color: var(--ink-0, #fff); box-shadow: 0 6px 20px rgba(0,0,0,0.35); animation: sb-toast-in 180ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .sb-contact-toast.is-leaving { animation: sb-toast-out 240ms cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes sb-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes sb-toast-out { to { opacity: 0; transform: translateY(-4px); } } /* --- dashboard.css --- */ /* Dashboard productivity-trigger components */ .dash-section { margin-bottom: var(--sp-7); position: relative; z-index: 1; } /* ═══ AMBIENT BACKGROUND ORBS (B1) ═══ */ .dash-ambient { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .dash-orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; animation: drift 20s infinite alternate ease-in-out; } .dash-orb.o1 { top: -100px; left: -100px; width: 400px; height: 400px; background: rgba(74, 127, 165, 0.06); animation-delay: 0s; } .dash-orb.o2 { bottom: -80px; right: -80px; width: 350px; height: 350px; background: rgba(181, 103, 77, 0.05); animation-delay: -7s; } .dash-orb.o3 { top: 40%; left: 40%; width: 300px; height: 300px; background: rgba(123, 94, 167, 0.04); animation-delay: -14s; } /* ═══ SECTION RULES (B2) ═══ */ .section-rule { display: flex; align-items: center; justify-content: center; height: 22px; margin: var(--sp-5) 0; position: relative; } .section-rule::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, 0.08); } .section-rule .diamond { position: relative; background: var(--bg-0); padding: 0 10px; font-size: 10px; } .section-rule.r-sapphire .diamond { color: var(--color-sapphire); } .section-rule.r-clay .diamond { color: var(--color-clay); } .section-rule.r-violet .diamond { color: var(--color-violet); } .section-rule.r-emerald .diamond { color: var(--color-emerald); } /* ═══ GREETING CONSTELLATION (B3) ═══ */ .page-head { position: relative; } /* Three-line stacked greeting · date · scripture */ .dash-head-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: var(--sp-5); } .dash-head-stack .page-title { font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .dash-head-stack .page-date { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-sapphire); } .dash-head-stack .page-verse { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 4px; max-width: 760px; } .dash-head-stack .page-verse-text { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--ink-1); line-height: 1.45; } .dash-head-stack .page-verse-ref { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-sapphire); opacity: 0.85; } .constellation-bg { position: absolute; inset: -10px -20px; z-index: 0; pointer-events: none; opacity: 0.5; } .constellation-bg svg { width: 100%; height: 100%; } .page-head h1, .page-head .page-meta { position: relative; z-index: 1; } /* ═══ KPI NUM tones ═══ */ .kpi-num.sapphire { color: var(--color-sapphire); } .kpi-num.clay { color: var(--color-clay); } .kpi-num.violet { color: var(--color-violet); } .kpi-num.gold { color: var(--color-gold); } /* ═══ BRIEFING CTA ═══ */ .briefing-cta { display: flex; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-5); flex-wrap: wrap; } .briefing-cta .btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-1); font-size: var(--fs-xs); padding: 6px 14px; border-radius: 20px; letter-spacing: 0.06em; cursor: pointer; transition: all 150ms ease; } .briefing-cta .btn:hover { color: var(--ink-0); border-color: var(--line-strong); } .briefing-cta .focus-cta-btn { background: rgba(74,127,165,0.10); border-color: var(--color-sapphire); color: var(--color-sapphire); } .briefing-cta .focus-cta-btn:hover { background: var(--color-sapphire); color: #000; } /* ═══ KPI FLIP (front/back card) ═══ */ .kpi-flip { position: relative; perspective: 1200px; cursor: pointer; min-height: 180px; } .kpi-flip .kpi-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 500ms cubic-bezier(0.45, 0.1, 0.2, 1); padding: var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 3px; border-radius: inherit; overflow: hidden; } .kpi-flip .kpi-front { background: inherit; } .kpi-flip .kpi-back { background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); transform: rotateY(180deg); border-top: 2px solid var(--emerald); padding: var(--sp-2) var(--sp-3); } .kpi-flip.is-flipped .kpi-front { transform: rotateY(-180deg); } .kpi-flip.is-flipped .kpi-back { transform: rotateY(0deg); } .kpi-back-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald); margin-bottom: 3px; flex-shrink: 0; } .kpi-back-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-right: 2px; } .kpi-back-bullets::-webkit-scrollbar { width: 3px; } .kpi-back-bullets::-webkit-scrollbar-thumb { background: var(--emerald-deep); border-radius: 2px; } .kpi-back-bullets li { font-size: 9.5px; line-height: 1.4; color: var(--ink-1); padding-left: 9px; position: relative; word-wrap: break-word; hyphens: auto; } .kpi-back-bullets li::before { content: '·'; position: absolute; left: 0; top: -1px; color: var(--emerald); font-size: 12px; line-height: 1; } .kpi-back-hint { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); flex-shrink: 0; } /* ═══ KPI TARGET + TOP BORDER (B6) ═══ */ .kpi-card { border-top: 2px solid var(--line); transition: transform 200ms ease, border-color 200ms ease; position: relative; overflow: hidden; } .kpi-card:hover { transform: translateY(-2px); } .kpi-card.is-tone-emerald { border-top-color: var(--color-emerald); } .kpi-card.is-tone-clay { border-top-color: var(--color-clay); } .kpi-card.is-tone-sapphire { border-top-color: var(--color-sapphire); } .kpi-card.is-tone-gold { border-top-color: var(--color-gold); } .kpi-card.is-tone-violet { border-top-color: var(--color-violet); } .kpi-card.is-tone-ruby { border-top-color: var(--color-ruby); } .kpi-card .kpi-mini-spark { height: 20px; width: 100%; margin-top: 6px; } .kpi-card .kpi-mini-spark svg { width: 100%; height: 100%; } .kpi-target { font-size: 9px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; padding-top: 4px; border-top: 1px dashed var(--line); } /* ═══ GOALS BOARD ═══ */ .goals-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); } .goal-card { background: var(--grad-card, var(--bg-1)); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--motion-fast), transform var(--motion-fast); } .goal-card:hover { border-color: var(--line-strong); } .goal-card.is-done { background: linear-gradient(135deg, var(--emerald-mist, rgba(16,185,129,0.06)), var(--bg-1)); border-color: var(--emerald-glow); } .goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); } .goal-title { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-0); } .goal-progress { font-size: var(--fs-md); color: var(--color-emerald); font-family: var(--font-mono); } .goal-slash { color: var(--ink-3); margin: 0 2px; } .goal-bar { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; } .goal-bar span { display: block; height: 100%; background: var(--color-emerald); transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .goal-foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); } .goal-check { color: var(--color-emerald); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; } .goal-inc { font-size: 10px; padding: 2px 8px; background: var(--emerald-mist, rgba(16,185,129,0.06)); border: 1px solid var(--emerald-glow); color: var(--color-emerald); border-radius: var(--r-2); cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .goal-inc:hover { background: var(--emerald-glow); transform: scale(1.05); } .goal-inc:active { transform: scale(0.95); } .goal-add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--r-3); padding: var(--sp-4); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); min-height: 80px; } .goal-add-card:hover { border-color: var(--color-emerald); background: var(--emerald-mist, rgba(16,185,129,0.06)); } .empty-goals { padding: var(--sp-5); border: 1px dashed var(--line); border-radius: var(--r-3); text-align: center; grid-column: 1 / -1; } /* ═══ PERFORMANCE GRID ═══ */ .perf-grid { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .perf-row { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); } .perf-row:last-child { border-bottom: 0; } .perf-row:hover { background: var(--bg-2); } .perf-name { font-size: var(--fs-sm); color: var(--ink-1); letter-spacing: 0.02em; } .perf-track { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .perf-fill { display: block; height: 100%; border-radius: 3px; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .perf-vals { display: flex; justify-content: flex-end; gap: 4px; font-size: var(--fs-sm); font-family: var(--font-mono); } .perf-target { color: var(--ink-3); } /* ═══ TREND ═══ */ .trend-chart { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .trend-legend { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); flex-wrap: wrap; } .trend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .trend-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 100px; align-items: end; } .trend-week { display: flex; align-items: flex-end; justify-content: center; height: 100%; position: relative; cursor: default; } .trend-stack { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; position: relative; } .trend-seg { display: block; border-radius: 1px; min-height: 1px; animation: trendGrow 600ms cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: bottom; } @keyframes trendGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .trend-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.05em; } /* ═══ VENTURE PULSE ═══ */ .venture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); } .venture-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); transition: border-color var(--motion-fast); } .venture-tile:hover { border-color: var(--line-strong); } .venture-name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-0); margin-bottom: var(--sp-2); letter-spacing: -0.005em; } .venture-stats { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--ink-2); } .venture-stats .num { color: var(--color-clay); font-family: var(--font-mono); margin-right: 4px; } /* ═══ CASH FLOW ═══ */ .cash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); } .cash-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); } .cash-label { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; } .cash-num { font-size: var(--fs-lg); font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; } .cash-num.emerald { color: var(--color-emerald); } .cash-num.ruby { color: var(--color-ruby); } /* ═══ SCOREBOARD COLOR CODING (B8) ═══ */ .score-tile { transition: opacity 200ms ease; } .score-tile.is-zero { opacity: 0.5; } .score-tile.is-faith { box-shadow: inset 0 0 20px rgba(74, 127, 165, 0.08); } .score-tile.is-faith .score-icon { color: var(--color-sapphire); } .score-tile.is-creative { box-shadow: inset 0 0 20px rgba(123, 94, 167, 0.08); } .score-tile.is-creative .score-icon { color: var(--color-violet); } .score-tile.is-stew { box-shadow: inset 0 0 20px rgba(181, 103, 77, 0.08); } .score-tile.is-stew .score-icon { color: var(--color-clay); } .score-tile.is-life { box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.08); } .score-tile.is-life .score-icon { color: var(--color-emerald); } .score-tile.is-zero { box-shadow: none; } /* ═══ YEAR HEATMAP — bigger + tappable (B9 upgrade) ═══ */ .year-heatmap { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 3px; padding: var(--sp-3); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); } .year-heatmap .hm-cell { width: 100%; aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.04); border-radius: 2px; position: relative; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; } .year-heatmap .hm-cell:hover { transform: scale(1.4); box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 3; } @media (max-width: 640px) { .year-heatmap { grid-template-columns: repeat(auto-fill, minmax(12px, 1fr)); gap: 2px; } } /* Daily summary popover */ .hm-popover { position: fixed; width: 300px; background: var(--bg-1); border: 1px solid var(--emerald); border-radius: var(--r-3); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 24px var(--emerald-glow); z-index: 200; padding: var(--sp-3) var(--sp-4); animation: fade-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .hm-pop-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line); } .hm-pop-date { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--emerald); } .hm-pop-close { background: transparent; border: 0; color: var(--ink-2); font-size: 16px; cursor: pointer; padding: 0 4px; } .hm-pop-close:hover { color: var(--ink-0); } .hm-pop-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-2); } .hm-pop-line { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--ink-0); line-height: 1.35; } .hm-pop-line .icon { color: var(--emerald); } .hm-pop-empty { color: var(--ink-3); text-align: center; } .hm-pop-verse { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-sm); color: var(--ink-1); line-height: 1.45; } .hm-cell { background: rgba(255, 255, 255, 0.04); position: relative; } .hm-cell.entries-1 { background: rgba(181, 103, 77, 0.3); } .hm-cell.entries-2 { background: rgba(181, 103, 77, 0.45); } .hm-cell.entries-3 { background: rgba(16, 185, 129, 0.5); } .hm-cell.entries-5 { background: rgba(16, 185, 129, 0.65); } .hm-cell.entries-6 { background: rgba(74, 127, 165, 0.65); } .hm-cell.entries-9 { background: rgba(74, 127, 165, 0.85); } .hm-cell.entries-10 { background: rgba(123, 94, 167, 0.85); } .hm-cell.is-today { outline: 1.5px solid #fff; outline-offset: 1px; z-index: 2; } .hm-cell { animation: fade-in 400ms ease both; animation-delay: calc(var(--ci, 0) * 2ms); } /* ═══ ANIMATION UTILITIES (D1) ═══ */ @keyframes count-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes drift { from { transform: translate(-10px, -8px); } to { transform: translate(10px, 8px); } } @keyframes flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } 75% { transform: scale(0.97); } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } @keyframes budget-warn{ 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } .count-up { animation: count-up 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @media (prefers-reduced-motion: reduce) { .dash-orb, .mt-current-dot, .arc-stroke, .stewardship-fill, .hm-cell, .kpi-card, .count-up, .budget-card.is-over { animation: none !important; transition: none !important; } } /* ═══ KPI TARGET LINE ═══ */ .kpi-target { font-size: 9px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; padding-top: 4px; border-top: 1px dashed var(--line); } /* ═══ GOALS BOARD ═══ */ .goals-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); } .goal-card { background: var(--grad-card, var(--bg-1)); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--motion-fast), transform var(--motion-fast); } .goal-card:hover { border-color: var(--line-strong); } .goal-card.is-done { background: linear-gradient(135deg, var(--emerald-mist, rgba(16,185,129,0.06)), var(--bg-1)); border-color: var(--emerald-glow); } .goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); } .goal-title { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-0); } .goal-progress { font-size: var(--fs-md); color: var(--emerald); font-family: var(--font-mono); } .goal-slash { color: var(--ink-3); margin: 0 2px; } .goal-bar { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; } .goal-bar span { display: block; height: 100%; background: var(--emerald); transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .goal-foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); } .goal-check { color: var(--emerald); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; } .goal-inc { font-size: 10px; padding: 2px 8px; background: var(--emerald-mist, rgba(16,185,129,0.06)); border: 1px solid var(--emerald-glow); color: var(--emerald); border-radius: var(--r-2); cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .goal-inc:hover { background: var(--emerald-glow); transform: scale(1.05); } .goal-inc:active { transform: scale(0.95); } .goal-add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: 1px dashed var(--line-strong); border-radius: var(--r-3); padding: var(--sp-4); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); min-height: 80px; } .goal-add-card:hover { border-color: var(--emerald); background: var(--emerald-mist, rgba(16,185,129,0.06)); } .empty-goals { padding: var(--sp-5); border: 1px dashed var(--line); border-radius: var(--r-3); text-align: center; grid-column: 1 / -1; } /* ═══ PERFORMANCE GRID ═══ */ .perf-grid { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .perf-row { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); } .perf-row:last-child { border-bottom: 0; } .perf-row:hover { background: var(--bg-2); } .perf-name { font-size: var(--fs-sm); color: var(--ink-1); letter-spacing: 0.02em; } .perf-track { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .perf-fill { display: block; height: 100%; border-radius: 3px; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .perf-vals { display: flex; justify-content: flex-end; gap: 4px; font-size: var(--fs-sm); font-family: var(--font-mono); } .perf-target { color: var(--ink-3); } /* ═══ WEEKLY TREND ═══ */ .trend-chart { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .trend-legend { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); flex-wrap: wrap; } .trend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .trend-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 100px; align-items: end; } .trend-week { display: flex; align-items: flex-end; justify-content: center; height: 100%; position: relative; cursor: default; } .trend-stack { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; position: relative; } .trend-seg { display: block; border-radius: 1px; min-height: 1px; animation: trendGrow 600ms cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: bottom; } @keyframes trendGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } .trend-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.05em; } /* ═══ VENTURE PULSE ═══ */ .venture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); } .venture-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); transition: border-color var(--motion-fast); } .venture-tile:hover { border-color: var(--line-strong); } .venture-name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-0); margin-bottom: var(--sp-2); letter-spacing: -0.005em; } .venture-stats { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); color: var(--ink-2); } .venture-stats .num { color: var(--emerald); font-family: var(--font-mono); margin-right: 4px; } /* ═══ CASH FLOW ═══ */ .cash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); } .cash-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); } .cash-label { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; } .cash-num { font-size: var(--fs-lg); font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; } .cash-num.emerald { color: var(--emerald); } .cash-num.ruby { color: var(--ruby); } /* --- finance.css --- */ /* finance.css — Stewardship visual ramp · scoped .fin-* */ /* ═══ TODAY CARD ═══ */ .fin-today { background: linear-gradient(135deg, var(--emerald-mist, rgba(16,185,129,0.06)), var(--bg-1)); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); } .fin-today-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line); } .fin-today-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--emerald); } .fin-today-date { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-sm); color: var(--ink-1); } .fin-today-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); } .fin-today-cell { display: flex; flex-direction: column; gap: 2px; text-align: center; } .fin-today-k { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); } .fin-today-v { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500; } .fin-today-v.emerald { color: var(--color-emerald); } .fin-today-v.clay { color: var(--color-clay); } .fin-today-v.ruby { color: var(--color-ruby); } .fin-today-v.gold { color: var(--color-gold); } @media (max-width: 640px) { .fin-today-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); } .fin-today-v { font-size: var(--fs-sm); } } /* ═══ DAILY BARS ═══ */ .daily-bars-chart { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .db-legend { display: flex; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--sp-3); font-family: var(--font-mono); letter-spacing: 0.08em; } .db-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 4px; vertical-align: middle; } .db-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 130px; align-items: end; } .db-col { display: flex; flex-direction: column; height: 100%; cursor: default; } .db-stack { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; } .db-bar { display: block; width: 6px; border-radius: 1px 1px 0 0; min-height: 1px; animation: dbGrow 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--d, 0ms); } .db-bar.in { background: linear-gradient(180deg, #34D399, var(--color-emerald)); } .db-bar.out { background: linear-gradient(180deg, #D4856A, var(--color-clay)); } @keyframes dbGrow { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } } .db-label { text-align: center; font-size: 8px; font-family: var(--font-mono); color: var(--ink-3); margin-top: 4px; letter-spacing: 0.06em; } /* ═══ HERO ═══ */ .fin-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: center; background: linear-gradient(135deg, rgba(181,103,77,0.08) 0%, transparent 60%), var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); } .fin-hero-net-label { font-size: 9px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .fin-hero-net-num { font-size: 2.8rem; font-weight: 100; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; } .fin-hero-net-num.is-pos { color: var(--color-emerald); } .fin-hero-net-num.is-neg { color: var(--color-ruby); } .fin-hero-net-num.is-zero { color: var(--color-clay); } .fin-hero-health { font-size: 10px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.04em; } .fin-hero-pills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .fin-pill { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px; } .fin-pill-label { font-size: 8px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.16em; text-transform: uppercase; } .fin-pill-val { font-size: var(--fs-md); font-family: var(--font-mono); font-weight: 500; } .fin-pill-val.emerald { color: var(--color-emerald); } .fin-pill-val.clay { color: var(--color-clay); } .fin-pill-val.ruby { color: var(--color-ruby); } .fin-pill-val.gold { color: var(--color-gold); } @media (max-width: 640px) { .fin-hero { grid-template-columns: 1fr; } } /* ═══ MILESTONE BANNER (shared with dashboard) ═══ */ .milestone-banner { display: flex; align-items: center; gap: var(--sp-3); background: linear-gradient(135deg, rgba(212,162,78,0.10), transparent); border: 1px solid var(--color-gold); border-radius: var(--r-3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-sm); animation: fade-in 400ms ease both; } .milestone-glyph { font-size: var(--fs-lg); color: var(--color-gold); } .milestone-text { flex: 1; color: var(--ink-0); letter-spacing: 0.01em; } .milestone-dismiss { background: transparent; border: 0; color: var(--ink-2); font-size: 18px; cursor: pointer; padding: 0 4px; } .milestone-dismiss:hover { color: var(--ink-0); } /* ═══ ROW: ARC + RING ═══ */ .fin-row-two { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); align-items: stretch; } @media (max-width: 640px) { .fin-row-two { grid-template-columns: 1fr; } } .cashflow-arc, .tithe-ring { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); display: flex; flex-direction: column; align-items: center; position: relative; } .cashflow-arc svg { width: 100%; max-width: 320px; height: auto; } .arc-stroke { animation: arcDraw 700ms ease-out both; } @keyframes arcDraw { from { stroke-dasharray: 0 1000; } } .arc-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-1); flex-wrap: wrap; justify-content: center; } .arc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 4px; } .arc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--color-clay); letter-spacing: 0.04em; } /* ═══ TITHE RING ═══ */ .tithe-ring svg { max-width: 160px; height: auto; } .tithe-ring.is-faithful { box-shadow: 0 0 24px rgba(212, 162, 78, 0.18); } .tithe-ring.is-faithful svg circle:nth-child(2) { filter: drop-shadow(0 0 6px rgba(212,162,78,0.5)); } /* ═══ STEWARDSHIP ═══ */ .stewardship { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-5); align-items: center; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); } .stewardship-gauge { position: relative; width: 80px; height: 160px; background: var(--bg-3); border-radius: 8px; border: 1px solid var(--line); overflow: hidden; margin: 0 auto; } .stewardship-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, #D4856A 0%, var(--color-clay) 100%); transition: height 800ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 0 7px 7px; } .stewardship-target { position: absolute; bottom: 70%; left: -4px; right: -4px; height: 1px; background: var(--color-gold); box-shadow: 0 0 4px var(--color-gold); } .stewardship-num { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 1.6rem; font-weight: 300; color: var(--ink-0); } .stewardship-cap { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 8px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.1em; } .stewardship-meta { display: flex; flex-direction: column; gap: var(--sp-2); } .sm-row { display: flex; justify-content: space-between; padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); } .sm-row:last-child { border-bottom: 0; } .sm-label { color: var(--ink-1); } .sm-val { color: var(--color-clay); font-family: var(--font-mono); } /* ═══ CATEGORY BREAKDOWN ═══ */ .cat-rows { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .cat-row { display: grid; grid-template-columns: 100px 1fr 140px; align-items: center; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line); } .cat-row:last-child { border-bottom: 0; } .cat-name { font-size: var(--fs-sm); color: var(--ink-1); text-transform: lowercase; letter-spacing: 0.02em; } .cat-bar { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; } .cat-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-clay), #D4856A); border-radius: 4px; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .cat-row.is-empty .cat-bar span { background: rgba(255,255,255,0.06); width: 35% !important; } .cat-val { text-align: right; font-size: var(--fs-sm); font-family: var(--font-mono); color: var(--color-clay); } .cat-pct { font-size: 9px; color: var(--ink-2); margin-left: 4px; } .cat-more { margin-top: var(--sp-2); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--color-clay); text-align: center; cursor: pointer; } .cat-empty-hint { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); letter-spacing: 0.04em; } /* ═══ MONTHLY TREND ═══ */ .month-trend { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); height: 200px; position: relative; } .mt-zero { position: absolute; top: 50%; left: var(--sp-4); right: var(--sp-4); height: 1px; background: var(--line-strong); z-index: 1; } .mt-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 100%; align-items: stretch; position: relative; } .mt-bar-wrap { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: default; } .mt-bar { width: 70%; border-radius: 2px; animation: mtGrow 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--delay, 0ms); transform-origin: center; } .mt-bar.pos { background: linear-gradient(180deg, var(--color-emerald), #047857); align-self: end; margin-top: auto; margin-bottom: 50%; } .mt-bar.neg { background: linear-gradient(0deg, var(--color-ruby), #B5674D); align-self: start; margin-top: 50%; margin-bottom: auto; } .mt-bar.is-current { background: transparent !important; border: 1px dashed var(--color-emerald); } .mt-bar.is-current.neg { border-color: var(--color-ruby); } @keyframes mtGrow { from { transform: scaleY(0); opacity: 0; } } .mt-current-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--color-emerald); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; animation: pulse-dot 1.5s infinite; } .mt-bar-label { font-size: 7px; font-family: var(--font-mono); color: var(--ink-3); letter-spacing: 0.08em; position: absolute; bottom: -16px; text-transform: uppercase; } /* ═══ BUDGET CARDS ═══ */ .budget-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); } .budget-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); } .budget-card.is-ok { border-color: var(--color-emerald); } .budget-card.is-warn { border-color: var(--color-amber); } .budget-card.is-over { border-color: var(--color-ruby); animation: budget-warn 300ms; } .budget-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .budget-cat { font-size: var(--fs-sm); color: var(--ink-0); font-weight: 500; text-transform: lowercase; } .budget-num { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); } .budget-bar { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; } .budget-bar span { display: block; height: 100%; background: var(--color-emerald); border-radius: 3px; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); } .budget-card.is-warn .budget-bar span { background: var(--color-amber); } .budget-card.is-over .budget-bar span { background: var(--color-ruby); } .budget-pct { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); text-align: right; } .budget-cta { margin-top: var(--sp-3); } /* ═══ COMMAND HINT ═══ */ .command-hint { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-2) var(--sp-3); } .command-hint-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .cmd-toggle { background: transparent; border: 0; color: var(--color-clay); font-family: var(--font-mono); font-size: 0.65rem; cursor: pointer; letter-spacing: 0.06em; } .cmd-quick { display: flex; gap: 6px; } .cmd-quick-btn { font-size: var(--fs-xs); padding: 3px 10px; background: var(--bg-2); border: 1px solid var(--color-clay); color: var(--color-clay); border-radius: var(--r-2); cursor: pointer; } .cmd-quick-btn:hover { background: var(--color-clay); color: var(--bg-0); } .cmd-syntax { margin: var(--sp-2) 0 0; padding: var(--sp-2); background: var(--bg-2); border-radius: var(--r-2); font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-1); line-height: 1.6; white-space: pre-wrap; } .cmd-syntax[hidden] { display: none; } /* ═══ TRANSACTION LIST ═══ */ .tx-list { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .tx-date-header { position: sticky; top: 0; background: var(--bg-2); padding: 6px var(--sp-3); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.08em; text-transform: lowercase; border-bottom: 1px solid var(--line); z-index: 2; } .tx-row { display: grid; grid-template-columns: 24px 1fr auto 60px 100px; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-3); border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--fs-sm); transition: background 120ms ease; } .tx-row:hover { background: rgba(255,255,255,0.03); } .tx-row:last-child { border-bottom: 0; } .tx-icon { text-align: center; font-size: var(--fs-md); line-height: 1; } .tx-in .tx-icon { color: var(--color-emerald); } .tx-out .tx-icon { color: var(--color-clay); } .tx-label { color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tx-tags { display: flex; gap: 4px; flex-wrap: nowrap; } .tx-tag { font-size: 0.55rem; font-family: var(--font-mono); background: rgba(181, 103, 77, 0.20); color: var(--color-clay); padding: 2px 6px; border-radius: 8px; letter-spacing: 0.04em; text-transform: lowercase; } .tx-tag.gold { background: rgba(212, 162, 78, 0.20); color: var(--color-gold); } .tx-date { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-2); text-align: right; } .tx-amount { text-align: right; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-sm); } .tx-amount.pos { color: var(--color-emerald); } .tx-amount.neg { color: var(--color-clay); } @media (max-width: 640px) { .tx-row { grid-template-columns: 20px 1fr 90px; grid-template-rows: auto auto; } .tx-tags { grid-column: 2 / 3; grid-row: 2; } .tx-date { grid-column: 1 / 4; grid-row: 2; font-size: 9px; } .tx-amount { grid-row: 1; } } /* ═══ EMPTY LEDGER ═══ */ .ledger-empty { text-align: center; padding: var(--sp-7) var(--sp-5); background: var(--bg-1); border: 1px dashed var(--line); border-radius: var(--r-3); } .ledger-empty svg { width: 80px; height: 80px; } .ledger-empty-title { font-size: var(--fs-md); color: var(--ink-1); margin-top: var(--sp-3); } .ledger-empty-hint { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); margin-top: var(--sp-1); } /* --- editorial.css --- */ /* editorial.css — Editorial section + chart patterns Inspired by Fund24 application layout, themed in Miracle emerald palette. */ /* ════════════ SECTION HEADER ════════════ */ .ed-section { margin-bottom: var(--sp-7); position: relative; z-index: 1; } .ed-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-4); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--emerald-glow); } .ed-head-left { display: flex; flex-direction: column; gap: 2px; } .ed-section-code { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); } .ed-section-code .ed-code-num { color: var(--emerald); } .ed-section-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .ed-title { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-0); margin-top: 4px; } .ed-title em { font-style: italic; color: var(--emerald); font-weight: 400; } .ed-head-right { text-align: right; } .ed-badge-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .ed-badge-val { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-lg); font-style: italic; color: var(--emerald); letter-spacing: -0.01em; margin-top: 2px; } /* ════════════ EDITORIAL CARD ════════════ */ .ed-card { background: var(--bg-1); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); position: relative; } .ed-card-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); } .ed-card-head .num, .ed-card-head em { color: var(--emerald); font-family: var(--font-mono); font-style: normal; } /* ════════════ GANTT TIMELINE ════════════ */ .gantt { display: grid; grid-template-columns: 200px 1fr; gap: 0; } .gantt-headcol, .gantt-bars { display: grid; grid-auto-rows: 36px; border-top: 1px solid var(--line); } .gantt-headcol { border-right: 1px solid var(--emerald-glow); } .gantt-row-label { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3) 0 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-1); position: relative; } .gantt-row-label .ed-row-code { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.06em; margin-left: auto; } .gantt-track { position: relative; border-bottom: 1px solid var(--line); background: repeating-linear-gradient( to right, transparent 0, transparent calc(100% / 12 - 1px), var(--line) calc(100% / 12 - 1px), var(--line) calc(100% / 12) ); } .gantt-bar { position: absolute; top: 8px; bottom: 8px; background: linear-gradient(180deg, var(--emerald), var(--emerald-deep)); border-radius: 2px; display: flex; align-items: center; padding: 0 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0,0,0,0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: ganttGrow 600ms cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: left center; } .gantt-bar.is-done { background: linear-gradient(180deg, var(--emerald-deep), #034e3a); opacity: 0.65; } .gantt-bar.is-blocked { background: linear-gradient(180deg, var(--ruby), var(--ruby-deep)); color: #fff; } .gantt-bar.is-future { background: rgba(16, 185, 129, 0.25); color: var(--emerald-bright, var(--emerald)); border: 1px dashed var(--emerald); } @keyframes ganttGrow { from { transform: scaleX(0); opacity: 0; } } .gantt-months { display: grid; grid-template-columns: 200px 1fr; margin-bottom: 6px; } .gantt-month-labels { display: grid; grid-template-columns: repeat(12, 1fr); font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; padding-left: 0; } .gantt-month-labels span { text-align: left; padding-left: 4px; border-left: 1px solid var(--line); } .gantt-month-labels span:first-child { border-left: 0; } .gantt-today-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--emerald); z-index: 2; pointer-events: none; } .gantt-today-line::before { content: 'now'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 8px; color: var(--emerald); letter-spacing: 0.1em; } /* ════════════ Y-MATRIX TABLE (Y1/Y2/Y3 columns) ════════════ */ .ymatrix { border-top: 1px solid var(--line); } .ymatrix-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .ymatrix-row.is-header { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); padding: 6px var(--sp-3); } .ymatrix-row.is-total { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--emerald); border-top: 1px solid var(--emerald-glow); border-bottom: 0; padding-top: 12px; } .ymatrix-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-0); } .ymatrix-priority { font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); letter-spacing: 0.04em; } .ymatrix-priority .ed-source { color: var(--emerald); } /* ════════════ STACKED BAR (revenue growth style) ════════════ */ .stacked-bars { display: flex; flex-direction: column; gap: 14px; padding: var(--sp-3) 0; } .stacked-bar-row { display: grid; grid-template-columns: 36px 1fr 80px; align-items: center; gap: var(--sp-3); } .stacked-bar-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.08em; } .stacked-bar-track { height: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; display: flex; } .stacked-bar-fill { height: 100%; background: linear-gradient(180deg, var(--emerald-bright, var(--emerald)), var(--emerald-deep)); animation: barGrow 700ms cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: left center; } .stacked-bar-fill.is-target { background: rgba(16, 185, 129, 0.18); border-right: 1px solid var(--emerald); } @keyframes barGrow { from { transform: scaleX(0); } } .stacked-bar-num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--emerald); text-align: right; } /* ════════════ CUMULATIVE CASH BAR ════════════ */ .cash-rows { padding: var(--sp-3) 0; } .cash-row-ed { display: grid; grid-template-columns: 50px 1fr 100px; align-items: center; gap: var(--sp-3); padding: 6px 0; } .cash-row-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.08em; } .cash-row-bar { height: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; position: relative; } .cash-row-fill { height: 100%; background: linear-gradient(180deg, var(--emerald-bright, var(--emerald)), var(--emerald-deep)); animation: barGrow 600ms cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: left center; } .cash-row-fill.is-neg { background: linear-gradient(180deg, var(--ruby), var(--ruby-deep)); } .cash-row-value { font-family: var(--font-mono); font-size: var(--fs-sm); text-align: right; color: var(--ink-0); } .cash-row-value .ed-breakeven { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 10px; color: var(--emerald); margin-left: 6px; } .cash-row-ed.is-breakeven .cash-row-fill { background: linear-gradient(180deg, var(--emerald-bright, #34D399), var(--emerald)); box-shadow: 0 0 8px var(--emerald-glow); } /* ════════════ KEY INDICATOR ROW (DSCR style) ════════════ */ .key-indicator { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); margin-top: var(--sp-3); border: 1px solid var(--emerald-glow); border-radius: var(--r-2); background: var(--bg-2); } .key-indicator.is-header { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 0; padding-bottom: 0; } .key-indicator-label { color: var(--ink-1); font-size: var(--fs-sm); } .key-indicator-val { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; text-align: right; color: var(--emerald); font-size: var(--fs-md); } /* ════════════ JOB / SOURCE MATRIX (used for venture or domain matrices) ════════════ */ .source-matrix { border-top: 1px solid var(--line); } .source-matrix-row { display: grid; grid-template-columns: 1.6fr 0.6fr 0.6fr 0.6fr 1.6fr; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .source-matrix-row.is-header { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); padding: 6px var(--sp-3); } .source-matrix-row .ymatrix-num { text-align: center; } .source-matrix-row.is-total { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--emerald); border-top: 1px solid var(--emerald-glow); border-bottom: 0; padding-top: 12px; } /* ════════════ MOBILE ════════════ */ @media (max-width: 640px) { .gantt, .gantt-months { grid-template-columns: 100px 1fr; } .ymatrix-row, .source-matrix-row { grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr; font-size: 10px; } .ymatrix-priority, .source-matrix-row > :last-child { display: none; } .ed-title { font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce) { .gantt-bar, .stacked-bar-fill, .cash-row-fill { animation: none !important; } } /* --- bitmoji.css --- */ /* bitmoji.css — Avatar customizer + corner popups */ .bm-charity-banner { background: linear-gradient(135deg, rgba(212,162,78,0.10), rgba(16,185,129,0.06)); border: 1px solid var(--color-gold); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); position: relative; } .bm-charity-banner::before { content: '✦'; position: absolute; top: 8px; right: 12px; color: var(--color-gold); font-size: 14px; opacity: 0.6; } .bm-charity-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 6px; } .bm-charity-body { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-md); color: var(--ink-1); line-height: 1.55; } .bm-charity-body em { color: var(--emerald); font-style: italic; } .bm-charity-body strong { color: var(--ink-0); font-weight: 500; font-style: normal; } .bitmoji-stage { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-5); align-items: center; background: linear-gradient(135deg, rgba(16,185,129,0.06), var(--bg-1)); border: 1px solid var(--emerald-glow); border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); } .bitmoji-canvas { width: 180px; height: 220px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-3); display: flex; align-items: center; justify-content: center; overflow: hidden; } .bitmoji-svg { width: 100%; height: 100%; } .bm-tier-badge { display: inline-block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--ink-3); color: var(--ink-2); } .bm-tier-badge.tier-premium { border-color: var(--color-gold); color: var(--color-gold); } .bm-tier-badge.tier-kingdom { border-color: var(--emerald); color: var(--emerald); box-shadow: 0 0 8px var(--emerald-glow); } .bm-name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-xl); color: var(--ink-0); margin: 6px 0; } .bm-blurb { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; } .bm-blurb em { color: var(--emerald); font-style: italic; } @media (max-width: 640px) { .bitmoji-stage { grid-template-columns: 1fr; text-align: center; } .bitmoji-canvas { margin: 0 auto; } } .bm-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .bm-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; transition: transform 120ms ease, border-color 120ms ease; position: relative; padding: 0; } .bm-swatch.is-active { border-color: var(--emerald); transform: scale(1.1); box-shadow: 0 0 8px var(--emerald-glow); } .bm-swatch.is-locked { opacity: 0.5; cursor: not-allowed; } .bm-swatch.is-locked::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); border-radius: 50%; } .bm-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-0); z-index: 1; } .bm-chip { padding: 6px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; font-size: var(--fs-sm); color: var(--ink-1); cursor: pointer; font-family: inherit; transition: all 120ms ease; } .bm-chip.is-active { border-color: var(--emerald); color: var(--emerald); background: var(--emerald-mist, rgba(16,185,129,0.06)); } .bm-outfit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); } .bm-outfit { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); cursor: pointer; text-align: left; position: relative; transition: border-color 120ms ease, transform 120ms ease; } .bm-outfit:hover { border-color: var(--line-strong); transform: translateY(-2px); } .bm-outfit.is-active { border-color: var(--emerald); box-shadow: 0 0 12px var(--emerald-glow); } .bm-outfit.is-locked { opacity: 0.55; cursor: not-allowed; } .bm-outfit.is-locked::after { content: '⌖ locked'; position: absolute; top: 6px; right: 8px; font-family: var(--font-mono); font-size: 9px; color: var(--color-gold); letter-spacing: 0.1em; } .bm-outfit-swatch { width: 100%; height: 60px; border-radius: var(--r-2); margin-bottom: 6px; } .bm-outfit-label { font-size: var(--fs-sm); color: var(--ink-0); margin-bottom: 2px; } .bm-outfit-tier { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .bm-outfit-tier.tier-premium { color: var(--color-gold); } .bm-outfit-tier.tier-kingdom { color: var(--emerald); } .bm-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); } .bm-tier-card { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--bg-1)) 0%, var(--bg-1) 100%); border: 1px solid var(--accent); border-radius: var(--r-3); padding: var(--sp-4); text-align: left; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; font-family: inherit; } .bm-tier-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .bm-tier-card.is-active { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); } .bm-tier-name { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-lg); color: var(--accent); } .bm-tier-price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-1); margin: 4px 0 var(--sp-2); } .bm-tier-perks { list-style: none; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-direction: column; gap: 3px; } .bm-tier-perks li { font-size: 11px; color: var(--ink-1); padding-left: 12px; position: relative; } .bm-tier-perks li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); font-size: 9px; } .bm-tier-active { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-top: 4px; } .bm-tier-cta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; } .bm-locked-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: var(--bg-3); border: 1px solid var(--color-gold); border-radius: var(--r-3); padding: 8px 16px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-gold); letter-spacing: 0.06em; z-index: 500; animation: fade-in 220ms ease both; } /* ═══ CORNER POPUP ═══ */ .bm-popup { position: fixed; z-index: 150; display: flex; align-items: flex-end; gap: 6px; pointer-events: auto; cursor: pointer; animation: bmEnter 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .bm-popup.corner-tl { top: 80px; left: 80px; } .bm-popup.corner-tr { top: 80px; right: 80px; flex-direction: row-reverse; } .bm-popup.corner-bl { bottom: 100px; left: 80px; } .bm-popup.corner-br { bottom: 100px; right: 80px; flex-direction: row-reverse; } @media (max-width: 640px) { .bm-popup.corner-tl, .bm-popup.corner-bl { left: 16px; } .bm-popup.corner-tr, .bm-popup.corner-br { right: 16px; } } .bm-popup-avatar { width: 64px; height: 80px; background: var(--bg-1); border: 1px solid var(--emerald); border-radius: var(--r-3); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .bm-popup-avatar svg { width: 100%; height: 100%; } .bm-popup-bubble { background: var(--bg-1); border: 1px solid var(--emerald); border-radius: var(--r-3); padding: 6px 12px; font-size: var(--fs-sm); color: var(--ink-0); font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; max-width: 180px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .bm-popup.is-leaving { animation: bmLeave 600ms ease both; } @keyframes bmEnter { 0% { opacity: 0; transform: translateY(20px) scale(0.6); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes bmLeave { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(20px) scale(0.6); } } /* ═══ AVATAR ACTION ANIMATIONS ═══ */ .bm-popup-avatar.bm-anim-wave svg { animation: bmWave 1.6s ease-in-out infinite; transform-origin: 50% 80%; } .bm-popup-avatar.bm-anim-sip svg { animation: bmSip 2.6s ease-in-out infinite; transform-origin: 50% 70%; } .bm-popup-avatar.bm-anim-idle svg { animation: bmIdle 3.2s ease-in-out infinite; transform-origin: 50% 100%; } .bm-popup-avatar.bm-anim-pray svg { animation: bmPray 3.0s ease-in-out infinite; transform-origin: 50% 90%; } .bm-popup-avatar.bm-anim-pump svg { animation: bmPump 1.2s ease-in-out infinite; transform-origin: 50% 80%; } .bm-popup-avatar.bm-anim-dance svg { animation: bmDance 1.0s ease-in-out infinite; transform-origin: 50% 90%; } .bm-popup-avatar.bm-anim-laugh svg { animation: bmLaugh 0.6s ease-in-out infinite; transform-origin: 50% 70%; } .bm-popup-avatar.bm-anim-sleep svg { animation: bmSleep 4.0s ease-in-out infinite; transform-origin: 50% 90%; opacity: 0.85; } .bm-popup-avatar.bm-anim-stretch svg { animation: bmStretch 2.4s ease-in-out infinite; transform-origin: 50% 100%; } .bm-popup-avatar.bm-anim-jump svg { animation: bmJump 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; } .bm-popup-avatar.bm-anim-think svg { animation: bmThink 3.0s ease-in-out infinite; transform-origin: 50% 70%; } @keyframes bmWave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } } @keyframes bmSip { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-2px) rotate(-3deg); } } @keyframes bmIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes bmPray { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2px) rotate(-2deg); } } @keyframes bmPump { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } } @keyframes bmDance { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-5deg); } 75% { transform: translateX(4px) rotate(5deg); } } @keyframes bmLaugh { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.96); } } @keyframes bmSleep { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(1px) rotate(-3deg); } } @keyframes bmStretch { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.05); } } @keyframes bmJump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes bmThink { 0%,100% { transform: rotate(0); } 50% { transform: rotate(3deg) translateX(2px); } } /* --- focus.css --- */ /* focus.css — Focus session timer · 5 modes · skeuomorphic atmospheres */ .focus-page { max-width: 720px; margin: 0 auto; padding: var(--sp-4) var(--sp-3) var(--sp-9); } .focus-header { margin-bottom: var(--sp-4); } /* ═══ MODE BAR ═══ */ .focus-mode-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); justify-content: center; } .focus-mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 0.65rem; letter-spacing: 0.1em; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--ink-1); transition: all 200ms; font-family: var(--font-mono); } .focus-mode-pill:hover { background: rgba(255,255,255,0.07); } .focus-mode-pill.is-active { background: rgba(var(--rgb), 0.15); border-color: var(--c); color: var(--c); } .focus-mode-pill.is-active .focus-mode-icon { color: var(--c); } .focus-mode-icon { display: inline-flex; color: var(--ink-2); } /* ═══ TASK PICKER ═══ */ .focus-task-picker { margin-bottom: var(--sp-3); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; } .task-picker-head { width: 100%; background: transparent; border: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px var(--sp-3); color: var(--ink-1); font-size: var(--fs-xs); font-family: var(--font-mono); cursor: pointer; letter-spacing: 0.05em; } .task-picker-chevron { color: var(--ink-3); } .task-picker-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--line); } .task-pill { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 10px; color: var(--ink-1); cursor: pointer; transition: border-color 120ms ease, color 120ms ease; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .task-pill:hover { color: var(--ink-0); border-color: var(--line-strong); } .task-pill.is-active { border-color: var(--color-sapphire); color: var(--color-sapphire); background: rgba(74,127,165,0.10); } /* ═══ ARENA ═══ */ .focus-arena { position: relative; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: var(--sp-7) var(--sp-4); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; transition: background 600ms ease; margin-bottom: var(--sp-3); } .focus-arena::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--rgb), 0.10) 0%, transparent 70%); pointer-events: none; } /* Arena backgrounds per mode */ .arena-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .arena-bg[data-mode="deep"] { background: radial-gradient(ellipse at 50% 30%, rgba(74,127,165,0.12), transparent 70%), repeating-linear-gradient(0deg, transparent 0, transparent 22px, rgba(255,255,255,0.03) 22px, rgba(255,255,255,0.03) 23px); } .arena-bg[data-mode="prayer"] { background: radial-gradient(ellipse at center, rgba(123,94,167,0.14), transparent 70%); } .arena-bg[data-mode="prayer"]::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0, transparent 4px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0, transparent 4px), radial-gradient(circle at 50% 80%, rgba(255,255,255,0.04) 0, transparent 4px), radial-gradient(circle at 30% 70%, rgba(255,255,255,0.04) 0, transparent 4px), radial-gradient(circle at 75% 65%, rgba(255,255,255,0.04) 0, transparent 4px), radial-gradient(circle at 60% 25%, rgba(255,255,255,0.04) 0, transparent 4px); animation: spin-slow 60s linear infinite; transform-origin: center; } @keyframes spin-slow { to { transform: rotate(360deg); } } .arena-bg[data-mode="bible"] { background: radial-gradient(ellipse at 50% 30%, rgba(74,127,165,0.12), transparent 70%), repeating-linear-gradient(3deg, transparent 0, transparent 26px, rgba(255,255,255,0.02) 26px, rgba(255,255,255,0.02) 28px); } .arena-bg[data-mode="build"] { background: radial-gradient(ellipse at center, rgba(16,185,129,0.10), transparent 70%), radial-gradient(circle at 10px 10px, rgba(16,185,129,0.06) 1px, transparent 1.5px); background-size: auto, 20px 20px; } .arena-bg[data-mode="rest"] { background: radial-gradient(ellipse at center, rgba(212,162,78,0.16), transparent 70%); animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.008); } } .arena-fullscreen { position: absolute; top: 12px; right: 12px; background: transparent; border: 1px solid rgba(255,255,255,0.10); color: var(--ink-2); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 14px; z-index: 4; transition: color 120ms, border-color 120ms; } .arena-fullscreen:hover { color: var(--ink-0); border-color: var(--ink-2); } /* Ring */ .focus-ring-svg { width: 260px; height: 260px; transform: rotate(-90deg); position: relative; z-index: 2; } .focus-ring-track { fill: none; stroke: rgba(255,255,255,0.06); } .focus-ring-progress { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .focus-ring-progress.is-idle { animation: ring-pulse 3s ease-in-out infinite; } @keyframes ring-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.75; } } .focus-time-wrap { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; } .focus-time { font-size: 3.2rem; font-weight: 100; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink-0); } .focus-mode-label { font-size: 0.65rem; letter-spacing: 0.18em; font-family: var(--font-mono); color: var(--ink-2); } .focus-task-label, .focus-blurb { font-size: 0.7rem; color: var(--ink-2); letter-spacing: 0.04em; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* Burst */ @keyframes burst-dot { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } } /* ═══ DURATION BAR ═══ */ .duration-bar { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-3); } .duration-btn { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-1); padding: 4px 10px; border-radius: var(--r-2); font-family: var(--font-mono); font-size: 10px; cursor: pointer; transition: all 120ms ease; } .duration-btn:hover { color: var(--ink-0); } .duration-btn.is-active { background: rgba(var(--rgb, 74,127,165), 0.12); border-color: var(--c, var(--color-sapphire)); color: var(--c, var(--color-sapphire)); } .duration-custom { letter-spacing: 0.04em; } /* ═══ CONTROLS ═══ */ .focus-controls { display: flex; gap: 12px; justify-content: center; margin: var(--sp-3) 0 var(--sp-5); } .focus-btn-start { padding: 10px 32px; border-radius: 40px; font-size: 0.75rem; letter-spacing: 0.12em; cursor: pointer; border: 0; background: var(--c); color: #000; font-weight: 500; transition: transform 150ms, box-shadow 150ms, opacity 150ms; box-shadow: 0 4px 16px rgba(var(--rgb), 0.4); } .focus-btn-start:hover { transform: scale(1.04); } .focus-btn-stop { padding: 10px 22px; border-radius: 40px; background: transparent; border: 1px solid var(--color-ruby); color: var(--color-ruby); font-size: 0.7rem; letter-spacing: 0.1em; cursor: pointer; transition: all 150ms; } .focus-btn-stop:hover:not(:disabled) { background: rgba(192,57,43,0.10); transform: scale(1.04); } .focus-btn-stop:disabled { opacity: 0.3; cursor: not-allowed; } /* ═══ REFLECTION ═══ */ .focus-reflection { margin-top: var(--sp-3); padding: var(--sp-4); background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); animation: slide-up 300ms ease-out; } @keyframes slide-up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } } .reflection-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-0); } .reflection-title { letter-spacing: 0.02em; } .focus-reflection textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); color: var(--ink-0); padding: 8px 10px; font-size: var(--fs-sm); resize: vertical; font-family: inherit; } .focus-reflection textarea:focus { border-color: var(--color-sapphire); outline: none; } .reflection-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-3); gap: var(--sp-3); flex-wrap: wrap; } .reflection-xp { color: var(--color-gold); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; } .xp-num { font-variant-numeric: tabular-nums; } .reflection-actions { display: flex; gap: 8px; } /* ═══ STATS ═══ */ .focus-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); } @media (max-width: 480px) { .focus-stats { grid-template-columns: 1fr; } } .focus-stat-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: var(--sp-3) var(--sp-4); } .fs-card-label { font-size: 8px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.18em; margin-bottom: 6px; } .fs-card-num { font-size: 1.6rem; font-weight: 100; color: var(--ink-0); letter-spacing: -0.02em; line-height: 1; } .fs-card-sub { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); margin-top: 4px; letter-spacing: 0.02em; } .fs-dominant { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-1); text-transform: lowercase; } .fs-mini-bars { display: flex; gap: 3px; align-items: end; height: 30px; margin-top: 10px; } .fs-mb { flex: 1; min-width: 6px; border-radius: 2px; background: rgba(255,255,255,0.08); transition: height 400ms cubic-bezier(0.4,0,0.2,1); } .fs-week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 60px; margin-top: 8px; } .fs-wb { display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 2px; height: 100%; } .fs-wb-fill { width: 100%; background: rgba(255,255,255,0.08); border-radius: 2px; min-height: 2px; } .fs-wb-day { font-size: 7px; font-family: var(--font-mono); color: var(--ink-3); text-transform: uppercase; } .fs-best { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); margin-top: 4px; } /* ═══ SESSION LOG ═══ */ .focus-session-log { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); margin-top: var(--sp-5); overflow: hidden; } .fs-log-head { display: flex; justify-content: space-between; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.08em; } .fs-log-count { background: var(--bg-3); color: var(--ink-1); padding: 1px 8px; border-radius: 8px; font-size: 10px; } .fs-log-list { max-height: 480px; overflow-y: auto; } .fs-date-header { position: sticky; top: 0; background: var(--bg-2); padding: 4px var(--sp-3); font-size: 10px; font-family: var(--font-mono); color: var(--ink-2); letter-spacing: 0.06em; border-bottom: 1px solid var(--line); } .focus-session-row { display: grid; grid-template-columns: 18px 1fr 40px 50px 10px 60px; align-items: center; gap: 8px; padding: 6px var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); } .fs-row-icon { display: inline-flex; } .fs-row-label { color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-row-elapsed, .fs-row-time { color: var(--ink-2); font-family: var(--font-mono); } .fs-row-time { font-size: 10px; } .fs-row-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); } .fs-row-dot.is-ok { background: var(--color-emerald); } .fs-row-dot.is-warn { background: var(--color-amber); } .fs-row-xp { color: var(--color-gold); font-family: var(--font-mono); font-size: 9px; text-align: right; letter-spacing: 0.04em; } .fs-empty { padding: var(--sp-7) var(--sp-4); text-align: center; } .fs-empty-title { font-size: var(--fs-sm); color: var(--ink-1); margin-top: var(--sp-2); } .fs-empty-hint { font-size: var(--fs-xs); color: var(--ink-2); font-family: var(--font-mono); margin-top: 4px; } /* ═══ FULLSCREEN ═══ */ body.focus-fullscreen #topbar, body.focus-fullscreen .sidebar, body.focus-fullscreen .bottom-nav, body.focus-fullscreen .focus-header, body.focus-fullscreen .focus-mode-bar, body.focus-fullscreen .focus-task-picker, body.focus-fullscreen .duration-bar, body.focus-fullscreen .focus-stats, body.focus-fullscreen .focus-session-log { display: none !important; } body.focus-fullscreen .focus-arena { min-height: 100vh; border-radius: 0; margin: 0; } body.focus-fullscreen #canvas { padding: 0 !important; margin-top: 0 !important; } body.focus-fullscreen .focus-controls { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 9999; } /* ═══ REDUCED MOTION ═══ */ @media (prefers-reduced-motion: reduce) { .focus-ring-progress.is-idle, .arena-bg[data-mode="prayer"]::before, .arena-bg[data-mode="rest"], .focus-reflection { animation: none !important; } .focus-ring-progress { transition: none !important; } } /* --- features.css --- */ /* features.css — mood log, voice mic, image attachments, privacy lock */ /* ════════════════════════════════════════════════════════════ MOOD PICKER (daily page) ════════════════════════════════════════════════════════════ */ .mood-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .mood-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: var(--ink-1); border-radius: 12px; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease; min-width: 64px; } .mood-chip:hover { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.25); } .mood-chip.is-active { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.55); transform: translateY(-1px); box-shadow: 0 4px 14px -8px rgba(16,185,129,0.55); } .mood-emoji { font-size: 22px; line-height: 1; } .mood-label { font-size: 10px; letter-spacing: 1px; color: var(--ink-2); text-transform: uppercase; } .label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ════════════════════════════════════════════════════════════ MOOD TREND STRIP (dashboard) ════════════════════════════════════════════════════════════ */ .mood-trend { padding: var(--sp-2) 0; } .mood-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; } .mood-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); font-size: 18px; position: relative; } .mood-cell-day { font-size: 9px; color: var(--ink-2); letter-spacing: 1px; margin-top: 2px; } .mood-cell.is-today { box-shadow: inset 0 0 0 1.5px rgba(16,185,129,0.6); } .mood-cell.is-empty .mood-cell-emoji { color: rgba(255,255,255,0.18); } .mood-cell.is-emerald { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); } .mood-cell.is-sapphire { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.30); } .mood-cell.is-clay { background: rgba(212,162,78,0.08); border-color: rgba(212,162,78,0.28); } .mood-cell.is-amber { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); } .mood-cell.is-violet { background: rgba(123,47,242,0.10); border-color: rgba(123,47,242,0.30); } .mood-cell.is-ruby { background: rgba(192,57,43,0.10); border-color: rgba(192,57,43,0.30); } .mood-trend-foot { padding-top: 8px; font-size: 12px; } /* ════════════════════════════════════════════════════════════ MIC BUTTON (voice input) ════════════════════════════════════════════════════════════ */ .mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--ink-1); cursor: pointer; position: relative; transition: background .15s ease, color .15s ease, transform .12s ease; } .mic-btn:hover { background: rgba(16,185,129,0.10); color: var(--emerald); border-color: rgba(16,185,129,0.35); } .mic-btn:active { transform: scale(0.94); } .mic-btn.is-disabled, .mic-btn:disabled { opacity: 0.4; cursor: not-allowed; } .mic-btn.is-error { color: var(--ruby); border-color: rgba(192,57,43,0.4); } .mic-btn.is-recording { background: rgba(192,57,43,0.18); color: #FF6B5C; border-color: rgba(192,57,43,0.55); } .mic-pulse { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; opacity: 0; } .mic-btn.is-recording .mic-pulse { opacity: 1; animation: mic-pulse 1.4s ease-out infinite; border: 2px solid rgba(255,107,92,0.55); } @keyframes mic-pulse { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } } /* one-row layout on the daily page (input + mic) */ .daily-one-row { display: flex; align-items: stretch; gap: 8px; margin: 12px 0; } .daily-one-row .daily-one-line { flex: 1; } .daily-one-row .mic-btn { align-self: center; flex-shrink: 0; } /* miracle (Nes) input gets the mic between input and send */ .miracle-input { display: flex; align-items: center; gap: 8px; } .miracle-input #m-input { flex: 1; } .miracle-input .mic-btn { width: 30px; height: 30px; } /* ════════════════════════════════════════════════════════════ IMAGE ATTACHMENTS ════════════════════════════════════════════════════════════ */ .attach-strip { margin-top: 8px; } .attach-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .attach-thumb { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); } .attach-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; } .attach-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); color: #fff; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s; } .attach-thumb:hover .attach-remove { opacity: 1; } .attach-add { width: 92px; height: 92px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); color: var(--ink-2); font-size: 28px; cursor: pointer; transition: background .15s, border-color .15s; } .attach-add:hover { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.40); color: var(--emerald); } .attach-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; } .attach-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .attach-lightbox-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.10); color: #fff; font-size: 22px; cursor: pointer; } /* ════════════════════════════════════════════════════════════ LOCK TOGGLE + MODAL (privacy) ════════════════════════════════════════════════════════════ */ .lock-toggle { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--ink-1); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; } .lock-toggle:hover { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.30); } .lock-toggle.is-on { background: rgba(123,47,242,0.16); border-color: rgba(123,47,242,0.50); color: #C7AEFF; } .lock-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; animation: lock-fade .2s ease-out; } @keyframes lock-fade { from { opacity: 0; } to { opacity: 1; } } .lock-card { width: 100%; max-width: 360px; background: var(--bg-1, #0F1419); border: 1px solid rgba(123,47,242,0.30); border-radius: 18px; padding: 24px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 60px -20px rgba(123,47,242,0.25); } .lock-card.shake { animation: lock-shake .35s ease-in-out; } @keyframes lock-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } } .lock-icon { font-size: 36px; margin-bottom: 8px; } .lock-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; margin: 0 0 4px 0; color: var(--ink-1); } .lock-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; } .lock-hint { font-size: 11px; color: var(--ink-2); opacity: 0.7; margin-bottom: 14px; letter-spacing: 0.5px; } .lock-input { display: block; width: 100%; padding: 12px 14px; margin: 8px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--ink-1); font-family: 'JetBrains Mono', monospace; font-size: 18px; letter-spacing: 8px; text-align: center; } .lock-input:focus { outline: none; border-color: rgba(123,47,242,0.55); } .lock-err { color: var(--ruby, #C0392B); font-size: 12px; min-height: 16px; margin: 4px 0 8px; } .lock-actions { display: flex; gap: 8px; margin-top: 14px; } .lock-actions .btn { flex: 1; } .lock-forgot { display: block; margin: 12px auto 0; background: none; border: none; color: var(--ink-2); font-size: 12px; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.18); text-underline-offset: 3px; cursor: pointer; transition: color .15s; } .lock-forgot:hover { color: var(--emerald); text-decoration-color: rgba(16,185,129,0.5); } .lock-warn { font-size: 12px; color: var(--ink-2); margin: 12px 0 6px; letter-spacing: 0.3px; } .lock-warn strong { color: var(--ruby, #C0392B); font-family: 'JetBrains Mono', monospace; letter-spacing: 2px; font-weight: 600; } .lock-input-text { letter-spacing: 4px; text-transform: uppercase; font-size: 16px; } /* ════════════════════════════════════════════════════════════ AUTH PAGES (verified, reset-password, forgot-password modal) ════════════════════════════════════════════════════════════ */ .page-auth { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 80px); padding: 32px 16px; } .auth-card { width: 100%; max-width: 440px; background: var(--bg-1, #0F1419); border: 1px solid rgba(16,185,129,0.18); border-radius: 18px; padding: 36px 32px; text-align: center; } .auth-mark { color: var(--emerald); letter-spacing: 3px; font-size: 11px; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; } .auth-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 32px; margin: 0 0 8px; letter-spacing: -1px; color: var(--ink-1); } .auth-body { line-height: 1.55; color: var(--ink-2); margin: 12px 0; } .auth-input { display: block; width: 100%; padding: 12px 14px; margin: 8px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--ink-1); font-family: 'Inter', sans-serif; font-size: 15px; } .auth-input:focus { outline: none; border-color: rgba(16,185,129,0.55); } .auth-err { color: var(--ruby, #C0392B); font-size: 12px; min-height: 16px; margin: 6px 0; text-align: left; } .auth-actions { display: flex; gap: 8px; margin-top: 14px; } .auth-actions .btn { flex: 1; } .auth-icon { line-height: 1; } /* Forgot-password modal on /login */ .forgot-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; } .forgot-card { width: 100%; max-width: 380px; background: var(--bg-1, #0F1419); border: 1px solid rgba(16,185,129,0.25); border-radius: 18px; padding: 28px; text-align: center; } .forgot-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; margin: 0 0 6px; } .forgot-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; } .forgot-actions { display: flex; gap: 8px; margin-top: 14px; } .forgot-actions .btn { flex: 1; } /* "forgot password?" link under login submit */ .login-forgot { display: block; margin: 8px auto 0; background: none; border: none; color: var(--ink-2); font-size: 12px; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.18); text-underline-offset: 3px; cursor: pointer; } .login-forgot:hover { color: var(--emerald); } /* ════════════════════════════════════════════════════════════ VERIFY-EMAIL BANNER (settings page) ════════════════════════════════════════════════════════════ */ .verify-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 var(--sp-4) 0; border-radius: 12px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.35); } .verify-banner.is-ok { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.30); } .verify-banner-icon { font-size: 22px; flex-shrink: 0; } .verify-banner-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .verify-banner-body strong { font-size: 14px; color: var(--ink-1); } .verify-banner-body .meta { font-size: 12px; } .verify-banner .btn { flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ MOOD PICKER — themed expanded ════════════════════════════════════════════════════════════ */ .mood-picker-wrap { margin-top: 8px; } .mood-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 8px; } .mood-tab { padding: 4px 10px; background: none; border: 1px solid transparent; color: var(--ink-2); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .mood-tab:hover { color: var(--ink-1); background: rgba(255,255,255,0.03); } .mood-tab.is-active { color: var(--emerald); border-color: rgba(16,185,129,0.30); background: rgba(16,185,129,0.08); } .mood-selected { margin-top: 12px; font-size: 12px; color: var(--ink-2); } .mood-selected strong { color: var(--ink-1); font-weight: 500; } /* ════════════════════════════════════════════════════════════ ATTACHMENT BUTTONS — themed (camera + browse) ════════════════════════════════════════════════════════════ */ .attach-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--ink-2); } .attach-add .icon { color: currentColor; } .attach-add:hover .icon { color: var(--emerald); } .attach-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } /* ════════════════════════════════════════════════════════════ PROPHECIES PAGE ════════════════════════════════════════════════════════════ */ .prophecy-quick { background: rgba(123,47,242,0.04); border: 1px solid rgba(123,47,242,0.25); border-radius: 14px; padding: 16px; margin: 16px 0 24px; } .prophecy-input { width: 100%; min-height: 88px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.20); color: var(--ink-1); font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; line-height: 1.55; resize: vertical; } .prophecy-input:focus { outline: none; border-color: rgba(123,47,242,0.50); } .prophecy-row { display: flex; gap: 8px; margin-top: 8px; } .prophecy-field { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); color: var(--ink-1); font-size: 13px; } .prophecy-field:focus { outline: none; border-color: rgba(123,47,242,0.50); } .prophecy-quick .btn { margin-top: 12px; } .prophecy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .prophecy-row-card { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: border-color .15s, transform .12s; } .prophecy-row-card:hover { border-color: rgba(123,47,242,0.35); transform: translateY(-1px); } .prophecy-row-card.is-active { border-left: 3px solid rgba(123,47,242,0.65); } .prophecy-row-card.is-fulfilled { border-left: 3px solid var(--emerald); background: rgba(16,185,129,0.04); } .prophecy-row-card.is-partially-fulfilled { border-left: 3px solid #F59E0B; } .prophecy-row-card.is-cancelled { opacity: 0.55; border-left: 3px solid rgba(192,57,43,0.50); } .prophecy-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .prophecy-platform { color: #C7AEFF; font-family: 'JetBrains Mono', monospace; } .prophecy-card-word { font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.5; font-style: italic; color: var(--ink-1); margin-bottom: 8px; } .prophecy-card-scrip { font-size: 12px; color: var(--emerald); margin-bottom: 8px; } .prophecy-card-actions { display: flex; gap: 6px; margin-top: 10px; } .btn-tiny { padding: 4px 10px; font-size: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); color: var(--ink-1); border-radius: 6px; cursor: pointer; letter-spacing: 0.5px; } .btn-tiny:hover { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); color: var(--emerald); } .btn-tiny.is-danger:hover { background: rgba(192,57,43,0.10); border-color: rgba(192,57,43,0.35); color: var(--ruby); } /* ════════════════════════════════════════════════════════════ ENCOURAGEMENT CARDS (dashboard · "keep the fire burning") ════════════════════════════════════════════════════════════ */ .enc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .enc-card { background: linear-gradient(135deg, rgba(16,185,129,0.05), rgba(123,47,242,0.04)); border: 1px solid rgba(16,185,129,0.20); border-radius: 14px; padding: 16px; cursor: pointer; transition: transform .12s, border-color .15s; } .enc-card:hover { transform: translateY(-2px); border-color: rgba(16,185,129,0.45); } .enc-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } .enc-kind { color: var(--emerald); font-family: 'JetBrains Mono', monospace; } .enc-theme { color: var(--ink-2); padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); font-size: 10px; } .enc-subject { font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1.5; color: var(--ink-1); margin-bottom: 6px; } .enc-verse { margin: 12px 0 8px; padding: 10px 12px; border-left: 2px solid rgba(16,185,129,0.50); background: rgba(0,0,0,0.25); border-radius: 0 8px 8px 0; font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 14px; line-height: 1.55; } .enc-verse-text { display: block; color: var(--ink-1); } .enc-verse-ref { display: block; margin-top: 4px; font-size: 11px; color: var(--emerald); font-style: normal; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; } .enc-song { font-size: 12px; color: var(--ink-2); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.04); } .enc-song strong { color: var(--ink-1); font-weight: 500; } /* ════════════════════════════════════════════════════════════ DAILY PAGE SAVE STATUS (autosave indicator + footer button) ════════════════════════════════════════════════════════════ */ .daily-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .daily-save-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 11px; letter-spacing: 0.5px; color: var(--ink-2); font-family: 'JetBrains Mono', monospace; transition: background .2s, border-color .2s, color .2s; } .save-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.30); flex-shrink: 0; transition: background .2s, box-shadow .2s; } .daily-save-status.is-pending { border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.06); color: #FFB84D; } .daily-save-status.is-pending .save-dot { background: #F59E0B; animation: save-pulse 0.9s ease-in-out infinite; } .daily-save-status.is-saved { border-color: rgba(16,185,129,0.40); background: rgba(16,185,129,0.06); color: var(--emerald); } .daily-save-status.is-saved .save-dot { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.55); } .daily-save-status.is-error { border-color: rgba(192,57,43,0.45); background: rgba(192,57,43,0.08); color: #FF6B5C; } .daily-save-status.is-error .save-dot { background: #C0392B; } @keyframes save-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } } .daily-save-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid rgba(255,255,255,0.04); } .daily-save-footer .btn { min-width: 220px; font-size: 14px; padding: 10px 24px; } .daily-save-footer .meta { font-size: 11px; text-align: center; opacity: 0.6; max-width: 340px; } /* --- brand.css --- */ /* Adwoa brand layer Black textured surface, brass-gold Adinkra patterning, emerald actions. */ :root { --brand-bg: #020403; --brand-bg-1: #07100c; --brand-bg-2: #0b1510; --brand-ink: #f4efe4; --brand-muted: #b9b19f; --brand-gold: #d8a84e; --brand-gold-2: #f1d189; --brand-gold-glow: rgba(216, 168, 78, 0.22); --brand-green: #20c997; --brand-green-2: #0f9f74; --brand-green-glow: rgba(32, 201, 151, 0.22); --brand-pattern: url("../assets/brand/pattern-ohemaa.jpg"); --brand-pattern-heart: url("../assets/brand/pattern-heart.jpg"); --brand-pattern-bird: url("../assets/brand/pattern-bird.jpg"); --brand-pattern-target: url("../assets/brand/pattern-target.jpg"); --brand-pattern-diamond: url("../assets/brand/pattern-diamond.jpg"); --brand-pattern-ohemaa: url("../assets/brand/pattern-ohemaa.jpg"); --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --emerald: var(--brand-green); --emerald-deep: var(--brand-green-2); --emerald-glow: var(--brand-green-glow); --color-gold: var(--brand-gold); --line: rgba(216, 168, 78, 0.13); --line-strong: rgba(216, 168, 78, 0.26); --glass-bg: rgba(2, 6, 4, 0.78); --grad-surface: radial-gradient(circle at 16% -8%, rgba(32, 201, 151, 0.17), transparent 34%), radial-gradient(circle at 96% 24%, rgba(216, 168, 78, 0.12), transparent 30%), linear-gradient(180deg, rgba(2, 4, 3, 0.88), rgba(2, 4, 3, 0.96)), var(--brand-pattern); } html { background: var(--brand-bg); } body { background-color: var(--brand-bg); background-image: var(--grad-surface); background-size: cover, cover, cover, min(620px, 150vw); background-position: center top, center top, center, center top; background-attachment: fixed; color: var(--brand-ink); } body.login-gate-mode, body.welcome-mode { background-image: linear-gradient(180deg, rgba(2, 4, 3, 0.62), rgba(2, 4, 3, 0.96)), var(--brand-pattern-ohemaa); background-size: cover, min(560px, 140vw); } /* Domain-pattern mapping */ [data-domain="prayer"], [data-domain="testimony"], [data-domain="people"] { --brand-pattern: var(--brand-pattern-heart); } [data-domain="daily"], [data-domain="bible"], [data-domain="fasting"], [data-domain="music"] { --brand-pattern: var(--brand-pattern-bird); } [data-domain="plans"], [data-domain="projects"], [data-domain="tasks"], [data-domain="finance"], [data-domain="quizzes"] { --brand-pattern: var(--brand-pattern-target); } [data-domain="ideas"], [data-domain="books"], [data-domain="blog"], [data-domain="schedule"] { --brand-pattern: var(--brand-pattern-diamond); } [data-domain="dreams"], [data-domain="meals"] { --brand-pattern: var(--brand-pattern-ohemaa); } /* Top chrome */ #topbar { height: calc(var(--topbar-h) + 8px); background: linear-gradient(90deg, rgba(32, 201, 151, 0.12), transparent 34%, rgba(216, 168, 78, 0.11)), rgba(2, 6, 4, 0.84); border-bottom: 1px solid rgba(32, 201, 151, 0.28); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42); } .tb-brand { color: var(--brand-gold-2); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; } .tb-brand::after { content: "ADINKRA OS"; margin-left: 10px; color: rgba(32, 201, 151, 0.8); font-weight: 500; letter-spacing: 0.16em; } .tb-crumb.is-active, .tb-nav:hover, .tb-btn:hover { color: var(--brand-gold-2); } .tb-btn, .tb-nav, .tb-user { border-radius: 8px; } .tb-user-avatar { background: radial-gradient(circle at 30% 20%, rgba(241, 209, 137, 0.9), rgba(216, 168, 78, 0.22) 42%, rgba(2, 4, 3, 0.76)); color: var(--brand-ink); border-color: rgba(241, 209, 137, 0.38); } #canvas { margin-top: calc(var(--topbar-h) + 8px); padding-top: clamp(22px, 6vw, 72px); } @supports (padding: env(safe-area-inset-top)) { #topbar { height: calc(var(--topbar-h) + 8px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } #canvas { margin-top: calc(var(--topbar-h) + 8px + env(safe-area-inset-top, 0px)); } } .page { position: relative; } [data-domain] .page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.18; background: linear-gradient(180deg, rgba(2, 4, 3, 0.58), rgba(2, 4, 3, 0.96)), var(--brand-pattern); background-size: cover, min(520px, 135vw); background-position: center, center top; filter: saturate(0.88); } .page-head { align-items: flex-end; gap: 10px 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(216, 168, 78, 0.18); } .page-head::before { content: "MIRACLE WORKER"; flex: 0 0 100%; color: var(--brand-green); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.26em; } .page-title, [data-domain] .page-title { color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(32px, 8vw, 54px); font-weight: 500; line-height: 0.96; letter-spacing: 0; text-shadow: 0 14px 32px rgba(0, 0, 0, 0.62); } .page-meta { border: 1px solid rgba(216, 168, 78, 0.16); border-radius: 8px; padding: 5px 8px; background: rgba(2, 6, 4, 0.5); color: var(--brand-muted); } .label, [data-domain] .label { color: var(--brand-gold-2); opacity: 0.9; letter-spacing: 0.16em; } /* Cards and rows */ .entry-row, .kcard, .kpi-card, .score-tile, .prayer-card, .settings-block, .feedback-card, .budget-card, .event-card, .meal-card, .focus-card, .blog-pane, .lane, .plan-row, .week-grid, .drawer-section, .install-banner, .verify-banner { background: linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(4, 10, 8, 0.78); border-color: rgba(216, 168, 78, 0.16); border-radius: 8px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22); } .entry-row { min-height: 52px; padding: 12px 12px; border: 1px solid rgba(216, 168, 78, 0.12); margin-bottom: 8px; } .entry-row:hover, .kcard:hover, .score-tile:hover, .prayer-card:hover { background: rgba(8, 20, 15, 0.9); border-color: rgba(32, 201, 151, 0.4); } .entry-row .dot, [data-domain] .entry-row .dot { background: var(--brand-gold); box-shadow: 0 0 0 4px rgba(216, 168, 78, 0.12), 0 0 22px rgba(216, 168, 78, 0.25); } .btn, button, input, textarea, select { border-radius: 8px; } .btn.is-primary, .drawer-actions .btn.is-primary, [data-domain] .btn.is-primary { background: linear-gradient(135deg, var(--brand-green), #23d0a0); color: #00140d; border-color: rgba(32, 201, 151, 0.72); box-shadow: 0 12px 30px rgba(32, 201, 151, 0.16); } .btn.is-primary:hover, .drawer-actions .btn.is-primary:hover, [data-domain] .btn.is-primary:hover { color: #00140d; border-color: var(--brand-gold-2); box-shadow: 0 14px 34px rgba(216, 168, 78, 0.16); } .new-btn { min-height: 46px; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; } /* Mobile app nav */ .bottom-nav { background: linear-gradient(180deg, rgba(216, 168, 78, 0.09), transparent), rgba(2, 6, 4, 0.92); border: 1px solid rgba(216, 168, 78, 0.2); box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.42); } .bnav-item.is-active, .bnav-item:hover { color: var(--brand-gold-2); } .bnav-item.is-active::after { background: var(--brand-green); box-shadow: 0 0 16px rgba(32, 201, 151, 0.5); } .bnav-jump { background: radial-gradient(circle at 30% 25%, var(--brand-gold-2), var(--brand-gold) 58%, #8c6320); color: #050302; box-shadow: 0 12px 28px rgba(216, 168, 78, 0.28); } /* Drawer, palette, Nes assistant */ .drawer, .drawer-sheet, .palette, #miracle { background: linear-gradient(180deg, rgba(2, 4, 3, 0.78), rgba(2, 4, 3, 0.96)), var(--brand-pattern-ohemaa); background-size: cover, 420px; border-color: rgba(216, 168, 78, 0.24); } .drawer::before, .drawer-handle { background: linear-gradient(90deg, transparent, var(--brand-gold), transparent); } .drawer-head, .drawer-foot, .miracle-head, .palette-input { border-color: rgba(216, 168, 78, 0.16); } .drawer-field input, .drawer-field textarea, .drawer-field select, .palette-input, .miracle-input input { background: rgba(1, 8, 5, 0.72); border: 1px solid rgba(216, 168, 78, 0.15); border-radius: 8px; } .drawer-field input:focus, .drawer-field textarea:focus, .drawer-field select:focus, .palette-input:focus, .miracle-input input:focus { border-color: rgba(32, 201, 151, 0.65); box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.11); } .m-send { background: var(--brand-green); color: #00140d; border-color: rgba(32, 201, 151, 0.72); } /* Dense mobile polish */ @media (max-width: 640px), (pointer: coarse) { :root { --topbar-h: 48px; } body { background-attachment: scroll; } #topbar { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); } .tb-nav, #tb-fwd, .tb-sep, .tb-user-name, #tb-palette, #tb-miracle kbd { display: none; } .tb-left { flex: 1 1 auto; } .tb-brand { display: inline-flex; white-space: nowrap; } .tb-brand::after { content: ""; margin: 0; } .tb-crumb { color: rgba(244, 239, 228, 0.62); max-width: 34vw; } #canvas { padding-left: 16px; padding-right: 16px; padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); } .page-head { margin-bottom: 22px; } .page-meta { width: 100%; overflow: hidden; text-overflow: ellipsis; } .bottom-nav { left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); width: auto; height: 66px; padding: 6px 8px; border-radius: 18px; transform: translateY(0); } .bottom-nav.is-hidden { transform: translateY(calc(100% + 18px)); } .bnav-item { min-width: 46px; padding: 6px 8px; } .bnav-label { display: none; } .bnav-jump { width: 52px; height: 52px; margin-top: -18px; } .drawer { border-radius: 18px 18px 0 0 !important; border-top-color: rgba(216, 168, 78, 0.34) !important; max-height: calc(100dvh - 18px) !important; } .drawer-head { position: sticky; top: 0; z-index: 2; background: rgba(2, 6, 4, 0.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .drawer-field input, .drawer-field textarea, .drawer-field select { min-height: 52px; } }