/* ============================================================================ TARA — S44 skin: AURORA — Phase 5 patch: D4c tactile press layer (cross-view layer — route N/A; loads after styles.css + skin-aurora-shell.css + skin-aurora-views.css + Phase 3b/4 patches so it wins ties). OWNER DEMAND S43-D4c: the Neo-Brutal prototype's physical "key press" feel (06-neo-brutal.html .btn/.pop/.chip) on every clickable, expressed in the AURORA language — scale-down + shadow DIP on glass (mirroring the Phase 3a .btn:active translateY(0) scale(.985), skin-aurora-shell.css:249 / skin-aurora-views.css:110-111) — never the prototype's literal hard shadows. W15 RECONCILIATION (hard): press lives on :active and :focus-visible ONLY. ZERO new :hover movement is added anywhere in this file. No shipped transform:none pin is undone or restated-away: - #thList .trow .btn:hover pin (views:820-823), #userList/#rrList .trow .btn:hover pins (views:1645-1648) — hover pins untouched; those buttons' :active press stays the base 3a scale (views:110-111), not restated here. - .trow[data-mi] .btn:hover AND :active pin (views:1356-1359) — BOTH left pinned; this file adds no rule on those buttons. - #pubDelSel:disabled hover/active pin (views:1242-1248) — left pinned; every selector here that can hit a disableable control carries :not(:disabled), so disabled stays motionless everywhere. - heatmap .hm .d hover/active/.sel transform pins (views:594-598) — left pinned; the cell press below is box-shadow-ONLY (no transform property). - .theme-swatch:hover pin (views:1951-1953) — untouched; press is :active. - button.is-locked pin (views:216-217) — locked live tabs are emitted with the disabled attribute (app.js:1322, :2152), so :not(:disabled) skips them. SCOPE OATH (documented decision for this cross-view layer): every rule is scoped html[data-ui="aurora"] AND lives inside #main, #modalBg, #sidebar, or on #navToggle (the burger — direct child of , app.js:3486, position:fixed per styles.css:417 so a scale press cannot shift layout; added for cross-skin parity, S47 press-verifier). #sidebar is admitted because the nav links (app.js:218) and the theme switch (app.js:222) are real clickables outside #main; the sidebar .btn pair (#installBtn/#logoutBtn, app.js:220,:225) already presses via skin-aurora-shell.css:166 — not restated. #gate/.gp-* stay untouched (Phase-1 file owns them — not "trivially safe", excluded). #toast is not clickable — untouched. INVENTORY EVIDENCE (js/app.js): - nav links: app.js:218 () — pressed here (A). - .btn family incl. a.btn links (app.js:1557,2558-2562,3175,3196) and #pubTabs .btn sm buttons (app.js:1881): 3a already presses — NOT restated. - .chips buttons: app.js:500,520,1065,1242,1322,1340,1343,2149,2152 — base styles.css:135 already scales(.96) on :active; this file ADDS the aurora shadow dip only (C). - .seg buttons: app.js:633,653 (+ .seg res) — base styles.css:167 already scales(.96); aurora shadow dip added (C). (.seg .btn green/red at app.js:1524 are .btn — covered by 3a.) - .tabs button: zero emitted markup (grep app.js: no class="tabs") — the visible tab bars are .chips or #pubTabs .btn — no rule needed. - .pairs buttons: app.js:1334 (#pairGrid — payout-sorted every ~10s, Payouts poll app.js:388-424) and app.js:2145 (session slots) — press is box-shadow-ONLY (D): paint-level, cannot shift layout mid-repaint. - .pcheck labels: app.js:2164 (#ownGrid — same payout-sorted region) — box-shadow-only press (D), same reasoning. - clickable rows: #recent .trow (app.js:543), #thList .trow (app.js:1105), .trow[data-mi] (app.js:1561), #pubBody .trow[data-sid] (app.js:1895), #sigBody .trow[data-sid] (app.js:2023) — paint-only press (E): a row transform would ALSO move the row's inner money-adjacent buttons while they are being pressed (CSS :active propagates to ancestors), which is exactly what the [data-mi]/#thList pins exist to prevent. Non-clickable .trow lists (#userList/#rrList rows, settings device rows) get nothing. - heatmap day cells: app.js:592 (click-select :601-603) — box-shadow-only press (F), future .fut cells excluded. - .hol-chip ✕ remove: app.js:3145 — scale press (G). - .theme-swatch: app.js:3036 — :active scale + glow (H); hover stays pinned. - .spin .sb steppers: app.js:1349-1351 — scale + accent snap (I). - checkboxes/radios: rules checklist app.js:629, .pcheck input, manage checkboxes app.js:1951-area, settings toggles app.js:3036-area — accent press (J), :not(:disabled). - text inputs/selects/textareas (all views, e.g. app.js:644,1329,3145): :focus-visible ring "pop" (K) — box-shadow only, NO layout shift. - bare links: a.muted "View All →" app.js:517, .op-fcard link app.js:2486 — ink dip (L). details.exp summary (genFilterBox) — background dip (M). EXCLUSIONS (hard, restated): no .pill rule anywhere (S43 inline hsl pills keep winning); nothing on #nextSigRow or the #pubBody countdown timers (the pub row press E is paint-only, so timer repaints cannot be displaced); no display rules; no hover movement; disabled controls motionless (:not(:disabled) + shipped pins); .stat tiles are not clickables — no press. VM GPU: transform/box-shadow/background/opacity only — no filters, no backdrop-filter, no @keyframes, no infinite animations; all new transition-duration overrides are ≤ .15s (press snap), release re-uses the elements' existing base transitions. REDUCED MOTION: the base guards (styles.css:290 duration-shortening; shell:264-270 and views:493-503 selector lists) do NOT auto-cover new selectors, so every transform this file introduces (A, G, H, I, J) is switched off in this file's OWN prefers-reduced-motion block at the end. Box-shadow / background / opacity presses stay on for motion-sensitive users — motionless tactile feedback by design. Palette: --ash- tokens only, plus rgba literals already used by the aurora base files for the same hues: rgba(40,50,110,…) (shell shadows :35-36, views hm hover :372), rgba(120,130,180,.12) (views skeleton :464, spin .sb :364), rgba(99,102,241,.22) (views .hm .d.sel :374). No new palette values. SELF-CHECK vs the 10 HARD RULES (adapted): 1 scope oath = html[data-ui= "aurora"] + #main/#modalBg/#sidebar only, documented above ✓; 2 no .pill rule ✓; 3 CSS only, no pseudo-element text content ✓; 4 no display/ visibility rules, nothing hidden or resized, honest empty states untouched ✓; 5 no new @keyframes/infinite animation/backdrop/filter ✓; 6 reduced- motion: own guard for every new transform ✓; 7 W15: zero new hover movement, no pin undone ✓; 8 disabled stays motionless ✓; 9 aurora language + existing tokens/literals only ✓; 10 AutoRefresh-safe: every rule is a static state rule that re-resolves identically on redraw ✓. ========================================================================== */ /* -------------------------------------------------------------------------- A — SIDEBAR NAV LINKS (app.js:218) press. Base nav a:hover already travels translateX(4px) (styles.css:90 — pre-existing, not this layer's to add or remove); the press keeps that X-offset so the key does not jump sideways under the pointer, and dips with the 3a-family scale. Snap ≤.15s; release rides the base .2s transition (styles.css:88). :focus-visible glow already shipped (skin-aurora-shell.css:121-123) — not restated. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #sidebar nav a:active{ transform:translateX(4px) scale(.97); transition-duration:.12s; } /* -------------------------------------------------------------------------- B — SIDEBAR THEME SWITCH (app.js:222) press: ring snap only — the knob's day/night travel transform is contractually untouched (skin-aurora-shell.css:172), so the press is paint-only on the track. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #sidebar .theme-switch:active{ box-shadow:var(--ash-glow); } /* -------------------------------------------------------------------------- B2 — BURGER (#navToggle, app.js:3486; position:fixed styles.css:417) — press parity with the terminal layer (S47 press-verifier): scale + glow. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #navToggle:active{ transform:scale(.92); box-shadow:var(--ash-glow); } /* -------------------------------------------------------------------------- C — CHIPS + SEG KEYS: base styles.css already presses them with scale(.96) (:135 chips, :167 seg) — NOT restated. This adds the aurora half of the press: the resting soft shadow dips to a shallow inset, so the key reads as pushed INTO the glass. Snap .1s (base .3s/.18s transitions would smear the press); release re-uses base timing. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .chips button:not(:disabled):active, html[data-ui="aurora"] #main .seg button:not(:disabled):active, html[data-ui="aurora"] #modalBg .seg button:not(:disabled):active{ box-shadow:inset 0 2px 6px rgba(40,50,110,.16); transition-duration:.1s; } /* -------------------------------------------------------------------------- D — PAIR GRID + PAIR CHECK LABELS (payout-keyed regions, app.js:1334, :2145, :2164): box-shadow-ONLY press. #pairGrid re-sorts on the ~10s payout poll (app.js:388-424) and the 3a section is explicitly "W15: no movement" (views:335-340) — a paint-level inset dip cannot shift layout mid-repaint and adds no transform to fight that contract. .on keys dip from their gradient glow to the same inset — still obviously selected (gradient fill + white text remain). -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .pairs button:not(:disabled):active, html[data-ui="aurora"] #main .pcheck label:active{ box-shadow:inset 0 2px 6px rgba(40,50,110,.16); transition-duration:.1s; } /* -------------------------------------------------------------------------- E — CLICKABLE ROWS (openTrade/openMySignal/openPubSignal rows — app.js:543,1105,1561,1895,2023): paint-only press so the row's inner pinned buttons ([data-mi] pin views:1356-1359, #thList pin views:820-823) can never be moved by ancestor-:active propagation, and #pubBody timer repaints cannot be displaced. Hover stays the shipped color-only rgba(255,255,255,.55) (views:248-249); press dips darker + inset. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main #recent .trow:active, html[data-ui="aurora"] #main #thList .trow:active, html[data-ui="aurora"] #main .trow[data-mi]:active, html[data-ui="aurora"] #main #pubBody .trow[data-sid]:active, html[data-ui="aurora"] #main #sigBody .trow[data-sid]:active{ background:rgba(120,130,180,.12); box-shadow:inset 0 2px 8px rgba(40,50,110,.10); } /* -------------------------------------------------------------------------- F — HEATMAP DAY CELLS (app.js:592, select :601-603): the shipped W15 pin keeps transform:none on hover/active/.sel (views:594-598) — untouched. Press = box-shadow-only ring + dip (same rgba(99,102,241,.22) ring family as the shipped .sel state, views:374). Future cells excluded. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .hm .d:not(.fut):active{ box-shadow:0 0 0 3px rgba(99,102,241,.22), inset 0 2px 6px rgba(40,50,110,.14); } /* -------------------------------------------------------------------------- G — HOLIDAY CHIP ✕ (app.js:3145): tiny remove key — quick finger-press scale. Base hover recolor (styles.css:469) untouched (color, no movement). -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .hol-chip button:active{ transform:scale(.9); } /* -------------------------------------------------------------------------- H — THEME SWATCHES (app.js:3036): hover stays pinned motionless (views:1951-1953 — untouched); the press itself may move: 3a-family scale + glow ring. Base transition already carries transform .16s (styles.css:552); snap tightened to .12s. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .theme-swatch:active{ transform:scale(.97); box-shadow:var(--ash-glow); transition-duration:.12s; } /* -------------------------------------------------------------------------- I — TIME SPINNER STEPPERS (app.js:1349-1351): press = scale + accent snap (hover already fills accent, views:366 — press confirms it). -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main .spin .sb:not(:disabled):active{ transform:scale(.92); background:var(--ash-accent); color:#fff; } /* -------------------------------------------------------------------------- J — CHECKBOXES / RADIOS (rules checklist app.js:629, .pcheck inputs, manage-signal checkboxes, settings toggles): accent press — a quick scale on the box itself. Paint-only at layout level (the input's layout box is unchanged — nothing resized), disabled excluded. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main input[type="checkbox"]:not(:disabled):active, html[data-ui="aurora"] #main input[type="radio"]:not(:disabled):active, html[data-ui="aurora"] #modalBg input[type="checkbox"]:not(:disabled):active, html[data-ui="aurora"] #modalBg input[type="radio"]:not(:disabled):active{ transform:scale(.9); } /* -------------------------------------------------------------------------- K — FORM FIELD FOCUS "POP": the shipped :focus glow (views:160-168) eases in at .3s; keyboard focus gets a snappier, slightly deeper ring — box- shadow only, zero layout shift (border-width untouched at 1.5px). -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main input:focus-visible, html[data-ui="aurora"] #main select:focus-visible, html[data-ui="aurora"] #main textarea:focus-visible, html[data-ui="aurora"] #modalBg input:focus-visible, html[data-ui="aurora"] #modalBg select:focus-visible, html[data-ui="aurora"] #modalBg textarea:focus-visible{ box-shadow:var(--ash-glow), 0 6px 16px rgba(40,50,110,.10); transition-duration:.12s; } /* -------------------------------------------------------------------------- L — BARE TEXT LINKS in views (a.muted app.js:517, .op-fcard app.js:2486): ink dip on press — paint-only (inline links can't scale without reflow risk). a.btn excluded: the 3a .btn press already owns those. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main a:not(.btn):active{ opacity:.7; } /* -------------------------------------------------------------------------- M — DISCLOSURE SUMMARY (details.exp, /generate filter box): background dip on press — display/open mechanics untouched. -------------------------------------------------------------------------- */ html[data-ui="aurora"] #main details.exp summary:active{ background:var(--ash-glass-2); } /* -------------------------------------------------------------------------- REDUCED MOTION — own guard for every transform THIS file introduces (A, G, H, I, J). Base guards (styles.css:290, shell:264-270, views:493-503) do not auto-cover these selectors. Shadow/background/ opacity presses above stay on: motionless tactile feedback. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html[data-ui="aurora"] #navToggle:active, html[data-ui="aurora"] #sidebar nav a:active, html[data-ui="aurora"] #main .hol-chip button:active, html[data-ui="aurora"] #main .theme-swatch:active, html[data-ui="aurora"] #main .spin .sb:not(:disabled):active, html[data-ui="aurora"] #main input[type="checkbox"]:not(:disabled):active, html[data-ui="aurora"] #main input[type="radio"]:not(:disabled):active, html[data-ui="aurora"] #modalBg input[type="checkbox"]:not(:disabled):active, html[data-ui="aurora"] #modalBg input[type="radio"]:not(:disabled):active{ transform:none; } }