/* * components/card.css — liquid-glass card/button visual effect (.liq-effect) * * Extracted in M8 from: * index.v13.css lines 2134-2361 (the complete .liq-effect + .liq-effect__button block) * * NOTE ON NAMING: * There is no plain `.card` class in the codebase (only `.card-media > a` in * main.v28:11277, which is a media-embed, not a UI card). The liquid-glass * effect is the only self-contained "card-like" component; keeping the file * name `card.css` per the M8 plan. * * NOT MIGRATED YET (jackpot-specific .liq-effect variants — M10): * jack.v15.css — 62 liq-effect rules (jackpot buttons) * assets/wheeljack.v5.css — 30 liq-effect rules * * Loaded AFTER index.v13.css to preserve cascade. */ /* === STATIC === */ .liq-effect { --border-width: 2px; position: relative; transition: transform var(--anim--hover-time) var(--anim--hover-ease); --base-color: 255, 255, 255; --blur-effect: 4px; --opacity-effetc1: 0.03; --opacity-effetc2: 0.01; --opacity-effetc3: 0.03; transform: translateZ(0); isolation: isolate; backface-visibility: hidden; } /* Layer 1: glass background */ .liq-effect::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient( -75deg, rgba(var(--base-color), var(--opacity-effetc1)), rgba(var(--base-color), var(--opacity-effetc2)), rgba(var(--base-color), var(--opacity-effetc3)) ); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.1), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0 0.1em inset rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(var(--blur-effect)); backdrop-filter: blur(var(--blur-effect)); transition: background var(--anim--hover-time) var(--anim--hover-ease); pointer-events: none; } /* Layer 2: rotating border */ .liq-effect::after { content: ""; position: absolute; z-index: 2; inset: 0; top: calc(0% - var(--border-width) / 2); left: calc(0% - var(--border-width) / 2); width: calc(100% + var(--border-width)); height: calc(100% + var(--border-width)); border-radius: inherit; padding: var(--border-width); box-sizing: border-box; pointer-events: none; background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: --angle-1 500ms ease; } /* === BUTTON === */ .liq-effect__button { --border-width: 2px; --base-color: 255, 255, 255; --blur-effect: 4px; --opacity-effetc1: 0.3; --opacity-effetc2: 0.1; --opacity-effetc3: 0.3; position: relative; isolation: isolate; transition: transform var(--anim--hover-time) var(--anim--hover-ease); transform: translate3d(0, 0, 0); -webkit-font-smoothing: antialiased; contain: layout style; } /* Layer 1: glass base + moving glare highlight */ .liq-effect__button::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: linear-gradient( var(--angle-2), rgba(var(--base-color), 0) 20%, rgba(var(--base-color), 0.2) 40%, rgba(var(--base-color), 0.2) 50%, rgba(var(--base-color), 0.1) 60%, rgba(var(--base-color), 0) 80% ), linear-gradient( -75deg, rgba(var(--base-color), var(--opacity-effetc1)), rgba(var(--base-color), var(--opacity-effetc2)), rgba(var(--base-color), var(--opacity-effetc3)) ); background-size: 200% 200%, 100% 100%; background-position: 0% 50%, 0% 0%; background-blend-mode: overlay, normal; box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.1), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0 0.1em inset rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(var(--blur-effect)); backdrop-filter: blur(var(--blur-effect)); transition: background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-image var(--anim--hover-time) ease; } /* Layer 2: rotating border (button variant) */ .liq-effect__button::after { content: ""; position: absolute; z-index: 2; inset: 0; top: calc(0% - var(--border-width) / 2); left: calc(0% - var(--border-width) / 2); width: calc(100% + var(--border-width)); height: calc(100% + var(--border-width)); border-radius: inherit; padding: var(--border-width); box-sizing: border-box; pointer-events: none; background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(var(--base-color), 1) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5)), linear-gradient( 180deg, rgba(var(--base-color), 0.2), rgba(var(--base-color), 0.05) ); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: --angle-1 500ms ease; } /* === HOVER effects === Gated to (hover: hover) so iOS sticky-hover/focus doesn't keep the rotating-border animation running after tap, which made the button feel like it could be "dragged" as the finger moved across it. `:focus-visible` (instead of `:focus`) keeps keyboard accessibility without triggering on touch focus. */ @media (hover: hover) and (pointer: fine) { .liq-effect__button:hover::before { background-position: 30% 50%, 0% 0%; } .liq-effect__button:hover::after { --angle-1: -125deg; } } .liq-effect__button:focus-visible::after { --angle-1: -125deg; } .liq-effect__button:active { transform: scale(0.98); /* Visible click feedback regardless of where the finger lands on the button (including over the text). Inset glow brightens the inside, outer glow lights up the border. */ box-shadow: inset 0 0 0 1px rgba(var(--base-color), 0.55), inset 0 0 22px rgba(var(--base-color), 0.40), 0 0 18px rgba(var(--base-color), 0.45); } .liq-effect__button:active::after { --angle-1: -75deg; }