/* ============================================================ global-v3-polish.css — v0.2 ------------------------------------------------------------ Site-wide polish layer. Lifts catalog-spec animations from page-local stylesheets (leviticus-theology.css, noah pages, luke-acts-levitical-arc.css) into the global cascade so any new page inherits them automatically. USAGE: For per-page theming, add a body attribute: ← single theme ← multi-page suite child ← default; same as omitting This file: - sets --page-accent and friends per data-theme value - adds hover/glow/sweep animations to all content surfaces - never uses !important - all keyframes namespaced `pc-*` to prevent collision - reduced-motion users keep hover lifts; loops pause ============================================================ */ /* ============================================================ A. COLOR THEME MENU ------------------------------------------------------------ The menu. Each theme sets three vars that every accent-aware component in v3 already consumes: --page-accent the theme's primary color --page-accent-soft tinted version (~20% opacity) --page-accent-deep darkened version (for high-contrast text) Pick a theme by setting `data-theme` on : For multi-page suites, ALSO set `data-suite-stage` (1-8) so the page picks up the canonical Rainbow palette automatically: data-suite-stage wins when both are set — that way a child page in a Rainbow suite inherits the suite's color even if the author also wrote data-theme="rose" out of habit. ============================================================ */ /* ----- Default (purple — same as v3's no-attribute default) ----- */ :root, body:not([data-theme]):not([data-suite-stage]) { --page-accent: var(--accent-purple); --page-accent-soft: color-mix(in srgb, var(--accent-purple) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-purple) 80%, var(--text)); } /* ----- Single-color themes (the six v3.1 accents) ----- */ body[data-theme="purple"] { --page-accent: var(--accent-purple); --page-accent-soft: color-mix(in srgb, var(--accent-purple) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-purple) 80%, var(--text)); } body[data-theme="rose"] { --page-accent: var(--accent-rose); --page-accent-soft: color-mix(in srgb, var(--accent-rose) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-rose) 80%, var(--text)); } body[data-theme="blue"] { --page-accent: var(--accent-blue); --page-accent-soft: color-mix(in srgb, var(--accent-blue) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-blue) 80%, var(--text)); } body[data-theme="magenta"] { --page-accent: var(--accent-magenta); --page-accent-soft: color-mix(in srgb, var(--accent-magenta) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-magenta) 80%, var(--text)); } body[data-theme="indigo"] { --page-accent: var(--accent-indigo); --page-accent-soft: color-mix(in srgb, var(--accent-indigo) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-indigo) 80%, var(--text)); } body[data-theme="teal"] { --page-accent: var(--accent-teal); --page-accent-soft: color-mix(in srgb, var(--accent-teal) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-teal) 80%, var(--text)); } /* ----- Rainbow palette for 8-page suites (Noah pattern) ------------ Per multi-page-suite-readme-v5-9.md §"Rainbow palette": 1 magenta · 2 rose · 3 purple · 4 indigo · 5 blue 6 teal · 7 deep-violet (purple+indigo blend) · 8 muted (sources) ----------------------------------------------------------------- */ body[data-suite-stage="1"] { --page-accent: var(--accent-magenta); --page-accent-soft: color-mix(in srgb, var(--accent-magenta) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-magenta) 80%, var(--text)); } body[data-suite-stage="2"] { --page-accent: var(--accent-rose); --page-accent-soft: color-mix(in srgb, var(--accent-rose) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-rose) 80%, var(--text)); } body[data-suite-stage="3"] { --page-accent: var(--accent-purple); --page-accent-soft: color-mix(in srgb, var(--accent-purple) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-purple) 80%, var(--text)); } body[data-suite-stage="4"] { --page-accent: var(--accent-indigo); --page-accent-soft: color-mix(in srgb, var(--accent-indigo) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-indigo) 80%, var(--text)); } body[data-suite-stage="5"] { --page-accent: var(--accent-blue); --page-accent-soft: color-mix(in srgb, var(--accent-blue) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-blue) 80%, var(--text)); } body[data-suite-stage="6"] { --page-accent: var(--accent-teal); --page-accent-soft: color-mix(in srgb, var(--accent-teal) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-teal) 80%, var(--text)); } body[data-suite-stage="7"] { --page-accent: color-mix(in srgb, var(--accent-purple) 70%, var(--accent-indigo) 30%); --page-accent-soft: color-mix(in srgb, var(--accent-purple) 20%, transparent); --page-accent-deep: color-mix(in srgb, var(--accent-purple) 90%, var(--text)); } body[data-suite-stage="8"] { --page-accent: var(--text-muted); --page-accent-soft: color-mix(in srgb, var(--text-muted) 20%, transparent); --page-accent-deep: var(--text); } /* ============================================================ B. CONTENT SURFACES — hover lifts The "I'm reading a card" feedback. Subtle translateY, slightly larger shadow, border tints toward --page-accent. ============================================================ */ .theology-card, .see-it-card, .chiasm-card, .hebrew-vocab-card, .vocab-card, .passage-card, .method-card, .academic-note-box, .nt-card, .tier-visual, .hyperlink-card, .concept-card, .fulfillment-item, .dimension-item { transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease); } @media (hover: hover) { .theology-card:hover, .see-it-card:hover, .chiasm-card:hover, .hebrew-vocab-card:hover, .vocab-card:hover, .passage-card:hover, .method-card:hover, .academic-note-box:hover, .nt-card:hover, .tier-visual:hover, .hyperlink-card:hover, .concept-card:hover, .fulfillment-item:hover, .dimension-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04); border-color: color-mix(in srgb, var(--page-accent) 25%, var(--border)); } .see-it-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } } /* ============================================================ C. CONCLUSION CALLOUTS — tile / sweep / glow The catalog's "synthesis at the end" callouts. Each gets the catalog-promised animation. ============================================================ */ /* --- C1. Pattern Summary Box: completion glow --- */ .pattern-summary { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .pattern-summary::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient( 135deg, color-mix(in srgb, var(--accent-magenta) 22%, transparent), color-mix(in srgb, var(--accent-teal) 22%, transparent) ); opacity: 0; z-index: -1; pointer-events: none; animation: pc-summary-glow 4s ease-in-out infinite; } @media (hover: hover) { .pattern-summary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-teal) 18%, transparent); } } @keyframes pc-summary-glow { 0%, 100% { opacity: 0; } 50% { opacity: 0.55; } } /* --- C2. One-Line Takeaway: sweeping top bar --- */ .takeaway { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .takeaway::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--accent-teal), var(--accent-purple), var(--accent-rose), var(--accent-teal) ); background-size: 300% 100%; border-radius: var(--radius) var(--radius) 0 0; animation: pc-takeaway-sweep 5s ease-in-out infinite; } @media (hover: hover) { .takeaway:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } } @keyframes pc-takeaway-sweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- C3. Critical Distinction — now a calm clarification --- */ /* The rose warning treatment (looping top-stripe sweep, rose hover, ⚠ glyph) was retired: it read as an alarm, not a guided note. The calm cool-indigo styling — soft tint, thin static top accent, and a gentle hover — now lives in global-v3.css §13. Nothing to add here. */ /* --- C4. Key Insight: breathing glow + lightbulb glyph --- */ .key-insight { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .key-insight::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: radial-gradient( circle at 80% 20%, color-mix(in srgb, var(--accent-magenta) 25%, transparent), transparent 60% ); opacity: 0; z-index: -1; pointer-events: none; animation: pc-insight-breathe 5s ease-in-out infinite; } .key-insight::after { content: '💡'; position: absolute; top: 0.55rem; right: 0.7rem; font-size: 1.1rem; opacity: 0.35; pointer-events: none; animation: pc-insight-float 6s ease-in-out infinite; } @media (hover: hover) { .key-insight:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-magenta) 18%, transparent); } .key-insight:hover::after { opacity: 0.7; } } @keyframes pc-insight-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 0.55; } } @keyframes pc-insight-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-6deg); } } /* --- C5. Core Logic Quote: hover quote-glyph scale --- */ .core-logic-quote { transition: transform 0.3s ease; } .core-logic-quote::before, .core-logic-quote::after { transition: transform 0.3s ease; } @media (hover: hover) { .core-logic-quote:hover { transform: translateY(-1px); } .core-logic-quote:hover::before, .core-logic-quote:hover::after { transform: scale(1.08); } } /* --- C5. (retired) critical-distinction centering --- */ /* Centered prose suited the old "stop and notice" alarm; the calm clarification reads better left-aligned, like the surrounding body. Intentionally left at default alignment. */ /* --- C6. Glyph micro-animation on the takeaway --- */ /* ⤳ on .takeaway scales 1.15× on hover (extending the gesture). (The old .critical-distinction ⚠ finger-wag was removed along with the warning glyph.) */ .takeaway::before { transition: transform 0.25s var(--ease, ease); } @media (hover: hover) { .takeaway:hover::before { transform: scale(1.15); } } /* ============================================================ D. CARD TOP-BARS — hover scale-in The catalog says mini-card, atlas-node, passage-card, example-card all have "animated gradient top bar that scales in on hover." Promoted to global here. ============================================================ */ .mini-card, .atlas-node, .passage-card, .example-card { position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .mini-card::before, .atlas-node::before, .passage-card::before, .example-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, var(--page-accent), color-mix(in srgb, var(--page-accent) 40%, var(--accent-magenta)) ); border-radius: var(--radius) var(--radius) 0 0; transform: scaleX(0.6); transform-origin: left; transition: transform 0.4s ease; pointer-events: none; } @media (hover: hover) { .mini-card:hover, .atlas-node:hover, .passage-card:hover, .example-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); border-color: color-mix(in srgb, var(--page-accent) 35%, var(--border)); } .mini-card:hover::before, .atlas-node:hover::before, .passage-card:hover::before, .example-card:hover::before { transform: scaleX(1); } } /* ============================================================ E. SHIMMER CARDS — hover wash Catalog calls these "shimmer on hover" — quiet light wash when the reader's attention lands. Hyperbole, ANE comparison, NT card. ============================================================ */ .hyperbole-card, .meso-card, .ane-comparison-card, .nt-card { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .hyperbole-card::after, .meso-card::after, .ane-comparison-card::after, .nt-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--page-accent) 8%, transparent), transparent ); background-size: 200% 100%; background-position: 200% 0; pointer-events: none; transition: background-position 0.8s ease; } @media (hover: hover) { .hyperbole-card:hover::after, .meso-card:hover::after, .ane-comparison-card:hover::after, .nt-card:hover::after { background-position: -200% 0; } .hyperbole-card:hover, .meso-card:hover, .ane-comparison-card:hover, .nt-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--page-accent) 14%, transparent); } } /* ============================================================ F. SPECIAL CALLOUTS High-impact attention-grabbers. Pivot Box already pulses in v3 — these are the others. ============================================================ */ /* --- F1. Revolutionary Inversion Box: rotating glyph + flow stripe --- */ .revolutionary-inversion-box, .inversion-box { position: relative; overflow: hidden; } .revolutionary-inversion-box::before, .inversion-box::before { content: '⟲'; position: absolute; top: 0.45rem; right: 0.65rem; font-size: 1.6rem; color: var(--page-accent); opacity: 0.18; pointer-events: none; animation: pc-inversion-spin 8s linear infinite; } .revolutionary-inversion-box::after, .inversion-box::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.5px; background: linear-gradient(90deg, var(--page-accent), var(--accent-teal)); transform: scaleX(0); transform-origin: left; animation: pc-inversion-flow 3s ease-in-out infinite; pointer-events: none; } @keyframes pc-inversion-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes pc-inversion-flow { 0%, 100% { transform: scaleX(0); } 50% { transform: scaleX(1); } } /* --- F2. Star Divider: 3s twinkle (catalog-spec) --- */ .star-divider { animation: pc-star-twinkle 3s ease-in-out infinite; } @keyframes pc-star-twinkle { 0%, 100% { opacity: 0.55; letter-spacing: 1.5em; } 50% { opacity: 1; letter-spacing: 1.7em; } } /* --- F3. Cosmic Button: ripple-on-hover (catalog-spec) --- */ .cosmic-button, .primary-button { position: relative; overflow: hidden; } .cosmic-button::before, .primary-button::before { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at center, rgba(255, 255, 255, 0.35) 0%, transparent 60% ); opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease, transform 0.5s ease; pointer-events: none; border-radius: inherit; } @media (hover: hover) { .cosmic-button:hover::before, .primary-button:hover::before { opacity: 1; transform: scale(1); } } /* --- F4. Workflow Thread: slide-on-hover (catalog-spec) --- */ .workflow-covenant-thread, .workflow-thread { transition: transform 0.3s ease, box-shadow 0.3s ease; } @media (hover: hover) { .workflow-covenant-thread:hover, .workflow-thread:hover { transform: translateX(4px); box-shadow: -3px 4px 14px color-mix(in srgb, #66bb6a 18%, transparent); } } /* ============================================================ G. TIMELINE-STYLE COMPONENTS — hover feedback ============================================================ */ .state-timeline-item, .scholar-timeline-item { transition: background 0.25s ease, padding-left 0.25s ease, border-radius 0.25s ease; } @media (hover: hover) { .state-timeline-item:hover { background: color-mix(in srgb, var(--state-color, var(--page-accent)) 6%, var(--bg)); padding-left: 1.75rem; } .scholar-timeline-item:hover { background: color-mix(in srgb, var(--page-accent) 6%, transparent); padding-left: 1.5rem; border-radius: 6px; } } /* ============================================================ H. RAINBOW STAGE TRACKER — current-dot pulse Suite-aware. Per-suite tracker styling lives in the suite's own CSS; the current-dot pulse is universal. ============================================================ */ .rainbow-stage-tracker .stage-dot.current, .rainbow-stage-tracker [aria-current="true"] { position: relative; } .rainbow-stage-tracker .stage-dot.current::after, .rainbow-stage-tracker [aria-current="true"]::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--page-accent); opacity: 0; pointer-events: none; animation: pc-tracker-pulse 2.5s ease-in-out infinite; } @keyframes pc-tracker-pulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.65; transform: scale(1.15); } } /* ============================================================ I. REDUCED-MOTION GUARD Hover lifts stay (intent-triggered, single transitions). Loop animations pause. Catalog parity, accessibility intact. ============================================================ */ @media (prefers-reduced-motion: reduce) { .pattern-summary::after, .takeaway::after, .key-insight::before, .key-insight::after, .star-divider, .revolutionary-inversion-box::before, .revolutionary-inversion-box::after, .inversion-box::before, .inversion-box::after, .rainbow-stage-tracker .stage-dot.current::after, .rainbow-stage-tracker [aria-current="true"]::after { animation: none; } .star-divider { opacity: 1; letter-spacing: 1.5em; } } /* ============================================================ J. TILED COMPONENTS — feature-tile + goat-panel ul + mini-card ------------------------------------------------------------ The Component Catalog v1.5 promised richer tile feedback than the 4%/14% surface and 2px translateX hover from global-v3.css §11b. This section delivers it: - .feature-tile stronger surface, lift+glow on hover, icon plate scales 1.08 on hover - .goat-panel > ul legacy

form (Problem / Response, What-Worked / What-Didn't, etc.) get a tiled rhythm without any HTML change. Custom dot bullet via ::before so we can drop the default marker and pad the tile properly. */ .goat-panel > ul { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; } .goat-panel > ul > li { position: relative; padding: 0.65rem 0.85rem 0.65rem 1.7rem; margin: 0; background: color-mix(in srgb, var(--panel-accent, var(--page-accent)) 5%, var(--bg)); border: 1px solid color-mix(in srgb, var(--panel-accent, var(--page-accent)) 18%, var(--border)); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text); transition: transform 0.25s var(--ease, ease), background 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease); } .goat-panel > ul > li::before { content: ''; position: absolute; left: 0.7rem; top: 1rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--panel-accent, var(--page-accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-accent, var(--page-accent)) 18%, transparent); } @media (hover: hover) { .goat-panel > ul > li:hover { transform: translateX(3px); background: color-mix(in srgb, var(--panel-accent, var(--page-accent)) 9%, var(--bg)); border-color: color-mix(in srgb, var(--panel-accent, var(--page-accent)) 36%, var(--border)); box-shadow: 0 3px 10px color-mix(in srgb, var(--panel-accent, var(--page-accent)) 14%, transparent); } } /* --- J4. Mini-card — hover lift + accent border -------------- */ .mini-card { transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease); } @media (hover: hover) { .mini-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--page-accent) 32%, var(--border)); box-shadow: 0 6px 18px color-mix(in srgb, var(--page-accent) 14%, transparent), 0 2px 4px rgba(15, 23, 42, 0.03); } } /* --- J5. Principle box — match the rhythm -------------------- */ .principle-box { transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease); } @media (hover: hover) { .principle-box:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--page-accent) 32%, var(--border)); box-shadow: 0 6px 18px color-mix(in srgb, var(--page-accent) 14%, transparent), 0 2px 4px rgba(15, 23, 42, 0.03); } } /* ============================================================ K. STANDARDS ROW LIST (+ reveal/hover reconciliation) ------------------------------------------------------------ A lively alternative to a : label/value rows with an accent rail, a top-bar that scales in on hover, a hover slide, and a staggered fade-in entrance. Promoted from the Authoring Standards page so any page can use it. Theme per row with --rail (defaults to --page-accent).

…
…

============================================================ */ .std-list { display: grid; gap: 0.6rem; margin: 1.25rem 0 0; } .std-head { display: grid; grid-template-columns: 232px 1fr; gap: 1.4rem; padding: 0.1rem 1.25rem 0.15rem; } .std-head span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .std-row { --rail: var(--page-accent); position: relative; display: grid; grid-template-columns: 232px 1fr; gap: 0.25rem 1.4rem; align-items: baseline; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--rail); border-radius: var(--radius); padding: 0.9rem 1.25rem; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease), border-color 0.25s var(--ease, ease); } .std-row::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rail), color-mix(in srgb, var(--rail) 30%, transparent)); transform: scaleX(0.3); transform-origin: left; transition: transform 0.4s var(--ease, ease); } .std-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.2; color: var(--page-accent-deep, var(--page-accent)); } .std-body { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-soft); max-width: none; } @media (max-width: 640px) { .std-head { display: none; } .std-row { grid-template-columns: 1fr; gap: 0.3rem; } } /* ------------------------------------------------------------ Reveal <-> hover reconciliation ------------------------------------------------------------ Global §56 reveals stagger-children with `revealUp`, which animates `transform` and fills `forwards`. A forwards-filled animation OUTRANKS a later `:hover { transform }`, so any hover slide on a revealed row is silently suppressed once it scrolls in. Fix (same idiom global §56 already uses for timeline rows via `animation-name: revealLeft`): for row/card components whose hover uses transform, (a) neutralise the global resting translateY, and (b) swap the revealed animation to an opacity-only fade so `transform` is never owned by the animation and stays free for :hover. The entrance becomes a staggered fade rather than a slide-up — a deliberate trade so the hover motion works. Existing rainbow rows (.wax-row, .ov-row, .retell) are included so they benefit too. ------------------------------------------------------------ */ [data-reveal-children] > .std-row, [data-reveal-children] > .wax-row, [data-reveal-children] > .ov-row, [data-reveal-children] > .retell { transform: none; } [data-reveal-children][data-revealed] > .std-row, [data-reveal-children][data-revealed] > .wax-row, [data-reveal-children][data-revealed] > .ov-row, [data-reveal-children][data-revealed] > .retell { animation-name: pc-reveal-fade; } @keyframes pc-reveal-fade { from { opacity: 0; } to { opacity: 1; } } /* std-row hover — generic rule sits after the resting override above (equal specificity, later source = wins on hover); the scoped pair is belt-and-suspenders for the data-reveal case. */ @media (hover: hover) { .std-row:hover, .std-list[data-reveal-children] > .std-row:hover { transform: translateX(5px); box-shadow: 0 10px 26px -12px rgba(15, 23, 42, 0.28); border-color: color-mix(in srgb, var(--rail) 45%, var(--border)); } .std-row:hover::before, .std-list[data-reveal-children] > .std-row:hover::before { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { [data-reveal-children][data-revealed] > .std-row, [data-reveal-children][data-revealed] > .wax-row, [data-reveal-children][data-revealed] > .ov-row, [data-reveal-children][data-revealed] > .retell { animation: none; opacity: 1; } .std-row, .std-row::before { transition: none; } }