/* depth.css — four independent layers. ⚠ FIVE PRESETS IS NOT A CONTROL SURFACE. The first version was five bundles with one strength each, and on a contact sheet they were nearly the same tile — because a shadow is not one thing. An offset, a blur, a spread, an alpha and a TINT are five independent decisions, and bundling them means every change moves all five together. So: `data-sh` picks the shadow's SHAPE, `data-ed` the edge's, and every number under them is a custom property the panel writes. A preset sets them all at once and then every one is still live. --k shadow strength 0..1 --y how far it is thrown 0..1 --blur how soft 0..1 --spread in or out -1..1 --tintRGB what colour it is --edgeW rim width in px 0..8 --edgeLight / --edgeShade the two sides of the rim --sheen --top what is on the face --thick the side you can see --wr --wr01 the corner ── the one structural rule, and it took two goes ────────────────────────── ⚠ `clip-path` IS APPLIED **AFTER** `filter`, so a drop-shadow and a clip on the SAME element cancel: the shadow is computed, and then clipped away, because a shadow lies outside the silhouette by definition. Every shadow style measured 236.90 under the tile — byte-identical, all seven, because NONE of them was rendering. It looks exactly like a control that does nothing, which is what it was. So the two live on two elements: the OUTER one carries the shadow as a filter and is never clipped, and the INNER one carries the clip. That is what the movie card does too (`.mm-card` has the filter, `.mm-card .in` has the overflow) and it is the only arrangement in which a squircle can cast a shadow of its own shape. */ :root{ --wr:15.7%; --wr01:.157; --tintRGB:25,25,25; --k:.62; --y:.42; --blur:.55; --spread:0; --edgeW:1; --edgeLight:0; --edgeShade:.22; --sheen:0; --top:.10; --thick:0; /* ── the derived shadow, written once ─────────────────────────────────── Two shadows, because that is what an object casts: a CONTACT one that is tight and dark and sits under the edge, and an AMBIENT one that is wide and pale and is really the room. Each layer style below picks which of the two it uses, and `--k` scales both. */ --cY: calc((1px + 5px * var(--y)) * var(--k)); --cB: calc((2px + 10px * var(--blur)) * (.4 + .6 * var(--k))); --cS: calc(var(--spread) * 2px); --cA: calc(.16 * var(--k)); --aY: calc((4px + 34px * var(--y)) * var(--k)); --aB: calc((8px + 56px * var(--blur)) * (.4 + .6 * var(--k))); --aS: calc(var(--spread) * 6px); --aA: calc(.22 * var(--k)); --contact: 0 var(--cY) var(--cB) var(--cS) rgba(var(--tintRGB), var(--cA)); --ambient: 0 var(--aY) var(--aB) var(--aS) rgba(var(--tintRGB), var(--aA)); } /* every tile that takes the treatment */ .cell .field, .lw .hold, #detail .big{ border-radius:var(--wr) } .cell .field > .w, .lw .hold .field > .w, #detail .big > .w{ border-radius:var(--wr) } /* ⚠ THE CLIP IS ON A WRAPPER THAT IS ALREADY SQUARE. `objectBoundingBox` units are 0..1 of the element's own box, so on a rectangle the corners come out oval — every one of these is a square by construction. ⚠ AND IT IS ON THE **INNER** ELEMENT, one level below whatever carries the shadow — see the note at the top. The outer one also has to give up its own `overflow:hidden` radius, or an arc corner is clipping the squircle. */ html[data-squircle="on"] .lw .hold, html[data-squircle="on"] .cell .field{ overflow:visible;border-radius:0 } html[data-squircle="on"] .lw .hold > .field, html[data-squircle="on"] .cell .field > .w, html[data-squircle="on"] #detail .big > .w{ clip-path:url(#wabiSquircle) } /* ═══ 1 · THE SHADOW ═══════════════════════════════════════════════════════ */ .lw .hold, .cell .field{ box-shadow:none; filter:none } html[data-squircle="off"][data-sh="contact"] .lw .hold, html[data-squircle="off"][data-sh="contact"] .cell .field{ box-shadow:var(--contact) } html[data-squircle="off"][data-sh="ambient"] .lw .hold, html[data-squircle="off"][data-sh="ambient"] .cell .field{ box-shadow:var(--ambient) } html[data-squircle="off"][data-sh="pair"] .lw .hold, html[data-squircle="off"][data-sh="pair"] .cell .field{ box-shadow:var(--contact), var(--ambient) } /* ⚠ A LONG SHADOW IS ONE LOW SUN, so it is thrown sideways as well as down — an offset with no x is a light directly overhead, which is the one position that never makes a long shadow. */ html[data-squircle="off"][data-sh="long"] .lw .hold, html[data-squircle="off"][data-sh="long"] .cell .field{ box-shadow: calc(var(--aY) * .5) calc(var(--aY) * 1.4) calc(var(--aB) * .6) var(--aS) rgba(var(--tintRGB), calc(var(--aA) * 1.1)), var(--contact); } /* ⚠ THICKNESS IS NOT A BIGGER SHADOW: a slab has an EDGE — a band of the object's own colour, unblurred, directly under it — and the shadow starts below THAT. `--thick` is how deep the band goes. */ html[data-squircle="off"][data-sh="stack"] .lw .hold, html[data-squircle="off"][data-sh="stack"] .cell .field{ --t:calc(1px + 11px * var(--thick)); box-shadow: 0 calc(var(--t) * .25) 0 rgba(var(--tintRGB),calc(.13 * var(--k) + .03)), 0 calc(var(--t) * .5) 0 rgba(var(--tintRGB),calc(.10 * var(--k) + .02)), 0 calc(var(--t) * .75) 0 rgba(var(--tintRGB),calc(.07 * var(--k) + .015)), 0 var(--t) 0 rgba(var(--tintRGB),calc(.045 * var(--k) + .01)), 0 calc(var(--t) + var(--aY) * .5) var(--aB) rgba(var(--tintRGB), var(--aA)); } html[data-squircle="off"][data-sh="glow"] .lw .hold, html[data-squircle="off"][data-sh="glow"] .cell .field{ box-shadow:0 0 calc(6px + 60px * var(--blur)) calc(var(--spread) * 8px) rgba(var(--tintRGB), calc(.30 * var(--k))); } /* ⚠ AND UNDER A SQUIRCLE EVERY ONE OF THOSE IS A FILTER, because the clip takes the box-shadow with it. Same numbers; drop-shadow has no spread, so the spread is folded into the blur — which is the one honest difference between the two spellings and is worth knowing before tuning against it. */ html[data-squircle="on"][data-sh="contact"] .lw .hold, html[data-squircle="on"][data-sh="contact"] .cell .field{ filter:drop-shadow(0 var(--cY) var(--cB) rgba(var(--tintRGB), var(--cA))); } html[data-squircle="on"][data-sh="ambient"] .lw .hold, html[data-squircle="on"][data-sh="ambient"] .cell .field{ filter:drop-shadow(0 var(--aY) var(--aB) rgba(var(--tintRGB), var(--aA))); } html[data-squircle="on"][data-sh="pair"] .lw .hold, html[data-squircle="on"][data-sh="pair"] .cell .field{ filter:drop-shadow(0 var(--cY) var(--cB) rgba(var(--tintRGB), var(--cA))) drop-shadow(0 var(--aY) var(--aB) rgba(var(--tintRGB), var(--aA))); } html[data-squircle="on"][data-sh="long"] .lw .hold, html[data-squircle="on"][data-sh="long"] .cell .field{ filter:drop-shadow(calc(var(--aY) * .5) calc(var(--aY) * 1.4) calc(var(--aB) * .6) rgba(var(--tintRGB), calc(var(--aA) * 1.1))) drop-shadow(0 var(--cY) var(--cB) rgba(var(--tintRGB), var(--cA))); } html[data-squircle="on"][data-sh="stack"] .lw .hold, html[data-squircle="on"][data-sh="stack"] .cell .field{ --t:calc((1px + 11px * var(--thick)) * .25); filter: drop-shadow(0 var(--t) 0 rgba(var(--tintRGB),calc(.13 * var(--k) + .03))) drop-shadow(0 var(--t) 0 rgba(var(--tintRGB),calc(.10 * var(--k) + .02))) drop-shadow(0 var(--t) 0 rgba(var(--tintRGB),calc(.07 * var(--k) + .015))) drop-shadow(0 var(--t) 0 rgba(var(--tintRGB),calc(.045 * var(--k) + .01))) drop-shadow(0 calc(var(--aY) * .5) var(--aB) rgba(var(--tintRGB), var(--aA))); } html[data-squircle="on"][data-sh="glow"] .lw .hold, html[data-squircle="on"][data-sh="glow"] .cell .field{ filter:drop-shadow(0 0 calc(6px + 60px * var(--blur)) rgba(var(--tintRGB), calc(.30 * var(--k)))); } /* the hover lift is the same shadow, further from the page */ .lw:hover .hold{ transform:translateY(calc(-2px - 5px * var(--k))) scale(calc(1 + .014 * var(--k))) } /* ═══ 2 · THE EDGE ═════════════════════════════════════════════════════════ ⚠ A RIM DRAWN AS AN INSET SHADOW DOES NOT FOLLOW A SQUIRCLE — an inset box-shadow is cast from the BORDER BOX and its radius is an ARC, so at each corner the bevel stopped and the tile looked like the effect had been cut off. On a plain radius the inset shadow is exactly right; on a squircle the rim is a RING CLIP, the same silhouette with a smaller one punched out. */ .lw .hold::after, .cell .field::after, #detail .big::after{ content:none } html[data-ed="hairline"] .lw .hold::after, html[data-ed="hairline"] .cell .field::after{ content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 calc(var(--edgeW) * 1px) rgba(var(--tintRGB), var(--edgeShade)); } html[data-ed="inner"] .lw .hold::after, html[data-ed="inner"] .cell .field::after{ content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 calc(var(--edgeW) * 3px) rgba(255,255,255,var(--edgeLight)), inset 0 0 0 1px rgba(var(--tintRGB), calc(var(--edgeShade) * .5)); } html[data-squircle="off"][data-ed="bevel"] .lw .hold::after, html[data-squircle="off"][data-ed="bevel"] .cell .field::after, html[data-squircle="off"][data-ed="bevel"] #detail .big::after{ content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit; box-shadow: inset calc(var(--edgeW) * -1px) calc(var(--edgeW) * -1px) calc(var(--edgeW) * 1px) 0 rgba(86,86,86,var(--edgeShade)), inset calc(var(--edgeW) * 1px) calc(var(--edgeW) * 1px) calc(var(--edgeW) * 1px) 0 rgba(255,255,255,var(--edgeLight)); } html[data-squircle="off"][data-ed="ring"] .lw .hold::after, html[data-squircle="off"][data-ed="ring"] .cell .field::after{ content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit; box-shadow: inset 0 0 0 calc(var(--edgeW) * 1px) rgba(255,255,255,var(--edgeLight)), 0 0 0 1px rgba(var(--tintRGB), var(--edgeShade)); } /* ⚠ WHITE ON CREAM IS NOTHING. The movie card's light side is white at .30 and reads because that card sits on near-black; here the lit half of the rim vanished and only the shade showed, which is a shadow down one side rather than an edge. The ring sits on a neutral hairline so the edge is always drawn, and the lit half is stronger than the reference's. */ html[data-squircle="on"][data-ed="bevel"] .lw .hold::after, html[data-squircle="on"][data-ed="bevel"] .cell .field::after, html[data-squircle="on"][data-ed="bevel"] #detail .big::after, html[data-squircle="on"][data-ed="ring"] .lw .hold::after, html[data-squircle="on"][data-ed="ring"] .cell .field::after{ content:'';position:absolute;inset:0;z-index:6;pointer-events:none; clip-path:url(#wabiRim); background: linear-gradient(135deg, rgba(255,255,255,calc(.30 + .70 * var(--edgeLight))) 0%, rgba(255,255,255,calc(.10 + .28 * var(--edgeLight))) 30%, rgba(96,90,82,calc(.06 + .22 * var(--edgeShade))) 58%, rgba(78,74,68,calc(.14 + .74 * var(--edgeShade))) 100%), linear-gradient(rgba(var(--tintRGB),.09), rgba(var(--tintRGB),.09)); filter:blur(calc(.2px + .3px * var(--edgeW))); } html[data-squircle="on"][data-ed="hairline"] .lw .hold::after, html[data-squircle="on"][data-ed="hairline"] .cell .field::after{ content:'';position:absolute;inset:0;z-index:6;pointer-events:none; clip-path:url(#wabiRim); background:rgba(var(--tintRGB), var(--edgeShade)); } /* ═══ 3 · THE SURFACE ══════════════════════════════════════════════════════ */ .lw .hold::before, .cell .field::before{ content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit; /* the sheen — the movie card's own gradient and blend — plus a top highlight that is the Max pill's radial, both driven from zero so they cost nothing when they are off */ background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,calc(.55 * var(--sheen))) 50%, transparent 66%), radial-gradient(120% 150% at 9% 5%, rgba(255,255,255,calc(.9 * var(--top))), rgba(255,255,255,0) 62%); mix-blend-mode:soft-light; opacity:calc(min(1, var(--sheen) + var(--top)) * 1); } html[data-squircle="on"] .lw .hold::before, html[data-squircle="on"] .cell .field::before{ clip-path:url(#wabiSquircle) } /* the rim and the sheen sit OUTSIDE the clipped child, so each carries its own */ html[data-squircle="on"] .lw .hold::after, html[data-squircle="on"] .cell .field::after{ border-radius:0 }