/* ========================================================================== D4 · SURFACES — one elevation ladder for the whole shop -------------------------------------------------------------------------- Pack reference: design_handoff_ostugrupp_system/README.md section 8 ("D4-D12 - pinnad (3 korgusastet, koik valged)") and the designer's own rendered sample, "Ostugrupp System Sample 01.dc.html" line 1436, section "D4 · Pinnad / Kolm korgusastet": Tase 0 · ainult piir - content block, table shell, accordion Tase 1 · --shadow-card - product card, panel, sticky bar Tase 2 · --shadow-modal - modal, quick view, dropdown Suvend · --surface-muted - not an elevation, a quiet block inside a surface and the sample's own sentence for why there is no fourth step: "Neljandat astet ei ole: kui midagi peab veel rohkem esile tulema, on tegu modaaliga." WHY THIS FILE EXISTS - measured, not asserted. Counted 2026-08-14 over every stylesheet in assets/css: 227 box-shadow declarations 86 distinct recipes 37 files Six overlays carry four different recipes, and FOUR of the six are wearing --shadow-card-hover - a HOVER state borrowed as an elevation, because the theme's scale has never had a level-2 rung: nav.css:134 .og-mega__panel --shadow-card-hover live-search.css:27 .og-ls-panel --shadow-card-hover cart-widget.css:52 .mini-cart__panel --shadow-card-hover category-rail.css:75 .og-catrail__panel --shadow-card-hover quickview.css:98 .ostu-qv__dialog 0 30px 80px -24px rgba(15,23,42,.45) engagement.css:73 .og-popup__card 0 30px 80px -20px rgba(15,23,42,.55) Four sticky bottom bars carry four more, which is the exact count the designer made in D13 ("Praegu on neli riba ja neli erinevat retsepti"): cart-widget.css:296 .sticky-atc 0 -8px 24px -16px rgba(15,23,42,.35) engagement.css:131 .og-bottomnav 0 -6px 24px -16px rgba(15,23,42,.4) engagement.css:22 .og-cookie 0 -8px 30px -12px rgba(0,0,0,.45) wishlist.css:200 .ostu-cmp-bar 0 -10px 30px -16px rgba(15,23,42,.6) (cart-sticky-bar.css:40 .og-cartbar is already on --shadow-sticky and is deliberately left alone - it is the one bar that was already right.) NO NEW VALUE IS INTRODUCED. Every rung below is a pack recipe from assets/css/tokens.css A6 (lines 236-241) and A2b (lines 130-136), re-exposed under a ROLE name. Two rungs are a pack recipe turned 90 degrees for a surface the pack names but does not give an axis for (a side drawer, a top-stuck bar); same offsets, same blur, same alpha, different axis. That is pack rule 1 followed, not bent: "Kui midagi on puudu, on puudu ROLL." ONE of those role names is now an ALIAS rather than a copy: --elev-edge-bottom forwards to --shadow-sticky instead of restating its three lengths, because the pack name and the role name were both in live use on the same five bars. The full reasoning, and why the same move is deliberately NOT made for the two card rungs, is at the declaration itself. Everything else is still a literal copy, on purpose - see note 1. WHAT THIS FILE DELIBERATELY DOES NOT TOUCH 1. --shadow-card and --shadow-card-hover. They are declared TWICE - the pack value in assets/css/tokens.css:238-239 and the theme's own in main.css:98-99 - and main.css wins by load order (inc/enqueue.php:105-113 makes that order a dependency, not an accident). 62 declarations consume the first name and 22 the second. Nothing here redefines, aliases or shadows either name, so those 84 declarations render byte-identically after this file loads as before it. 2. .product-card (woocommerce.css:117 rest / :120 hover). Moving the card to the pack pair would raise the rest shadow and LOWER the hover shadow at the same time: at the card's lower edge the theme pair goes roughly .03 to .11 effective alpha (a ~3.7x jump), the pack pair roughly .04 to .06 (a ~1.5x jump). The rest step is an improvement - it is the only cue 73% of this shop's traffic ever sees, because phones have no hover - but it cannot be taken without also taking the hover step, and that pair is one deliberate decision with the owner, not a side effect of adding a file. Reported, not done. 3. The sticky header (nav.css:15, main.css:193). Level 1 by the pack's own list, but its current recipe is heavier than any pack rung, so adopting the ladder there LIGHTENS a surface the owner asked to make more present. --elev-edge-top below is the value that edit would use. It is reserved, not consumed. 4. Anything on the checkout gateway list. This file names no selector inside it and adds no rule that could reach it (CLAUDE.md invariant 1). MOTION: this file declares no transition, no animation and no transform, so prefers-reduced-motion has nothing here to switch off. Every state it affects is static material. The surfaces it touches keep whatever transitions their own stylesheets already declare. FORCED COLOURS: box-shadow is not painted in forced-colours mode, so the two surfaces whose ONLY edge is a shadow get a real border there instead. Same pattern, same reason as cart-sticky-bar.css:162. ========================================================================== */ :root { /* ---- The ladder ------------------------------------------------------ Every rung carries its literal as a var() fallback. Deploys here are a hand-built zip: a custom property that cannot resolve does not fall back to an old value, it becomes the guaranteed-invalid value and takes every consumer with it. Same reasoning as the alias block in main.css. */ /* Level 0 - the 1px border does the work. Named so "no shadow" is a decision in the code and not an omission. */ --elev-0: none; /* Level 1 - card, panel, sticky bar. tokens.css:238 verbatim. RESERVED, not consumed by this file: see note 2 in the header. */ --elev-1: 0 1px 2px var(--ink-a1, rgb(15 23 42 / .04)), 0 2px 8px var(--ink-a2, rgb(15 23 42 / .08)); /* Level 1, pointer hover only - tokens.css:239 verbatim. Phones never see this rung. RESERVED, not consumed by this file. */ --elev-1-hover: 0 2px 4px var(--ink-a2, rgb(15 23 42 / .08)), 0 8px 24px var(--ink-a3, rgb(15 23 42 / .12)); /* Level 2 - overlay: modal, quick view, dropdown. tokens.css:240 verbatim. This is the rung the theme never had, which is why four dropdowns ended up wearing a hover shadow. */ --elev-2: 0 24px 64px var(--ink-a4, rgb(15 23 42 / .24)); /* Level 2, turned 90 degrees: a drawer that enters from the LEFT casts to the right. Same 24 / 64 / a4 as --elev-2 - the axis changes, the value does not. An overlay that slides in sideways looks like a glow, not like a sheet, when its shadow is omnidirectional. */ --elev-2-left: 24px 0 64px var(--ink-a4, rgb(15 23 42 / .24)); /* Sticky bars. ONE recipe (tokens.css:241), the edge decides the sign: stuck to the bottom casts up, stuck to the top casts down. ONE NAME, NOT TWO - collapsed 2026-08-14. --elev-edge-bottom used to be written out as `0 -2px 16px var(--ink-a3)`, which is tokens.css:241's --shadow-sticky character for character. Both names were in live use on the SAME component family: .og-cartbar wears --shadow-sticky (cart-sticky-bar.css:40) while the four bars in section 3 below wear --elev-edge-bottom. Five sibling bars, one shadow, two names - that is a drift with a date on it, so the VALUE now has exactly one definition site (tokens.css:241) and the role name stays as an ALIAS. WHY --shadow-sticky IS THE SURVIVOR, and the role name only the alias: it lives in tokens.css, which is the pack's file verbatim, and it already has a consumer this module is not allowed to edit. Nothing anywhere redefines it - checked across every stylesheet in assets/css, tokens.css:241 is the single declaration. That is exactly what is NOT true of --shadow-card and --shadow-card-hover, which main.css:98-99 re-declares with different values, and it is the whole reason header note 1 refuses to alias those two while this one is safe. PIXELS UNCHANGED, both ways round. With tokens.css loaded, --shadow-sticky resolves through --ink-a3 (tokens.css:93 = rgb(15 23 42/.12)) to the same three lengths and the same colour as before. Without it - which is what live ran on 2026-08-13, see cart-sticky-bar.css:8-13 - the var() misses and the literal fallback below is used, again the same value. The fallback is spelled out absolutely rather than through --ink-a3, so it cannot depend on a token to express the fallback for a token. --elev-edge-top is deliberately NOT aliased: turning the recipe 90 degrees flips the sign of the Y offset, so it is a different value, not a second name for this one. It keeps its own definition and stays RESERVED (header note 3). */ --elev-edge-bottom: var(--shadow-sticky, 0 -2px 16px rgb(15 23 42 / .12)); --elev-edge-top: 0 2px 16px var(--ink-a3, rgb(15 23 42 / .12)); /* On a dark surface --ink IS the background - a shadow cast onto itself. tokens.css:130-136 says the ink turns pure black there. Two of the four bottom bars are dark, so the bar recipe needs the same rung in black. */ --elev-edge-bottom-on-dark: 0 -2px 16px var(--black-a1, rgb(0 0 0 / .45)); /* Dark-surface rungs, tokens.css:135-136 verbatim. RESERVED for the footer and the dark hero blocks; no consumer in this file. */ --elev-1-on-dark: 0 1px 2px var(--black-a2, rgb(0 0 0 / .55)), 0 2px 8px var(--black-a1, rgb(0 0 0 / .45)); --elev-2-on-dark: 0 24px 64px var(--black-a3, rgb(0 0 0 / .80)); /* One darkness behind every overlay. D9 in the sample (line 1712) names it: "z 1000 · scrim --ink-a5". The shop currently has .55 in three places and .62 in a fourth, so the mega menu, the quick view and the newsletter each dim the page by a different amount. */ --elev-scrim: var(--ink-a5, rgb(15 23 42 / .48)); } /* ========================================================================== 1 · LEVEL 2 - the overlay family Six surfaces, one rung. Selectors are single-class, exactly matching the declaration each one supersedes, so this file wins on source order and a component author can still take it back locally with one extra class. ========================================================================== */ /* Mega menu panel - supersedes nav.css:134 (was --shadow-card-hover). This is the single most visible change in the file: a 1120px panel hanging off the header finally reads as sitting ON the page rather than near it. */ .og-mega__panel { box-shadow: var(--elev-2, 0 24px 64px rgb(15 23 42 / .24)); } /* Live-search results - supersedes live-search.css:27 (was --shadow-card-hover). */ .og-ls-panel { box-shadow: var(--elev-2, 0 24px 64px rgb(15 23 42 / .24)); } /* Mini cart dropdown - supersedes cart-widget.css:52 (was --shadow-card-hover). */ .mini-cart__panel { box-shadow: var(--elev-2, 0 24px 64px rgb(15 23 42 / .24)); } /* Category-rail flyout - supersedes category-rail.css:75 (was --shadow-card-hover). Its radius also moves 12 -> 16: tokens.css:230-231 assigns 12px to buttons and fields and 16px to "tootekaart, paneel". This is a panel, and it was the only overlay of the six whose corner was off the component's own step. */ .og-catrail__panel { border-radius: var(--radius-16, 16px); box-shadow: var(--elev-2, 0 24px 64px rgb(15 23 42 / .24)); } /* Quick view dialog - supersedes quickview.css:98. */ .ostu-qv__dialog { box-shadow: var(--elev-2, 0 24px 64px rgb(15 23 42 / .24)); } /* Newsletter modal - supersedes engagement.css:73. */ .og-popup__card { box-shadow: var(--elev-2, 0 24px 64px rgb(15 23 42 / .24)); } /* ========================================================================== 2 · LEVEL 2, SIDEWAYS - drawers Both of the shop's drawers enter from the left and both were using the same omnidirectional glow, 0 0 60px -10px rgba(15,23,42,.4) - a shadow with no direction reads as light leaking out of the panel instead of as a panel lying on top of the page. ========================================================================== */ /* Mobile navigation drawer - supersedes nav.css:339. The corner is the second half of the same idea. A full-height sheet pinned to the left edge of the screen has exactly one free edge, and rounding only that one is what makes it read as an object with a thickness rather than as a region of the page. Same rule the pack gives a phone modal in D9: "taislaius, ainult ulemised nurgad umarad" - round the edge that is not against the screen. Safe to clip here: nav.css:339 already sets overflow-y:auto, so the drawer's children are clipped to this radius. */ .og-drawer { border-radius: 0 var(--radius-20, 20px) var(--radius-20, 20px) 0; box-shadow: var(--elev-2-left, 24px 0 64px rgb(15 23 42 / .24)); } /* Off-canvas filter drawer - supersedes filters.css:413. Same shadow; the corner is deliberately NOT rounded here. filters.css:405-423 sets no overflow on this element and it carries a sticky footer (.ostu-filters__foot), so a radius would either leave a child's square corner poking through or need an overflow that changes how that footer pins. Reported for the lead rather than guessed at. The media query mirrors filters.css:404 exactly so the desktop sidebar - which is a level-1 panel and correct as it stands - is untouched. */ @media (max-width: 1023.98px) { .ostu-filters { box-shadow: var(--elev-2-left, 24px 0 64px rgb(15 23 42 / .24)); } } /* ========================================================================== 3 · STICKY BOTTOM BARS - one bar, four instances D13: "Uks vari: --shadow-sticky. Vari on suunatud ULES. Praegu on neli riba ja neli erinevat retsepti." All four still have their own height, colour and z-index; only the material is unified here. ========================================================================== */ /* Sticky add-to-cart, product page - supersedes cart-widget.css:296. */ .sticky-atc { box-shadow: var(--elev-edge-bottom, 0 -2px 16px rgb(15 23 42 / .12)); } /* Mobile bottom navigation - supersedes engagement.css:131. */ .og-bottomnav { box-shadow: var(--elev-edge-bottom, 0 -2px 16px rgb(15 23 42 / .12)); } /* The two dark bars. Ink on ink is a shadow cast onto its own colour, so these take the black rung - the whole reason tokens.css:130-136 exists. */ /* Cookie banner - supersedes engagement.css:22. Material only: nothing here changes when the bar appears, what it says, or what any of its controls do. */ .og-cookie { box-shadow: var(--elev-edge-bottom-on-dark, 0 -2px 16px rgb(0 0 0 / .45)); } /* Compare bar - supersedes wishlist.css:200, which cast INK (rgba(15,23,42,.6)) from a --slate-dark bar. */ .ostu-cmp-bar { box-shadow: var(--elev-edge-bottom-on-dark, 0 -2px 16px rgb(0 0 0 / .45)); } /* ========================================================================== 4 · SCRIMS - one darkness behind every overlay Not decoration: the scrim is what tells a shopper the page underneath is inert. Four of them at three different strengths means the same message is delivered at three volumes depending on which control was opened. Alpha only - the backdrop-filter blur each one already declares is left exactly as it is, because blur radius is a mobile paint cost and changing it is a performance decision, not a material one. ========================================================================== */ .og-drawer-backdrop, .ostu-filters-backdrop, .ostu-qv__overlay, .og-popup__backdrop { background: var(--elev-scrim, rgb(15 23 42 / .48)); } /* ========================================================================== 5 · FORCED COLOURS box-shadow is not painted in forced-colours mode. Five of the six overlays and all four bars already carry a 1px border and survive; the two drawers do not - nav.css:339 declares no border at all and filters.css:412 explicitly sets border:0 - so in that mode they had no edge whatsoever against the page behind them. ========================================================================== */ @media (forced-colors: active) { .og-drawer { border-right: 1px solid CanvasText; } } @media (forced-colors: active) and (max-width: 1023.98px) { .ostu-filters { border-right: 1px solid CanvasText; } }