/* ========================================================================= FunLida Material Layer — Stage 3 (W4) Loads after funlida-rhythm.css. Depth, edges and surface quality. Revert: novamira/disable-file on this file. Nothing else depends on it. SPECIFICITY NOTE — read before editing. Elementor's frontend.min.css carries `.elementor a { box-shadow: none }` at (0,1,1). That BEATS a bare `.fl-hts-card` at (0,1,0) no matter how late this file loads, which is why the teacher-strip cards render shadowless today despite design.css:882 setting one. Every card rule below is therefore scoped to its container to reach (0,2,0), which clears (0,1,1) on class count while staying under Elementor's compiled (0,2,1) element-ID selectors. Do not "simplify" these back to one class. No layout-affecting properties. Borders that already exist only change colour; cards that had no border get an inset ring instead, so nothing reflows. The one deliberate exception is the teacher-strip track padding, which gains room for the new shadow to render uncropped. ========================================================================= */ /* --- 1. ELEVATION HIERARCHY ---------------------------------------------- Before: 4 shadow values with no relationship (and one accidental none). After: a real ladder, so depth encodes importance. step 1 teacher-strip cards dense, many, low stakes step 2 how-it-works / lessons / standard pricing step 3 testimonials filled magenta, sits above the page step 4 featured "Starter" the one card we want chosen Hover partners come from the same scale, one step up. */ .fl-hts-track .fl-hts-card { box-shadow: var(--fl-shadow-1); } .fl-hts-track .fl-hts-card:hover { box-shadow: var(--fl-shadow-1-hover); } .fl-section .fl-step-card, .fl-section .fl-explore-card { box-shadow: var(--fl-shadow-2); } .fl-section .fl-step-card:hover, .fl-section .fl-explore-card:hover { box-shadow: var(--fl-shadow-2-hover); } .fl-plan-grid .fl-plan-card { box-shadow: var(--fl-shadow-2); } .fl-plan-grid .fl-plan-card:hover { box-shadow: var(--fl-shadow-2-hover); } /* --- 2. HAIRLINE EDGES ---------------------------------------------------- The detail that makes a card read as an object rather than a lighter rectangle. step/explore/hts already carry a 1px border in --fl-tint-200; only the colour changes, so there is no reflow. Deviation from FRONTEND-PLAN W4, on purpose: the plan specifies primary-100 (#FDE7EE), but that is LIGHTER than the tint-200 (#F7E3EA) already in place — it would soften the edge the workstream exists to strengthen. --fl-border-soft (#F3D9E1) is one step firmer and is the token the rest of the system already uses for edges. */ .fl-section .fl-step-card, .fl-section .fl-explore-card, .fl-hts-track .fl-hts-card { border-color: var(--fl-border-soft); } /* Testimonials are filled magenta — a pink hairline would vanish. A white inset ring gives the same "object" read against the fill, and inset rings cost no layout. Elevation 3 is folded into the same declaration because box-shadow is one property, not two. */ .fl-tst-grid .fl-tst-card { box-shadow: var(--fl-shadow-3), inset 0 0 0 1px var(--fl-a-white-16); } .fl-tst-grid .fl-tst-card:hover { box-shadow: var(--fl-shadow-3-hover), inset 0 0 0 1px var(--fl-a-white-30); } /* Pricing cards keep their per-tier 2px branded borders, which the PHP builder sets deliberately (sec-packages.php: #F2D5DF / #E4487A). Not touched here. */ /* --- 3. THE FEATURED TIER ------------------------------------------------- "Starter" is the recommended tier and already carries the magenta 2px border and "Save 10%" badge. Elevation 4 plus a low-angle sheen makes that recommendation visible before the copy is read. WHY AN INSET SHADOW AND NOT A GRADIENT. The obvious implementation is `background-image: linear-gradient(...)`. It does not work here and cannot be made to work cleanly. Elementor's container lazy-load injects this inline, in the document head: .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) { background-image: none !important; } That is (0,5,0) AND !important, and a sibling rule applies the same to every descendant, so there is no element under this card where a gradient survives. Beating it would mean !important at (0,5,0)+ against a framework rule that flips state on scroll — precisely the kind of load-bearing override Stage 1 and 2 proved bad. An inset box-shadow produces the same soft top wash, is not policed by that rule, and rides the box-shadow declaration this selector already owns. Verified live: computed value retained. */ .fl-plan-grid .fl-plan-card.fl-plan-featured { box-shadow: var(--fl-shadow-4), inset 0 90px 72px -72px var(--fl-primary-200); } .fl-plan-grid .fl-plan-card.fl-plan-featured:hover { box-shadow: var(--fl-shadow-4-hover), inset 0 90px 72px -72px var(--fl-primary-200); } /* --- 4. HERO DEPTH -------------------------------------------------------- A soft radial glow behind the existing gradient circle. Composition is unchanged: this rides on .fl-hero-art::before, which is z-index 1, so it paints behind Lida (z2), the rings (z3) and the doodles (z6). Implemented as a spread box-shadow rather than a new element or a background layer, because ::before already owns its background and ::after already owns the hair overlay — both pseudo-slots are taken. */ .fl-hero-art::before { box-shadow: 0 30px 80px -24px var(--fl-a-primary-22), 0 0 120px 24px var(--fl-a-primary-08); } /* --- 5. TEACHER STRIP ----------------------------------------------------- The 9th card clips mid-width at 1440, which currently reads as broken rather than scrollable. Edge fades state the affordance, and scroll-snap makes the gesture land cleanly on a card. The mask is horizontal-only, so it never clips the new card shadows vertically. The track's block padding grows to give those shadows room inside the scroll container — the one intentional layout change in this file, worth ~10px of hero height. */ .fl-hts-track { padding-block: 8px 12px; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 20px, #000 calc(100% - 56px), transparent 100% ); } .fl-hts-track .fl-hts-card { scroll-snap-align: start; } /* --- 6. EXPLICIT TRANSITION PROPERTIES ------------------------------------ Acceptance criterion: zero `transition: all` in FunLida stylesheets. All four live sites are re-declared here with explicit property lists, so the browser stops watching every animatable property on these elements. Durations move onto the motion tokens at the same time. Sources replaced: funlida-design.css:110 .fl-btn-secondary .elementor-button funlida-design.css:791 .fl-hstrip-prev / .fl-hstrip-next funlida-design.css:872 .fl-hts-prev / .fl-hts-next funlida-auth.css:117 My Account nav links */ .fl-btn-secondary .elementor-button { transition: background-color var(--fl-dur-base) var(--fl-ease-out), color var(--fl-dur-base) var(--fl-ease-out), border-color var(--fl-dur-base) var(--fl-ease-out), box-shadow var(--fl-dur-base) var(--fl-ease-out), transform var(--fl-dur-base) var(--fl-ease-out); } .fl-hstrip-ctrl .fl-hstrip-prev, .fl-hstrip-ctrl .fl-hstrip-next, .fl-hts-arrows .fl-hts-prev, .fl-hts-arrows .fl-hts-next { transition: background-color var(--fl-dur-fast) var(--fl-ease-out), color var(--fl-dur-fast) var(--fl-ease-out), border-color var(--fl-dur-fast) var(--fl-ease-out), transform var(--fl-dur-fast) var(--fl-ease-out); } /* Matches the source selector's (0,4,2) — a shorter one would lose. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a { transition: background-color var(--fl-dur-base) var(--fl-ease-out), color var(--fl-dur-base) var(--fl-ease-out); }