/* ============================================================ Now Playing — theme + UI OKLCH-based light/dark, modern iOS-flavoured layout ============================================================ */ :root { /* light theme (default) */ --bg: oklch(0.97 0.006 80); --bg-elev: oklch(0.99 0.004 80); --card: oklch(1 0 0); --card-2: oklch(0.96 0.006 80); --text: oklch(0.25 0.02 60); --text-soft: oklch(0.52 0.02 60); --text-faint: oklch(0.66 0.015 60); --line: oklch(0.90 0.008 70); --accent: oklch(0.62 0.16 35); /* warm coral */ --accent-soft: oklch(0.93 0.05 40); --accent-text: oklch(0.99 0 0); --good: oklch(0.62 0.14 150); --shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.06), 0 8px 24px oklch(0.2 0.02 60 / 0.08); --shadow-lg: 0 8px 40px oklch(0.2 0.02 60 / 0.18); --blur-bg: oklch(0.97 0.006 80 / 0.72); --radius: 20px; --radius-sm: 13px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-serif: "New York", "Newsreader", Georgia, serif; } :root[data-theme="dark"], :root[data-theme="auto"] { color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: oklch(0.18 0.012 70); --bg-elev: oklch(0.21 0.012 70); --card: oklch(0.24 0.013 70); --card-2: oklch(0.27 0.014 70); --text: oklch(0.94 0.008 80); --text-soft: oklch(0.74 0.012 80); --text-faint: oklch(0.58 0.012 80); --line: oklch(0.32 0.012 70); --accent: oklch(0.7 0.15 40); --accent-soft: oklch(0.34 0.06 40); --accent-text: oklch(0.16 0.01 70); --good: oklch(0.72 0.15 152); --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 30px oklch(0 0 0 / 0.4); --shadow-lg: 0 10px 50px oklch(0 0 0 / 0.55); --blur-bg: oklch(0.18 0.012 70 / 0.7); } } :root[data-theme="dark"] { --bg: oklch(0.18 0.012 70); --bg-elev: oklch(0.21 0.012 70); --card: oklch(0.24 0.013 70); --card-2: oklch(0.27 0.014 70); --text: oklch(0.94 0.008 80); --text-soft: oklch(0.74 0.012 80); --text-faint: oklch(0.58 0.012 80); --line: oklch(0.32 0.012 70); --accent: oklch(0.7 0.15 40); --accent-soft: oklch(0.34 0.06 40); --accent-text: oklch(0.16 0.01 70); --good: oklch(0.72 0.15 152); --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 30px oklch(0 0 0 / 0.4); --shadow-lg: 0 10px 50px oklch(0 0 0 / 0.55); --blur-bg: oklch(0.18 0.012 70 / 0.7); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } /* Paint the background on so it reaches the true screen bottom in iOS standalone PWA — body height stops at the safe-area boundary. */ html { min-height: 100%; background: radial-gradient(ellipse 110% 55% at 50% 0%, rgba(251, 113, 133, 0.14), transparent 65%), radial-gradient(ellipse 90% 50% at 50% 100%, rgba(192, 38, 211, 0.10), transparent 70%), radial-gradient(ellipse 60% 30% at 0% 50%, rgba(253, 230, 138, 0.05), transparent 60%), radial-gradient(ellipse 60% 30% at 100% 50%, rgba(192, 38, 211, 0.06), transparent 60%), var(--bg); background-attachment: fixed; } body { min-height: 100dvh; padding-bottom: calc(90px + var(--safe-bottom)); position: relative; background: transparent; } /* CRT-style scanlines — very subtle, matches the retro TV aesthetic */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.014) 2px, rgba(255, 255, 255, 0.014) 3px ); } /* Synthwave horizon glow at the bottom of the screen */ body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(253, 230, 138, 0.4) 25%, rgba(251, 113, 133, 0.7) 50%, rgba(192, 38, 211, 0.4) 75%, transparent 100%); box-shadow: 0 0 10px rgba(251, 113, 133, 0.45), 0 0 24px rgba(192, 38, 211, 0.3); } /* Lift the scrolling content above the fixed background overlays */ main { position: relative; z-index: 2; } /* ---------- Header ---------- */ .app-header { position: sticky; top: 0; z-index: 30; padding-top: var(--safe-top); background: var(--blur-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .app-header::after { content: ''; display: block; height: 1.5px; margin: 0 14px; background: linear-gradient(90deg, transparent 0%, rgba(253, 230, 138, 0.55) 18%, rgba(251, 113, 133, 0.85) 50%, rgba(192, 38, 211, 0.55) 82%, transparent 100%); border-radius: 2px; } .app-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; max-width: 720px; margin: 0 auto; } /* ---------- Retro logo ---------- */ .logo { display: flex; align-items: center; gap: 10px; margin: 0; user-select: none; } .logo__tv { width: 40px; height: 35px; flex-shrink: 0; filter: drop-shadow(0 0 6px oklch(0.7 0.2 350 / 0.5)); } .logo__text { display: flex; flex-direction: column; gap: 1px; } .logo__word { font-family: "Arial Black", "Helvetica Neue", Impact, sans-serif; font-weight: 900; font-size: 25px; line-height: 1; letter-spacing: 0.06em; background: linear-gradient(180deg, #fde68a 0%, #fb7185 48%, #c026d3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.6px oklch(0.55 0.18 350 / 0.45); text-shadow: 0 0 14px oklch(0.7 0.2 350 / 0.45), 0 2px 0 oklch(0.45 0.12 300 / 0.25); } .logo__sub { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .version-tag { margin-left: auto; margin-right: 8px; font-size: 9px; font-weight: 500; color: var(--text-faint); opacity: 0.55; letter-spacing: 0.04em; } .icon-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--card); color: var(--text); box-shadow: var(--shadow); font-size: 18px; display: grid; place-items: center; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; } .icon-btn:active { transform: scale(0.9); } .theme-glyph { line-height: 1; } /* ---------- Views ---------- */ main { max-width: 720px; margin: 0 auto; } .view { display: none; padding: 18px 16px 8px; animation: fadeUp 0.35s ease both; } .view--active { display: block; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Section ---------- */ .section { margin-bottom: 26px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 12px; } .section__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); display: flex; align-items: center; gap: 8px; } .section__emoji { font-size: 15px; } .section__count { color: var(--text-faint); font-weight: 600; } .section__add { margin-left: auto; width: 26px; height: 26px; border: 1.5px solid var(--line); border-radius: 8px; background: none; color: var(--accent); font-size: 18px; font-weight: 400; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .section__add:hover { background: var(--accent-soft); border-color: var(--accent); } .section__add:active { transform: scale(0.88); } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } /* ---------- Card ---------- */ .card { position: relative; border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); overflow: hidden; animation: pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; } @keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .card.is-leaving { animation: leave 0.4s ease forwards; } @keyframes leave { to { opacity: 0; transform: scale(0.8) translateY(-10px); } } .card__cover { position: relative; aspect-ratio: 2 / 3; background: var(--card-2); display: block; } .card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .card__cover svg { width: 100%; height: 100%; display: block; } .card__check { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid oklch(1 0 0 / 0.85); background: oklch(0.2 0.02 60 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; } .card__check:active { transform: scale(0.85); } .card__check svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; transition: opacity 0.15s; } .card__check:hover { background: var(--good); border-color: var(--good); } .card__check:hover svg { opacity: 1; } .card__del { position: absolute; top: 7px; left: 7px; width: 26px; height: 26px; border-radius: 50%; border: none; background: oklch(0.2 0.02 60 / 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, transform 0.15s ease; } .card:hover .card__del { opacity: 1; } .card__del:active { transform: scale(0.85); } .card__meta { padding: 6px 8px 7px; } .card__title { font-size: 12px; font-weight: 650; line-height: 1.2; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__sub { font-size: 10px; color: var(--text-faint); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Empty add slot ---------- */ .slot { aspect-ratio: 2 / 3; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text-faint); display: grid; place-items: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .slot:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .slot:active { transform: scale(0.97); } .slot__plus { font-size: 30px; font-weight: 300; line-height: 1; } /* ---------- Completed view ---------- */ /* ---------- Completed log ---------- */ .log-month { margin-bottom: 28px; } .log-month__header { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 0 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .done-group { margin-bottom: 22px; } .done-empty { text-align: center; color: var(--text-faint); padding: 64px 24px; font-size: 15px; } .done-empty__big { font-size: 40px; margin-bottom: 10px; } .done-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow); margin-bottom: 10px; animation: pop 0.3s ease both; } .done-row__cover { width: 42px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--card-2); } .done-row__cover img, .done-row__cover svg { width: 100%; height: 100%; object-fit: cover; display: block; } .done-row__body { flex: 1; min-width: 0; } .done-row__day { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 2px; } .done-row__title { font-size: 14px; font-weight: 650; margin: 0; } .done-row__sub { font-size: 12px; color: var(--text-faint); margin: 1px 0 0; } .done-row__cat { font-size: 11px; color: var(--text-faint); margin-top: 3px; } .done-row__date { font-size: 11px; color: var(--text-faint); margin-top: 3px; } .done-row__actions { display: flex; gap: 6px; } .mini-btn { border: none; background: var(--card-2); color: var(--text-soft); border-radius: 9px; padding: 7px 9px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.12s; } .mini-btn:active { transform: scale(0.92); } .mini-btn--danger:hover { background: oklch(0.62 0.18 25 / 0.16); color: oklch(0.55 0.2 25); } .mini-btn--restore:hover { background: var(--accent-soft); color: var(--accent); } .mini-btn--play { background: var(--accent); color: var(--accent-text); } .mini-btn--play:hover { filter: brightness(1.06); } /* ---------- Backlog ---------- */ .backlog-group { margin-bottom: 22px; } .backlog-head { margin: 0 4px 12px; } .backlog-add { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--accent); font-size: 19px; font-weight: 600; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background 0.2s, border-color 0.2s, transform 0.12s; } .backlog-add:hover { background: var(--accent-soft); border-color: var(--accent); } .backlog-add:active { transform: scale(0.9); } .backlog-hint { font-size: 13px; color: var(--text-faint); padding: 4px 6px 8px; } /* ---------- Long-press card menu ---------- */ .card-menu { position: fixed; inset: 0; z-index: 60; } .card-menu__backdrop { position: absolute; inset: 0; background: oklch(0.06 0.01 60 / 0.65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn 0.2s ease both; } .card-menu__ring { position: absolute; top: 38%; left: 22px; right: 22px; transform: translateY(-50%); border-radius: 26px; padding: 2px; background: linear-gradient(135deg, #fde68a 0%, #fb7185 45%, #c026d3 100%); box-shadow: 0 24px 60px rgba(5, 2, 28, 0.72), 0 0 70px rgba(140, 50, 200, 0.2); animation: menuPop 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; } @keyframes menuPop { from { opacity: 0; transform: translateY(-50%) scale(0.9); } to { opacity: 1; transform: translateY(-50%) scale(1); } } .card-menu__panel { background: #1b1428; border-radius: 24px; overflow: hidden; } .card-menu__header { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid oklch(1 0 0 / 0.06); } .card-menu__thumb { width: 48px; height: 68px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: oklch(0.25 0.02 280); box-shadow: 0 4px 12px oklch(0 0 0 / 0.4); } .card-menu__thumb img, .card-menu__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; } .card-menu__info { flex: 1; min-width: 0; } .card-menu__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.65 0.15 340); margin: 0 0 3px; } .card-menu__title { font-size: 15px; font-weight: 700; color: oklch(0.96 0.005 280); margin: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-menu__sub { font-size: 12px; color: oklch(0.6 0.01 280); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-menu__actions { padding: 6px 0 8px; } .card-menu__item { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: none; font-family: inherit; font-size: 15px; font-weight: 500; color: oklch(0.9 0.005 280); text-align: left; padding: 13px 18px; cursor: pointer; transition: background 0.12s; } .card-menu__item:active { background: oklch(1 0 0 / 0.06); } .card-menu__item-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; } .card-menu__item-icon svg { width: 18px; height: 18px; } .card-menu__item-icon--good { background: oklch(0.55 0.14 150 / 0.2); color: oklch(0.72 0.16 150); } .card-menu__item-icon--vault { background: oklch(0.55 0.14 270 / 0.2); color: oklch(0.72 0.14 270); } .card-menu__item-icon--danger { background: oklch(0.55 0.18 25 / 0.2); color: oklch(0.72 0.18 25); } .card-menu__item-label { line-height: 1; } /* ---------- Tab bar ---------- */ .tabbar-ring { position: fixed; left: 16px; right: 16px; bottom: 6px; z-index: 30; padding: 1.5px; border-radius: 23.5px; background: linear-gradient(135deg, #fde68a 0%, #fb7185 45%, #c026d3 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 40px rgba(193, 39, 211, 0.18); } .tabbar { display: flex; padding: 6px 8px; border-radius: 22px; background: #1b1428; } .tab { flex: 1; border: none; background: none; color: var(--text-faint); font-family: inherit; font-size: 10.5px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 16px; cursor: pointer; transition: color 0.2s ease; } .tab__icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tab--active { color: var(--accent); } /* ---------- Sheet ---------- */ .sheet { position: fixed; inset: 0; z-index: 50; } .sheet__backdrop { position: absolute; inset: 0; background: oklch(0.1 0.01 60 / 0.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fadeIn 0.25s ease both; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--bg-elev); border-radius: 28px 28px 0 0; padding: 8px 20px calc(22px + var(--safe-bottom)); box-shadow: var(--shadow-lg); animation: slideUp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; max-height: 92dvh; overflow-y: auto; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .sheet__grip { width: 38px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 14px; } .sheet__title { font-size: 19px; font-weight: 750; margin: 0 0 16px; } .field { display: block; margin-bottom: 16px; } .field__label { display: block; font-size: 12px; font-weight: 650; color: var(--text-soft); margin-bottom: 7px; letter-spacing: 0.01em; } .input { width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 13px; padding: 13px 14px; font-size: 16px; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input--small { font-size: 14px; padding: 10px 12px; margin-top: 10px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { border: 1px solid var(--line); background: var(--card); color: var(--text-soft); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.18s ease; } .chip--active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .chip:active { transform: scale(0.95); } .cover-picker { display: flex; gap: 14px; align-items: stretch; } .cover-preview { width: 78px; height: 117px; border-radius: 10px; overflow: hidden; background: var(--card-2); flex-shrink: 0; box-shadow: var(--shadow); } .cover-preview img, .cover-preview svg { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: 1; } .cover-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } .cover-results__item { aspect-ratio: 2 / 3; border-radius: 9px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--card-2); transition: border-color 0.15s ease, transform 0.12s ease; } .cover-results__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-results__item:active { transform: scale(0.94); } .cover-results__item.is-sel { border-color: var(--accent); } .cover-hint { grid-column: 1 / -1; font-size: 12px; color: var(--text-faint); padding: 4px 2px; } .btn { border: none; border-radius: 13px; padding: 13px 18px; font-size: 15px; font-weight: 650; font-family: inherit; cursor: pointer; transition: transform 0.12s ease, background 0.2s ease, opacity 0.2s; } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--accent); color: var(--accent-text); } .btn--primary:disabled { opacity: 0.45; cursor: default; } .btn--ghost { background: var(--card-2); color: var(--text); } .sheet__buttons { display: flex; gap: 12px; margin-top: 4px; } .sheet__buttons .btn { flex: 1; } .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: annaSpin 0.7s linear infinite; vertical-align: -2px; margin-right: 6px; } @keyframes annaSpin { to { transform: rotate(360deg); } } @media (min-width: 520px) { .grid { gap: 16px; } }