/* ============================================================ Khio Life — Cal AI clean theme (shared). The same black-and-white / soft-card / pastel-tile look used on the nutrition and gym redesigns, packaged as one shared sheet so every Life tab (budget, cycle, habits, sleep, calendar, dashboard, settings, ...) matches. WHY scoped under #calaiPage (an id put on each page's ): shared-nav.js injects #khio-scheme-override LAST at runtime and forces a single app-wide accent (orange) onto .card / .btn / .page-title / nav / --accent-* with !important. Source order can't beat a sheet that re-appends itself last — but an ID selector + !important beats shared-nav's class-level rules by specificity. Scoping everything under #calaiPage means this only affects pages that opt in (add id="calaiPage"), leaving Study etc. untouched. James 2026-06-02. ============================================================ */ /* ===== UNIVERSAL DARK TOKENS — kept in sync with premium.css. dashboard.html loads THIS sheet but not premium.css, so the canonical tokens must exist here too. Edit BOTH copies together. (2026-06-20) ===== */ :root[data-theme="dark"], html[data-theme="dark"] { --khio-dark-bg: #121212; --khio-dark-surface: #1d1d1d; --khio-dark-surface-2: #282828; --khio-dark-text: #f4f4f5; --khio-dark-text-soft: rgba(255,255,255,.66); --khio-dark-text-mut: rgba(255,255,255,.45); --khio-dark-border: rgba(255,255,255,.12); --khio-dark-track: rgba(255,255,255,.08); --khio-dark-accent: #f4f4f5; --khio-dark-on-accent: #121212; } /* ---- Palette (light) ---- */ #calaiPage{ --cal-card:#ffffff; --cal-ink:#1a1a1a; --cal-sub:#6b6b6b; --cal-muted:#9a9a9a; --cal-line:rgba(0,0,0,.12); --cal-track:#f0f1f3; --cal-accent:#1a1a1a; /* neutralise shared-nav's forced accent → ink, on this page only */ --accent-amber:#1a1a1a !important; --accent-orange:#3d3d3d !important; --glow-amber:rgba(0,0,0,.06) !important; --glow-orange:rgba(0,0,0,.06) !important; --gym-accent:#1a1a1a !important; --study-accent:#1a1a1a !important; --accent-blue:#1a1a1a !important; --accent-green:#1a1a1a !important; --accent-purple:#1a1a1a !important; --accent-pink:#1a1a1a !important; --accent-white:#1a1a1a !important; } /* ---- Palette (dark) ---- */ html[data-theme="dark"] #calaiPage{ /* Universal matte dark — every value aliases to --khio-dark-* (single source of truth, top of file). Was a warm cream (#fdeed3). 2026-06-20. */ --cal-card:var(--khio-dark-surface,#1d1d1d); --cal-ink:var(--khio-dark-text,#f4f4f5); --cal-sub:var(--khio-dark-text-soft,rgba(255,255,255,.66)); --cal-muted:var(--khio-dark-text-mut,rgba(255,255,255,.45)); --cal-line:var(--khio-dark-border,rgba(255,255,255,.12)); --cal-track:var(--khio-dark-track,rgba(255,255,255,.08)); --cal-accent:var(--khio-dark-accent,#f4f4f5); --accent-amber:var(--khio-dark-accent,#f4f4f5) !important; --accent-orange:var(--khio-dark-accent,#f4f4f5) !important; --gym-accent:var(--khio-dark-accent,#f4f4f5) !important; --study-accent:var(--khio-dark-accent,#f4f4f5) !important; --accent-blue:var(--khio-dark-accent,#f4f4f5) !important; --accent-green:var(--khio-dark-accent,#f4f4f5) !important; --accent-purple:var(--khio-dark-accent,#f4f4f5) !important; --accent-pink:var(--khio-dark-accent,#f4f4f5) !important; --accent-white:var(--khio-dark-accent,#f4f4f5) !important; } #calaiPage .app-main, #calaiPage .app-layout{ background:transparent !important; } /* iOS scroll fix: the Life tabs had body{overflow:hidden} but no real scroll container, so on iOS the locked body touch-scrolled jankily ("scroll loops / bottom becomes top"). Make .app-main a proper viewport-height scroller and stop overscroll from chaining out to the parent overlay shell. James 2026-06-02. */ #calaiPage .app-main{ height:100vh !important; height:100dvh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain !important; } #calaiPage{ overscroll-behavior-y: contain; } /* ---- Headings ---- */ #calaiPage .page-title{ background:none !important; -webkit-text-fill-color:var(--cal-ink) !important; color:var(--cal-ink) !important; font-weight:800 !important; } #calaiPage .page-subtitle{ color:var(--cal-muted) !important; } #calaiPage .page-subtitle i{ color:var(--cal-ink) !important; } #calaiPage .section-title, #calaiPage .section-label{ color:var(--cal-ink) !important; } /* ---- Cards ---- */ #calaiPage .card, #calaiPage .modal-box, #calaiPage .stat-card, #calaiPage .glass-card, #calaiPage .info-card{ background:var(--cal-card) !important; border:1px solid var(--cal-line) !important; box-shadow:0 2px 12px rgba(0,0,0,.06) !important; border-radius:18px !important; } #calaiPage .card:hover, #calaiPage .stat-card:hover{ box-shadow:0 4px 16px rgba(0,0,0,.10) !important; } #calaiPage .card-title, #calaiPage .stat-value, #calaiPage .stat-card-value, #calaiPage .card-value{ color:var(--cal-ink) !important; } #calaiPage .stat-label, #calaiPage .card-subtitle, #calaiPage .card-label, #calaiPage .muted{ color:var(--cal-muted) !important; } /* ---- Buttons → ink pill ---- */ #calaiPage .btn-primary, #calaiPage .btn-accent, #calaiPage .btn.btn-primary, #calaiPage .fab, #calaiPage .primary-btn{ background:var(--cal-ink) !important; border-color:var(--cal-ink) !important; color:var(--cal-card) !important; box-shadow:0 4px 14px rgba(0,0,0,.14) !important; } html[data-theme="dark"] #calaiPage .btn-primary, html[data-theme="dark"] #calaiPage .btn-accent, html[data-theme="dark"] #calaiPage .fab, html[data-theme="dark"] #calaiPage .primary-btn{ color:#0e1320 !important; } #calaiPage .btn-ghost, #calaiPage .btn-secondary, #calaiPage .btn-outline{ background:var(--cal-card) !important; border:1px solid var(--cal-line) !important; color:var(--cal-ink) !important; } #calaiPage .btn-ghost:hover, #calaiPage .btn-secondary:hover{ background:var(--cal-track) !important; } /* ---- Pills / chips / tabs ---- */ #calaiPage .pill, #calaiPage .chip, #calaiPage .tag, #calaiPage .badge, #calaiPage .label-pill{ background:var(--cal-track) !important; color:var(--cal-ink) !important; border-color:var(--cal-line) !important; } #calaiPage .category-pill, #calaiPage .filter-pill, #calaiPage .seg-btn{ background:var(--cal-track) !important; color:var(--cal-sub) !important; border:1px solid transparent !important; } #calaiPage .category-pill.active, #calaiPage .filter-pill.active, #calaiPage .seg-btn.active, #calaiPage .tab.active, #calaiPage [role="tab"][aria-selected="true"]{ background:var(--cal-ink) !important; color:var(--cal-card) !important; border-color:var(--cal-ink) !important; } html[data-theme="dark"] #calaiPage .category-pill.active, html[data-theme="dark"] #calaiPage .filter-pill.active, html[data-theme="dark"] #calaiPage .seg-btn.active, html[data-theme="dark"] #calaiPage .tab.active{ color:#0e1320 !important; } /* ---- Inputs ---- */ #calaiPage input, #calaiPage textarea, #calaiPage select, #calaiPage .input{ background:var(--cal-card) !important; color:var(--cal-ink) !important; border:1px solid var(--cal-line) !important; } #calaiPage input:focus, #calaiPage textarea:focus, #calaiPage select:focus, #calaiPage .input:focus{ border-color:var(--cal-ink) !important; box-shadow:0 0 0 3px rgba(0,0,0,.06) !important; } #calaiPage input::placeholder, #calaiPage textarea::placeholder{ color:var(--cal-muted) !important; } /* ---- Progress / meters → ink ---- */ #calaiPage .progress-fill, #calaiPage [class*="progress-fill"], #calaiPage .bar-fill, #calaiPage .meter-fill{ background:var(--cal-ink) !important; } #calaiPage .progress-track, #calaiPage .bar-track{ background:var(--cal-track) !important; } /* ---- Bottom nav + sidebar active → black & white (shared-nav forces accent) ---- */ /* NOTE: the shared warm-paper tab bar (#khio-pwa-tabbar, .pwa-tab) and the per-page bottom bars ([class*="mobile-pill"] / [class*="mobile-tab"] beyond the base ink below) style themselves via --tab-accent in premium.css + shared-nav's unify block — they are intentionally NOT forced to ink here. Only the hamburger nav container keeps the flat cal-card surface. */ #calaiPage .khio-mobile-nav{ background:var(--cal-card) !important; border-color:var(--cal-line) !important; box-shadow:0 -2px 16px rgba(0,0,0,.05) !important; } #calaiPage .khio-mobile-nav a, #calaiPage [class*="mobile-tab"]{ color:var(--cal-ink) !important; } #calaiPage .khio-mobile-nav a i, #calaiPage [class*="mobile-tab"] i, #calaiPage [class*="mobile-tab"] svg{ color:var(--cal-ink) !important; } #calaiPage .khio-mobile-nav a.active, #calaiPage [class*="mobile-tab"].active{ color:var(--cal-ink) !important; background:var(--cal-track) !important; } #calaiPage .khio-mobile-nav a.active i, #calaiPage [class*="mobile-tab"].active i{ color:var(--cal-ink) !important; } #calaiPage .nav-item.active, #calaiPage .sidebar-nav-link.active{ color:var(--cal-ink) !important; background:var(--cal-track) !important; } #calaiPage .nav-item:hover, #calaiPage .sidebar-nav-link:hover{ color:var(--cal-ink) !important; } /* ---- Generic accent links → ink ---- */ #calaiPage a:not(.nav-item):not(.sidebar-nav-link):not(.khio-overlay-link){ color:var(--cal-ink) !important; } /* ---- Pastel circular icon tiles (opt-in via .cal-tile + t-* colour) ---- */ #calaiPage .cal-tile{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#1a1a1a; flex:0 0 auto; } #calaiPage .cal-tile i, #calaiPage .cal-tile svg{ width:22px; height:22px; } #calaiPage .cal-tile.t-lav{ background:#ece9fe; } #calaiPage .cal-tile.t-peach{ background:#fde0d6; } /* t-blue is a warm terracotta wash now (warm-paper spec 2026-07-07) — the class name stays because pages pick tiles by it. */ #calaiPage .cal-tile.t-blue{ background:#f6ede6; } #calaiPage .cal-tile.t-green{ background:#e0f3e2; } #calaiPage .cal-tile.t-amber{ background:#fdeecf; } #calaiPage .cal-tile.t-pink{ background:#fde0ec; } /* ============================================================ DESKTOP refinement layer — 2026-06-09. Replaces the retired "bold sticker" look (thick black borders + hard offset shadows, 2026-06-03..06-09) with the same soft modern surface mobile already uses, tuned slightly for desktop: hairline borders, layered soft shadows, gentle hover lift. The html prefix is kept so these beat each page's leftover inline #calaiPage rules. ============================================================ */ @media (min-width: 769px) { html #calaiPage .card, html #calaiPage .modal-box, html #calaiPage .stat-card, html #calaiPage .glass-card, html #calaiPage .info-card, html #calaiPage .dash-card, html #calaiPage .habit-card, html #calaiPage .preset-card, html #calaiPage .hab-week-strip, html #calaiPage .task-card, html #calaiPage .cat-card, html #calaiPage .chart-card, html #calaiPage .history-card, html #calaiPage .overdue-card, html #calaiPage .sch-chooser-card, html #calaiPage .cal-grid-wrap, html #calaiPage .day-panel, html #calaiPage .quick-add-task{ border:1px solid rgba(15,23,42,.07) !important; border-radius:18px !important; box-shadow:0 1px 2px rgba(15,23,42,.03), 0 8px 24px rgba(15,23,42,.05) !important; } html #calaiPage .card:hover, html #calaiPage .stat-card:hover, html #calaiPage .dash-card:hover, html #calaiPage .habit-card:hover, html #calaiPage .task-card:hover, html #calaiPage .cat-card:hover{ box-shadow:0 2px 4px rgba(15,23,42,.04), 0 14px 34px rgba(15,23,42,.08) !important; } html[data-theme="dark"] #calaiPage .card, html[data-theme="dark"] #calaiPage .modal-box, html[data-theme="dark"] #calaiPage .stat-card, html[data-theme="dark"] #calaiPage .glass-card, html[data-theme="dark"] #calaiPage .info-card, html[data-theme="dark"] #calaiPage .dash-card, html[data-theme="dark"] #calaiPage .habit-card, html[data-theme="dark"] #calaiPage .preset-card, html[data-theme="dark"] #calaiPage .hab-week-strip, html[data-theme="dark"] #calaiPage .task-card, html[data-theme="dark"] #calaiPage .cat-card, html[data-theme="dark"] #calaiPage .chart-card, html[data-theme="dark"] #calaiPage .history-card, html[data-theme="dark"] #calaiPage .overdue-card, html[data-theme="dark"] #calaiPage .sch-chooser-card, html[data-theme="dark"] #calaiPage .cal-grid-wrap, html[data-theme="dark"] #calaiPage .day-panel, html[data-theme="dark"] #calaiPage .quick-add-task{ border-color:var(--cal-line) !important; box-shadow:0 2px 12px rgba(0,0,0,.3) !important; } /* Primary buttons → clean ink pill, soft depth */ html #calaiPage .btn-primary, html #calaiPage .btn-accent, html #calaiPage .btn.btn-primary, html #calaiPage .fab, html #calaiPage .primary-btn{ border:none !important; box-shadow:0 4px 14px rgba(0,0,0,.16) !important; } /* Secondary / ghost buttons → quiet white */ html #calaiPage .btn-ghost, html #calaiPage .btn-secondary, html #calaiPage .btn-outline{ border:1px solid rgba(15,23,42,.10) !important; box-shadow:0 1px 2px rgba(15,23,42,.04) !important; } html[data-theme="dark"] #calaiPage .btn-ghost, html[data-theme="dark"] #calaiPage .btn-secondary, html[data-theme="dark"] #calaiPage .btn-outline{ border-color:var(--cal-line) !important; box-shadow:none !important; } /* Top tab bar / segmented control → soft floating bar */ html #calaiPage .gym-tabs, html #calaiPage .seg-control, html #calaiPage .tab-bar{ border:1px solid rgba(15,23,42,.07) !important; box-shadow:0 1px 2px rgba(15,23,42,.03), 0 6px 18px rgba(15,23,42,.05) !important; } html[data-theme="dark"] #calaiPage .gym-tabs, html[data-theme="dark"] #calaiPage .seg-control, html[data-theme="dark"] #calaiPage .tab-bar{ border-color:var(--cal-line) !important; box-shadow:none !important; } /* Icon tiles keep their pastel personality on desktop too (the black-tile override is retired with the sticker look). */ }