/* ============================================================ GLASS — shared liquid-glass component layer (site-wide). Translucent glass cards + pill buttons with a brand "ticker" edge that rotates on hover (buttons) or follows the cursor (cards). Reads the identity's brand tokens (--brand-primary / --brand-secondary / --brand-accent, set by js/brand.js). Linked LAST on each page so it wins over page-local chrome. Pairs with js/glass.js (the tilt + cursor-edge interaction). The functional studio controls (sliders/fields) are NOT touched here — only cards, CTA buttons, and a few chrome pills. ============================================================ */ :root { /* tunable glass params (values locked from the homepage tuner) */ --lg-fill: .04; /* fill strength */ --lg-blur: 4px; /* frost blur */ --lg-rim: .50; /* luminous rim brightness */ --lg-radius: 0px; /* card corner radius */ --lg-tint: 32; /* brand tint % in the fill */ --edge-thick: 1.3px; /* ticker edge thickness */ --edge-opacity: .87; /* ticker edge opacity */ --edge-clear: 144deg; /* clear arc */ --edge-speed: 5.5s; /* rotation duration */ --lg-fill-color: color-mix(in srgb, #ffffff, var(--brand-primary, #163158) calc(var(--lg-tint) * 1%)); --lg-fill-top: color-mix(in srgb, var(--lg-fill-color) calc(var(--lg-fill) * 100%), transparent); --lg-fill-bot: color-mix(in srgb, var(--lg-fill-color) calc(var(--lg-fill) * 44%), transparent); --e1: color-mix(in srgb, var(--brand-primary, #163158) calc(var(--edge-opacity) * 100%), transparent); --e2: color-mix(in srgb, var(--brand-accent, #6C7D96) calc(var(--edge-opacity) * 100%), transparent); --e3: color-mix(in srgb, var(--brand-secondary, #D2B081) calc(var(--edge-opacity) * 100%), transparent); } @property --edge-angle { syntax: ""; inherits: true; initial-value: 0deg; } @keyframes lgEdge { to { --edge-angle: 360deg; } } /* ============================================================ GLASS CARDS (homepage/library .card; studio drawer .dp-motion-card) Ticker edge points toward the cursor (js sets --edge-angle). ============================================================ */ .grid .card, .dp-motion-card { position: relative; --px: .5; --rx: 0deg; --ry: 0deg; background: linear-gradient(180deg, var(--lg-fill-top), var(--lg-fill-bot)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.5); backdrop-filter: blur(var(--lg-blur)) saturate(1.5); border: 0; border-radius: var(--lg-radius); overflow: hidden; box-shadow: inset 0 1.5px 1px rgba(255,255,255, var(--lg-rim)), inset 0 -2px 3px rgba(255,255,255, calc(var(--lg-rim) * .55)), 0 1px 2px rgba(31,38,55,.08), 0 14px 30px -10px rgba(31,38,55,.22); transition: transform .2s ease, box-shadow .25s ease; } .grid .card::before, .dp-motion-card::before { /* overshoot the edge (-2px) so the ring reaches the crisp clip -> no sliver */ content: ""; position: absolute; inset: -2px; z-index: 6; pointer-events: none; border-radius: calc(var(--lg-radius) + 2px); padding: calc(var(--edge-thick) + 2px); background: conic-gradient(from var(--edge-angle) at 50% 50%, var(--e1) 0deg, var(--e2) 62deg, transparent calc(180deg - var(--edge-clear) / 2), transparent calc(180deg + var(--edge-clear) / 2), var(--e3) 298deg, var(--e1) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .grid .card:hover, .grid .card:focus-visible, .dp-motion-card:hover, .dp-motion-card:focus-visible { transform: perspective(1100px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(-2px); box-shadow: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -2px 3px rgba(255,255,255,.6), 0 2px 4px rgba(31,38,55,.1), 0 22px 40px -12px rgba(31,38,55,.3); } .grid .card.releasing, .dp-motion-card.releasing { transition: transform 1s ease, box-shadow 1s ease; } /* ============================================================ GLASS PILL BUTTONS (CTAs across pages) Ticker edge with a clear arc at the top; rotates on hover. ============================================================ */ .ml-find, .lib-btn, .load-more, .dp-panel-use, .lg-btn { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--lg-fill-top), var(--lg-fill-bot)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.5); backdrop-filter: blur(var(--lg-blur)) saturate(1.5); color: var(--ink-deep, var(--ink, #091623)); box-shadow: inset 0 1.5px 1px rgba(255,255,255, var(--lg-rim)), inset 0 -2px 3px rgba(255,255,255, calc(var(--lg-rim) * .6)), 0 4px 10px rgba(31,38,55,.14), 0 1px 2px rgba(31,38,55,.1); } .ml-find::before, .lib-btn::before, .load-more::before, .dp-panel-use::before, .lg-btn::before { content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none; border-radius: inherit; padding: calc(var(--edge-thick) + 2px); background: conic-gradient(from var(--edge-angle) at 50% 50%, transparent 0deg, transparent calc(var(--edge-clear) / 2), var(--e3) calc(var(--edge-clear) / 2 + 40deg), var(--e1) 180deg, var(--e2) calc(360deg - var(--edge-clear) / 2 - 40deg), transparent calc(360deg - var(--edge-clear) / 2), transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .ml-find:hover::before, .lib-btn:hover::before, .load-more:hover::before, .dp-panel-use:hover::before, .lg-btn:hover::before, body.edge-drift .ml-find::before, body.edge-drift .lib-btn::before { animation: lgEdge var(--edge-speed) linear infinite; } .ml-find:hover, .lib-btn:hover, .load-more:hover, .dp-panel-use:hover, .lg-btn:hover { transform: translateY(-2px); background: linear-gradient(180deg, var(--lg-fill-top), var(--lg-fill-bot)); /* keep glass on hover */ box-shadow: inset 0 1.5px 1px rgba(255,255,255,1), inset 0 -2px 4px rgba(255,255,255,.65), 0 8px 18px rgba(31,38,55,.2), 0 1px 2px rgba(31,38,55,.12); } /* ============================================================ AIRIER DISPLAY TYPE (shared heading/card-name classes) ============================================================ */ #gallery-title, .section-head h2, .card-name, .dp-motion-name { font-weight: 500; letter-spacing: .015em; } .card-name, .dp-motion-name { letter-spacing: .03em; }