@glasnost-ui/vue
Version:
Vue 3 components for Glasnost UI with liquid glass aesthetics
2 lines (1 loc) • 35.7 kB
CSS
:root{--glass-primary: rgba(255, 255, 255, .08);--glass-secondary: rgba(255, 255, 255, .05);--glass-accent: rgba(255, 255, 255, .12);--glass-border: rgba(255, 255, 255, .18);--glass-shadow: rgba(0, 0, 0, .08);--glass-glow: rgba(255, 255, 255, .25);--glass-gradient-1: linear-gradient(135deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .04) 100%);--glass-gradient-2: linear-gradient(45deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .03) 100%);--glass-radial: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .08) 40%, transparent 100%);--glass-blur-light: blur(16px) saturate(1.8) brightness(1.05);--glass-blur-medium: blur(24px) saturate(2.2) brightness(1.08);--glass-blur-heavy: blur(32px) saturate(2.8) brightness(1.12)}.glasnost-base{backdrop-filter:var(--glass-blur-medium);-webkit-backdrop-filter:var(--glass-blur-medium);background:var(--glass-gradient-1);border:1px solid var(--glass-border);box-shadow:0 8px 32px var(--glass-shadow),inset 0 1px 0 var(--glass-glow);position:relative;overflow:hidden}.glasnost-liquid{filter:url(#liquidDistortion)}.glasnost-glass-texture:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--glass-radial);opacity:.3;pointer-events:none;z-index:1}@keyframes glassShimmer{0%,to{opacity:.3}50%{opacity:.6}}.glasnost-shimmer{animation:glassShimmer 4s ease-in-out infinite}@media (max-width: 768px){:root{--glass-blur-light: blur(12px) saturate(1.6) brightness(1.03);--glass-blur-medium: blur(18px) saturate(2) brightness(1.06);--glass-blur-heavy: blur(24px) saturate(2.4) brightness(1.09)}}@media (prefers-reduced-motion: reduce){.glasnost-shimmer{animation:none}}.glasnost-navbar[data-v-8a986f1c]{position:sticky;top:1rem;width:90%;margin:1rem auto;padding:1.25rem 2rem;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);filter:url(#liquidNavbar);transition:all .4s cubic-bezier(.23,1,.32,1);z-index:1000;overflow:hidden;position:relative}.navbar-glass-overlay[data-v-8a986f1c]{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.navbar-liquid-distortion[data-v-8a986f1c]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.glasnost-navbar:hover .navbar-glass-overlay[data-v-8a986f1c]{opacity:1}.glasnost-navbar:hover .navbar-liquid-distortion[data-v-8a986f1c]{opacity:.6}.glasnost-navbar[data-v-8a986f1c]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.glasnost-navbar[data-v-8a986f1c]:hover:before{left:100%}.navbar-content[data-v-8a986f1c]{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;position:relative;z-index:2}.navbar-left[data-v-8a986f1c],.navbar-center[data-v-8a986f1c],.navbar-right[data-v-8a986f1c]{display:flex;align-items:center;flex:1}.navbar-left[data-v-8a986f1c]{justify-content:flex-start}.navbar-center[data-v-8a986f1c]{justify-content:center;font-weight:700;font-size:1.5rem;color:#fffffff2;letter-spacing:.05em;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;box-shadow:none}.navbar-content[data-v-8a986f1c]>*{box-shadow:none}.glasnost-navbar[data-v-8a986f1c] *{box-shadow:none}.navbar-right[data-v-8a986f1c]{justify-content:flex-end}.glasnost-navbar[data-v-8a986f1c]:hover{background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 16px 48px #00000026,inset 0 2px #ffffff80,0 0 0 1px #ffffff1a;transform:translateY(-2px);filter:url(#glassDistortion)}@media (max-width: 768px){.glasnost-navbar[data-v-8a986f1c]{width:98%;margin:.5rem auto;padding:1rem 1.5rem;border-radius:20px}.navbar-center[data-v-8a986f1c]{font-size:1.25rem}}@media (prefers-reduced-motion: reduce){.glasnost-navbar[data-v-8a986f1c]:before,.navbar-glass-overlay[data-v-8a986f1c],.navbar-liquid-distortion[data-v-8a986f1c]{transition:none}.glasnost-navbar[data-v-8a986f1c]:hover{transform:none}}.glasnost-profile-card[data-v-2670545b]{position:relative;width:100%;max-width:340px;padding:2.5rem 2rem;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:24px;transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;transform-style:preserve-3d}.glasnost-profile-card[data-v-2670545b]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.profile-glass-overlay[data-v-2670545b]{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.profile-liquid-distortion[data-v-2670545b]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.card-shine[data-v-2670545b]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:inherit;transition:left .8s ease;pointer-events:none}.glasnost-profile-card[data-v-2670545b]:hover{transform:translateY(-12px) rotateX(5deg) rotateY(5deg);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;filter:url(#glassDistortion)}.glasnost-profile-card:hover .profile-glass-overlay[data-v-2670545b]{opacity:1}.glasnost-profile-card:hover .profile-liquid-distortion[data-v-2670545b]{opacity:.6}.glasnost-profile-card[data-v-2670545b]:hover:before{left:100%}.glasnost-profile-card:hover .card-shine[data-v-2670545b]{left:100%}.profile-card-content[data-v-2670545b]{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}.avatar-container[data-v-2670545b]{position:relative;margin-bottom:2rem}.avatar-glow-ring[data-v-2670545b]{position:absolute;top:50%;left:50%;width:120px;height:120px;background:conic-gradient(from 0deg,rgba(99,102,241,.5),rgba(236,72,153,.5),rgba(99,102,241,.5));border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:all .4s ease;animation:avatarRotate-2670545b 6s linear infinite;z-index:1}.glasnost-profile-card:hover .avatar-glow-ring[data-v-2670545b]{opacity:.6}@keyframes avatarRotate-2670545b{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.profile-avatar[data-v-2670545b]{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.4);filter:url(#avatarGlow);transition:all .4s ease;position:relative;z-index:3}.glasnost-profile-card:hover .profile-avatar[data-v-2670545b]{transform:scale(1.1);border-color:#fff9}.avatar-shimmer[data-v-2670545b]{position:absolute;top:50%;left:50%;width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 40%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:all .4s ease;animation:avatarPulse-2670545b 4s ease-in-out infinite;z-index:2}.glasnost-profile-card:hover .avatar-shimmer[data-v-2670545b]{opacity:.8}@keyframes avatarPulse-2670545b{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.6}}.profile-info[data-v-2670545b]{margin-bottom:2rem}.profile-name[data-v-2670545b]{font-size:1.75rem;font-weight:700;color:#fffffff2;margin:0 0 .75rem;letter-spacing:.025em;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.profile-title[data-v-2670545b]{font-size:1.1rem;color:#ffffffbf;margin:0;font-weight:500}.profile-actions[data-v-2670545b]{width:100%}@media (max-width: 768px){.glasnost-profile-card[data-v-2670545b]{max-width:300px;padding:2rem 1.5rem;border-radius:20px}.profile-avatar[data-v-2670545b]{width:80px;height:80px}.avatar-glow-ring[data-v-2670545b]{width:100px;height:100px}.avatar-shimmer[data-v-2670545b]{width:90px;height:90px}.profile-name[data-v-2670545b]{font-size:1.5rem}.profile-title[data-v-2670545b]{font-size:1rem}}@media (prefers-reduced-motion: reduce){.glasnost-profile-card[data-v-2670545b],.profile-avatar[data-v-2670545b],.avatar-shimmer[data-v-2670545b],.avatar-glow-ring[data-v-2670545b],.card-shine[data-v-2670545b],.profile-glass-overlay[data-v-2670545b],.profile-liquid-distortion[data-v-2670545b]{transition:none;animation:none}.glasnost-profile-card[data-v-2670545b]:before{transition:none}.glasnost-profile-card[data-v-2670545b]:hover{transform:translateY(-8px)}}.glasnost-comment-card[data-v-f1eb91f0]{position:relative;width:100%;padding:2rem;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);background-size:200% 200%;border:1px solid rgba(255,255,255,.25);border-radius:20px;animation:flowingBackground-f1eb91f0 15s ease-in-out infinite;filter:url(#liquidNavbar);box-shadow:0 15px 50px #1f26875e,inset 0 1px #ffffff80,0 1px #ffffff1a;transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;transform-style:preserve-3d}.glasnost-comment-card[data-v-f1eb91f0]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}@keyframes flowingBackground-f1eb91f0{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.comment-glass-overlay[data-v-f1eb91f0]{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.comment-liquid-distortion[data-v-f1eb91f0]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.comment-shine[data-v-f1eb91f0]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);border-radius:inherit;transition:left .7s ease;pointer-events:none}.glasnost-comment-card[data-v-f1eb91f0]:hover{transform:translateY(-6px) rotateX(2deg);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 25px 70px #1f268780,inset 0 2px #fff9,0 2px #fff3;filter:url(#glassDistortion)}.glasnost-comment-card:hover .comment-glass-overlay[data-v-f1eb91f0]{opacity:1}.glasnost-comment-card:hover .comment-liquid-distortion[data-v-f1eb91f0]{opacity:.6}.glasnost-comment-card[data-v-f1eb91f0]:hover:before{left:100%}.glasnost-comment-card:hover .comment-shine[data-v-f1eb91f0]{left:100%}.comment-card-header[data-v-f1eb91f0]{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.2);position:relative;z-index:2}.comment-title[data-v-f1eb91f0]{font-size:1.5rem;font-weight:700;color:#fffffff2;margin:0;letter-spacing:.025em;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.comment-count[data-v-f1eb91f0]{font-size:.875rem;color:#fffc;background:linear-gradient(135deg,rgba(40,42,55,1) 0%,rgba(30,32,40,.98) 100%);padding:.5rem 1rem;border-radius:20px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);font-weight:600}.comment-card-content[data-v-f1eb91f0]{position:relative;z-index:2;min-height:120px}.no-comments[data-v-f1eb91f0]{text-align:center;padding:3rem 1rem;color:#ffffffb3}.no-comments-icon[data-v-f1eb91f0]{font-size:3.5rem;margin-bottom:1.5rem;opacity:.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.no-comments p[data-v-f1eb91f0]{margin:0;font-size:1.1rem;line-height:1.6;font-weight:500}.floating-particle[data-v-f1eb91f0]{position:absolute;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,transparent 100%);border-radius:50%;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.particle-1[data-v-f1eb91f0]{width:16px;height:16px;top:20%;left:15%;animation:floatParticle-f1eb91f0 12s ease-in-out infinite}.particle-2[data-v-f1eb91f0]{width:12px;height:12px;top:70%;right:20%;animation:floatParticle-f1eb91f0 15s ease-in-out infinite 3s}.particle-3[data-v-f1eb91f0]{width:14px;height:14px;bottom:25%;left:25%;animation:floatParticle-f1eb91f0 18s ease-in-out infinite 6s}@keyframes floatParticle-f1eb91f0{0%,to{transform:translateY(0) translate(0) rotate(0);opacity:.3}25%{transform:translateY(-20px) translate(10px) rotate(90deg);opacity:.6}50%{transform:translateY(-30px) translate(-5px) rotate(180deg);opacity:.4}75%{transform:translateY(-15px) translate(15px) rotate(270deg);opacity:.7}}.glasnost-comment-card[data-v-f1eb91f0] .comment-item{padding:1.5rem;margin-bottom:1rem;background:linear-gradient(135deg,rgba(30,32,40,.95) 0%,rgba(40,42,55,.92) 100%);border-radius:16px;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .3s cubic-bezier(.23,1,.32,1)}.glasnost-comment-card[data-v-f1eb91f0] .comment-item:hover{background:linear-gradient(135deg,rgba(40,42,55,1) 0%,rgba(30,32,40,.98) 100%);border-color:#ffffff40;transform:translate(8px) translateY(-2px);box-shadow:0 12px 35px #1f268740,inset 0 2px #ffffff4d}.glasnost-comment-card[data-v-f1eb91f0] .comment-author{font-weight:700;color:#ffffffe6;margin-bottom:.75rem;font-size:1.1rem}.glasnost-comment-card[data-v-f1eb91f0] .comment-text{color:#fffc;line-height:1.7;font-size:1rem}.glasnost-comment-card[data-v-f1eb91f0] .comment-meta{font-size:.875rem;color:#fff9;margin-top:.75rem;font-weight:500}.comment-card-footer[data-v-f1eb91f0]{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:center;position:relative;z-index:2}.more-button[data-v-f1eb91f0]{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 2rem;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:12px;color:#ffffffe6;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s cubic-bezier(.23,1,.32,1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;text-decoration:none;-webkit-user-select:none;user-select:none;outline:none;letter-spacing:.025em}.more-button[data-v-f1eb91f0]:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 8px 25px #1f26874d,inset 0 1px #fff6;color:#fffffff2}.more-button[data-v-f1eb91f0]:active{transform:translateY(-1px)}.more-button[data-v-f1eb91f0]:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px}.more-button-text[data-v-f1eb91f0]{position:relative;z-index:2}.more-button-shine[data-v-f1eb91f0]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:inherit;transition:left .5s ease;pointer-events:none}.more-button:hover .more-button-shine[data-v-f1eb91f0]{left:100%}@media (max-width: 768px){.glasnost-comment-card[data-v-f1eb91f0]{padding:1.5rem;border-radius:18px}.comment-card-header[data-v-f1eb91f0]{flex-direction:column;align-items:flex-start;gap:1rem}.comment-title[data-v-f1eb91f0]{font-size:1.25rem}.comment-count[data-v-f1eb91f0]{align-self:flex-end}.more-button[data-v-f1eb91f0]{padding:.65rem 1.5rem;font-size:.85rem}.no-comments[data-v-f1eb91f0]{padding:2rem .5rem}.no-comments-icon[data-v-f1eb91f0]{font-size:3rem}.no-comments p[data-v-f1eb91f0]{font-size:1rem}}@media (prefers-reduced-motion: reduce){.glasnost-comment-card[data-v-f1eb91f0],.floating-particle[data-v-f1eb91f0],.comment-shine[data-v-f1eb91f0],.comment-glass-overlay[data-v-f1eb91f0],.comment-liquid-distortion[data-v-f1eb91f0],.more-button[data-v-f1eb91f0],.more-button-shine[data-v-f1eb91f0]{animation:none;transition:none}.glasnost-comment-card[data-v-f1eb91f0]:before{transition:none}.glasnost-comment-card[data-v-f1eb91f0] .comment-item{transition:none}.glasnost-comment-card[data-v-f1eb91f0]:hover{transform:translateY(-4px)}.more-button[data-v-f1eb91f0]:hover{transform:translateY(-1px)}}.glasnost-glass-button[data-v-138eabb2]{position:relative;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:16px;color:#fffffff2;font-weight:600;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);filter:url(#liquidNavbar);overflow:hidden;text-decoration:none;-webkit-user-select:none;user-select:none;outline:none;transform-style:preserve-3d}.glasnost-glass-button[data-v-138eabb2]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.button-glass-overlay[data-v-138eabb2]{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.button-liquid-distortion[data-v-138eabb2]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.button-shine[data-v-138eabb2]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);border-radius:inherit;transition:left .6s ease;pointer-events:none}.glasnost-glass-button[data-v-138eabb2]:hover{transform:translateY(-3px) scale(1.02);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59;box-shadow:0 15px 45px #1f268766,inset 0 2px #fff9,0 2px #fff3;filter:url(#glassDistortion)}.glasnost-glass-button:hover .button-glass-overlay[data-v-138eabb2]{opacity:1}.glasnost-glass-button:hover .button-liquid-distortion[data-v-138eabb2]{opacity:.6}.glasnost-glass-button[data-v-138eabb2]:hover:before{left:100%}.glasnost-glass-button:hover .button-shine[data-v-138eabb2]{left:100%}.glasnost-glass-button[data-v-138eabb2]:active{transform:translateY(-1px) scale(.98);filter:url(#shimmerEffect)}.glasnost-glass-button[data-v-138eabb2]:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}.glass-button--small[data-v-138eabb2]{padding:8px 20px;font-size:.875rem;border-radius:12px}.glass-button--medium[data-v-138eabb2]{padding:12px 28px;font-size:1rem;border-radius:16px}.glass-button--large[data-v-138eabb2]{padding:16px 36px;font-size:1.125rem;border-radius:20px}.glass-button--primary[data-v-138eabb2]{background:linear-gradient(135deg,rgba(99,102,241,.3) 0%,rgba(67,56,202,.2) 100%);color:#fffffff2}.glass-button--primary[data-v-138eabb2]:hover{background:linear-gradient(135deg,rgba(99,102,241,.4) 0%,rgba(67,56,202,.3) 100%);box-shadow:0 15px 45px #6366f166,inset 0 2px #fff9,0 2px #6366f133}.glass-button--secondary[data-v-138eabb2]{background:linear-gradient(135deg,rgba(107,114,128,.3) 0%,rgba(75,85,99,.2) 100%)}.glass-button--secondary[data-v-138eabb2]:hover{background:linear-gradient(135deg,rgba(107,114,128,.4) 0%,rgba(75,85,99,.3) 100%);box-shadow:0 15px 45px #6b728066,inset 0 2px #fff9,0 2px #6b728033}.glass-button--accent[data-v-138eabb2]{background:linear-gradient(135deg,rgba(236,72,153,.3) 0%,rgba(190,24,93,.2) 100%)}.glass-button--accent[data-v-138eabb2]:hover{background:linear-gradient(135deg,rgba(236,72,153,.4) 0%,rgba(190,24,93,.3) 100%);box-shadow:0 15px 45px #ec489966,inset 0 2px #fff9,0 2px #ec489933}.glass-button--disabled[data-v-138eabb2]{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.glass-button--disabled[data-v-138eabb2]:hover{background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border-color:#ffffff40;box-shadow:0 8px 32px #1f26875e,inset 0 1px #ffffff80;transform:none}.glass-button--disabled .button-shine[data-v-138eabb2],.glass-button--disabled .button-glass-overlay[data-v-138eabb2],.glass-button--disabled .button-liquid-distortion[data-v-138eabb2]{display:none}.button-content[data-v-138eabb2]{position:relative;z-index:2;display:flex;align-items:center;gap:.5rem}@media (max-width: 768px){.glass-button--small[data-v-138eabb2]{padding:6px 16px;font-size:.8rem}.glass-button--medium[data-v-138eabb2]{padding:10px 24px;font-size:.9rem}.glass-button--large[data-v-138eabb2]{padding:14px 32px;font-size:1rem}}@media (prefers-reduced-motion: reduce){.glasnost-glass-button[data-v-138eabb2],.button-shine[data-v-138eabb2],.button-glass-overlay[data-v-138eabb2],.button-liquid-distortion[data-v-138eabb2]{transition:none}.glasnost-glass-button[data-v-138eabb2]:before{transition:none}}.glasnost-hamburger-menu[data-v-bcf38f7c]{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:16px;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;outline:none;transform-style:preserve-3d}.glasnost-hamburger-menu[data-v-bcf38f7c]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.hamburger-glass-overlay[data-v-bcf38f7c]{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;border-radius:inherit}.hamburger-liquid-distortion[data-v-bcf38f7c]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.hamburger-shine[data-v-bcf38f7c]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);border-radius:inherit;transition:left .5s ease;pointer-events:none}.glasnost-hamburger-menu[data-v-bcf38f7c]:hover{transform:translateY(-3px) scale(1.05);background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 100%);border-color:#ffffff59}.glasnost-hamburger-menu:hover .hamburger-glass-overlay[data-v-bcf38f7c]{opacity:1}.glasnost-hamburger-menu:hover .hamburger-liquid-distortion[data-v-bcf38f7c]{opacity:.6}.glasnost-hamburger-menu[data-v-bcf38f7c]:hover:before{left:100%}.glasnost-hamburger-menu:hover .hamburger-shine[data-v-bcf38f7c]{left:100%}.glasnost-hamburger-menu[data-v-bcf38f7c]:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}.glasnost-hamburger-menu[data-v-bcf38f7c]:active{transform:translateY(-1px) scale(1.02);filter:url(#shimmerEffect)}.hamburger-menu--open[data-v-bcf38f7c]{background:linear-gradient(135deg,rgba(236,72,153,.3) 0%,rgba(190,24,93,.2) 100%);border-color:#ec489966}.hamburger-menu--open[data-v-bcf38f7c]:hover{background:linear-gradient(135deg,rgba(236,72,153,.4) 0%,rgba(190,24,93,.3) 100%)}.hamburger-icon[data-v-bcf38f7c]{position:relative;width:26px;height:20px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}.hamburger-line[data-v-bcf38f7c]{display:block;width:100%;height:3px;background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);border-radius:3px;transition:all .4s cubic-bezier(.23,1,.32,1);transform-origin:center;filter:url(#cleanGlow)}.hamburger-menu--open .hamburger-line--top[data-v-bcf38f7c]{transform:translateY(8.5px) rotate(45deg);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 100%)}.hamburger-menu--open .hamburger-line--middle[data-v-bcf38f7c]{opacity:0;transform:scaleX(0)}.hamburger-menu--open .hamburger-line--bottom[data-v-bcf38f7c]{transform:translateY(-8.5px) rotate(-45deg);background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 100%)}.glasnost-hamburger-menu:hover .hamburger-line[data-v-bcf38f7c]{background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.9) 100%)}@media (max-width: 768px){.glasnost-hamburger-menu[data-v-bcf38f7c]{width:48px;height:48px;border-radius:14px}.hamburger-icon[data-v-bcf38f7c]{width:22px;height:18px}.hamburger-line[data-v-bcf38f7c]{height:2.5px}.hamburger-menu--open .hamburger-line--top[data-v-bcf38f7c]{transform:translateY(7.75px) rotate(45deg)}.hamburger-menu--open .hamburger-line--bottom[data-v-bcf38f7c]{transform:translateY(-7.75px) rotate(-45deg)}}@media (prefers-reduced-motion: reduce){.glasnost-hamburger-menu[data-v-bcf38f7c],.hamburger-line[data-v-bcf38f7c],.hamburger-shine[data-v-bcf38f7c],.hamburger-glass-overlay[data-v-bcf38f7c],.hamburger-liquid-distortion[data-v-bcf38f7c]{transition:none;animation:none}.glasnost-hamburger-menu[data-v-bcf38f7c]:before{transition:none}.glasnost-hamburger-menu[data-v-bcf38f7c]:hover{transform:translateY(-2px)}}.glasnost-toggle-button[data-v-caa176fa]{display:inline-flex;align-items:center;gap:1rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .4s cubic-bezier(.23,1,.32,1);--track-width: 64px;--track-height: 36px;--track-radius: calc(var(--track-height) / 2);--knob-size: calc(var(--track-height) - 4px);--knob-offset: 2px;--knob-travel: calc(var(--track-width) - var(--knob-size) - (var(--knob-offset) * 2));--label-size: .95rem;--gap-size: 1rem}.glasnost-toggle-button[data-v-caa176fa]:hover{transform:translateY(-2px)}.toggle-button--disabled[data-v-caa176fa]{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(100%)}.toggle-input[data-v-caa176fa]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.toggle-track[data-v-caa176fa]{position:relative;width:var(--track-width);height:var(--track-height);background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.25);border-radius:var(--track-radius);transition:all .4s cubic-bezier(.23,1,.32,1);overflow:hidden;transform-style:preserve-3d}.toggle-track[data-v-caa176fa]:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transition:left .6s ease;pointer-events:none;border-radius:inherit}.toggle-track-overlay[data-v-caa176fa]{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:inherit;transition:all .4s ease;opacity:0}.toggle-liquid-distortion[data-v-caa176fa]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(255,255,255,.05) 100%);filter:url(#frostedGlass);opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit}.toggle-shine[data-v-caa176fa]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:inherit;transition:left .6s ease;pointer-events:none}.glasnost-toggle-button:hover .toggle-track[data-v-caa176fa]{border-color:#ffffff59;box-shadow:inset 0 2px 8px #0000001a,0 6px 20px #1f268740,inset 0 1px #fff6;filter:url(#glassDistortion)}.glasnost-toggle-button:hover .toggle-track-overlay[data-v-caa176fa]{opacity:1}.glasnost-toggle-button:hover .toggle-liquid-distortion[data-v-caa176fa]{opacity:.6}.glasnost-toggle-button:hover .toggle-track[data-v-caa176fa]:before{left:100%}.glasnost-toggle-button:hover .toggle-shine[data-v-caa176fa]{left:100%}.toggle-knob[data-v-caa176fa]{position:relative;top:var(--knob-offset);left:var(--knob-offset);width:var(--knob-size);height:var(--knob-size);background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 100%);border-radius:50%;transition:all .4s cubic-bezier(.23,1,.32,1);filter:url(#cleanGlow);z-index:2;transform-style:preserve-3d;overflow:hidden}.toggle-button--checked .toggle-knob[data-v-caa176fa]{transform:translate(var(--knob-travel));background:linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.85) 100%)}.glasnost-toggle-button:hover .toggle-knob[data-v-caa176fa]{transform:scale(1.1)}.toggle-button--checked.glasnost-toggle-button:hover .toggle-knob[data-v-caa176fa]{transform:translate(var(--knob-travel)) scale(1.1)}.knob-inner[data-v-caa176fa]{position:absolute;top:50%;left:50%;width:calc(var(--knob-size) * .75);height:calc(var(--knob-size) * .75);background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,.3) 60%,transparent 100%);border-radius:50%;transform:translate(-50%,-50%);transition:all .3s ease;opacity:.6}.toggle-button--checked .knob-inner[data-v-caa176fa]{background:radial-gradient(circle,rgba(99,102,241,.6) 0%,rgba(99,102,241,.2) 60%,transparent 100%);opacity:.8}.glasnost-toggle-button:hover .knob-inner[data-v-caa176fa]{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.knob-shine[data-v-caa176fa]{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);border-radius:inherit;transition:left .4s ease;pointer-events:none}.glasnost-toggle-button:hover .knob-shine[data-v-caa176fa]{left:100%}.toggle-label[data-v-caa176fa]{font-size:var(--label-size);font-weight:600;color:#ffffffeb;letter-spacing:.025em;transition:all .3s ease}.glasnost-toggle-button:hover .toggle-label[data-v-caa176fa]{color:#fffffffa}.toggle-input:focus-visible+.toggle-track[data-v-caa176fa]{outline:2px solid rgba(255,255,255,.6);outline-offset:3px}.glasnost-toggle-button:active .toggle-knob[data-v-caa176fa]{transform:scale(.95);filter:url(#shimmerEffect)}.toggle-button--checked.glasnost-toggle-button:active .toggle-knob[data-v-caa176fa]{transform:translate(var(--knob-travel)) scale(.95)}.toggle-button--disabled .toggle-track[data-v-caa176fa]{background:rgba(255,255,255,.3);border:1.5px solid rgba(200,200,200,.7);opacity:.7}.toggle-button--disabled .toggle-knob[data-v-caa176fa]{background:rgba(255,255,255,.7);border:1.5px solid rgba(200,200,200,.7);opacity:.8}.toggle-button--disabled .toggle-shine[data-v-caa176fa],.toggle-button--disabled .knob-shine[data-v-caa176fa],.toggle-button--disabled .toggle-track-overlay[data-v-caa176fa],.toggle-button--disabled .toggle-liquid-distortion[data-v-caa176fa]{display:none}.toggle-button--small[data-v-caa176fa]{--track-width: 40px;--track-height: 22px;--label-size: .85rem;--gap-size: .75rem;gap:var(--gap-size)}.toggle-button--medium[data-v-caa176fa]{--track-width: 64px;--track-height: 36px;--label-size: .95rem;--gap-size: 1rem;gap:var(--gap-size)}.toggle-button--large[data-v-caa176fa]{--track-width: 88px;--track-height: 48px;--label-size: 1.15rem;--gap-size: 1.25rem;gap:var(--gap-size)}.toggle-button--primary.toggle-button--checked .toggle-track[data-v-caa176fa]{background:linear-gradient(135deg,rgba(99,102,241,.4) 0%,rgba(67,56,202,.3) 100%);border-color:#6366f180}.toggle-button--primary.toggle-button--checked .toggle-track-overlay[data-v-caa176fa]{background:radial-gradient(circle at 70% 50%,rgba(99,102,241,.3) 0%,transparent 70%)}.toggle-button--primary.toggle-button--checked.glasnost-toggle-button:hover .toggle-track[data-v-caa176fa]{border-color:#6366f199;box-shadow:inset 0 2px 8px #6366f140,0 8px 25px #6366f166,inset 0 2px #ffffff80}.toggle-button--secondary.toggle-button--checked .toggle-track[data-v-caa176fa]{background:linear-gradient(135deg,rgba(107,114,128,.4) 0%,rgba(75,85,99,.3) 100%);border-color:#6b728080}.toggle-button--secondary.toggle-button--checked .toggle-track-overlay[data-v-caa176fa]{background:radial-gradient(circle at 70% 50%,rgba(107,114,128,.3) 0%,transparent 70%)}.toggle-button--secondary.toggle-button--checked.glasnost-toggle-button:hover .toggle-track[data-v-caa176fa]{border-color:#6b728099;box-shadow:inset 0 2px 8px #6b728040,0 8px 25px #6b728066,inset 0 2px #ffffff80}.toggle-button--accent.toggle-button--checked .toggle-track[data-v-caa176fa]{background:linear-gradient(135deg,rgba(236,72,153,.4) 0%,rgba(190,24,93,.3) 100%);border-color:#ec489980}.toggle-button--accent.toggle-button--checked .toggle-track-overlay[data-v-caa176fa]{background:radial-gradient(circle at 70% 50%,rgba(236,72,153,.3) 0%,transparent 70%)}.toggle-button--accent.toggle-button--checked.glasnost-toggle-button:hover .toggle-track[data-v-caa176fa]{border-color:#ec489999;box-shadow:inset 0 2px 8px #ec489940,0 8px 25px #ec489966,inset 0 2px #ffffff80}.toggle-button--accent.toggle-button--checked .knob-inner[data-v-caa176fa]{background:radial-gradient(circle,rgba(236,72,153,.6) 0%,rgba(236,72,153,.2) 60%,transparent 100%)}@media (max-width: 768px){.toggle-button--small[data-v-caa176fa]{--track-width: 32px;--track-height: 18px;--label-size: .8rem;--gap-size: .5rem}.toggle-button--medium[data-v-caa176fa]{--track-width: 48px;--track-height: 28px;--label-size: .875rem;--gap-size: .75rem}.toggle-button--large[data-v-caa176fa]{--track-width: 64px;--track-height: 36px;--label-size: 1rem;--gap-size: 1rem}}@media (prefers-reduced-motion: reduce){.glasnost-toggle-button[data-v-caa176fa],.toggle-track[data-v-caa176fa],.toggle-knob[data-v-caa176fa],.toggle-shine[data-v-caa176fa],.knob-shine[data-v-caa176fa],.toggle-track-overlay[data-v-caa176fa],.toggle-liquid-distortion[data-v-caa176fa],.knob-inner[data-v-caa176fa]{transition:none;animation:none}.toggle-track[data-v-caa176fa]:before{transition:none}.glasnost-toggle-button[data-v-caa176fa]:hover{transform:none}}