:root { /* Default = Dark (green-accented) */ --bg: #0e1311; --panel: #161d1a; --panel-2: #1d2723; --border: #2a352f; --text: #e9edea; --muted: #93a39a; --accent: #25c878; --accent-dark: #19a361; --success: #34c759; --danger: #ff5a5a; --radius: 12px; } /* ☀️ Light — clean white & green */ [data-theme="light"] { --bg: #f3f7f4; --panel: #ffffff; --panel-2: #eef3f0; --border: #dde6e0; --text: #15201b; --muted: #5f7068; --accent: #15a34a; --accent-dark: #11843c; --success: #15a34a; --danger: #e23b3b; } [data-theme="light"] body { background: radial-gradient(circle at 12% 6%, #e3f3e9 0, transparent 40%), var(--bg); } [data-theme="light"] .topbar { border-bottom-color: var(--border); } [data-theme="light"] .brand { color: var(--accent); } /* ============================================================ THEMES — each block overrides the tokens above. The active one is chosen by (see User::THEMES). ============================================================ */ /* 🐱 Cat — deep purple dark theme (the orange cat pops against it) */ [data-theme="cat"] { --bg: #181228; --panel: #221a3a; --panel-2: #2c2250; --border: #3a2e5e; --text: #efeaff; --muted: #a99cc9; --accent: #8b5cf6; --accent-dark: #7c3aed; --success: #34d399; --danger: #ff6b6b; } [data-theme="cat"] body { background: radial-gradient(circle at 12% 6%, #2a1e4d 0, transparent 42%), radial-gradient(circle at 90% 0%, #321f57 0, transparent 36%), var(--bg); } [data-theme="cat"] .topbar { background: linear-gradient(90deg, #3a2a72, #271a4d); border-bottom-color: #4a2f8a; } [data-theme="cat"] .brand { color: #fff; } /* 🐶 Dog — bright sky-blue light theme with a warm secondary pop */ [data-theme="dog"] { --bg: #eef6fd; --panel: #ffffff; --panel-2: #e3f0fb; --border: #cfe3f4; --text: #14304a; --muted: #5c7693; --accent: #38a9e8; /* sky blue — the action/accent color */ --accent-dark: #1f8fd4; --accent-2: #ff9d4d; /* warm orange secondary */ --success: #1fa86a; --danger: #e23b3b; } [data-theme="dog"] body { background: radial-gradient(circle at 12% 6%, #d8ecfb 0, transparent 45%), radial-gradient(circle at 90% 0%, #e2f1fd 0, transparent 35%), var(--bg); } [data-theme="dog"] .topbar { background: linear-gradient(90deg, #5cb8ee, #2f9ee0); border-bottom: 3px solid var(--accent); } [data-theme="dog"] .brand { color: #fff; } /* 🦈 Shark — deep royal-blue ocean with a punchy orange bite */ [data-theme="shark"] { --bg: #101f52; /* deep royal base — darker so cards lift off it */ --panel: #294aa8; /* vivid royal card */ --panel-2: #3358c2; --border: #4a6cd6; /* clearly lighter edge for separation */ --text: #eef2ff; --muted: #aebde8; --accent: #ff8c3b; /* orange — the action/accent color */ --accent-dark: #f2701a; --accent-2: #ffd23f; /* yellow highlight secondary */ --success: #34d399; --danger: #ff6b6b; } [data-theme="shark"] body { background: radial-gradient(circle at 12% 6%, #1b2f74 0, transparent 46%), radial-gradient(circle at 90% 0%, #182a6c 0, transparent 40%), var(--bg); } [data-theme="shark"] .topbar { background: linear-gradient(90deg, #3457c8, #1d3390); border-bottom: 3px solid var(--accent); } [data-theme="shark"] .brand { color: #fff; } [data-theme="dino"] { --bg: #0c2417; /* deep jungle floor — cards lift off it */ --panel: #1b5e3a; /* rich leaf-green card */ --panel-2: #237046; --border: #3a8c5f; /* lighter leaf edge for separation */ --text: #eafff2; --muted: #a7d8bd; --accent: #7ed957; /* bright lime — the action/accent color */ --accent-dark: #5cb83a; --accent-2: #ffd23f; /* sunny highlight secondary */ --success: #34d399; --danger: #ff6b6b; } [data-theme="dino"] body { background: radial-gradient(circle at 12% 6%, #14442a 0, transparent 46%), radial-gradient(circle at 90% 0%, #123a24 0, transparent 40%), var(--bg); } [data-theme="dino"] .topbar { background: linear-gradient(90deg, #2b7d4d, #185a34); border-bottom: 3px solid var(--accent); } [data-theme="dino"] .brand { color: #fff; } /* A friendly mascot that bobs in the corner (cosmetic only) */ /* Viewport-filling, click-through layer so the mascot pins to the visual viewport in the native web view (a full-bleed fixed element is reliable). */ .mascot-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; } .theme-mascot { position: absolute; right: 14px; bottom: 84px; width: 64px; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 6px 10px rgba(180, 90, 40, 0.4)); animation: mascot-idle 6s ease-in-out infinite; } .theme-mascot svg { width: 100%; height: auto; display: block; } @media (min-width: 720px) { .theme-mascot { bottom: 18px; width: 76px; } } /* In the native app there's no web tab bar to clear (that 84px offset), so the mascot would float up into content and overlap things like the Save button. Pin it to the actual bottom-right corner, above the native tab bar. */ body.native-app .theme-mascot { bottom: calc(14px + env(safe-area-inset-bottom)); } @keyframes mascot-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(5deg); } } /* Gentle idle life: mostly still, with an occasional bob + wiggle. */ @keyframes mascot-idle { 0%, 70%, 100% { transform: translateY(0) rotate(0deg); } 76% { transform: translateY(-7px) rotate(-7deg); } 82% { transform: translateY(-2px) rotate(7deg); } 88% { transform: translateY(-7px) rotate(-4deg); } 94% { transform: translateY(0) rotate(0deg); } } /* Tap reaction: an excited little hop + shake. */ .theme-mascot.is-reacting { animation: mascot-react 0.6s ease; } @keyframes mascot-react { 0% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-16px) rotate(-12deg) scale(1.12); } 45% { transform: translateY(-4px) rotate(10deg) scale(1.08); } 70% { transform: translateY(-10px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0); } } .mascot-pop { position: absolute; left: 50%; top: -6px; font-size: 1.1rem; pointer-events: none; animation: mascot-pop 1s ease-out forwards; } @keyframes mascot-pop { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -54px) scale(1.1); } } /* Paw-print tap trail (Cat/Dog modes) */ .paw-trail { position: fixed; width: 30px; height: 30px; color: var(--accent); opacity: 0.7; pointer-events: none; z-index: 9999; animation: paw-fade 1.1s ease-out forwards; } .paw-trail svg { width: 100%; height: 100%; display: block; } @keyframes paw-fade { 0% { opacity: 0.75; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(var(--r, 0deg)); } } /* Themed PR confetti (bones/balls for dog, fish/yarn for cat) */ .pr-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .pr-confetti__piece { position: absolute; top: -8%; left: calc(4% + var(--i) * 8%); width: 22px; opacity: 0; animation: pr-confetti-fall 1.7s ease-in calc(var(--i) * 0.09s) forwards; } .pr-confetti__piece svg { width: 100%; height: auto; display: block; } @keyframes pr-confetti-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(112vh) rotate(560deg); } } /* Paw "stamp" on a hit set row (Cat/Dog modes) */ [data-theme="cat"] .set-row--hit .set-chip::after, [data-theme="dog"] .set-row--hit .set-chip::after { content: " 🐾"; display: inline-block; animation: paw-stamp-in 0.45s cubic-bezier(0.18, 1.5, 0.4, 1); } @keyframes paw-stamp-in { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } } /* Faint paw watermark behind content (Cat/Dog modes) */ [data-theme="cat"] body::before, [data-theme="dog"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("/assets/paw-tile-58eb0f7f.svg"); background-size: 90px 90px; } /* Themed celebration art + confetti (the trophy is swapped for the animal server-side under animal themes — see shared/_celebration). */ .celebrate--cat { background: linear-gradient(180deg, #ffe3d0, #ffffff); border-color: var(--accent); } .celebrate--dog { background: linear-gradient(180deg, #ffeccb, #ffffff); border-color: var(--accent); } .celebrate--cat .celebrate__msg, .celebrate--dog .celebrate__msg { color: #3a2a20; } .celebrate-animal { width: 104px; height: 104px; margin: 0 auto 6px; transform-origin: center bottom; animation: cat-pop 0.6s cubic-bezier(0.18, 1.5, 0.4, 1) both, mascot-bob 2.6s ease-in-out 0.6s infinite; } @keyframes cat-pop { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } } /* Walking critter — a pup that trots up, gives you a lick, and trots off. */ #critters { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; } /* The set-log peek animals rise from #critters' bottom edge. In the native app that edge sits *behind* the native tab bar, so the peek pops up from behind the toolbar and gets clipped. Lift the layer's floor to the top of the tab bar (~tab-bar height + home-indicator inset) so the peek clears it. */ body.native-app #critters { bottom: calc(56px + env(safe-area-inset-bottom)); } .critter { position: fixed; inset: 0; pointer-events: none; } .critter__dog { position: absolute; bottom: 70px; left: 0; width: 124px; transform: translateX(-200px); animation: dog-visit 5.4s ease-in-out forwards; } @media (min-width: 720px) { .critter__dog { bottom: 16px; width: 152px; } } .critter__dog svg { width: 100%; height: auto; display: block; } /* walk in from the left, pause centre-ish to say hi, then trot off right */ @keyframes dog-visit { 0% { transform: translateX(-200px); } 34% { transform: translateX(40vw); } 42% { transform: translateX(43vw) scale(1.06); } 66% { transform: translateX(43vw) scale(1.06); } 100% { transform: translateX(115vw); } } /* whole-body trot bob */ .critter-animal { animation: critter-bob 0.42s ease-in-out infinite; } @keyframes critter-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* legs swing in a diagonal gait */ .dog-side .leg { transform-box: fill-box; transform-origin: top center; } .dog-side .leg--a { animation: trot 0.42s ease-in-out infinite; } .dog-side .leg--b { animation: trot 0.42s ease-in-out infinite; animation-delay: 0.21s; } @keyframes trot { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } } /* happy tail wag + floppy ear */ .dog-side .tail { transform-box: fill-box; transform-origin: 100% 60%; animation: wag 0.28s ease-in-out infinite; } @keyframes wag { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(16deg); } } .dog-side .ear { transform-box: fill-box; transform-origin: top center; animation: flop 0.42s ease-in-out infinite; } @keyframes flop { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(-14deg); } } /* the lick: tongue pops out a few times during the pause */ .dog-side .lick { transform-box: fill-box; transform-origin: top center; transform: scaleY(0); animation: lick 0.45s ease-in-out 2s 3 both; } @keyframes lick { 0%, 100% { transform: scaleY(0); } 55% { transform: scaleY(1); } } /* ---------- Cat corner peek (on a logged Hit, cat theme) ---------- */ .cat-peek { position: absolute; left: 50%; bottom: 0; width: min(96vw, 480px); /* spans the page width; half pops up from the bottom */ transform: translateX(-50%) translateY(100%); animation: peek-inout 2.8s ease both; } @media (min-width: 720px) { .cat-peek { width: 480px; } } .cat-peek svg, .cat-peek__img { width: 100%; height: auto; display: block; } /* round the top so a rectangular photo reads as a peeking head */ .cat-peek--photo { overflow: hidden; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } /* the open frame is in normal flow (gives the box its height); the closed blink frame overlays it */ .cat-peek__img--closed { position: absolute; top: 0; left: 0; } @keyframes peek-inout { 0% { transform: translateX(-50%) translateY(100%); } 16% { transform: translateX(-50%) translateY(46%); } 82% { transform: translateX(-50%) translateY(46%); } 100% { transform: translateX(-50%) translateY(104%); } } /* Dog peek — same bottom-center head-pop as the cat, with dog art */ .dog-peek { position: absolute; left: 50%; bottom: 0; width: min(96vw, 480px); transform: translateX(-50%) translateY(100%); animation: peek-inout 2.8s ease both; } @media (min-width: 720px) { .dog-peek { width: 480px; } } .dog-peek svg, .dog-peek__img { width: 100%; height: auto; display: block; } .dog-peek--photo { overflow: hidden; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } .dog-peek__img--closed { position: absolute; top: 0; left: 0; } /* Shark peek — same bottom-center head-pop as the cat/dog, with shark art */ .shark-peek, .dino-peek { position: absolute; left: 50%; bottom: 0; width: min(96vw, 480px); transform: translateX(-50%) translateY(100%); animation: peek-inout 2.8s ease both; } @media (min-width: 720px) { .shark-peek, .dino-peek { width: 480px; } } .shark-peek svg, .shark-peek__img, .dino-peek svg, .dino-peek__img { width: 100%; height: auto; display: block; } .shark-peek--photo, .dino-peek--photo { overflow: hidden; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.25); } .shark-peek__img--closed, .dino-peek__img--closed { position: absolute; top: 0; left: 0; } /* blink — SVG eyes squash shut twice during the peek */ .cat-peek--svg .eye, .dog-peek--svg .eye, .shark-peek--svg .eye, .dino-peek--svg .eye { transform-box: fill-box; transform-origin: center; animation: peek-blink 0.42s ease 1.2s 2 both; } .dog-peek__img--closed { opacity: 0; animation: peek-blink-fade 0.42s ease 1.2s 2 both; } @keyframes peek-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.08); } } /* blink — photo cross-fades to the eyes-closed frame (if provided) */ .cat-peek__img--closed, .shark-peek__img--closed, .dino-peek__img--closed { opacity: 0; animation: peek-blink-fade 0.42s ease 1.2s 2 both; } @keyframes peek-blink-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* ---------- Cat "licks its paw" PR celebration (reuses .face-lick shell) ---------- */ .cat-pr__cat { position: absolute; left: 50%; top: 50%; width: 220px; margin: -132px 0 0 -110px; /* viewBox is 100×120 → height 264 */ transform-origin: center center; animation: cat-approach 4s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .cat-pr__cat svg { width: 100%; height: auto; display: block; } @keyframes cat-approach { 0% { transform: translateY(60vh) scale(0.14); opacity: 0; } 12% { opacity: 1; } 40% { transform: translateY(4vh) scale(1.5); opacity: 1; } 50% { transform: translateY(-2vh) scale(2.05); } 74% { transform: translateY(-2vh) scale(2.05); } /* hold while it grooms */ 100% { transform: translateY(60vh) scale(0.2); opacity: 0; } } /* the paw rises to the face and bobs as it's licked */ .cat-pr__cat .paw { transform-box: fill-box; transform-origin: center bottom; transform: translateY(40px); animation: paw-raise 4s ease both; } @keyframes paw-raise { 0%, 42% { transform: translateY(40px); } 50% { transform: translateY(0); } 56% { transform: translateY(-3px); } 62% { transform: translateY(2px); } 68% { transform: translateY(-3px); } 74% { transform: translateY(0); } 84%, 100% { transform: translateY(40px); } } /* tongue flicks against the paw a few times */ .cat-pr__cat .tongue { transform-box: fill-box; transform-origin: top center; transform: scaleY(0); animation: cat-tongue 0.36s ease 2.2s 3 both; } @keyframes cat-tongue { 0%, 100% { transform: scaleY(0); } 55% { transform: scaleY(1); } } /* a content slow-blink as it settles in */ .cat-pr__cat .eye { transform-box: fill-box; transform-origin: center; animation: slow-blink 1s ease 1.6s 1 both; } @keyframes slow-blink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.1); } } /* ---------- Dog "lick the camera" PR celebration ---------- */ .face-lick { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12vh; overflow: hidden; background: rgba(20, 10, 4, 0); animation: facelick-bg 0.5s ease 0.2s forwards; } @keyframes facelick-bg { to { background: rgba(20, 10, 4, 0.5); } } .face-lick__dog { position: absolute; left: 50%; top: 50%; width: 240px; margin: -120px 0 0 -120px; transform-origin: center center; animation: facelick-approach 3.4s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .face-lick__dog svg { width: 100%; height: auto; display: block; } @keyframes facelick-approach { 0% { transform: translateY(62vh) scale(0.14); opacity: 0; } 14% { opacity: 1; } 46% { transform: translateY(4vh) scale(1.55); opacity: 1; } 58% { transform: translateY(-1vh) scale(2.25); opacity: 1; } 72% { transform: translateY(4vh) scale(1.5); opacity: 1; } 100% { transform: translateY(62vh) scale(0.2); opacity: 0; } } .face-lick__tongue { position: absolute; left: 50%; bottom: 0; width: 210px; transform: translateX(-50%) translateY(62vh) scaleY(0.3); opacity: 0; animation: facelick-tongue 3.4s ease-in-out both; } .face-lick__tongue svg { width: 100%; height: auto; display: block; } @keyframes facelick-tongue { 0%, 48% { transform: translateX(-50%) translateY(62vh) scaleY(0.3); opacity: 0; } 56% { transform: translateX(-50%) translateY(0) scaleY(1.15); opacity: 0.97; } 67% { transform: translateX(-50%) translateY(-44vh) scaleY(0.85); opacity: 0; } 100% { opacity: 0; } } .face-lick__smear { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 46% at 50% 42%, rgba(214, 238, 255, 0.6), rgba(214, 238, 255, 0.12) 60%, transparent 74%), linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.2) 49%, transparent 57%); animation: facelick-smear 3.4s ease both; } @keyframes facelick-smear { 0%, 52% { opacity: 0; } 60% { opacity: 1; } 74% { opacity: 0.85; } 100% { opacity: 0; } } .face-lick__card { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 320px; padding: 16px; opacity: 0; animation: facelick-card 0.5s ease 2.7s both; } .face-lick__card .celebrate__msg { font-size: 1.1rem; font-weight: 700; margin: 0 0 14px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } @keyframes facelick-card { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- Shark "takes a bite" PR celebration (reuses .face-lick shell) ---------- */ /* deep-water tint instead of the dog's warm one */ .shark-pr { background: rgba(6, 20, 45, 0); animation: sharkpr-bg 0.5s ease 0.2s forwards; } @keyframes sharkpr-bg { to { background: rgba(6, 20, 45, 0.58); } } .shark-pr__shark { position: absolute; left: 50%; top: 50%; width: 260px; margin: -130px 0 0 -130px; /* viewBox 120×120 */ transform-origin: center center; animation: shark-approach 3.4s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .shark-pr__shark svg { width: 100%; height: auto; display: block; } @keyframes shark-approach { 0% { transform: translateY(62vh) scale(0.14); opacity: 0; } 14% { opacity: 1; } 46% { transform: translateY(4vh) scale(1.55); opacity: 1; } 56% { transform: translateY(-1vh) scale(2.2); opacity: 1; } 70% { transform: translateY(4vh) scale(1.5); opacity: 1; } 100% { transform: translateY(62vh) scale(0.2); opacity: 0; } } /* a content slow-blink as it lunges */ .shark-pr__shark .eye { transform-box: fill-box; transform-origin: center; animation: slow-blink 1s ease 1.6s 1 both; } /* teeth marks flash across the screen at the bite */ .shark-pr__bite { position: absolute; left: 50%; top: 42%; width: min(70vw, 420px); transform: translate(-50%, -50%) scale(0.5); opacity: 0; animation: shark-bitemark 3.4s ease both; } .shark-pr__bite svg { width: 100%; height: auto; display: block; } @keyframes shark-bitemark { 0%, 46% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 52% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.06); } 62% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } 74% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } 100% { opacity: 0; } } /* ---------- Dino "claws the screen" PR celebration (reuses .face-lick shell) ---------- */ /* jungle tint instead of the shark's deep-water one */ .dino-pr { background: rgba(8, 30, 18, 0); animation: dinopr-bg 0.5s ease 0.2s forwards; } @keyframes dinopr-bg { to { background: rgba(8, 30, 18, 0.58); } } .dino-pr__rex { position: absolute; left: 50%; top: 50%; width: 260px; margin: -130px 0 0 -130px; /* viewBox 120×120 */ transform-origin: center center; animation: dino-approach 3.4s cubic-bezier(0.3, 0.7, 0.3, 1) both; } .dino-pr__rex svg { width: 100%; height: auto; display: block; } @keyframes dino-approach { 0% { transform: translateY(62vh) scale(0.14); opacity: 0; } 14% { opacity: 1; } 46% { transform: translateY(4vh) scale(1.55); opacity: 1; } 56% { transform: translateY(-1vh) scale(2.2); opacity: 1; } 70% { transform: translateY(4vh) scale(1.5); opacity: 1; } 100% { transform: translateY(62vh) scale(0.2); opacity: 0; } } /* a content slow-blink as it lunges */ .dino-pr__rex .eye { transform-box: fill-box; transform-origin: center; animation: slow-blink 1s ease 1.6s 1 both; } /* claw marks rake diagonally across the screen at the peak of the lunge */ .dino-pr__claw { position: absolute; left: 50%; top: 46%; width: min(86vw, 520px); height: min(58vh, 360px); transform: translate(-50%, -50%) rotate(-4deg); opacity: 0; animation: dino-clawshow 3.4s ease both; } .dino-pr__claw svg { width: 100%; height: 100%; display: block; } .dino-pr__claw .claw { stroke-dasharray: 360; stroke-dashoffset: 360; filter: drop-shadow(0 0 3px rgba(0,0,0,0.35)); animation: claw-scratch 0.5s ease both; } .dino-pr__claw .claw:nth-child(1) { animation-delay: 1.62s; } .dino-pr__claw .claw:nth-child(2) { animation-delay: 1.70s; } .dino-pr__claw .claw:nth-child(3) { animation-delay: 1.78s; } @keyframes claw-scratch { to { stroke-dashoffset: 0; } } @keyframes dino-clawshow { 0%, 44% { opacity: 0; } 48% { opacity: 1; } 72% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } } /* a little slobber it leaves behind, which fades after a couple seconds */ .critter__slobber { position: absolute; bottom: 104px; left: calc(43vw + 86px); width: 40px; opacity: 0; transform: scale(0.3); animation: slobber 3.2s ease 2.4s forwards; } @media (min-width: 720px) { .critter__slobber { bottom: 52px; left: calc(43vw + 104px); } } .critter__slobber svg { width: 100%; height: auto; display: block; } @keyframes slobber { 0% { opacity: 0; transform: scale(0.3) translateY(-8px); } 14% { opacity: 1; transform: scale(1) translateY(0); } 68% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1); } } .celebrate__confetti span { position: absolute; top: -6%; left: calc(6% + var(--i) * 9%); width: 9px; height: 9px; border-radius: 2px; background: var(--accent); animation: confetti-fall 1.5s ease-in calc(var(--i) * 0.07s) infinite; } .celebrate__confetti span:nth-child(3n) { background: #ffd166; } .celebrate__confetti span:nth-child(3n+1) { background: #ff7a4d; } .celebrate__confetti span:nth-child(3n+2) { background: #06d6a0; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(300px) rotate(420deg); opacity: 0; } } /* Theme picker (Profile) */ .theme-picker { display: flex; gap: 12px; flex-wrap: wrap; } .theme-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 168px; min-height: 122px; padding: 12px; text-align: left; cursor: pointer; background: var(--panel-2); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text); font: inherit; } .theme-card:hover { border-color: var(--accent-dark); } .theme-card.is-active { border-color: var(--accent); } /* "Dark Mode" (default) has no [data-theme="default"] block — it lives on :root — so its preview card used to inherit the *active* theme's colors and shift around. Pin it to a stable dark preview (near-black surface, light text) so it always reads as dark, mirroring the white Light Mode card. */ .theme-card[data-theme="default"] { --panel-2: #0e1311; --text: #e9edea; --muted: #93a39a; --border: #2a352f; } .theme-card__swatch { font-size: 1.8rem; } .theme-card__label { font-weight: 700; } .theme-card__blurb { font-size: 0.8rem; color: var(--muted); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.45; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Top bar ---------- */ .topbar { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .topbar__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 12px 20px; flex-wrap: wrap; } .brand { font-weight: 700; font-size: 1.1rem; color: var(--text); } /* Segmented My-training / Coaching toggle (each side is a button_to form). */ .view-toggle { display: inline-flex; align-items: center; margin-left: 10px; padding: 2px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; } .view-toggle form.button_to { display: inline-flex; margin: 0; } .view-toggle__opt { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font-size: 0.76rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap; cursor: pointer; } .view-toggle__opt:hover { color: var(--text); } .view-toggle__opt.is-active, .view-toggle__opt.is-active:hover { background: var(--accent); color: #fff; } .brand:hover { text-decoration: none; } .topnav { display: flex; gap: 6px; } .navlink { padding: 6px 12px; border-radius: 8px; color: var(--muted); } .navlink:hover { background: var(--panel-2); color: var(--text); text-decoration: none; } .unit-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .unit-toggle__btn { background: var(--panel-2); color: var(--muted); border: 0; padding: 6px 14px; cursor: pointer; font-weight: 600; text-transform: uppercase; font-size: 0.78rem; } .unit-toggle__btn.is-active { background: var(--accent); color: white; } /* Per-workout unit selector (header dropdown — one unit for the whole workout) */ .unit-select-form { display: inline-flex; margin: 0; } .unit-select { height: 31px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 0 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; } /* ---------- Layout ---------- */ .container { max-width: 1280px; margin: 0 auto; padding: 24px 24px 80px; } /* Room for the fixed bottom tab bar on mobile only. */ .container.has-tabbar { padding-bottom: 96px; } @media (min-width: 720px) { .container.has-tabbar { padding-bottom: 80px; } } /* Use more of the screen width on phones. */ @media (max-width: 720px) { .container { padding-left: 12px; padding-right: 12px; } .card { padding: 14px; } /* iOS auto-zooms the page when a focused input is under 16px — keep fields at 16px on mobile so login/logging never triggers the zoom. */ input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], textarea, select { font-size: 16px; } } /* ---------- App nav ---------- Mobile-first: a fixed bottom tab bar. On wider screens it becomes a horizontal top nav inside the header (see media query below). */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--panel); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); z-index: 20; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; color: var(--muted); font-size: 0.72rem; font-weight: 600; } .tab:hover { text-decoration: none; color: var(--text); } .tab.is-active { color: var(--accent); } .tab__icon { font-size: 1.25rem; line-height: 1; position: relative; display: inline-block; } .tab__label { letter-spacing: 0.02em; } .tab__badge { position: absolute; top: -7px; right: -11px; background: var(--danger); color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px; text-align: center; } /* Inline unread count (e.g. next to "Messages" on the Profile page) */ .count-pill { display: inline-block; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 999px; text-align: center; vertical-align: middle; margin-left: 6px; } /* Desktop / tablet: top navigation in the header instead of a bottom bar. */ @media (min-width: 720px) { .tabbar { position: static; margin-left: auto; width: auto; background: transparent; border-top: 0; padding-bottom: 0; gap: 4px; } .tab { flex: 0 0 auto; flex-direction: row; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 0.92rem; } .tab__icon { font-size: 1rem; } .tab:hover { background: var(--panel-2); } .tab.is-active { background: var(--panel-2); } /* Dog's top bar is a saturated sky-blue, so the header tabs need light text/contrast (the mobile bottom bar above stays dark-on-white). */ [data-theme="dog"] .tab { color: #eaf4fd; } [data-theme="dog"] .tab:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } [data-theme="dog"] .tab.is-active { background: rgba(255, 255, 255, 0.22); color: #fff; } } /* ---------- Stats ---------- */ .stat-row { display: flex; gap: 16px; flex-wrap: wrap; } .stat { flex: 1; min-width: 120px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; } .chart { width: 100%; height: auto; display: block; } .chart-axis { font-size: 12px; fill: var(--muted); } .stat__num { font-size: 1.8rem; font-weight: 700; color: var(--accent); } .stat__label { color: var(--muted); font-size: 0.82rem; margin-top: 4px; } .pr-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); } .pr-row:last-child { border-bottom: 0; } .pr-rep { display: inline-block; min-width: 44px; font-weight: 700; color: var(--accent); } /* PR list (compact, scrollable so it doesn't eat the page on mobile) */ .pr-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; } /* Headline 1RM (actual or estimated) on a lift's progress page */ .pr-headline { display: flex; flex-direction: column; gap: 2px; } .pr-headline__val { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .pr-headline__lbl { font-size: 0.82rem; color: var(--muted); } /* Key under the PR list */ .pr-key { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); } /* "est" badge on an estimated 1RM (PR list) */ .pr-est-tag { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; vertical-align: 1px; } .pr-list__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text); } .pr-list__row:last-child { border-bottom: 0; } .pr-list__row:hover { background: var(--panel-2); text-decoration: none; } .pr-list__row[hidden] { display: none; } .pr-list__name { font-weight: 600; } .pr-list__pr { color: var(--accent); font-weight: 600; font-size: 0.9rem; text-align: right; white-space: nowrap; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 1.5rem; } .subtle { color: var(--muted); } .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.92rem; } .celebrate { position: relative; overflow: hidden; border: 1px solid var(--accent); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--text); text-align: center; max-width: 360px; padding: 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .celebrate::backdrop { background: rgba(0,0,0,0.6); } .celebrate__art { font-size: 3rem; line-height: 1; margin-bottom: 8px; } .celebrate__msg { font-size: 1.05rem; font-weight: 600; margin: 0 0 18px; } .flash--notice { background: rgba(52,199,89,0.12); border: 1px solid rgba(52,199,89,0.4); } .flash--alert { background: rgba(255,77,79,0.12); border: 1px solid rgba(255,77,79,0.4); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: white; border: 1px solid transparent; /* match ghost/danger box so sizes line up */ border-radius: 8px; padding: 8px 14px; font-family: inherit; /*