/** * HAM — curated fork of the Donkey Factory Design System v7 * ─────────────────────────────────────────────────────────────────────────── * Tri-theme: light (default) / dark / high-contrast. * * Theme application: * → light (default tokens on :root) * → dark token overrides * → high-contrast token overrides (independent) * → high-contrast dark variant * * Tailwind compat: keeps .dark class so existing dark: utilities still work. * * All component classes prefixed .wt-* and consume tokens — never hex literals. * * CURATION NOTE (task #20, 2026-07-29): this file is a curated subset of the * upstream Donkey Factory source, not a byte-identical vendor copy — HAM's * CLAUDE.md "Inherit as-is" table scopes the inherit to design tokens, base * element styles, a11y primitives, cmdk shell styles, and generic layout * utilities. Removed: Donkey-app product chrome (hero + statue, brand * lockup + footer signature, floating sign-in pill, garage cards, upgrade * banner, pro badge, tools/parts step chips, the donkey-specific print * stylesheet) and the v6→v7 legacy token-alias shim (dead weight — it only * existed to keep Donkey's own landing/terms/privacy pages working during * their v6→v7 migration; HAM has no such legacy pages). See * VENDOR-MANIFEST.json for upstream_sha256 vs curated_sha256 provenance. */ /* ── 1. Tokens ──────────────────────────────────────────────────────────── */ :root { /* Surfaces — depth scale, low to high */ --bg: #fafafa; --surface-mute: #f4f4f5; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f4f4f5; /* Borders */ --border: #e4e4e7; --border-strong: #d4d4d8; --border-muted: #f1f1f4; /* Text */ --text: #18181b; --text-muted: #52525b; --text-subtle: #71717a; --text-on-primary: #ffffff; /* Brand — violet/indigo */ --primary: #7c3aed; --primary-hover: #6d28d9; --primary-soft: #ede9fe; --primary-soft-hover: #ddd6fe; --primary-strong: #5b21b6; --primary-contrast:#ffffff; /* Semantic */ --success: #16a34a; --success-soft: #dcfce7; --success-text: #166534; --warning: #ea580c; --warning-soft: #fff7ed; --warning-text: #9a3412; --danger: #dc2626; --danger-soft: #fee2e2; --danger-text: #991b1b; --info: #2563eb; --info-soft: #dbeafe; --info-text: #1e40af; /* Focus ring (WCAG 2.4.7) */ --focus-ring: #7c3aed; --focus-ring-offset: #ffffff; /* Radii */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius: 0.5rem; --radius-md: 0.625rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-pill: 9999px; /* Shadows — subtle in light mode */ --shadow-xs: 0 1px 2px rgba(15, 15, 25, 0.04); --shadow-sm: 0 1px 3px rgba(15, 15, 25, 0.06), 0 1px 2px rgba(15, 15, 25, 0.04); --shadow: 0 4px 12px rgba(15, 15, 25, 0.06), 0 2px 4px rgba(15, 15, 25, 0.04); --shadow-lg: 0 12px 32px rgba(15, 15, 25, 0.10), 0 4px 8px rgba(15, 15, 25, 0.05); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 35%, transparent); /* Motion */ --duration-fast: 120ms; --duration: 180ms; --duration-slow: 280ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Layout */ --container: 64rem; /* 1024px main */ --container-narrow: 48rem; --container-wide: 80rem; --header-height: 3.75rem; /* Tap targets */ --tap-min: 2.75rem; /* 44px */ --tap-comfort: 3rem; /* 48px WCAG */ } /* Dark theme overrides — violet-tinted neutrals */ .dark { --bg: #0a0a0f; --surface-mute: #131319; --surface: #18181f; --surface-raised: #1f1f28; --surface-sunken: #0e0e14; --border: #28283a; --border-strong: #3a3a52; --border-muted: #1d1d28; --text: #f5f5f7; --text-muted: #b4b4c4; --text-subtle: #8a8aa0; --text-on-primary: #ffffff; --primary: #a78bfa; --primary-hover: #c4b5fd; --primary-soft: #1e1a2e; --primary-soft-hover: #2a2342; --primary-strong: #ddd6fe; --primary-contrast:#0a0a0f; --success: #4ade80; --success-soft: rgba(34, 197, 94, 0.12); --success-text: #86efac; --warning: #fb923c; --warning-soft: rgba(234, 88, 12, 0.12); --warning-text: #fed7aa; --danger: #f87171; --danger-soft: rgba(220, 38, 38, 0.15); --danger-text: #fca5a5; --info: #60a5fa; --info-soft: rgba(37, 99, 235, 0.15); --info-text: #93c5fd; --focus-ring: #a78bfa; --focus-ring-offset: #0a0a0f; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35); } /* High-contrast theme — accessibility max. Composes with dark/light. Base (.hc) defines font-scaling + common shadow/border tweaks. Color palette is split into .hc.dark (black/white) and .hc:not(.dark) (white/black) so HC can be turned on without forcing a theme change. */ .hc { /* Scale up root font-size so every rem-based element (buttons, inputs, tabs, step cards) grows proportionally — easier on low-vision users without rewriting each component. 16 → 18px base. */ font-size: 112.5%; /* Slightly wider letter spacing improves character disambiguation ('l' vs '1' vs 'I', 'O' vs '0') on low-contrast displays. */ letter-spacing: 0.005em; --shadow-xs: none; --shadow-sm: none; --shadow: none; --shadow-lg: none; } /* HC-dark: black background, white text, amber accents. */ .hc.dark { --bg: #000000; --surface-mute: #000000; --surface: #000000; --surface-raised: #0a0a0a; --surface-sunken: #000000; --border: #ffffff; --border-strong: #ffffff; --border-muted: #ffffff; --text: #ffffff; --text-muted: #ffffff; --text-subtle: #f4f4f4; --text-on-primary: #000000; --primary: #fbbf24; --primary-hover: #fcd34d; --primary-soft: #1a1500; --primary-soft-hover: #2a2200; --primary-strong: #fde68a; --primary-contrast:#000000; --success: #10b981; --success-soft: #001a10; --success-text: #34d399; --warning: #fbbf24; --warning-soft: #1a1500; --warning-text: #fbbf24; --danger: #f87171; --danger-soft: #1a0000; --danger-text: #fca5a5; --info: #60a5fa; --info-soft: #001020; --info-text: #93c5fd; --focus-ring: #fbbf24; --focus-ring-offset: #000000; } /* HC-light: white background, black text, deep purple accents. Uses :not(.dark) so this applies when .hc is on AND .dark is off. */ .hc:not(.dark) { --bg: #ffffff; --surface-mute: #ffffff; --surface: #ffffff; --surface-raised: #f7f7f7; --surface-sunken: #ffffff; --border: #000000; --border-strong: #000000; --border-muted: #000000; --text: #000000; --text-muted: #000000; --text-subtle: #0a0a0a; --text-on-primary: #ffffff; /* Deep violet passes WCAG AAA (contrast > 7:1) against white. */ --primary: #5b21b6; --primary-hover: #4c1d95; --primary-soft: #f5edfc; --primary-soft-hover: #ebdefa; --primary-strong: #3b0764; --primary-contrast:#ffffff; --success: #065f46; --success-soft: #ecfdf5; --success-text: #064e3b; --warning: #78350f; /* amber-900 — 9.5:1 on white (was 7.6:1) */ --warning-soft: #fffbeb; --warning-text: #78350f; --danger: #991b1b; --danger-soft: #fef2f2; --danger-text: #7f1d1d; --info: #1e3a8a; --info-soft: #eff6ff; --info-text: #1e40af; --focus-ring: #000000; --focus-ring-offset: #ffffff; } /* HC typography — bump every small-text class above the WCAG AA large-text threshold (~18.5px). Root is already scaled to 112.5% in .hc, so rem values here resolve against an 18px base. Higher-hierarchy classes stay put — this only affects the "tiny" tier (captions, pills, eyebrows, subtle helpers, small buttons). Also restores full text contrast on anything styled as "subtle" since HC explicitly rejects low-contrast UX. */ .hc .wt-subtle { font-size: 1rem; color: var(--text); } .hc .wt-eyebrow, .hc .wt-eyebrow-mono { font-size: 0.9375rem; font-weight: 800; } .hc .wt-pill { font-size: 0.9375rem; font-weight: 700; } .hc .wt-nav .wt-pill { font-size: 0.875rem; padding: 0.25rem 0.625rem; } .hc .wt-btn-sm { font-size: 0.9375rem; min-height: 2.5rem; } .hc .wt-btn { font-weight: 700; } .hc .wt-tab { font-size: 0.9375rem; font-weight: 700; } .hc .wt-mono { font-size: 0.9375rem; } .hc input, .hc textarea, .hc select { font-size: 1rem; } .hc .wt-footer, .hc footer { font-size: 0.9375rem; } /* Thicken borders so shapes stay legible at bigger sizes — matches HC expectation that UI chrome is never hair-thin. */ .hc .wt-btn, .hc .wt-input, .hc .wt-pill, .hc .wt-icon-btn, .hc input[type="text"], .hc input[type="url"], .hc input[type="email"], .hc textarea, .hc select { border-width: 2px; } /* Stronger focus ring in HC — 3px instead of 2px. */ .hc a:focus-visible, .hc button:focus-visible, .hc input:focus-visible, .hc select:focus-visible, .hc textarea:focus-visible, .hc [tabindex]:focus-visible, .hc .wt-icon-btn:focus-visible, .hc .wt-btn:focus-visible { outline-width: 3px; outline-offset: 3px; } /* ── 2. Base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); /* 1rem so the root scale (including .hc's 112.5% bump) propagates. */ font-size: 1rem; line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); } img, svg, video { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; } /* Tailwind fallback */ .hidden { display: none !important; } ::selection { background: var(--primary-soft); color: var(--primary-strong); } .dark ::selection { color: var(--primary); } /* Scrollbar — subtle */ @media (pointer: fine) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); } } /* ── 3. Focus ring (WCAG 2.4.7) ─────────────────────────────────────────── */ :focus { outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .wt-icon-btn:focus-visible, .wt-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } .hc :focus-visible { outline-width: 3px; outline-color: var(--focus-ring); } /* ── 4. Typography scale ────────────────────────────────────────────────── */ .wt-h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.022em; color: var(--text); } .wt-h2 { font-size: clamp(1.375rem, 3vw, 1.625rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.018em; color: var(--text); } .wt-h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; color: var(--text); } .wt-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } .wt-body { font-size: 0.9375rem; line-height: 1.6; color: var(--text); } .wt-muted { color: var(--text-muted); } .wt-subtle { color: var(--text-subtle); font-size: 0.8125rem; } .wt-mono { font-family: var(--font-mono); } /* ── 5. Surfaces & cards ────────────────────────────────────────────────── */ .wt-surface { background: var(--surface); color: var(--text); } .wt-surface-mute { background: var(--surface-mute); color: var(--text); } .wt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .wt-card-flat { background: var(--surface); border-radius: var(--radius-lg); } .wt-card-soft { background: var(--surface-mute); border: 1px solid var(--border); border-radius: var(--radius-lg); } .wt-divider { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; } /* ── 6. Buttons ─────────────────────────────────────────────────────────── */ .wt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap-comfort); padding: 0 1.125rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); text-decoration: none; white-space: nowrap; user-select: none; } .wt-btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.985); } .wt-btn:disabled { opacity: 0.5; cursor: not-allowed; } .wt-btn-primary { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); box-shadow: var(--shadow-sm); } .wt-btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow); } .hc .wt-btn-primary { color: var(--primary-contrast); } .wt-btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .wt-btn-secondary:hover:not(:disabled) { background: var(--surface-mute); border-color: var(--primary); } .wt-btn-ghost { background: transparent; color: var(--text-muted); } .wt-btn-ghost:hover:not(:disabled) { background: var(--surface-mute); color: var(--text); } .wt-btn-danger { background: transparent; color: var(--danger); border-color: transparent; } .wt-btn-danger:hover:not(:disabled) { background: var(--danger-soft); } .wt-btn-sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; border-radius: var(--radius); } .wt-btn-lg { min-height: 3.25rem; padding: 0 1.5rem; font-size: 0.9375rem; border-radius: var(--radius-lg); } .wt-btn-block { width: 100%; } /* Icon-only buttons (toolbar) */ .wt-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-comfort); height: var(--tap-comfort); border-radius: var(--radius); background: transparent; color: var(--text-subtle); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } .wt-icon-btn:hover { background: var(--surface-mute); color: var(--text); } .wt-icon-btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); } .wt-icon-btn svg { width: 1.25rem; height: 1.25rem; } @media (max-width: 640px) { .wt-icon-btn { width: var(--tap-comfort); height: var(--tap-comfort); } } /* ── 7. Inputs ──────────────────────────────────────────────────────────── */ .wt-input { display: block; width: 100%; min-height: var(--tap-comfort); padding: 0.75rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 0.9375rem; line-height: 1.4; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); } .wt-input::placeholder { color: var(--text-subtle); } .wt-input:hover { border-color: var(--text-subtle); } .wt-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); } .wt-input.wt-input-error { border-color: var(--danger); animation: wt-shake 0.4s ease-out; } .wt-input--with-icon { padding-left: 2.75rem; } @keyframes wt-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /* ── 8. Pills & badges ──────────────────────────────────────────────────── */ .wt-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; background: var(--surface-mute); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; } .wt-pill-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; } .wt-pill-success { background: var(--success-soft); color: var(--success-text); border-color: transparent; } .wt-pill-warning { background: var(--warning-soft); color: var(--warning-text); border-color: transparent; } .wt-pill-danger { background: var(--danger-soft); color: var(--danger-text); border-color: transparent; } .wt-pill-info { background: var(--info-soft); color: var(--info-text); border-color: transparent; } /* wt-pill-pro (paid-tier badge) removed — D9 defers billing; D1 does not inherit Donkey's wallet/credit/pro-tier chrome. */ /* ── 9. Banners ─────────────────────────────────────────────────────────── */ .wt-banner { padding: 1rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); } .wt-banner-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning-text); } .wt-banner-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger-text); } .wt-banner-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info-text); } .wt-banner-primary { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary-strong); } .dark .wt-banner-primary { color: var(--primary); } /* ── 10. Header ─────────────────────────────────────────────────────────── */ .wt-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); transition: padding var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .wt-header__inner { max-width: var(--container); margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--header-height); } .wt-header--compact { box-shadow: var(--shadow-sm); } .wt-header--compact .wt-header__inner { padding-top: 0.5rem; padding-bottom: 0.5rem; } .wt-logo { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.018em; flex-shrink: 0; } .wt-logo__accent { color: var(--primary); } /* Donkey Factory brand lockup (.wt-brandlock*) and signature footer (.wt-footer-brand) removed — brand-asset + signature lockup chrome stays donkey-specific per CLAUDE.md D2; HAM builds its own logo/footer from tokens. */ .wt-nav { display: flex; align-items: center; gap: 0.25rem; } .wt-nav > #auth-controls:not(.hidden) { margin-left: 0.5rem; padding-left: 0.625rem; border-left: 1px solid var(--border); } /* Tighten icon gap on small screens so 4 icons fit ≥360px */ @media (max-width: 640px) { .wt-nav { gap: 0.125rem; } .wt-nav .wt-pill { font-size: 0.6875rem; padding: 0.125rem 0.5rem; } } /* Floating "Sign in" pill (.wt-auth-float*) removed — a built product-page auth widget tied to Donkey's specific sign-in UX, not a base primitive on the D2 inherit list. HAM builds its own auth chrome from tokens if/when auth ships. UNCERTAIN CALL — see task #20 report. */ /* ── 11. Layout helpers ─────────────────────────────────────────────────── */ .wt-container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; width: 100%; } .wt-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1rem; width: 100%; } .wt-stack-xs > * + * { margin-top: 0.375rem; } .wt-stack-sm > * + * { margin-top: 0.625rem; } .wt-stack > * + * { margin-top: 1rem; } .wt-stack-lg > * + * { margin-top: 1.5rem; } /* Hero + hero-statue (.wt-hero*) removed — Donkey's hero-statue landing chrome (CLAUDE.md "Do NOT inherit": hero statue + garage-door reveal). HAM builds its own hero/landing layout from tokens. */ /* ── 12. Tabs ───────────────────────────────────────────────────────────── */ .wt-tab-track { display: flex; gap: 0.25rem; padding: 0.3125rem; background: var(--surface-mute); border-radius: var(--radius-lg); border: 1px solid var(--border); } .wt-tab { flex: 1; min-height: var(--tap-min); padding: 0 0.875rem; border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.005em; color: var(--text-muted); background: transparent; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; white-space: nowrap; transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .wt-tab:hover { color: var(--text); background: var(--surface); } .wt-tab-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .dark .wt-tab-active { background: var(--surface-raised); color: var(--primary); box-shadow: 0 0 0 1px var(--border-strong); } /* ── 13. Step cards (timeline) ──────────────────────────────────────────── */ .wt-step-card { display: flex; gap: 0.875rem; padding: 0.875rem 1rem 1.25rem; position: relative; border-radius: var(--radius-lg); transition: background var(--duration-fast) var(--ease); } .wt-step-card:hover { background: var(--surface-mute); } .wt-step-card:not(:last-child)::before { content: ''; position: absolute; left: calc(1rem + 1.125rem); top: calc(0.875rem + 2.25rem + 0.25rem); bottom: 0; width: 2px; background: var(--border); pointer-events: none; } .wt-step-card--done:not(:last-child)::before { background: var(--success); opacity: 0.35; } .wt-step-card--active { background: var(--primary-soft); } .wt-step-card--done .wt-step-instruction { text-decoration: line-through; text-decoration-color: var(--border-strong); color: var(--text-muted); opacity: 0.75; } .wt-step-num { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--surface-mute); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; font-feature-settings: "tnum"; flex-shrink: 0; margin-top: 0.125rem; position: relative; z-index: 1; border: 1.5px solid var(--border); transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .wt-step-card--active .wt-step-num { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .wt-step-card--done .wt-step-num { background: var(--success); color: #fff; border-color: var(--success); } @keyframes wt-check-pop { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 65% { transform: scale(0.9); } 100% { transform: scale(1); } } .wt-step-num--checked { animation: wt-check-pop 0.35s var(--ease-spring); } .wt-step-check { appearance: none; width: 1.75rem; height: 1.75rem; min-width: 1.75rem; border: 2px solid var(--border-strong); border-radius: var(--radius-pill); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.25rem; transition: all var(--duration-fast) var(--ease); } .wt-step-check:hover { border-color: var(--primary); background: var(--primary-soft); } .wt-step-check:checked { background: var(--success); border-color: var(--success); } .wt-step-check:checked::after { content: ''; display: block; width: 0.6875rem; height: 0.6875rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath fill-rule='evenodd' d='M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } .wt-step-instruction { font-size: 0.9375rem; line-height: 1.65; font-weight: 430; letter-spacing: -0.005em; color: var(--text); } .wt-step-instruction--typing::after { content: ''; display: inline-block; width: 0.5ch; height: 1em; margin-left: 1px; vertical-align: text-bottom; background: var(--primary, currentColor); animation: wt-caret-blink 0.9s steps(1) infinite; } @keyframes wt-caret-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wt-step-instruction--typing::after { animation: none; opacity: 0; } } .hc .wt-step-instruction--typing::after { display: none; } .wt-step-warning { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; padding: 0.625rem 0.875rem; border-radius: var(--radius); background: var(--warning-soft); border-left: 3px solid var(--warning); font-size: 0.8125rem; line-height: 1.5; color: var(--warning-text); } /* wt-chip--part (tools-vs-parts/ingredients chip variant, DIY-repair-guide domain concept) removed — no base .wt-chip class exists independent of it, and it doesn't apply outside the wrench-time domain. */ /* ── 14. Progress bar ───────────────────────────────────────────────────── */ .wt-progress { position: relative; height: 0.5rem; background: var(--surface-mute); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--border); } .wt-progress__fill { position: relative; height: 100%; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #fff)); border-radius: var(--radius-pill); transition: width var(--duration) var(--ease); } .wt-progress__fill::after { content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--primary) 50%, transparent); transition: opacity var(--duration) var(--ease); } .wt-progress--complete .wt-progress__fill { background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 60%, #fff)); } @keyframes wt-burst { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } .wt-burst { animation: wt-burst 0.4s var(--ease-spring) both; } /* Garage cards (.wt-garage-card*) removed — Donkey's saved-projects/"garage" feature (CLAUDE.md "Do NOT inherit": hero statue + garage-door reveal). */ /* ── 15. Loading spinner ────────────────────────────────────────────────── */ .wt-loader { width: 28px; height: 28px; border: 2.5px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: wt-spin 0.65s linear infinite; margin: 0 auto; } @keyframes wt-spin { to { transform: rotate(360deg); } } /* ── 16. Modals ─────────────────────────────────────────────────────────── */ .wt-modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 50; } .wt-modal { position: fixed; inset: 0; z-index: 51; display: flex; align-items: center; justify-content: center; padding: 1rem; pointer-events: none; } .wt-modal__panel { position: relative; z-index: 51; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 28rem; width: 100%; max-height: 90vh; overflow-y: auto; pointer-events: auto; } .wt-modal:not(.hidden) .wt-modal__panel { animation: wt-modal-in var(--duration) var(--ease-spring); } @keyframes wt-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── 17. Section transitions ────────────────────────────────────────────── */ .wt-fade-in { animation: wt-fade-in var(--duration) var(--ease); } @keyframes wt-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── 18. Toast / slide-up transitions ───────────────────────────────────── */ /* .wt-upgrade-banner (paid-tier upsell chrome) removed; wt-slide-up is kept because the voice-mode overlay below depends on this keyframe, and wt-toast-in is a generic toast-appear utility, not upgrade-specific. */ @keyframes wt-slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes wt-toast-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } } .wt-toast-in:not(.hidden) { animation: wt-toast-in var(--duration) var(--ease) both; } /* ── 19. Voice mode overlay ──────────────────────────────────────────────── */ /* Kept per CLAUDE.md factory-core integration contract §5: "Voice mode is a natural HAM fit (call-sign drills, Q-code recall, spoken exam Q&A) — inherit the primitive where free in v1." */ .voice-overlay { animation: wt-slide-up 0.3s var(--ease-spring) both; } .voice-active { color: var(--danger) !important; animation: voice-pulse 1.5s ease-in-out infinite; } @keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── 20. Mobile swipe panels ────────────────────────────────────────────── */ @media (max-width: 640px) { .wt-panels-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .wt-panels-swipe::-webkit-scrollbar { display: none; } .wt-panels-swipe > .wt-panel { scroll-snap-align: start; flex: 0 0 100%; min-width: 100%; display: block !important; } } @media (min-width: 641px) { .wt-panels-swipe { display: block; } .wt-panels-swipe > .wt-panel.hidden { display: none; } } /* Print stylesheet removed — the entire @media print block hardcoded Donkey's own element IDs (#garage-section, #byok-modal, #usage-badge, #pro-badge, ...) and a literal Donkey URL in generated print content ("Step by Step — wrench-time.donkeys.herakles.dev"). None of it is generically reusable; HAM writes its own print stylesheet against its own element IDs if/when print support ships. */ /* ── 21. Reduced motion ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Legacy v6→v7 token-alias shim removed — it only existed to keep Donkey's own landing/terms/privacy pages' inline --pg/--s1/--tx1-style references working during their migration. HAM has no such legacy pages. The empty-state vignette and confirm-pending rules below were rewritten to the canonical v7 token names directly instead of depending on this shim. */ /* Tailwind dark: compatibility: */ /* The .dark class is still applied on (by theme-init.js when */ /* resolved theme is dark), so existing dark: utilities keep working. */ /* ════════════════════════════════════════════════════════════════════════ */ /* Empty-state vignettes */ /* Quiet, brand-tinted line illustrations + invitation copy, for any */ /* "nothing here yet" list view (e.g. no practice history yet). The SVGs */ /* use currentColor so they auto-tint to the local text variable. Rewritten */ /* to canonical v7 token names (was: legacy v6 --s2/--bd/--tx2/--pr/--tx1/ */ /* --txm/--bd2 aliases, removed above). */ /* ════════════════════════════════════════════════════════════════════════ */ .wt-empty-vignette { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2.25rem 1.5rem 2rem; margin: 0; border-radius: 1.25rem; background: var(--surface); border: 1px dashed var(--border); color: var(--text-muted); text-align: center; } .wt-empty-vignette--wide { padding-block: 1.75rem; } .wt-empty-vignette__art { display: block; width: 100%; max-width: 420px; height: auto; color: var(--primary); /* drives currentColor inside the SVG */ opacity: 0.85; } .wt-empty-vignette__caption { max-width: 38ch; display: flex; flex-direction: column; gap: 0.35rem; } .wt-empty-vignette__title { font-family: var(--wt-font-display, inherit); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.005em; color: var(--text); margin: 0; } .wt-empty-vignette__copy { font-size: 0.875rem; line-height: 1.55; color: var(--text-subtle); margin: 0; } @media (min-width: 640px) { .wt-empty-vignette { padding: 2.5rem 2rem 2.25rem; } .wt-empty-vignette__art { max-width: 520px; } } @media (prefers-reduced-motion: no-preference) { .wt-empty-vignette__art { transition: opacity 320ms ease, transform 320ms ease; } .wt-empty-vignette:hover .wt-empty-vignette__art { opacity: 1; } } .hc .wt-empty-vignette { border-style: solid; border-width: 2px; border-color: var(--border-strong); } .hc .wt-empty-vignette__art { opacity: 1; } /* Destructive-action two-step confirm state. Applied by wtConfirm() in app.js. */ .wt-confirm-pending { background-color: color-mix(in srgb, var(--danger, #dc2626) 14%, var(--bg2)) !important; color: var(--danger, #dc2626) !important; outline: 2px solid var(--danger, #dc2626); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .wt-confirm-pending { animation: wt-confirm-pulse 1.2s ease-in-out infinite; } } @keyframes wt-confirm-pulse { 0%, 100% { outline-color: var(--danger, #dc2626); } 50% { outline-color: color-mix(in srgb, var(--danger, #dc2626) 40%, transparent); } } .hc .wt-confirm-pending { outline-width: 3px; background-color: var(--bg2) !important; }