/* ========================================================================== SkilD · CRAFT LAYER — motion, interaction state, and edge detail Built 17 August 2026, session S12, Phase A→C. WHY THIS IS A NEW FILE AND NOT AN EDIT TO components.css: components.css is DONE (skild-wordpress §4: "19,663 b, DONE. Do not rebuild it."). The craft layer is a separate concern with a separate lifecycle, so it is built new rather than patched in — the project's own standing rule. THIS FILE INVENTS NO VALUES. Every duration, easing, shadow, colour and radius below is an existing token already registered in theme.json. Where a token did not exist, nothing was added — the gap is recorded instead. WHAT IT ANSWERS, measured in Phase A on ten surfaces (03_TASKS\Web Build\SKILD-CRAFT-GAP-PHASE-A.md): M1 MOTION 3 transition declarations existed across 39,237 b of CSS. 1 of 14 components animated. 0 of 20 patterns did. duration--fast, duration--slow and ease--inout were DEFINED AND NEVER CALLED. Linear ships cubic-bezier(.32,.72,0,1); our ease--inout is byte-identical and had never been used. M6 STATES ::selection was browser default. Four of eight competitors style it. No disabled state existed on any control. E.7 AND E.10 ARE LAW — approved by the owner 17 August 2026 ("Approved."), as two of the five web clauses E.7–E.11 now carried in the build plan's design-law section. This file implements them. ========================================================================== */ /* -------------------------------------------------------------------------- E.10 · SELECTION — the cheapest edge detail there is, and it was missing. White on crimson is 7.48:1. The same pair the footer and stat band use. -------------------------------------------------------------------------- */ ::selection{ background:var(--wp--preset--color--crimson); color:var(--wp--preset--color--white); } /* -------------------------------------------------------------------------- E.7 · MOTION — the tokens finally called. fast 130ms · base 220ms · slow 420ms ease--out cubic-bezier(.16,1,.3,1) · ease--inout cubic-bezier(.32,.72,0,1) RULE APPLIED: transform and opacity only. Both are compositor properties, so they do not trigger layout — which matters on LiteSpeed shared hosting where DOM weight is already the cheapest available win. NOTHING ANIMATES ON SCROLL. No reveal-on-scroll, no stagger. A marketing page that hides its content until scrolled is a page that fails with JS disabled and reads as a template. Motion here is response to input only. -------------------------------------------------------------------------- */ /* CARD · the most repeated component in the system. A 2px rise, nothing more. */ /* TIMING NOTE, 17 Aug 2026, after the owner hovered the first build and said it felt slow. He was right and the fix is not a compromise — it is the rule. HOVER FEEDBACK IS RESPONSE, NOT TRANSITION. A pointer is already on the element, so anything past ~150ms reads as lag rather than as motion. base (220ms) is correct for a thing that ENTERS or LEAVES; fast (130ms) is correct for a thing that ANSWERS. Every hover below moved base -> fast. */ .skild-card, .skild-prog, .skild-instructor, .skild-fit{ transition:transform var(--wp--custom--duration--fast) var(--wp--custom--ease--out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease--out); will-change:transform; } .skild-prog:hover, .skild-instructor:hover{ transform:translateY(-2px); box-shadow:var(--wp--preset--shadow--two); } /* .skild-card carries NO shadow by spec — the c-100 fill IS the component (components.css 5.3: "NO border. NO shadow. NO edge stripe."). So the card rises without gaining one. Deliberate: the spec is not overridden here. */ .skild-card:hover{ transform:translateY(-2px); } /* BUTTON · the lift already exists as three shadow tokens (cta / cta-h / cta-a) and components.css already transitions between them. What was missing is the physical movement that makes a press read as a press. */ .skild-btn{ transition:background var(--wp--custom--duration--fast) var(--wp--custom--ease--out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease--out), transform var(--wp--custom--duration--fast) var(--wp--custom--ease--out); } .skild-btn:hover{ transform:translateY(-1px); } .skild-btn:active{ transform:translateY(1px); } /* pressed goes DOWN, not up */ /* E.10 · DISABLED — did not exist on any control before this file. Not a colour change: a disabled control that only greys reads as a styling bug. Opacity plus not-allowed plus no motion is unambiguous. */ .skild-btn[disabled], .skild-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none; } /* LINKS · colour already transitions via theme.json's :hover. Underline offset is the detail that stops a hovered link looking like a mis-set one. */ a{ text-underline-offset:.14em; } /* ACCORDION · core/details. The marker is hidden by components.css, so the only affordance the summary row has is the cursor. Give it a real one. */ .skild-mod summary{ transition:color var(--wp--custom--duration--fast) var(--wp--custom--ease--out); } .skild-mod summary:hover{ color:var(--wp--preset--color--crimson); } .skild-mod[open] summary{ color:var(--wp--preset--color--crimson); } /* SUB-NAV · the underline already moves on hover; give it the timing so it does not snap. ease--inout is used here — its first call anywhere. */ .skild-subnav a{ transition:color var(--wp--custom--duration--fast) var(--wp--custom--ease--inout), border-bottom-color var(--wp--custom--duration--base) var(--wp--custom--ease--inout); } /* MOBILE BAR · slides rather than appearing. duration--slow's first call. */ @media(max-width:767px){ .skild-mobilebar{ transition:transform var(--wp--custom--duration--slow) var(--wp--custom--ease--inout); } } /* -------------------------------------------------------------------------- REDUCED MOTION — style.css already carries a global block. This is scoped belt-and-braces for the properties introduced above, because the global one sets duration to 0.01ms rather than removing transforms, and a translateY that lands instantly is still a layout the user did not ask for. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .skild-card,.skild-prog,.skild-instructor,.skild-fit,.skild-btn,.skild-mobilebar{ transition:none !important; } .skild-card:hover,.skild-prog:hover,.skild-instructor:hover, .skild-btn:hover,.skild-btn:active{ transform:none !important; } } /* -------------------------------------------------------------------------- E.10 · STATE COMPLETIONS — Stage B (B7). Five states on every interactive element: rest, hover, focus-visible, active, disabled. Rest/hover/focus/ disabled were built above and in components.css; these close the gaps the enumeration found. Every value is an existing token. The Fluent Forms selector that used to sit in the disabled block is gone with the plugin — forms are hand-written in Stage C (plan ruling, 18 Aug 2026). -------------------------------------------------------------------------- */ /* secondary button, pressed — the wash ground is the press feedback */ .skild-btn--secondary:active{ background:var(--wp--preset--color--crimson-wash); color:var(--wp--custom--ramp--c-700); border-color:var(--wp--custom--ramp--c-700); } /* ghost button, pressed */ .skild-btn--ghost:active{ color:var(--wp--preset--color--ink); } /* on-dark button, pressed — label deepens, fill stays white */ .skild-btn--on-dark:active{ color:var(--wp--preset--color--crimson-deep); } /* links, pressed. On light grounds the press deepens to c-900; on dark grounds it goes amber — 4.60 on crimson, 8.60 on navy, 8.94 on ink, all recomputed passes. crimson-deep on crimson would vanish (1.46-1.95 band). */ a:active{ color:var(--wp--preset--color--crimson-deep); } :where(.skild-on-crimson,.skild-on-navy,.skild-on-ink,.skild-panel,.skild-footer) a:active{ color:var(--wp--preset--color--amber); } /* sub-nav: the current section is a STATE, not a decoration */ .skild-subnav a[aria-current="true"], .skild-subnav a.is-current{ color:var(--wp--preset--color--crimson); border-bottom-color:var(--wp--preset--color--crimson); } /* selection inverts on dark grounds — white-on-crimson vanishes there */ :where(.skild-on-crimson,.skild-on-navy,.skild-on-ink,.skild-panel,.skild-footer, .has-crimson-background-color,.has-crimson-deep-background-color, .has-navy-background-color,.has-ink-background-color) ::selection{ background:var(--wp--preset--color--white); color:var(--wp--preset--color--crimson); } /* -------------------------------------------------------------------------- NOT DONE HERE, AND WHY — recorded rather than silently omitted. M4 OPTICAL TYPOGRAPHY theme.json's tracking ladder is already correct (disp -0.038em → card -0.008em). Phase A found it UNAPPLIED on home-copy, which is an Elementor page, not the theme. Nothing to fix in the theme. Verify on the block-theme draft instead. M5 SPATIAL RHYTHM y-tight / y / y-lg exist and are applied per pattern. Whether they REPEAT on one interval is a pattern ordering question, not a CSS one. Measure the rendered page, then decide. M2 DEPTH the eight-step shadow ladder already exists and is correct. Phase A found FOREIGN shadows only on home-copy, again an Elementor page. M3 PHOTOGRAPHY cannot be fixed in CSS. Blocked on the media pipeline (srcset 6 of 28, no CDN, no dimensions) and on the faculty consent/photography item. ========================================================================== */