mBR Brand Animation + SSOT Fix

Date: 2026-06-25 Scope: Monorepo — packages/components/src/brand/, sites/mbr/src/pages/focus.astro

What Was Done

1. Animation alignment (logos and brand texts)

Component	Before	After
mBR Logo	$ default 87.5%, S flashes 12.5%	Unchanged
SDC Logo	S/$ equal 50/50	$ brief-flash 12.5% — aligned to mBR approach
SDC Logo gold dot	Static	Pulses at 93.75% (scale 1.633) — matches mBR dot
mBR Brand Text	$ bar visible 12.5% (synced to logo)	50/50 equal time (independent of logo)
SDC Brand Text	JS toggle 50/50	Unchanged

Design rationale: Logos = brief-flash (brand anchors, settled feel). Texts = 50/50 (prose elements, maximize $ recognition). Cross-role difference is intentional.

2. SSOT fix — MyBetterRates.css extracted

Problem: focus.astro (standalone PWA) had an inlined copy of the brand text animation CSS. When MyBetterRates.astro was updated, focus.astro was unaffected — silent frozen copy.

Why it happened: Standalone Astro pages can’t import .astro components. Previous workaround was manual inlining.

Fix:

Created packages/components/src/brand/MyBetterRates.css — plain CSS, no Astro.
MyBetterRates.astro now does import './MyBetterRates.css' in frontmatter.
focus.astro now does import '@monorepo/components/brand/MyBetterRates.css' in frontmatter.
Removed the ~50-line inlined block from focus.astro. Only color overrides remain.

Any future change to brand text animation changes once in MyBetterRates.css and propagates everywhere automatically.

3. Files changed

File	Change
`packages/components/src/brand/MyBetterRates.css`	Created — SSOT for brand text structure + animation
`packages/components/src/brand/MyBetterRates.astro`	Imports `MyBetterRates.css`; `<style>` stripped to color-only
`packages/components/src/brand/BrandLogo.astro`	SDC `show-dollar` → brief-flash; added `sd-dot-pulse`; added to `prefers-reduced-motion`
`sites/mbr/src/pages/focus.astro`	Imports `MyBetterRates.css`; removed inlined block
`sites/template/src/components/showcase/MyBetterRatesShowcase.astro`	Updated stale animation description
`Core/Processes/Simple Markdown Task Management/SMTM_System.md`	Added Templater task creation as preferred method; marked old Tasks-Template.md legacy
`Core/Processes/KB-OS/Templates/SMTM Task.md`	Created — Templater task scaffold template

4. Deployed

MBR Focus: https://talbotstevens.com/mbr/focus.html — live keyframes verified ✅
SDC Focus: https://talbotstevens.com/sdc/focus.html — HTTP 200 ✅

Deferred

SDC brand text SSOT: SmartDebt.astro lives in sites/template/ only. Deferred until SDC site goes live — move to packages/components/src/brand/ at that time.
SDC Focus brand CSS: Still inlined (SDC brand text not in packages yet; blocked by above).
SDC dot size normalization: SDC dot r=8, mBR dot r=6 (~12% size difference). Deferred — behaviorally identical (same pulse timing + scale). Change: r="8" → r="7" in sd-leaf-dot.svg when desired.

Gotchas

Standalone Astro pages (no layout) cannot use is:global from shared components — they don’t import Astro components. Always use a plain .css file in packages/ for CSS that must reach standalone PWA pages.
@monorepo/components/brand/MyBetterRates.css works because packages/components/package.json exports "./brand/*": "./src/brand/*" — .css files are included by that glob.