/* ===================================================================== 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;} } /* --------------------------------------------------------------------- 9 · COMPONENT PARITY (polish pass, Jul 2 2026) — roll the mockup language into EVERY Health + Business element. Nick: "the elements in the health tracker and business tracker are largely the same save the headers... I expect these updates to roll out across the board." CSS-only where possible; the pp- decorator in js/pop.js supplies the hooks CSS can't reach (initials squares, flag icon squares, lv-level classes to beat inline styles, leading-emoji strip). Applies at ALL widths — mobile verified at 390. --------------------------------------------------------------------- */ /* ---- 9a · HEALTH priorities (.dc-prio, all hp panels) — kill the red left bars → floating white cards radius 20 + shadow-card; the number becomes a 28px plum-tinted circle badge; HIGH/MED/LOW pills → chip recipe (clay/gold/sage 15% tints, matching -ink text). The pp-lv-* classes come from the decorator because app markup carries inline colors (rgba(251,113,133,.16)/#c04040 etc.) — !important is genuinely required to beat those inline styles. ---- */ #view-health .card:has(> .dc-prio){ background:transparent;border:none;box-shadow:none; padding:0 2px !important; /* inline padding:6px 19px on the container */ } #view-health .dc-prio{ background:var(--card);border:none;border-left:none;border-radius:20px; box-shadow:var(--shadow-card);padding:14px 16px;margin-bottom:10px; gap:12px;align-items:flex-start; } #view-health .dc-prio .rk{ font-family:var(--pp-display);font-weight:700;font-size:13px;font-style:normal; flex:0 0 28px;width:28px;height:28px;min-width:0;border-radius:50%; background:#e9ddf1;color:#46255c; display:flex;align-items:center;justify-content:center; } #view-health .dc-prio .pt{font-size:14px;font-weight:600;color:var(--text);} #view-health .dc-prio .pw{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;} #view-health .dc-prio .lv{ border-radius:999px;padding:3px 10px;font-size:10px;letter-spacing:.05em; } #view-health .lv.pp-lv-high{background:rgba(185,96,60,.15) !important;color:#a3452a !important;} #view-health .lv.pp-lv-med{background:rgba(217,154,58,.15) !important;color:#95651c !important;} #view-health .lv.pp-lv-low{background:rgba(143,157,111,.15) !important;color:#5a7a52 !important;} /* Nested "Pending tests" details inside the priorities card — the inline cyan-lilac border-left tile joins the language: lilac tile, radius 16, no straight left border (inline style ⇒ !important required). */ #view-health details.hc-details[style*="8b7cff"]{ background:rgba(233,221,241,.5) !important;border-left:none !important; border-radius:16px;padding:12px 14px; } #view-health details.hc-details[style*="8b7cff"] summary{font-weight:600;} /* ---- 9b · HEALTH experiments — butter-tinted tiles, radius 18, eyebrow-styled "since" dates, Space Grotesk titles. The wrapping .dc-exgrid card dissolves so the tiles float on the cream page (inline padding:14px ⇒ !important). ---- */ #view-health .card.dc-exgrid{ background:transparent;border:none;box-shadow:none;padding:0 2px !important; } #view-health .dc-exp{ background:rgba(246,227,189,.45);border:none;border-radius:18px; padding:14px 15px; } #view-health .dc-exp .ex-nm{ font-family:var(--pp-display);font-size:13px;font-weight:600;color:#5f4407; } #view-health .dc-exp .ex-since{ font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase; color:#a0812f; } #view-health .dc-exp .ex-w{color:#7d6a3f;} /* ---- 9c · HEALTH protocol summary bar — proper white card with a 36px sage icon square (checklist glyph) + chevron. Open state keeps the dark-sage behavior from reskin-dash. padding/color carry !important in styles.css, so the overrides must too (later file wins the tie). ---- */ #view-health .dc-protocol-summary{ display:flex;align-items:center;gap:12px;list-style:none; background:var(--card);border-radius:20px;margin:8px 0; box-shadow:var(--shadow-card); padding:12px 14px !important; color:var(--text) !important;font-weight:600 !important;font-size:13.5px; } #view-health .dc-protocol-summary::-webkit-details-marker{display:none;} #view-health .dc-protocol-summary::before{ content:"";flex:0 0 36px;width:36px;height:36px;border-radius:12px; background:rgba(143,157,111,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a7a52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12.5l2.6 2.6L16.5 9'/%3E%3C/svg%3E") center/18px 18px no-repeat; } #view-health .dc-protocol-summary .chev{margin-left:auto;color:var(--sage);} #view-health .dc-protocol-details[open] .dc-protocol-summary{ background:var(--tile-sage-ink);color:#eef3e2 !important; } #view-health .dc-protocol-details[open] .dc-protocol-summary::before{ background-color:rgba(255,255,255,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8d2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12.5l2.6 2.6L16.5 9'/%3E%3C/svg%3E"); } #view-health .dc-protocol-details[open] .dc-protocol-summary .chev{color:var(--tile-sage);} /* ---- 9d · HEALTH sweep — remaining pre-mockup accents: cards that carry an inline cyan/gold border-left (Insights etc.) lose the straight edge and get a rounded inset sage bar instead (health domain color). Inline style ⇒ !important required, same pattern reskin-family used on Finances. ---- */ #view-health .card[style*="border-left"]{border-left:none !important;position:relative;} #view-health .card[style*="border-left"]::before{ content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px; border-radius:2px;background:var(--sage); } /* ---- 9e · BUSINESS "Needs your judgment" flags — 36px status-tinted icon square (flag glyph, stroke 1.8 currentColor — injected by the decorator) + the status dot survives as a ringed badge on the square's corner. Layout rules only apply once decorated ([data-pp-done]) so an undecorated card (JS failed) keeps its previous good layout. ---- */ #view-business .biz-flag[data-pp-done]{ padding:14px 16px 14px 64px; } #view-business .biz-flag .pp-flagsq{ position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(217,154,58,.15);color:#95651c; } #view-business .biz-flag.urgent .pp-flagsq{background:rgba(185,96,60,.15);color:#a3452a;} #view-business .biz-flag.watch .pp-flagsq{background:rgba(143,157,111,.15);color:#5a7a52;} #view-business .biz-flag .pp-flagsq svg{width:18px;height:18px;} /* status dot → badge riding the icon square's top-right corner */ #view-business .biz-flag[data-pp-done]::before{ left:44px;top:10px;box-shadow:0 0 0 2px var(--card); } #view-business .biz-flag[data-pp-done] .ttl{font-size:14px;font-weight:600;} #view-business .biz-flag[data-pp-done] .meta{font-size:12px;} /* ---- 9e-health · the Health-view "Read first" callout (Chantelle's Cycle & hormone optimizer) reuses .biz-flag, so pop.js injects the same .pp-flagsq icon square + flag . The sizing/position rules above are #view-business-scoped ONLY, so in #view-health the svg was unconstrained and blew up to full column width (Nick's live report). Mirror the icon- square treatment here so the flag renders as a 36px square with an 18px glyph. position:relative is set explicitly (the static markup lacks the inline position the live business flags carry). ---- */ #view-health .biz-flag[data-pp-done]{position:relative;padding:14px 16px 14px 64px;} #view-health .biz-flag .pp-flagsq{ position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:rgba(217,154,58,.15);color:#95651c; } #view-health .biz-flag.urgent .pp-flagsq{background:rgba(185,96,60,.15);color:#a3452a;} #view-health .biz-flag.watch .pp-flagsq{background:rgba(143,157,111,.15);color:#5a7a52;} #view-health .biz-flag .pp-flagsq svg{width:18px;height:18px;flex:0 0 18px;} /* ---- 9f · BUSINESS watchlist — proper list-group rows: 32px initials square (decorator-injected .pp-avsq), inline dot hidden (the pill already carries status), status pill on the chip recipe, name pushes the pill to the row's right edge. The reason line's inline padding-left:16px indented under a dot that no longer exists ⇒ !important to realign it with the name. ---- */ #view-business #ov-watch .biz-watch-item[data-pp-done]{ position:relative;padding:12px 2px 12px 43px; } #view-business #ov-watch .pp-avsq{ position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:12px; background:var(--chip-bg);color:var(--tile-butter-ink); font-family:var(--pp-display);font-size:11px;font-weight:700;letter-spacing:.02em; display:flex;align-items:center;justify-content:center; } #view-business #ov-watch .biz-watch-item .nm{flex:1;min-width:0;font-size:13px;font-weight:600;} #view-business #ov-watch .biz-watch-item[data-pp-done] .nm .dot{display:none;} #view-business #ov-watch .biz-watch-item .st{ border-radius:999px;padding:3px 10px;font-size:10px;letter-spacing:.04em; align-self:center;white-space:nowrap; } #view-business #ov-watch .biz-watch-item[data-pp-done] > div[style*="padding-left"]{ padding-left:0 !important; } /* ---- 9g · BUSINESS number sweep — Space Grotesk on the remaining figures (waterfall values, table numerics). KPI .val already covered in §1, which also hits the Finance-tab #biz-fkpis tiles. ---- */ #view-business .wf .v, #view-business td.num{font-family:var(--pp-display);font-variant-numeric:tabular-nums;} /* --------------------------------------------------------------------- 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;} } /* --------------------------------------------------------------------- 10 · DUE-DATE EDIT CHIPS (pp-date-*, Jul 2 2026) — decorator-injected by js/pop.js onto app.js's To-Do rows (all three panels). Chip recipe (11px/600, pill), gold tint when due today, clay when overdue — mirrors the row's own .td-today/.td-overdue accents. The invisible native