/* ============================================================= * * PlanOS — Switch home-menu vibe. Usefulness first; the * animation is spring + glow on transform/opacity only (60fps), * and fully disabled under prefers-reduced-motion. * ============================================================= */ :root{ /* PlanOS brand kit v4 — object-only quest/map: blue=route, cyan=checkpoint, green=done, red=landmark/flag. NO yellow (not a core color), no faces, no rainbow. */ --bg:#061226; --surface:#101F3A; --surface2:#17294A; --line:#24395F; --line2:#365389; --txt:#F6F8FF; --muted:#A8B6D1; --faint:#6E7C97; --accent:#2D7CFF; --accent2:#63D4FF; --accent-ink:#ffffff; --accent-soft:rgba(45,124,255,.18); --cyan-soft:rgba(99,212,255,.16); --done:#42C978; --prog:#3b9dff; --block:#FF5A52; --review:#63D4FF; --todo:#8b97ad; --backlog:#6b7790; --cancel:#6b7790; --warn:#FF5A52; --warn-soft:rgba(255,90,82,.15); --r:20px; --r-sm:13px; --r-xs:9px; --sh:0 2px 6px rgba(0,0,0,.30),0 12px 34px rgba(0,0,0,.34); --sh-lg:0 24px 70px rgba(0,0,0,.55); --ring:0 0 0 3px var(--bg),0 0 0 6px var(--accent2); --spring:cubic-bezier(.2,.85,.25,1.15); --ease:cubic-bezier(.3,.7,.3,1); --ff:ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } [data-theme="light"]{ --bg:#e9ecf2; --surface:#ffffff; --surface2:#f1f3f8; --line:#dde1ea; --line2:#c7cdda; --txt:#1a1d24; --muted:#5b6678; --faint:#8a93a6; --accent-soft:rgba(45,124,255,.10); --cyan-soft:rgba(106,203,255,.12); --sh:0 2px 6px rgba(20,26,40,.06),0 12px 30px rgba(20,26,40,.08); --sh-lg:0 24px 60px rgba(20,26,40,.22); --ring:0 0 0 3px var(--bg),0 0 0 6px var(--accent2); --warn-soft:#fdecea; } *{box-sizing:border-box} html,body{height:100%} /* page backdrop lives on so the ambient ferro (#ferroBg, z-index:-1, a child of ) paints ABOVE it yet still below all .app content — else body's own bg box would occlude the z-index:-1 creature and you'd see no creature at all (the classic trap). */ /* FLUID ROOT (Ken 2026-06-30 "everything proportional never fixed"): the root font-size scales with the viewport, so every rem-based size grows/shrinks with the screen. rem here resolves against the browser default (16px), so this is ~13px on small screens → ~16.5px on large. All sizing is rem → all fluid. */ html{font-size:clamp(0.8rem, 0.26vw + 0.72rem, 1.03rem); background: radial-gradient(1200px 600px at 80% -10%,var(--cyan-soft),transparent 60%), radial-gradient(900px 500px at -10% 110%,var(--accent-soft),transparent 55%), var(--bg)} body{margin:0;font-family:var(--ff);background:transparent; color:var(--txt);font-size:0.875rem;-webkit-font-smoothing:antialiased;overflow:hidden} button{font:inherit;cursor:pointer;border:1px solid transparent;border-radius:var(--r-sm);padding:0.5625rem 0.9375rem;background:var(--accent);color:var(--accent-ink);font-weight:700;letter-spacing:.01em;transition:transform .14s var(--spring),filter .14s,box-shadow .16s} button:hover{filter:brightness(1.08);transform:translateY(-1px)} button:active{transform:translateY(1px) scale(.99)} button:focus-visible{outline:none;box-shadow:var(--ring)} button.ghost{background:var(--surface);border-color:var(--line);color:var(--txt);font-weight:600} button.ghost:hover{background:var(--surface2);border-color:var(--line2)} button.subtle{background:transparent;border-color:transparent;color:var(--muted);font-weight:600;padding:0.5rem 0.625rem} button.subtle:hover{background:var(--surface2);color:var(--txt)} button.cyan{background:var(--accent2);color:#05222a} button.sm{padding:0.375rem 0.6875rem;font-size:0.78125rem;border-radius:var(--r-xs)} button:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none} button.danger{background:transparent;border-color:var(--line);color:var(--block)} input,select,textarea{font:inherit;background:var(--surface);color:var(--txt);border:1px solid var(--line);border-radius:var(--r-sm);padding:0.6875rem 0.8125rem;outline:none;width:100%;transition:border-color .14s,box-shadow .14s} input:focus,textarea:focus,select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px var(--cyan-soft)} textarea{resize:vertical;line-height:1.5} svg{display:block} .ic{width:1.125rem;height:1.125rem;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} ::-webkit-scrollbar{width:0.625rem;height:0.625rem}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:2px solid transparent;background-clip:content-box} /* ---- shell ---- */ .app{display:flex;flex-direction:column;height:100vh} /* TEMPORARILY STRIPPED from the topbar (Ken: take away, stabilize, put back later). Remove this one rule to restore them. */ /* #cfgBtn UNHIDDEN 2026-07-04 (Ken: 'On far right on tool bar I want a settings wheel') — the rest of the minimal-topbar hide list stands. */ .conn,#freshBadge,#consoleBtn,#soundBtn,#themeBtn,.topbar .divider{display:none!important} /* Safe-area (WO-A5): the base topbar also respects the notch — matters in native LANDSCAPE (width > the 640 mobile breakpoint but left/right/top insets exist). env() = 0 on desktop web, so nothing changes there. */ .topbar{display:flex;align-items:center;gap:0.75rem;flex:none; padding:env(safe-area-inset-top) max(1.125rem,env(safe-area-inset-right)) 0 max(1.125rem,env(safe-area-inset-left)); height:calc(3.75rem + env(safe-area-inset-top)); background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(14px); border-bottom:1px solid var(--line);z-index:20} /* Brand lockup (Ken 2026-06-12): PlanOS wordmark 2x with a "Global Depth Systems product" line. */ .brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;font-weight:800;letter-spacing:-.01em;cursor:pointer;line-height:1.04} .brand .word{font-size:2.125rem;line-height:1} .brand-sub{font-size:0.65625rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:0.0625rem} /* ── LOGO = a to-do line item, mid-cross (Ken 2026-06-18 "bullet list item themed... gonna be crossed off maybe but not quite"): a hand-drawn CHECKBOX before the wordmark + a red strike that cuts through "Plan" and TRAILS OFF before O·S. Both are SVG masks tinted by the theme (checkbox = currentColor ink, strike = --block red), so it works in both themes and needs no wordmark change. ── */ .brand .word{position:relative;display:inline-flex;align-items:center} /* Logo checkbox (::before) REMOVED (Ken 2026-06-19 "Get rid of only this from logo") — the wordmark + red strike through "Plan" stay; the strike now starts at the start of "Plan". */ .logo-img{height:1.32em;display:block;width:auto} /* image-logo slot (brand.js logoImage) — v5 check+wordmark lockup */ /* when the image logo is present, drop the decorative red strike (the lockup carries its own check) */ .brand .word:has(.logo-img)::after{content:none} /* the red strike through "Plan" — restored with the Chewover revert (2026-07-04 PM) */ .brand .word::after{content:"";position:absolute;left:0;top:53%;transform:translateY(-50%); width:2.45em;height:.42em;pointer-events:none;background-color:var(--block,#b53b2d); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2016%27%3E%3Cpath%20d%3D%27M4%209%20C%2026%206%2C%2052%2011%2C%2084%207%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") left center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2016%27%3E%3Cpath%20d%3D%27M4%209%20C%2026%206%2C%2052%2011%2C%2084%207%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") left center/contain no-repeat} .brand:hover .mark{transform:scale(1.05)} .brand .mark{width:1.875rem;height:1.875rem;border-radius:10px;background:linear-gradient(135deg,var(--accent2),var(--accent)); display:grid;place-items:center;color:#fff;font-size:0.9375rem;box-shadow:0 4px 14px var(--accent-soft)} .brand b{color:var(--accent)} /* O = blue */ /* Mascot (helper character) — modest scale, breathing room, never grabs input. Used sparingly per docs/mascot.md ("mascot for warmth, system for work"). */ .mascot{display:block;width:7.5rem;height:auto;margin:0.625rem auto 0.375rem;pointer-events:none;user-select:none; filter:drop-shadow(0 8px 22px rgba(0,0,0,.28))} .mascot-sm{width:4.5rem}.mascot-lg{width:10.75rem} /* Whiskey — fixed corner companion: always visible, never covered by content. Sits above the page but BELOW the drawer/modal scrim (z 40) so dialogs still win. Tap to tuck to a peek + back. */ .buddy{position:fixed;top:calc(4.125rem + env(safe-area-inset-top));right:0.875rem;z-index:30;width:6rem; cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent; transition:transform .3s var(--spring),opacity .2s var(--ease)} .buddy .mascot{width:6rem;margin:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))} .buddy:hover{transform:translateY(-3px)} .buddy.tucked{transform:translateX(70px);opacity:.9} /* slides mostly off → small peek */ .buddy.tucked:hover{transform:translateX(54px);opacity:1} .buddy.empty{display:none} /* no art yet → no empty box */ body.auth-gate .buddy{display:none} /* hidden on the sign-in gate */ /* RETIRED (Ken 2026-06-15, circled it on the intake screen "I want what's red and circled gone"): the static corner astronaut-dog is redundant now that the live Ferro creature fills the mascot role. Hidden everywhere; the #buddy element + paintBuddy() machinery stay dormant (remove this line to bring it back). */ .buddy{display:none !important} @media (prefers-reduced-motion: reduce){ .buddy,.buddy:hover{transition:none} } @media(max-width:760px){ .buddy{width:4.5rem;top:calc(3.75rem + env(safe-area-inset-top));right:0.5rem} .buddy .mascot{width:4.5rem} .buddy.tucked{transform:translateX(52px)} } .empty-line{text-align:center;color:var(--muted);font-size:.95rem;margin-top:0.25rem} /* Faint space-dog backdrop on the launcher (feedback). Uses the moon scene for now; swap to a transparent cutout pose when one lands. Behind content, no input capture. */ /* No position override — use .screen's absolute inset:0 so the launcher (and its full-bleed backdrop) fills the WHOLE stage height; otherwise it shrinks to content and leaves a black bar below (feedback). */ /* ============ HOMESCREEN REDESIGN (work order 2026-06-13) ============ Cinematic hero: Whiskey full-bleed (::before), a LEFT scrim for legibility, the red launch trajectory, and the PRIMARY ACTION = a solid goal bar + Plan-it button + chips (lower-left desktop / solid panel iPhone). Replaces the old dashed Plan tile + 3-widget wall. Asset slots: desktop bg = assets/mascot/launch_bg.jpg (1280x720), iPhone = moon_hero_scene.jpg (square, dog-centered). HOME SCREEN STILL SACRED — no Queue/Hero here. */ #scLaunch{background:#0A1424;overflow:hidden} /* PHONE/TABLET: the launcher MUST scroll (K3 device bug 2026-07-05: uncapped chips grew the page past the fold and the old fixed-hero overflow:hidden left it STUCK — nothing owned the scroll). Desktop keeps hidden: the 2×2 grid fills 100% exactly. */ @media(max-width:1023px){ #scLaunch{overflow-y:auto} } /* HERO PHOTO PANEL — a CONTAINED rounded card on the RIGHT (Ken 2026-06-13 "look closer to this concept... no red line, no moons/stars in the background"). The full-bleed photo and all decorations are gone; the background is plain dark. Mobile (@480) resets this to a top band. */ /* DOG PHOTO REMOVED (Ken 2026-06-19 "Get rid of this for now... thats where I want projects to live. Like a book shelf... Move them there since we have space and get rid of old location") — the right photo panel is gone; the BOOKSHELF (.lshelf) now occupies that space. */ #scLaunch::before{display:none} /* No-op layer (kept for structure): the left is plain dark, so NO vignette/glow — the radial "smudge" read as an artifact (Ken 2026-06-13), removed. */ .lscrim{position:absolute;inset:0;z-index:1;pointer-events:none} /* (Red launch-trajectory arc REMOVED — Ken 2026-06-13 "I want red line gone.") */ /* Content layer. */ #scLaunch .launch{position:relative;z-index:2;min-height:100%;display:block;padding:0} /* Headline — TOP-LEFT over the scrim. */ /* Headline — TOP-LEFT, BIG. Fluid (clamp) so it fills the room on wide screens but shrinks before it can reach the photo panel; max-width is vw-capped for the same reason (Ken 2026-06-13 "why isn't this bigger, there's so much room"). */ .launchhead{position:absolute;top:2.5rem;left:3rem;z-index:2;text-align:left;max-width:min(40rem,46vw)} .launchhead h1{margin:0;font-size:clamp(2.375rem,4.4vw,3.625rem);font-weight:500;line-height:1.06;letter-spacing:-.015em;text-shadow:0 2px 18px rgba(0,0,0,.45)} #scLaunch .launchhead h1,#scLaunch .launchhead .launchsub{text-align:left} .launchhead .launchsub{text-align:left;margin-top:0.875rem;color:#C4D2E4;font-size:1.125rem;font-weight:500} .hl-red{color:var(--block,#EF5350)} /* Recurring/habit step marker (once|recurring ticket type — Tier 1: label only). */ .recur{display:inline-flex;align-items:center;gap:0.1875rem;font-size:0.6875rem;font-weight:700;color:var(--accent2,#63D4FF); background:color-mix(in srgb,var(--accent2,#63D4FF) 14%,transparent);border-radius:7px;padding:0.125rem 0.4375rem;letter-spacing:.02em} /* PRIMARY ACTION — anchored lower-left. */ .lstart{position:absolute;left:3rem;bottom:2.75rem;z-index:2;width:min(31.25rem,calc(100% - 6rem));display:flex;flex-direction:column} /* GOAL COMPOSER — a generous multi-line context box (Ken 2026-06-14). Placeholder + chips keep it from being a blank wall; the footer carries the spark, the enter-hint, and the Plan-it button. */ .lgoal{display:flex;flex-direction:column;background:#101E33;border:1px solid #2A3C55;border-radius:16px; overflow:hidden;box-shadow:0 14px 38px rgba(0,0,0,.4)} .lgoal:focus-within{border-color:#378ADD;box-shadow:0 14px 38px rgba(0,0,0,.4),0 0 0 3px color-mix(in srgb,#378ADD 28%,transparent)} /* header strip: accent dot + live plan title + × clear */ .lgoal-head{display:flex;align-items:center;gap:0.625rem;padding:0.4375rem 1rem;background:rgba(55,138,221,.13);border-bottom:1px solid #2A3C55} /* top bar ~50% shorter (Ken 2026-06-17) */ .lgoal-title{flex:1;min-width:0;color:#fff;font-weight:700;font-size:0.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lgoal-x{flex:none;background:none;border:none;color:#9FB0C4;font-size:1.375rem;line-height:1;cursor:pointer;padding:0 0.125rem} .lgoal-x:hover{color:#fff} /* WHITE input box, inset in the card */ .lgoal-in{display:block;width:auto;margin:1rem;min-height:7.5rem;resize:none;background:#fff;color:#13233A; border:none;border-radius:13px;outline:none;padding:1rem 1.125rem;font-size:2.125rem;line-height:1.45;font-weight:500; /* 2× (Ken 2026-07-01 "font on here 2x"); placeholder stays 70% relative so it doubles too */ font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,.25)} .lgoal-in::placeholder{color:#7E8FA6;font-size:70%} /* prompt 30% smaller (Ken 2026-06-17) — only the placeholder; typed text unchanged */ .lgoal-foot{display:flex;align-items:center;gap:0.625rem;padding:0 1rem 0.875rem} .lgoal-btn{flex:none;background:#378ADD;color:#fff;border:none;border-radius:10px;padding:0.6875rem 1.25rem;font-size:1.3125rem;font-weight:700;cursor:pointer} /* "Plan it →" 2× (Ken 2026-07-01 "font on here 2x") */ .lgoal.is-empty .lgoal-btn{background:none;color:#5A6B82;box-shadow:none} /* dim "Plan it" until there's a goal */ .lgoal-btn:hover{background:#2f79c4} .lgoal-btn:disabled{opacity:.65;cursor:default} .lgoal-btn .lbl-m{display:none} .lhint{color:#7F93AB;font-size:0.78125rem;margin:0.5625rem 0.125rem 0} .lhint:empty{display:none} .lchips{display:flex;flex-direction:column;align-items:flex-start;gap:0.5625rem;margin-top:0.875rem; max-height:13rem;overflow-y:auto;overflow-x:hidden;padding-right:0.25rem; scrollbar-width:thin;scrollbar-color:#34527a transparent;overscroll-behavior:contain} .lchips::-webkit-scrollbar{width:0.5rem} .lchips::-webkit-scrollbar-thumb{background:#34527a;border-radius:8px;border:2px solid transparent;background-clip:padding-box} .lchips::-webkit-scrollbar-track{background:transparent} .lchips:empty{display:none} .lchip{background:rgba(16,30,51,.66);border:1px solid #2A3C55;color:#C4D2E4;border-radius:999px; padding:0.5rem 0.9375rem;font-size:0.875rem;font-weight:600;cursor:pointer;white-space:nowrap} .lchip:hover{border-color:#378ADD;color:#fff} /* BOOKSHELF (Ken 2026-06-19 "thats where I want projects to live. Like a book shelf... Move them there since we have space") — saved plans live on the RIGHT, where the dog photo was. A vertical shelf of "books": each plan is a card stacked top-to-bottom with a coloured spine, scrolls if many. The header sits OUTSIDE #bigCol so the render (which clears #bigCol) never wipes it. iPhone (@480) drops it back into the normal stacked flow. */ /* RIGHT COLUMN (Ken 2026-06-19 "I want this [hero animation] literally on the home page on right"): the looping "Make it easier" animation up top, the plans bookshelf below it. */ .lright{position:absolute;top:6rem;right:2.625rem;bottom:2.75rem;width:min(38%,30rem);z-index:2; display:flex;flex-direction:column;gap:1.125rem} .lart{flex:none;width:100%;aspect-ratio:680/420;display:block;border-radius:14px;border:none; pointer-events:none;box-shadow:0 16px 40px rgba(20,12,4,.4)} /*