/* ============================================================================ KING FAMILY HUB — REDESIGN LAYER (drop-in) Load AFTER styles.css. Pair with redesign.js. • Re-skins every existing page by overriding your CSS variables • Adds light/dark via • Adds the sidebar shell + the new Home "Command Center" (scoped under .cc) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=JetBrains+Mono:wght@500;600;700&display=swap'); /* ============================================================================ 1 · TOKENS — new design language + remap of your legacy variable names ========================================================================== */ :root { --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Newsreader', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius: 12px; --radius-sm: 9px; --radius-pill: 999px; --sidebar-w: 248px; /* new semantic tokens */ --bg: #f4f2ec; --bg-2: #ece9e1; --surface: #ffffff; --surface-2: #fbfaf7; --ink: #1c2330; --ink-soft: #5b6577; --ink-faint: #919aab; --line: #e6e2d8; --line-strong:#d8d3c7; --accent: oklch(0.50 0.10 250); --accent-ink: oklch(0.40 0.12 250); --accent-soft: oklch(0.93 0.04 250); --shadow-sm: 0 1px 2px rgba(28,35,48,.05), 0 1px 3px rgba(28,35,48,.04); --shadow-md: 0 2px 6px rgba(28,35,48,.06), 0 8px 24px rgba(28,35,48,.06); --shadow-lg: 0 12px 40px rgba(20,30,50,.16); /* ---- remap your existing variables so legacy pages re-skin automatically ---- */ --navy: #163350; --blue: oklch(0.50 0.10 250); --light-blue: oklch(0.93 0.04 250); --green: oklch(0.50 0.11 150); --light-green: oklch(0.94 0.04 150); --yellow: oklch(0.50 0.10 70); --light-yellow: oklch(0.95 0.05 80); --red: oklch(0.52 0.17 22); --light-red: oklch(0.95 0.04 22); --orange: oklch(0.58 0.13 55); --light-orange: oklch(0.95 0.05 60); --purple: oklch(0.50 0.14 290); --light-purple: oklch(0.95 0.04 290); --teal: oklch(0.50 0.09 195); --light-teal: oklch(0.94 0.04 195); --gray: #5b6577; --border: #e6e2d8; --white: #ffffff; --light: #f4f2ec; } html[data-theme="dark"] { color-scheme: dark; --bg: #0c111b; --bg-2: #0a0f17; --surface: #141b27; --surface-2: #19212f; --ink: #e8ecf3; --ink-soft: #9aa6b8; --ink-faint: #5f6b7e; --line: #232c3b; --line-strong:#2e394a; --accent: oklch(0.72 0.11 250); --accent-ink: oklch(0.82 0.10 250); --accent-soft: oklch(0.30 0.06 250); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.4); --shadow-lg: 0 16px 48px rgba(0,0,0,.6); --navy: #0c1622; --blue: oklch(0.72 0.12 250); --light-blue: oklch(0.30 0.06 250); --green: oklch(0.74 0.13 150); --light-green: oklch(0.30 0.06 150); --yellow: oklch(0.80 0.13 75); --light-yellow: oklch(0.32 0.06 75); --red: oklch(0.72 0.16 22); --light-red: oklch(0.30 0.07 22); --orange: oklch(0.76 0.13 55); --light-orange: oklch(0.32 0.06 55); --purple: oklch(0.74 0.13 290); --light-purple: oklch(0.31 0.06 290); --teal: oklch(0.74 0.09 195); --light-teal: oklch(0.28 0.05 195); --gray: #9aa6b8; --border: #232c3b; --white: #141b27; --light: #19212f; } html { background: var(--bg); } body { font-family: var(--font-ui) !important; background: var(--bg) !important; color: var(--ink); padding-left: var(--sidebar-w); -webkit-font-smoothing: antialiased; } /* ============================================================================ 2 · LEGACY POLISH — light touches so existing pages feel premium ========================================================================== */ .card { border: 1px solid var(--line); border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; background: var(--surface); } .card-header { border-bottom: 1px solid var(--line); } .card-header h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; text-transform: none; font-size: 15px; color: var(--ink); } .stat-box { border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); background: var(--surface); } .stat-box .num { font-family: var(--font-mono); letter-spacing: -.02em; } .page-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .page-header { border-bottom: 1px solid var(--line); } .email-table th { background: var(--surface-2); color: var(--ink-faint); border-bottom-color: var(--line); } .email-table td { border-bottom-color: var(--line); color: var(--ink); } .email-table tr:hover td { background: var(--bg-2); } .progress-bar { background: var(--bg-2); } .footer { background: var(--surface); border-top-color: var(--line); color: var(--ink-faint); } .main { color: var(--ink); } /* ============================================================================ 3 · SIDEBAR (#nav re-skinned into a fixed left rail by redesign.js markup) ========================================================================== */ #nav { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 200; } .kfh-side { width: var(--sidebar-w); height: 100vh; background: var(--navy); border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; padding: 20px 14px 16px; --ink: #e9edf4; --ink-soft: #9fb0c6; --ink-faint: #6c7d95; } .kfh-brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 18px; } .kfh-crest { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 17px; } .kfh-brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; line-height: 1.05; white-space: nowrap; } .kfh-brand-name small { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; } .kfh-group { margin-top: 14px; } .kfh-group-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: 0 12px 7px; } .kfh-navlink { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .14s, color .14s; } .kfh-navlink .kfh-navtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kfh-navlink svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; } .kfh-navlink:hover { background: rgba(255,255,255,.05); color: #fff; } .kfh-navlink.active { background: var(--accent); color: #fff; } .kfh-navlink.active svg { opacity: 1; } .kfh-navlink .kfh-lock { margin-left: auto; opacity: .55; display: flex; } .kfh-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 12px; } .kfh-theme-btn { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .14s; width: 100%; } .kfh-theme-btn:hover { background: rgba(255,255,255,.06); color: #fff; } .kfh-theme-btn svg { width: 17px; height: 17px; } .kfh-who { display: flex; align-items: center; gap: 9px; } .kfh-who-av { display: flex; } .kfh-who-av span { width: 25px; height: 25px; border-radius: 50%; margin-left: -7px; border: 2px solid var(--navy); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; } .kfh-who-av span:first-child { margin-left: 0; } .kfh-who-text { font-size: 11px; color: var(--ink-faint); font-weight: 600; } /* ============================================================================ 4 · COMMAND CENTER (Home) — all scoped under .cc to avoid legacy collisions ========================================================================== */ .cc { max-width: 1480px; margin: 0 auto; padding: clamp(16px, 2.4vw, 28px); } .cc a { text-decoration: none; } /* greeting bar */ .cc-greet { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .cc-greet h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.05; color: var(--ink); white-space: nowrap; } .cc-greet .cc-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; font-weight: 500; } .cc-greet .cc-sub b { color: var(--ink); font-weight: 700; } .cc-greet .cc-spacer { flex: 1; } .cc-clock { text-align: right; white-space: nowrap; } .cc-clock .t { font-family: var(--font-mono); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink); } .cc-clock .d { font-size: 11px; color: var(--ink-faint); font-weight: 600; } /* segmented control */ .cc .seg { display: inline-flex; gap: 3px; padding: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-pill); } .cc .seg button { padding: 7px 16px; border-radius: var(--radius-pill); font-weight: 600; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; transition: all .14s; } .cc .seg button .seg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .cc .seg button.active { background: var(--accent); color: #fff; } .cc-seg-row { margin-bottom: 18px; } /* bento + stats */ .cc .bento { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); align-items: start; } .cc .col-7 { grid-column: span 7; } .cc .col-5 { grid-column: span 5; } .cc .col-12 { grid-column: span 12; } .cc .statbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; } .cc .weekbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } .cc .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .cc .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--accent)); } .cc .stat .sv { font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--c, var(--ink)); } .cc .stat .sl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; } .cc .stat.c-red{--c:var(--red);} .cc .stat.c-orange{--c:var(--orange);} .cc .stat.c-teal{--c:var(--teal);} .cc .stat.c-purple{--c:var(--purple);} .cc .stat.c-green{--c:var(--green);} /* card (scoped) */ .cc .cc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; } .cc .cc-hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); } .cc .cc-hd .ci { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-2); color: var(--ink-soft); } .cc .cc-hd .ci svg { width: 17px; height: 17px; } .cc .cc-hd h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.005em; flex: 1; min-width: 0; color: var(--ink); } .cc .cc-hd .hd-meta { font-size: 11px; color: var(--ink-faint); font-weight: 600; } .cc .cc-hd .hd-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent); padding: 4px 9px; border-radius: 7px; } .cc .cc-hd .hd-link:hover { background: var(--accent-soft); } .cc .cc-hd .hd-link svg { width: 13px; height: 13px; } .cc .clear-link { cursor: pointer; text-decoration: underline; } .cc .cc-bd { padding: 16px; } .cc .cc-bd.scroll { overflow-y: auto; max-height: var(--card-max, 420px); } .cc .cc-bd::-webkit-scrollbar { width: 8px; } .cc .cc-bd::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; } /* hero */ .cc .hero { background: linear-gradient(150deg, var(--navy) 0%, #0a121c 70%); color: #fff; border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); } .cc .hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%); opacity: .5; } .cc .hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 11px; } .cc .hero-eyebrow svg { width: 15px; height: 15px; } .cc .hero-summary { font-family: var(--font-display); font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; color: rgba(255,255,255,.94); position: relative; margin-bottom: 12px; } .cc .hero-summary em { font-style: italic; color: #fff; } .cc .hero-risk { font-size: 11.5px; color: rgba(255,255,255,.62); line-height: 1.5; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.1); } .cc .hero-risk b { color: #fdd; font-weight: 700; } .cc .hero-actions { display: flex; flex-direction: column; gap: 8px; position: relative; } .cc .ha-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 2px; } .cc .ha-chip { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); cursor: pointer; text-align: left; width: 100%; transition: background .14s; } .cc .ha-chip:hover { background: rgba(255,255,255,.13); } .cc .ha-chip .ha-rank { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; } .cc .ha-chip .ha-text { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: rgba(255,255,255,.92); } .cc .ha-chip .ha-arrow { margin-left: auto; opacity: .5; } .cc .ha-chip .ha-arrow svg { width: 15px; height: 15px; } /* section labels + rows */ .cc .section-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 7px; margin: 4px 0 10px; } .cc .section-label:not(:first-child) { margin-top: 18px; } .cc .clear-link { margin-left: auto; font-size: 10px; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-weight: 500; } .cc .clear-link:hover { color: var(--ink); } .cc .row { display: flex; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 8px; cursor: pointer; align-items: flex-start; transition: background .12s, opacity .15s; } .cc .row:hover { background: var(--bg-2); } .cc .row:last-child { margin-bottom: 0; } .cc .row .check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; color: transparent; transition: all .14s; } .cc .row .check svg { width: 13px; height: 13px; } .cc .row:hover .check { border-color: var(--accent); } .cc .row.done .check { background: var(--green); border-color: var(--green); color: #fff; } .cc .row.done { opacity: .5; } .cc .row.done .r-title { text-decoration: line-through; } .cc .r-body { flex: 1; min-width: 0; } .cc .r-title { font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.35; } .cc .r-desc { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; } .cc .r-rank { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); margin-top: 1px; } .cc .r-rank.work { background: var(--teal); } .cc .row.prio { border-left: 3px solid var(--accent); } .cc .row.prio.work { border-left-color: var(--teal); } /* conflicts */ .cc .conflict { border-radius: var(--radius-sm); padding: 12px 13px; margin-bottom: 9px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: var(--cs); cursor: pointer; position: relative; transition: opacity .15s; } .cc .conflict.hard, .cc .conflict.work-conf { --c: var(--red); --cs: var(--light-red); } .cc .conflict.soft, .cc .conflict.check { --c: var(--orange); --cs: var(--light-orange); } .cc .conflict .cf-title { font-weight: 700; font-size: 12.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .cc .conflict .cf-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; } .cc .conflict p { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; } .cc .conflict.done { opacity: .45; } .cc .conflict.done .cf-title { text-decoration: line-through; } .cc .conflict .cf-check { position: absolute; top: 11px; right: 11px; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--c); display: grid; place-items: center; color: transparent; } .cc .conflict.done .cf-check { background: var(--c); color: #fff; } .cc .conflict .cf-check svg { width: 11px; height: 11px; } /* email triage */ .cc .tabbar { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); } .cc .tabbar button { padding: 11px 4px; margin-right: 16px; font-weight: 600; font-size: 12.5px; color: var(--ink-faint); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px; cursor: pointer; } .cc .tabbar button.active { color: var(--ink); border-bottom-color: var(--accent); } .cc .tabbar button .tcount { font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--bg-2); color: var(--ink-soft); padding: 1px 6px; border-radius: var(--radius-pill); } .cc .mail { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; align-items: flex-start; border: 1px solid transparent; transition: background .12s; } .cc .mail:hover { background: var(--bg-2); border-color: var(--line); } .cc .mail .check { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; color: transparent; margin-top: 2px; } .cc .mail .check svg { width: 12px; height: 12px; } .cc .mail.done .check { background: var(--green); border-color: var(--green); color: #fff; } .cc .mail.done { opacity: .45; } .cc .mail.done .m-subj { text-decoration: line-through; } .cc .m-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; } .cc .m-dot.urgent { background: var(--red); } .cc .m-dot.action { background: var(--orange); } .cc .m-dot.fyi { background: var(--blue); } .cc .m-body { flex: 1; min-width: 0; } .cc .m-subj { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.35; } .cc .m-meta { font-size: 11px; color: var(--ink-faint); margin-top: 2px; } .cc .m-action { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; } /* badges (scoped) */ .cc .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; white-space: nowrap; } .cc .pill.red{background:var(--light-red);color:var(--red);} .cc .pill.orange,.cc .pill.amber,.cc .pill.yellow{background:var(--light-orange);color:var(--orange);} .cc .pill.green{background:var(--light-green);color:var(--green);} .cc .pill.blue{background:var(--light-blue);color:var(--accent-ink);} .cc .pill.teal{background:var(--light-teal);color:var(--teal);} .cc .pill.purple{background:var(--light-purple);color:var(--purple);} /* empty state */ .cc .empty-done { text-align: center; padding: 26px 16px; color: var(--green); font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cc .empty-done .ed-ring { width: 44px; height: 44px; border-radius: 50%; background: var(--light-green); color: var(--green); display: grid; place-items: center; } .cc .empty-done .ed-ring svg { width: 24px; height: 24px; } /* timeline */ .cc .daygroup { margin-bottom: 20px; } .cc .daygroup:last-child { margin-bottom: 0; } .cc .day-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; } .cc .day-head .dh-day { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); } .cc .day-head.is-today .dh-day { color: var(--accent); } .cc .day-head .dh-rule { flex: 1; height: 1px; background: var(--line); } .cc .day-head .dh-count { font-size: 11px; font-weight: 700; color: var(--ink-faint); font-family: var(--font-mono); } .cc .tl-event { display: flex; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); align-items: flex-start; transition: background .12s; } .cc .tl-event:hover { background: var(--bg-2); } .cc .tl-time { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-soft); min-width: 74px; flex-shrink: 0; padding-top: 1px; } .cc .tl-spine { width: 9px; flex-shrink: 0; padding-top: 4px; } .cc .tl-spine .tl-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--src, var(--accent)); background: var(--surface); } .cc .tl-event.conflict-ev .tl-dot { background: var(--red); border-color: var(--red); } .cc .tl-icon { font-size: 15px; flex-shrink: 0; line-height: 1.2; } .cc .tl-body { flex: 1; min-width: 0; } .cc .tl-title { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.35; } .cc .tl-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; } .cc .src-chip { font-size: 8.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-right: 6px; } .cc .src-chip.work { background: var(--light-teal); color: var(--teal); } .cc .src-chip.family { background: var(--light-blue); color: var(--accent-ink); } /* meal mini */ .cc .meal-tonight { display: flex; gap: 14px; align-items: center; } .cc .meal-tonight .mt-emoji { font-size: 34px; } .cc .meal-tonight .mt-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--ink); } .cc .meal-tonight .mt-badges { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; } .cc .meal-tip { font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin-top: 10px; line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--line); } /* toast */ #kfh-toast { position: fixed; bottom: 20px; right: 20px; z-index: 400; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; color: #fff; background: var(--green); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: all .3s; pointer-events: none; display: flex; align-items: center; gap: 8px; } #kfh-toast.show { opacity: 1; transform: translateY(0); } #kfh-toast svg { width: 15px; height: 15px; } /* ============================================================================ 5 · RESPONSIVE ========================================================================== */ @media (max-width: 1100px) { .cc .hero { grid-template-columns: 1fr; gap: 16px; } .cc .statbar { grid-template-columns: repeat(3, 1fr); } .cc .col-7, .cc .col-5 { grid-column: span 12; } } @media (max-width: 820px) { body { padding-left: 0; padding-top: 56px; } #nav { inset: 0 0 auto 0; width: 100%; } .kfh-side { width: 100%; height: auto; flex-direction: row; align-items: center; padding: 8px 12px; gap: 4px; overflow-x: auto; } .kfh-brand { padding: 0 8px 0 4px; flex-shrink: 0; } .kfh-brand-name small { display: none; } .kfh-group { margin-top: 0; display: flex; align-items: center; } .kfh-group-label, .kfh-who, .kfh-who-text { display: none; } .kfh-navlink { padding: 8px 10px; white-space: nowrap; } .kfh-navlink .kfh-navtext { display: none; } .kfh-side-foot { margin: 0 0 0 auto; padding: 0; border: none; flex-direction: row; } .kfh-theme-btn span { display: none; } .cc .statbar, .cc .weekbar { grid-template-columns: repeat(2, 1fr); } .cc-clock { display: none; } } @media (max-width: 520px) { .cc .statbar, .cc .weekbar { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================ CALENDAR — view toggle + month grid + agenda polish (added 2026-06-02) ========================================================================== */ .cc .cc-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .cc .seg.seg-view button.active { background: var(--accent); color: #fff; } /* month nav */ .cc .mw-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; } .cc .mw-arrow { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: all .14s; } .cc .mw-arrow:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line-strong); } .cc .mw-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); min-width: 150px; text-align: center; } /* weekday header + grid */ .cc .mdow-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .cc .mdow { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 2px 0; } .cc .mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } /* day cell */ .cc .mcell { position: relative; min-height: 64px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 6px 7px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .cc .mcell.pad { background: transparent; border-color: transparent; } .cc .mcell .mc-num { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .cc button.mcell { cursor: pointer; transition: all .14s; } .cc button.mcell:hover { border-color: var(--line-strong); background: var(--bg-2); box-shadow: var(--shadow-sm); } .cc .mcell.has-ev .mc-num { color: var(--ink); } .cc .mcell.is-today { border-color: var(--accent); background: var(--accent-soft); } .cc .mcell.is-today .mc-num { color: var(--accent-ink); font-weight: 800; } .cc .mcell.has-conf { border-color: var(--red); } .cc .mcell .mc-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; padding-top: 6px; align-items: center; } .cc .mcell .mc-dot { width: 6px; height: 6px; border-radius: 50%; } .cc .mcell .mc-dot.fam { background: var(--accent); } .cc .mcell .mc-dot.work { background: var(--teal); } .cc .mcell .mc-dot.red { background: var(--red); } .cc .mcell .mc-more { font-size: 9px; font-weight: 700; color: var(--ink-faint); font-family: var(--font-mono); } /* legend */ .cc .mlegend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .cc .mlegend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-soft); } .cc .mlegend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* agenda polish — today accent + jump-to-day focus pulse */ .cc .daygroup.today-group { padding-left: 12px; border-left: 3px solid var(--accent); margin-left: -12px; } .cc .daygroup.is-focus { animation: cc-focus 1.6s ease; border-radius: var(--radius-sm); } @keyframes cc-focus { 0%, 35% { background: var(--accent-soft); } 100% { background: transparent; } } @media (max-width: 560px) { .cc .mcell { min-height: 52px; padding: 4px 5px; } .cc .mw-title { font-size: 15px; min-width: 120px; } .cc .cc-controls { justify-content: stretch; } .cc .cc-controls .seg { flex: 1; justify-content: center; } } /* ============================================================================ COMMAND CENTER — actionable KPI tiles (added 2026-06-02) ========================================================================== */ .cc button.stat { font: inherit; color: inherit; text-align: left; width: 100%; display: block; margin: 0; } .cc .stat.is-jump { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease; } .cc .stat.is-jump:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); border-color: var(--line-strong); filter: brightness(1.03); } .cc .stat.is-jump:active { transform: translateY(-1px) scale(.995); box-shadow: var(--shadow-sm); } .cc .stat.is-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* micro-context line under the label — clamps to 2 lines (wraps on narrow tiles) */ .cc .stat .sl-sub { font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cc .stat .stat-go { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; color: var(--ink-faint); opacity: 0; transform: translateX(-3px); transition: opacity .14s, transform .14s; pointer-events: none; } .cc .stat .stat-go svg { width: 16px; height: 16px; display: block; } .cc .stat.is-jump:hover .stat-go, .cc .stat.is-jump:focus-visible .stat-go { opacity: 1; transform: translateX(0); } /* flash the destination card after a tile jump */ .cc .cc-card.cc-flash { animation: cc-card-flash 1.6s ease; } @keyframes cc-card-flash { 0%, 35% { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-md); } 100% { box-shadow: var(--shadow-sm); } }