/* ===================================================================== POP v2 — Space Grotesk display layer + per-view statement heroes + playful physics (owned by the POP-core build agent, Jul 2 2026). Loads AFTER styles.css / reskin-family.css / reskin-dash.css, so equal-specificity selectors here win. CSS-only overrides — zero markup hooks renamed, app.js untouched (RESKIN-CONTRACT.md). All new class names are namespaced pp- (mount divs are additive index.html insertions; content rendered by js/pop.js). ===================================================================== */ :root{ --pp-display:"Space Grotesk","Hanken Grotesk",system-ui,-apple-system,sans-serif; --pp-ink:#241b26; --pp-ink-2:#3d2e40; --pp-hero-mut:#9b8ba0; --pp-hero-suffix:#6d5c72; --pp-hero-line:#c9b9cf; } /* --------------------------------------------------------------------- 1 · TYPOGRAPHY — Space Grotesk becomes the display face app-wide. Hanken Grotesk stays for body/UI. Fraunces survives ONLY as the Home affirmation line (#view-home .skippy-text.hm-affirm keeps var(--serif) at higher specificity in styles.css — deliberately not overridden here). --------------------------------------------------------------------- */ h1,h2,h3, .hm-greet2, .skippy-text,.skippy-name, .hm-stat-num,.hm-biz-num, .hc-score-big .num,.hc-food-top .v2, .dc-m .val,.dc-gz .gznum,.dc-dcard .dval,.dc-prio .rk, .cyc-ph .cpname,.mk-name,.mk-val,.dc-chathead .av, .sk-who,.sk-hub-greet,.sk-hub-tt, .day-cell .dnum{ font-family:var(--pp-display); } /* View titles: Space Grotesk 700, upright (replaces the Fraunces italic) */ .topbar h1{ font-family:var(--pp-display);font-style:normal;font-weight:700; letter-spacing:-0.03em; } /* Greeting display line — big, bold, upright, still plum */ .hm-greet2{font-style:normal;font-weight:700;letter-spacing:-0.02em;} /* Big stat numbers get display tracking */ .hm-stat-num,.hm-biz-num{letter-spacing:-0.03em;} /* Higher-specificity re-declarations (earlier files set these with an id) */ #view-calendar .day-cell .dnum{font-family:var(--pp-display);} #view-business .biz-kpi .val{font-family:var(--pp-display);letter-spacing:-0.02em;} #view-health .dc-m .val{font-family:var(--pp-display);} #view-health .hc-score-big .num, #view-health .dc-gz .gznum, #view-health .dc-dcard .dval, #view-health .hc-food-top .v2{font-family:var(--pp-display);font-style:normal;} /* Health inner-voice quote loses Fraunces too (Fraunces = affirmation only) */ #view-health .hc-feedback .quote{font-family:var(--pp-display);font-style:normal;} /* Skippy School hub display line — upright Space Grotesk (italic was Fraunces-era) */ #view-skippy .skippy-text{font-style:normal;font-weight:700;letter-spacing:-0.02em;} /* --------------------------------------------------------------------- 2 · HERO MOUNTS — additive divs; empty until js/pop.js renders, collapsed before that (no phantom margin flash). --------------------------------------------------------------------- */ .pp-mount{margin:14px 18px 0;} .pp-mount:empty{display:none;margin:0;} /* Calendar's mounts live INSIDE main.page (already 18px-padded) */ #view-calendar .pp-mount{margin:6px 0 0;} #pp-upnext-cal{margin-top:14px;} @media (min-width:900px){ #view-todo .pp-mount,#view-shopping .pp-mount,#view-finances .pp-mount{ max-width:760px;margin-left:auto;margin-right:auto;padding:0 36px; } } /* --------------------------------------------------------------------- 3 · DARK STATEMENT HERO (To-Do · Shopping · Finances) — ink card, overlapping organic circles bleeding off the top-right corner. --------------------------------------------------------------------- */ .pp-hero{ position:relative;overflow:hidden; background:var(--pp-ink);border-radius:28px;padding:20px; color:#f6efe3; } .pp-hero::before,.pp-hero::after{ content:"";position:absolute;border-radius:50%;pointer-events:none; opacity:.9; } .pp-hero::before{width:150px;height:150px;background:#d99a3a;top:-58px;right:-44px;} .pp-hero::after{width:86px;height:86px;background:#b9603c;top:24px;right:-32px;} .pp-hero > *{position:relative;z-index:1;} .pp-eyebrow{ font-size:12px;font-weight:600;color:var(--pp-hero-mut); letter-spacing:1px;text-transform:uppercase; } .pp-stat{ font-family:var(--pp-display);font-size:54px;font-weight:700; color:#f6efe3;letter-spacing:-0.04em;line-height:1;margin-top:10px; font-variant-numeric:tabular-nums; } .pp-stat .pp-suffix{ font-size:18px;font-weight:500;color:var(--pp-hero-suffix); letter-spacing:0;margin-left:6px; } .pp-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px;} .pp-pills[hidden]{display:none;} .pp-pill{width:34px;height:8px;border-radius:4px;background:#3d2e40;flex:0 1 34px;} .pp-pill.done{background:#8f9d6f;} .pp-line{font-size:13px;font-weight:600;color:var(--pp-hero-line);margin-top:12px;} .pp-line[hidden]{display:none;} .pp-line .pp-star{color:#d99a3a;} /* All-clear celebration state: sage-tinted ink, message replaces the count */ .pp-hero.pp-clear{background:#2e3626;} .pp-hero.pp-clear::before{background:#8f9d6f;} .pp-hero.pp-clear::after{background:#d99a3a;} .pp-hero.pp-clear .pp-stat{ font-size:24px;letter-spacing:-0.02em;line-height:1.25;max-width:82%; } .pp-hero.pp-clear .pp-line{color:#cbd4b4;} /* --------------------------------------------------------------------- 4 · CALENDAR — light on-page hero (cream, NOT ink) + clay UP NEXT banner --------------------------------------------------------------------- */ .pp-calhero{padding:2px 4px 0;} .pp-cal-eyebrow{ font-size:12px;font-weight:600;color:var(--muted); letter-spacing:1px;text-transform:uppercase; } .pp-cal-line{display:flex;align-items:baseline;gap:10px;margin-top:6px;} .pp-cal-day{ font-family:var(--pp-display);font-size:34px;font-weight:700; color:var(--text);letter-spacing:-0.03em;line-height:1.05; } .pp-cal-num{ font-family:var(--pp-display);font-size:38px;font-weight:700;line-height:1; color:transparent;-webkit-text-stroke:2px #b9603c;letter-spacing:0; } @supports not (-webkit-text-stroke:2px #b9603c){ .pp-cal-num{color:#b9603c;} /* stroke unsupported → solid clay numeral */ } .pp-cal-sub{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px;} /* Clay UP NEXT banner — the calendar's dark moment, organic lighter-clay circles */ .pp-upnext{ position:relative;overflow:hidden;display:block; background:#b9603c;border-radius:24px;padding:18px 20px; color:#fff7ef;transition:transform .12s ease; } .pp-upnext:active{transform:scale(0.97);} .pp-upnext::before,.pp-upnext::after{ content:"";position:absolute;border-radius:50%;pointer-events:none; } .pp-upnext::before{width:130px;height:130px;background:#c97a52;opacity:.55;top:-52px;right:-36px;} .pp-upnext::after{width:74px;height:74px;background:#dc9a72;opacity:.5;top:26px;right:-26px;} .pp-upnext > *{position:relative;z-index:1;} .pp-up-eyebrow{ font-size:12px;font-weight:600;color:#f3ddc9; letter-spacing:1px;text-transform:uppercase; } .pp-up-title{ font-family:var(--pp-display);font-size:22px;font-weight:700; color:#fff7ef;letter-spacing:-0.02em;margin-top:6px;line-height:1.15; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pp-up-sub{font-size:13px;font-weight:600;color:#f3c9ae;margin-top:3px;} .pp-up-sub:empty{display:none;} /* --------------------------------------------------------------------- 5 · COLORED CALENDAR EVENTS — the mockup rotation replaces reskin-family's all-white .cal-block treatment. Color IS the identity, so the clay inset bar (::before) goes. Past events keep their fade (.cal-block-past never carries a cal-c class — app.js line 1364). --------------------------------------------------------------------- */ #view-calendar .cal-block.cal-c1, #view-calendar .cal-block.cal-c2, #view-calendar .cal-block.cal-c3, #view-calendar .cal-block.cal-c4{ box-shadow:none;padding-left:14px; } #view-calendar .cal-block.cal-c1::before, #view-calendar .cal-block.cal-c2::before, #view-calendar .cal-block.cal-c3::before, #view-calendar .cal-block.cal-c4::before{display:none;} #view-calendar .cal-block.cal-c1{background:#e9ddf1;} #view-calendar .cal-block.cal-c1 .cal-block-title{color:#46255c;} #view-calendar .cal-block.cal-c1 .cal-block-time{color:#8a6d9c;} #view-calendar .cal-block.cal-c2{background:#f6e3bd;} #view-calendar .cal-block.cal-c2 .cal-block-title{color:#5f4407;} #view-calendar .cal-block.cal-c2 .cal-block-time{color:#a0812f;} #view-calendar .cal-block.cal-c3{background:#f3d9cc;} #view-calendar .cal-block.cal-c3 .cal-block-title{color:#6e3018;} #view-calendar .cal-block.cal-c3 .cal-block-time{color:#a05f42;} #view-calendar .cal-block.cal-c4{background:#e2e8d2;} #view-calendar .cal-block.cal-c4 .cal-block-title{color:#3f4d28;} #view-calendar .cal-block.cal-c4 .cal-block-time{color:#7c8b5c;} /* --------------------------------------------------------------------- 6 · BUSINESS — restrained POP: no ink hero (data-dense view). The FIRST KPI card (Weekly revenue) gets the organic-circle treatment as soft tints via layered radial gradients (pseudo-elements are taken by the status dot in reskin-dash.css — background-image is the clean slot). --------------------------------------------------------------------- */ #view-business .biz-kpis .biz-kpi:first-child{ background-image: radial-gradient(circle 64px at 104% -14%, rgba(217,154,58,0.30), transparent 70%), radial-gradient(circle 40px at 86% -4%, rgba(185,96,60,0.22), transparent 70%); background-repeat:no-repeat; } /* --------------------------------------------------------------------- 7 · PLAYFUL LAYER — press physics + checkbox pop + confetti pieces --------------------------------------------------------------------- */ /* Press compression on every tappable card/tile/chip/row (Home tiles already compress via styles.css .hm-* rules) */ .td-prio,.biz-kpi,.day-cell,.dc-m,.sk-kidcard,.sk-hub-card,.rep-link, .seg-btn,.hp-btn,.dc-rangebar button,.tab,.biz-flag,.dc-gz{ transition:transform .12s ease; } .td-prio:active,.biz-kpi:active,.day-cell:active,.dc-m:active, .sk-kidcard:active,.sk-hub-card:active,.rep-link:active, .seg-btn:active,.hp-btn:active,.dc-rangebar button:active,.tab:active, .biz-flag:active,.dc-gz:active{ transform:scale(0.97); } /* Checkbox spring — fires when app.js toggles .chk-done / li.done */ @keyframes ppPop{ 0%{transform:scale(0.55);} 55%{transform:scale(1.18);} 100%{transform:scale(1);} } .td-prio.chk-done .chk, .dc-prio.chk-done .chk{animation:ppPop .32s cubic-bezier(.34,1.56,.64,1);} .dc-protocol-list li.done .pchk{animation:ppPop .32s cubic-bezier(.34,1.56,.64,1);} /* Confetti (26 pieces, injected by js/pop.js inside the celebrating hero) */ .pp-confetti{ position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3; } .pp-cf{ position:absolute;top:-12px;width:8px;height:8px;display:block; animation:ppFall .9s ease-in forwards; } @keyframes ppFall{ to{transform:translateY(240px) rotate(540deg);opacity:0;} } /* --------------------------------------------------------------------- 8 · REDUCED MOTION — kill the physics, keep the content --------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .td-prio.chk-done .chk,.dc-prio.chk-done .chk, .dc-protocol-list li.done .pchk{animation:none;} .pp-cf{animation:none;display:none;} .td-prio:active,.biz-kpi:active,.day-cell:active,.dc-m:active, .sk-kidcard:active,.sk-hub-card:active,.rep-link:active, .seg-btn:active,.hp-btn:active,.dc-rangebar button:active,.tab:active, .biz-flag:active,.dc-gz:active,.pp-upnext:active{transform:none;} }