/* ── Metal button (Design-components/kovinski-button, ThreeUI) — rules copied, .cta → .metal-btn ── */ @font-face{font-family:"Geist Mono";font-weight:300;font-style:normal;font-display:swap;src:url(data:font/woff2;base64,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) format("woff2")} .metal-btn{--u:.34px;--metal-ink:#4c4c52;--metal-ink-hover:#0f0f12;--metal-chev:#2c2c33;--metal-chev-hover:#fff3e4;--metal-accent:192,48,58;--ease-io:cubic-bezier(.45,0,.2,1);--ease-out:cubic-bezier(.16,.84,.3,1);flex:none;vertical-align:middle;margin:12px 20px} .metal-btn .label{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace} .wizard .metal-btn{--u:.3px} /* ---------- the button ---------- */ .metal-btn{ --w:calc(706 * var(--u)); --h:calc(232 * var(--u)); position:relative;width:var(--w);height:var(--h); padding:0;margin:0;border:0;background:transparent;border-radius:calc(116 * var(--u)); cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;outline:none; --m:calc(48 * var(--u)); /* canvas margin that holds the liquid-metal ring */ isolation:isolate; transition:transform .18s var(--ease-out); } .metal-btn::after{content:"";position:absolute;inset:calc(-27 * var(--u));border-radius:calc(143 * var(--u))} /* the ring is part of the hit area */ .metal-btn::before{content:"";position:absolute;inset:calc(-26 * var(--u));border-radius:calc(142 * var(--u));z-index:-2;pointer-events:none; clip-path:inset(0 calc(-400 * var(--u)) calc(-700 * var(--u)) calc(-400 * var(--u))); box-shadow: 0 calc(59 * var(--u)) calc(96 * var(--u)) calc(-17 * var(--u)) rgba(0,0,0,.72), 0 calc(182 * var(--u)) calc(88 * var(--u)) 0 rgba(0,0,0,.32), 0 calc(16 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,0), 0 calc(101 * var(--u)) calc(93 * var(--u)) calc(-38 * var(--u)) rgba(0,0,0,0), 0 calc(51 * var(--u)) calc(61 * var(--u)) calc(-26 * var(--u)) rgba(0,0,0,0), 0 calc(13 * var(--u)) calc(34 * var(--u)) calc(-12 * var(--u)) rgba(0,0,0,0); transition:box-shadow .35s cubic-bezier(.6,0,.35,1) .1s} .metal-btn:focus-visible{outline:2px solid #c0303a;outline-offset:8px} .metal-btn:active{transform:translateY(calc(2 * var(--u))) scale(.992)} /* violet light the crystal throws onto the desk on hover */ .halo{position:absolute;z-index:-1;pointer-events:none;left:calc(430 * var(--u));top:calc(-44 * var(--u));width:calc(320 * var(--u));height:calc(320 * var(--u));border-radius:50%; background:radial-gradient(circle,rgba(var(--metal-accent),.42) 0%,rgba(var(--metal-accent),.16) 35%,rgba(var(--metal-accent),0) 66%);opacity:0; transition:opacity .42s cubic-bezier(.6,0,.35,1)} .face{position:absolute;inset:calc(-1 * var(--m));pointer-events:none} .face canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* label */ .label{ position:absolute;left:calc(134 * var(--u));top:50%;transform:translateY(-50%); font:300 calc(50 * var(--u))/1 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:calc(4.1 * var(--u));white-space:pre;color:var(--metal-ink);-webkit-text-stroke:calc(0.45 * var(--u)) currentColor; pointer-events:none;user-select:none; transition:color .3s var(--ease-io) .23s; } /* knob overlays (the crystal itself is drawn on the canvas) */ .knob{position:absolute;left:calc(502 * var(--u));top:calc(28 * var(--u));width:calc(176 * var(--u));height:calc(176 * var(--u));border-radius:50%;overflow:hidden;pointer-events:none; -webkit-mask-image:radial-gradient(circle,#000 99%,transparent 100%);mask-image:radial-gradient(circle,#000 99%,transparent 100%)} .knob>*{position:absolute;inset:0;border-radius:50%} /* .glow carries no paint: its animated opacity is the hover clock the shader reads */ .glow{width:0;height:0;inset:auto;opacity:0;transition:opacity .42s cubic-bezier(.6,0,.35,1)} .pen{overflow:visible} .pen path{fill:none;stroke:var(--metal-chev);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s var(--ease-io) .15s} .pen-move{transform:translate(calc(-6 * var(--u)),0) rotate(0deg);transform-origin:68px 108px;transition:transform .5s var(--ease-io) .05s} .pen-wiggle{transform-origin:68px 108px} .scribble{stroke:var(--metal-chev-hover);stroke-dasharray:36;stroke-dashoffset:36;transition:stroke-dashoffset .45s var(--ease-io)} @keyframes pen-write{0%{transform:rotate(-4deg) translate(0,0)}50%{transform:rotate(3deg) translate(0,calc(-1.5 * var(--u)))}100%{transform:rotate(-4deg) translate(0,0)}} /* ---------- hover / focus ---------- */ .metal-btn:hover::before,.metal-btn:focus-visible::before,.metal-btn.is-hover::before{ box-shadow: 0 calc(59 * var(--u)) calc(96 * var(--u)) calc(-17 * var(--u)) rgba(0,0,0,0), 0 calc(182 * var(--u)) calc(88 * var(--u)) 0 rgba(0,0,0,0), 0 calc(16 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,0), 0 calc(101 * var(--u)) calc(93 * var(--u)) calc(-38 * var(--u)) rgba(0,0,0,.12), 0 calc(51 * var(--u)) calc(61 * var(--u)) calc(-26 * var(--u)) rgba(0,0,0,.45), 0 calc(13 * var(--u)) calc(34 * var(--u)) calc(-12 * var(--u)) rgba(0,0,0,.98); transition:box-shadow .4s var(--ease-io) .17s} .metal-btn:hover .halo,.metal-btn:focus-visible .halo,.metal-btn.is-hover .halo{opacity:1;transition:opacity .4s cubic-bezier(.5,0,.3,1) .28s} .metal-btn:hover .label,.metal-btn:focus-visible .label,.metal-btn.is-hover .label{color:var(--metal-ink-hover);transition:color .38s cubic-bezier(.55,0,.25,1) .19s} .metal-btn:hover .glow,.metal-btn:focus-visible .glow,.metal-btn.is-hover .glow{opacity:1;transition:opacity .32s cubic-bezier(.5,0,.3,1) .26s} .metal-btn:hover .pen path,.metal-btn:focus-visible .pen path,.metal-btn.is-hover .pen path{stroke:var(--metal-chev-hover);transition:stroke .34s var(--ease-io) .1s} /* the pen lifts at once, then writes a line as it moves right, then keeps a gentle scribbling motion */ .metal-btn:hover .pen-move,.metal-btn:focus-visible .pen-move,.metal-btn.is-hover .pen-move{transform:translate(calc(20 * var(--u)),calc(-1 * var(--u))) rotate(-6deg);transition:transform .9s cubic-bezier(.5,0,.3,1) .22s} .metal-btn:hover .scribble,.metal-btn:focus-visible .scribble,.metal-btn.is-hover .scribble{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.5,0,.3,1) .22s} .metal-btn:hover .pen-wiggle,.metal-btn:focus-visible .pen-wiggle,.metal-btn.is-hover .pen-wiggle{animation:pen-write 1.1s ease-in-out 1.1s infinite} /* no-WebGL fallback: a flat CSS rendering of the same button */ .metal-btn.no-gl .face{background:linear-gradient(#f5f5f5 0%,#e6e6e6 14%,#bcbcbf 60%,#86868a 100%);border:calc(2.5 * var(--u)) solid #545458} .metal-btn.no-gl .knob-fallback{position:absolute;left:calc(502 * var(--u));top:calc(28 * var(--u));width:calc(176 * var(--u));height:calc(176 * var(--u));border-radius:50%; background:radial-gradient(circle at 42% 30%,#ffffff 0%,#d9d9e3 28%,#8d8d9b 70%,#5a5a66 100%);box-shadow:inset 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.35);transition:background .4s} .metal-btn.no-gl:hover .knob-fallback{background:radial-gradient(circle at 50% 40%,#220406 0%,#8f1219 45%,#d42a2c 100%)} .knob-fallback{display:none} .metal-btn.no-gl .knob-fallback{display:block} @media (prefers-reduced-motion:reduce){ .metal-btn,.metal-btn *,.metal-btn::before{transition-duration:.01s!important;transition-delay:0s!important} } .metal-btn{margin:10px 14px} /* MitroCare: in the CSS fallback the face must keep the pill shape (the WebGL face sits in an enlarged canvas) */ .metal-btn.no-gl .face{inset:0;border-radius:calc(116 * var(--u));box-shadow:0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.45)} /* custom knob icon (BGIMetal.mount option `icon`): same stroke as the pen, lights up on hover */ .knob .icon{overflow:visible} .knob .icon *{fill:none;stroke:var(--metal-chev);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s var(--ease-io) .15s} .knob .icon .fill,.knob .icon .fill *{fill:var(--metal-chev);stroke:none;transition:fill .15s var(--ease-io) .15s} .knob .icon g{transform-origin:88px 88px;transition:transform .6s var(--ease-io) .2s} .metal-btn:hover .knob .icon *,.metal-btn:focus-visible .knob .icon *,.metal-btn.is-hover .knob .icon *{stroke:var(--metal-chev-hover)} .metal-btn:hover .knob .icon .fill,.metal-btn:hover .knob .icon .fill *,.metal-btn.is-hover .knob .icon .fill,.metal-btn.is-hover .knob .icon .fill *{fill:var(--metal-chev-hover)} .metal-btn:hover .knob .icon g,.metal-btn:focus-visible .knob .icon g,.metal-btn.is-hover .knob .icon g{transform:scale(1.08)}