/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-16{inset:-4rem}.-inset-\[40\%\]{inset:-40%}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[9998\]{z-index:9998}.z-\[99999\]{z-index:99999}.z-\[9999\]{z-index:9999}.col-span-2{grid-column:span 2/span 2}.m-0{margin:0}.-mx-4{margin-left:-1rem;margin-right:-1rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-\[2px\]{margin-top:2px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.\!hidden{display:none!important}.hidden{display:none}.\!h-auto{height:auto!important}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-44{height:11rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[60px\]{height:60px}.h-\[64px\]{height:64px}.h-\[66px\]{height:66px}.h-full{height:100%}.max-h-40{max-height:10rem}.max-h-52{max-height:13rem}.max-h-60{max-height:15rem}.max-h-\[420px\]{max-height:420px}.min-h-\[100dvh\]{min-height:100dvh}.min-h-\[70vh\]{min-height:70vh}.min-h-\[80vh\]{min-height:80vh}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-52{width:13rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[85\%\]{width:85%}.w-\[90\%\]{width:90%}.w-\[min\(420px\2c 90vw\)\]{width:min(420px,90vw)}.w-auto{width:auto}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-\[240px\]{min-width:240px}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[260px\]{max-width:260px}.max-w-\[340px\]{max-width:340px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.border-separate{border-collapse:separate}.border-spacing-y-1{--tw-border-spacing-y:0.25rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x:0px}.translate-x-full{--tw-translate-x:100%}.translate-x-full,.translate-y-\[1\.5px\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[1\.5px\]{--tw-translate-y:1.5px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-\[spin_46s_linear_infinite\]{animation:spin 46s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-1\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.375rem*var(--tw-space-x-reverse));margin-left:calc(.375rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-14>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3.5rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-slate-800>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(30 41 59/var(--tw-divide-opacity))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-amber-400\/30{border-color:rgba(251,191,36,.3)}.border-amber-400\/40{border-color:rgba(251,191,36,.4)}.border-cyan-400\/20{border-color:rgba(34,211,238,.2)}.border-cyan-400\/30{border-color:rgba(34,211,238,.3)}.border-cyan-400\/40{border-color:rgba(34,211,238,.4)}.border-cyan-400\/50{border-color:rgba(34,211,238,.5)}.border-cyan-400\/60{border-color:rgba(34,211,238,.6)}.border-cyan-400\/70{border-color:rgba(34,211,238,.7)}.border-cyan-500\/70{border-color:rgba(6,182,212,.7)}.border-emerald-400\/30{border-color:rgba(52,211,153,.3)}.border-emerald-400\/40{border-color:rgba(52,211,153,.4)}.border-emerald-400\/80{border-color:rgba(52,211,153,.8)}.border-emerald-500\/20{border-color:rgba(16,185,129,.2)}.border-emerald-500\/40{border-color:rgba(16,185,129,.4)}.border-emerald-500\/50{border-color:rgba(16,185,129,.5)}.border-emerald-500\/60{border-color:rgba(16,185,129,.6)}.border-fuchsia-500\/20{border-color:rgba(217,70,239,.2)}.border-fuchsia-500\/30{border-color:rgba(217,70,239,.3)}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-red-400\/30{border-color:hsla(0,91%,71%,.3)}.border-red-400\/40{border-color:hsla(0,91%,71%,.4)}.border-red-500\/60{border-color:rgba(239,68,68,.6)}.border-red-500\/70{border-color:rgba(239,68,68,.7)}.border-rose-400\/30{border-color:rgba(251,113,133,.3)}.border-rose-400\/50{border-color:rgba(251,113,133,.5)}.border-rose-500\/40{border-color:rgba(244,63,94,.4)}.border-rose-500\/60{border-color:rgba(244,63,94,.6)}.border-rose-500\/70{border-color:rgba(244,63,94,.7)}.border-rose-500\/80{border-color:rgba(244,63,94,.8)}.border-sky-400\/40{border-color:rgba(56,189,248,.4)}.border-sky-500\/20{border-color:rgba(14,165,233,.2)}.border-slate-200\/15{border-color:rgba(226,232,240,.15)}.border-slate-200\/20{border-color:rgba(226,232,240,.2)}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity))}.border-slate-700\/60{border-color:rgba(51,65,85,.6)}.border-slate-700\/70{border-color:rgba(51,65,85,.7)}.border-slate-700\/80{border-color:rgba(51,65,85,.8)}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity))}.border-slate-800\/70{border-color:rgba(30,41,59,.7)}.border-slate-800\/80{border-color:rgba(30,41,59,.8)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-\[\#0a1120\]{--tw-bg-opacity:1;background-color:rgb(10 17 32/var(--tw-bg-opacity))}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity))}.bg-amber-400\/5{background-color:rgba(251,191,36,.05)}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-500\/15{background-color:rgba(245,158,11,.15)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-black\/70{background-color:rgba(0,0,0,.7)}.bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.bg-cyan-400\/10{background-color:rgba(34,211,238,.1)}.bg-cyan-400\/40{background-color:rgba(34,211,238,.4)}.bg-cyan-500{--tw-bg-opacity:1;background-color:rgb(6 182 212/var(--tw-bg-opacity))}.bg-cyan-500\/10{background-color:rgba(6,182,212,.1)}.bg-cyan-500\/15{background-color:rgba(6,182,212,.15)}.bg-cyan-500\/20{background-color:rgba(6,182,212,.2)}.bg-cyan-500\/30{background-color:rgba(6,182,212,.3)}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity))}.bg-emerald-400\/80{background-color:rgba(52,211,153,.8)}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-emerald-500\/15{background-color:rgba(16,185,129,.15)}.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}.bg-emerald-950\/60{background-color:rgba(2,44,34,.6)}.bg-fuchsia-500\/20{background-color:rgba(217,70,239,.2)}.bg-fuchsia-500\/5{background-color:rgba(217,70,239,.05)}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-500\/15{background-color:rgba(239,68,68,.15)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-red-950\/60{background-color:rgba(69,10,10,.6)}.bg-rose-500\/10{background-color:rgba(244,63,94,.1)}.bg-rose-500\/90{background-color:rgba(244,63,94,.9)}.bg-rose-950\/40{background-color:rgba(76,5,25,.4)}.bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity))}.bg-sky-500\/15{background-color:rgba(14,165,233,.15)}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-slate-800\/80{background-color:rgba(30,41,59,.8)}.bg-slate-800\/90{background-color:rgba(30,41,59,.9)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.bg-slate-900\/40{background-color:rgba(15,23,42,.4)}.bg-slate-900\/60{background-color:rgba(15,23,42,.6)}.bg-slate-900\/70{background-color:rgba(15,23,42,.7)}.bg-slate-900\/80{background-color:rgba(15,23,42,.8)}.bg-slate-900\/90{background-color:rgba(15,23,42,.9)}.bg-slate-900\/95{background-color:rgba(15,23,42,.95)}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity))}.bg-slate-950\/30{background-color:rgba(2,6,23,.3)}.bg-slate-950\/60{background-color:rgba(2,6,23,.6)}.bg-slate-950\/70{background-color:rgba(2,6,23,.7)}.bg-slate-950\/80{background-color:rgba(2,6,23,.8)}.bg-slate-950\/90{background-color:rgba(2,6,23,.9)}.bg-slate-950\/95{background-color:rgba(2,6,23,.95)}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-\[radial-gradient\(circle_at_0_0\2c \#22d3ee33\2c transparent_60\%\)\2c radial-gradient\(circle_at_100\%_100\%\2c \#ec489933\2c transparent_60\%\)\]{background-image:radial-gradient(circle at 0 0,#22d3ee33,transparent 60%),radial-gradient(circle at 100% 100%,#ec489933,transparent 60%)}.bg-\[radial-gradient\(circle_at_1px_1px\2c \#0f172a_1px\2c transparent_0\)\]{background-image:radial-gradient(circle at 1px 1px,#0f172a 1px,transparent 0)}.bg-\[radial-gradient\(circle_at_20\%_20\%\2c \#22c55e11\2c transparent_60\%\)\2c radial-gradient\(circle_at_80\%_80\%\2c \#0ea5e911\2c transparent_60\%\)\]{background-image:radial-gradient(circle at 20% 20%,#22c55e11,transparent 60%),radial-gradient(circle at 80% 80%,#0ea5e911,transparent 60%)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#050816\]{--tw-gradient-from:#050816 var(--tw-gradient-from-position);--tw-gradient-to:rgba(5,8,22,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-cyan-400{--tw-gradient-from:#22d3ee var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,211,238,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#020617\]{--tw-gradient-to:rgba(2,6,23,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#020617 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-sky-300{--tw-gradient-to:rgba(125,211,252,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#7dd3fc var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-\[\#050816\]{--tw-gradient-to:#050816 var(--tw-gradient-to-position)}.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.to-fuchsia-400{--tw-gradient-to:#e879f9 var(--tw-gradient-to-position)}.bg-\[length\:26px_26px\]{background-size:26px 26px}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0{padding:0}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}.\!py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-8{padding-bottom:2rem}.pb-\[2px\]{padding-bottom:2px}.pl-6{padding-left:1.5rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.pt-\[96px\]{padding-top:96px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.76rem\]{font-size:.76rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[16px\]{font-size:16px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-\[0\.24em\]{letter-spacing:.24em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.26em\]{letter-spacing:.26em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-100{--tw-text-opacity:1;color:rgb(254 243 199/var(--tw-text-opacity))}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity))}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity))}.text-cyan-100{--tw-text-opacity:1;color:rgb(207 250 254/var(--tw-text-opacity))}.text-cyan-100\/90{color:rgba(207,250,254,.9)}.text-cyan-200{--tw-text-opacity:1;color:rgb(165 243 252/var(--tw-text-opacity))}.text-cyan-300{--tw-text-opacity:1;color:rgb(103 232 249/var(--tw-text-opacity))}.text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity))}.text-cyan-500{--tw-text-opacity:1;color:rgb(6 182 212/var(--tw-text-opacity))}.text-emerald-100{--tw-text-opacity:1;color:rgb(209 250 229/var(--tw-text-opacity))}.text-emerald-100\/90{color:rgba(209,250,229,.9)}.text-emerald-200{--tw-text-opacity:1;color:rgb(167 243 208/var(--tw-text-opacity))}.text-emerald-300{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity))}.text-emerald-950{--tw-text-opacity:1;color:rgb(2 44 34/var(--tw-text-opacity))}.text-fuchsia-200{--tw-text-opacity:1;color:rgb(245 208 254/var(--tw-text-opacity))}.text-fuchsia-300{--tw-text-opacity:1;color:rgb(240 171 252/var(--tw-text-opacity))}.text-fuchsia-400{--tw-text-opacity:1;color:rgb(232 121 249/var(--tw-text-opacity))}.text-red-100{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity))}.text-red-200\/90{color:hsla(0,96%,89%,.9)}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity))}.text-rose-100{--tw-text-opacity:1;color:rgb(255 228 230/var(--tw-text-opacity))}.text-rose-200{--tw-text-opacity:1;color:rgb(254 205 211/var(--tw-text-opacity))}.text-rose-300{--tw-text-opacity:1;color:rgb(253 164 175/var(--tw-text-opacity))}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity))}.text-sky-200{--tw-text-opacity:1;color:rgb(186 230 253/var(--tw-text-opacity))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity))}.text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity))}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}.text-slate-200\/80{color:rgba(226,232,240,.8)}.text-slate-200\/85{color:rgba(226,232,240,.85)}.text-slate-200\/90{color:rgba(226,232,240,.9)}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity))}.text-slate-300\/80{color:rgba(203,213,225,.8)}.text-slate-300\/90{color:rgba(203,213,225,.9)}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-50{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity))}.text-slate-50\/95{color:rgba(248,250,252,.95)}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity))}.text-transparent{color:transparent}.text-violet-300{--tw-text-opacity:1;color:rgb(196 181 253/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-cyan-400{accent-color:#22d3ee}.accent-emerald-400{accent-color:#34d399}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.mix-blend-soft-light{mix-blend-mode:soft-light}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[-20px_0_60px_rgba\(34\2c 211\2c 238\2c 0\.15\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[-20px_0_60px_rgba\(34\2c 211\2c 238\2c 0\.15\)\]{--tw-shadow:-20px 0 60px rgba(34,211,238,.15);--tw-shadow-colored:-20px 0 60px var(--tw-shadow-color)}.shadow-\[0_0_10px_rgba\(217\2c 70\2c 239\2c 0\.3\)\]{--tw-shadow:0 0 10px rgba(217,70,239,.3);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(34\2c 211\2c 238\2c 0\.35\)\]{--tw-shadow:0 0 10px rgba(34,211,238,.35);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(34\2c 211\2c 238\2c 0\.8\)\]{--tw-shadow:0 0 10px rgba(34,211,238,.8);--tw-shadow-colored:0 0 10px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_12px_rgba\(34\2c 211\2c 238\2c 0\.35\)\]{--tw-shadow:0 0 12px rgba(34,211,238,.35);--tw-shadow-colored:0 0 12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_12px_rgba\(34\2c 211\2c 238\2c 0\.55\)\]{--tw-shadow:0 0 12px rgba(34,211,238,.55);--tw-shadow-colored:0 0 12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_12px_rgba\(52\2c 211\2c 153\2c \.9\)\]{--tw-shadow:0 0 12px rgba(52,211,153,.9);--tw-shadow-colored:0 0 12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_14px_rgba\(248\2c 113\2c 113\2c 0\.45\)\]{--tw-shadow:0 0 14px hsla(0,91%,71%,.45);--tw-shadow-colored:0 0 14px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(217\2c 70\2c 239\2c 0\.1\)\]{--tw-shadow:0 0 15px rgba(217,70,239,.1);--tw-shadow-colored:0 0 15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_18px_rgba\(15\2c 23\2c 42\2c 0\.9\)\]{--tw-shadow:0 0 18px rgba(15,23,42,.9);--tw-shadow-colored:0 0 18px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_18px_rgba\(34\2c 211\2c 238\2c 0\.35\)\]{--tw-shadow:0 0 18px rgba(34,211,238,.35);--tw-shadow-colored:0 0 18px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_18px_rgba\(34\2c 211\2c 238\2c 0\.6\)\]{--tw-shadow:0 0 18px rgba(34,211,238,.6);--tw-shadow-colored:0 0 18px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_24px_rgba\(52\2c 211\2c 153\2c 0\.8\)\]{--tw-shadow:0 0 24px rgba(52,211,153,.8);--tw-shadow-colored:0 0 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_30px_rgba\(34\2c 211\2c 238\2c 0\.4\)\]{--tw-shadow:0 0 30px rgba(34,211,238,.4);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_45px_rgba\(34\2c 211\2c 238\2c 0\.45\)\]{--tw-shadow:0 0 45px rgba(34,211,238,.45);--tw-shadow-colored:0 0 45px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_45px_rgba\(34\2c 211\2c 238\2c 0\.6\)\]{--tw-shadow:0 0 45px rgba(34,211,238,.6);--tw-shadow-colored:0 0 45px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_8px_rgba\(56\2c 189\2c 248\2c \.35\)\]{--tw-shadow:0 0 8px rgba(56,189,248,.35);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_12px_35px_rgba\(245\2c 158\2c 11\2c \.55\)\]{--tw-shadow:0 12px 35px rgba(245,158,11,.55);--tw-shadow-colored:0 12px 35px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_12px_35px_rgba\(56\2c 189\2c 248\2c \.55\)\]{--tw-shadow:0 12px 35px rgba(56,189,248,.55);--tw-shadow-colored:0 12px 35px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_26px_60px_rgba\(15\2c 23\2c 42\2c 0\.95\)\]{--tw-shadow:0 26px 60px rgba(15,23,42,.95);--tw-shadow-colored:0 26px 60px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_30px_90px_rgba\(15\2c 23\2c 42\2c 0\.95\)\]{--tw-shadow:0 30px 90px rgba(15,23,42,.95);--tw-shadow-colored:0 30px 90px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_0_20px_rgba\(255\2c 255\2c 255\2c 0\.3\)\]{--tw-shadow:inset 0 0 20px hsla(0,0%,100%,.3);--tw-shadow-colored:inset 0 0 20px var(--tw-shadow-color)}.shadow-\[inset_0_0_20px_rgba\(255\2c 255\2c 255\2c 0\.3\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-black\/60{--tw-shadow-color:rgba(0,0,0,.6);--tw-shadow:var(--tw-shadow-colored)}.shadow-cyan-500\/40{--tw-shadow-color:rgba(6,182,212,.4);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow-\[0_0_24px_rgba\(56\2c 189\2c 248\2c \.5\)\]{--tw-drop-shadow:drop-shadow(0 0 24px rgba(56,189,248,.5))}.drop-shadow-\[0_0_24px_rgba\(56\2c 189\2c 248\2c \.5\)\],.drop-shadow-\[0_0_24px_rgba\(56\2c 189\2c 248\2c \.6\)\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-\[0_0_24px_rgba\(56\2c 189\2c 248\2c \.6\)\]{--tw-drop-shadow:drop-shadow(0 0 24px rgba(56,189,248,.6))}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-lg,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.backdrop-blur-2xl,.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.selection\:bg-cyan-500\/20 ::-moz-selection{background-color:rgba(6,182,212,.2)}.selection\:bg-cyan-500\/20 ::selection{background-color:rgba(6,182,212,.2)}.selection\:bg-cyan-500\/20::-moz-selection{background-color:rgba(6,182,212,.2)}.selection\:bg-cyan-500\/20::selection{background-color:rgba(6,182,212,.2)}.hover\:border-cyan-300\/90:hover{border-color:rgba(103,232,249,.9)}.hover\:border-cyan-400:hover{--tw-border-opacity:1;border-color:rgb(34 211 238/var(--tw-border-opacity))}.hover\:border-rose-400:hover{--tw-border-opacity:1;border-color:rgb(251 113 133/var(--tw-border-opacity))}.hover\:border-slate-400:hover{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.hover\:bg-amber-300:hover{--tw-bg-opacity:1;background-color:rgb(252 211 77/var(--tw-bg-opacity))}.hover\:bg-cyan-400:hover{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.hover\:bg-cyan-400\/20:hover{background-color:rgba(34,211,238,.2)}.hover\:bg-cyan-500\/10:hover{background-color:rgba(6,182,212,.1)}.hover\:bg-cyan-500\/20:hover{background-color:rgba(6,182,212,.2)}.hover\:bg-rose-400:hover{--tw-bg-opacity:1;background-color:rgb(251 113 133/var(--tw-bg-opacity))}.hover\:bg-rose-500\/10:hover{background-color:rgba(244,63,94,.1)}.hover\:bg-rose-500\/20:hover{background-color:rgba(244,63,94,.2)}.hover\:bg-sky-400:hover{--tw-bg-opacity:1;background-color:rgb(56 189 248/var(--tw-bg-opacity))}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity))}.hover\:bg-slate-800\/60:hover{background-color:rgba(30,41,59,.6)}.hover\:bg-slate-800\/80:hover{background-color:rgba(30,41,59,.8)}.hover\:bg-slate-900\/60:hover{background-color:rgba(15,23,42,.6)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-cyan-100:hover{--tw-text-opacity:1;color:rgb(207 250 254/var(--tw-text-opacity))}.hover\:text-cyan-200:hover{--tw-text-opacity:1;color:rgb(165 243 252/var(--tw-text-opacity))}.hover\:text-cyan-300:hover{--tw-text-opacity:1;color:rgb(103 232 249/var(--tw-text-opacity))}.hover\:text-cyan-400:hover{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity))}.hover\:text-fuchsia-300:hover{--tw-text-opacity:1;color:rgb(240 171 252/var(--tw-text-opacity))}.hover\:text-red-200:hover{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity))}.hover\:text-rose-200:hover{--tw-text-opacity:1;color:rgb(254 205 211/var(--tw-text-opacity))}.hover\:text-rose-300:hover{--tw-text-opacity:1;color:rgb(253 164 175/var(--tw-text-opacity))}.hover\:text-slate-100:hover{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.hover\:text-slate-200:hover{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity))}.hover\:text-slate-50:hover{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:drop-shadow-\[0_0_5px_rgba\(232\2c 121\2c 249\2c 0\.5\)\]:hover{--tw-drop-shadow:drop-shadow(0 0 5px rgba(232,121,249,.5));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:border-cyan-300:focus{--tw-border-opacity:1;border-color:rgb(103 232 249/var(--tw-border-opacity))}.focus\:border-cyan-400:focus{--tw-border-opacity:1;border-color:rgb(34 211 238/var(--tw-border-opacity))}.focus\:shadow-\[0_0_26px_rgba\(34\2c 211\2c 238\2c 0\.6\)\]:focus{--tw-shadow:0 0 26px rgba(34,211,238,.6);--tw-shadow-colored:0 0 26px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-1:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-cyan-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212/var(--tw-ring-opacity))}.focus\:ring-cyan-500\/60:focus{--tw-ring-color:rgba(6,182,212,.6)}@media (min-width:640px){.sm\:mb-1{margin-bottom:.25rem}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:table-cell{display:table-cell}.sm\:hidden{display:none}.sm\:h-24{height:6rem}.sm\:w-64{width:16rem}.sm\:w-auto{width:auto}.sm\:w-full{width:100%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-\[2fr\2c 1fr\]{grid-template-columns:2fr 1fr}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:p-4{padding:1rem}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:py-8{padding-top:2rem;padding-bottom:2rem}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:w-64{width:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.1fr\2c 1fr\]{grid-template-columns:1.1fr 1fr}.md\:grid-cols-\[1\.2fr\2c 1fr\]{grid-template-columns:1.2fr 1fr}.md\:grid-cols-\[1\.5fr\2c 3\.5fr\]{grid-template-columns:1.5fr 3.5fr}.md\:grid-cols-\[minmax\(0\2c 1\.1fr\)\2c minmax\(0\2c 0\.9fr\)\]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.md\:grid-cols-\[minmax\(0\2c 1\.4fr\)_minmax\(0\2c auto\)\]{grid-template-columns:minmax(0,1.4fr) minmax(0,auto)}.md\:grid-cols-\[minmax\(0\2c 1fr\)_160px_minmax\(0\2c auto\)\]{grid-template-columns:minmax(0,1fr) 160px minmax(0,auto)}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:items-stretch{align-items:stretch}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:gap-6{gap:1.5rem}.md\:space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem*var(--tw-space-y-reverse))}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:mt-10{margin-top:2.5rem}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-\[68px\]{height:68px}.lg\:h-\[72px\]{height:72px}.lg\:h-\[74px\]{height:74px}.lg\:w-full{width:100%}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1\.25fr\)\]{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}.lg\:items-start{align-items:flex-start}.lg\:p-7{padding:1.75rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:py-8{padding-top:2rem;padding-bottom:2rem}.lg\:pb-32{padding-bottom:8rem}.lg\:pt-\[72px\]{padding-top:72px}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-5xl{font-size:3rem;line-height:1}} /* ========================================================= ARENA UI — RESET MODERNO Mobile-first, prevedibile, senza sorprese ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } /* ========================================================= ARENA UI — BASE STYLES ========================================================= */ html { color-scheme: dark; scroll-behavior: smooth; cursor: default; } * { -webkit-tap-highlight-color: transparent; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: var(--aa-font-sans); background: var(--zl-bg); color: #e5e7eb; font-size: 1rem; line-height: 1.55; font-weight: 400; } /* ========================================================= Typography — premium soft scale ========================================================= */ h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; line-height: 1.15; } h2 { font-size: clamp(1.6rem, 4.5vw, 2.3rem); font-weight: 600; line-height: 1.20; } h3 { font-size: 1.35rem; font-weight: 600; line-height: 1.25; } h4, h5, h6 { font-size: 1.1rem; font-weight: 500; line-height: 1.3; } p { line-height: 1.6; margin-bottom: 0.9em; } section { position: relative; width: 100%; } a, button { transition: opacity var(--aa-time-fast) ease; } @media (hover: hover) and (pointer: fine) { a:hover, button:hover { opacity: 0.85; } } .mt-header { margin-top: 72px !important; } /* ========================================================= ARENA UI — LAYOUT SYSTEM (MOBILE FIRST) ========================================================= */ .aa-container { width: 100%; max-width: 1280px; padding-left: var(--aa-space-md); padding-right: var(--aa-space-md); margin-left: auto; margin-right: auto; } .aa-section { padding-top: var(--aa-space-xl); padding-bottom: var(--aa-space-xl); } @media (min-width: 1024px) { .aa-section { padding-top: calc(var(--aa-space-xl) * 1.5); padding-bottom: calc(var(--aa-space-xl) * 1.5); } } /* Grid base */ .aa-grid { display: grid; gap: var(--aa-space-md); } @media (min-width: 640px) { .aa-grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .aa-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= BREAKPOINTS (Tailwind-like reference) Estratti da arena-ui.css originale Usati come base per tutti i moduli e componenti ========================================================= */ @media (min-width: 640px) { /* sm */ } @media (min-width: 768px) { /* md */ } @media (min-width: 1024px) { /* lg */ } @media (min-width: 1280px) { /* xl */ } /* ========================================================= PERFORMANCE — CONTENT VISIBILITY (below the fold) Safe, mobile-first, no CLS ========================================================= */ @supports (content-visibility: auto) { /* Sezioni principali sotto la fold */ #giochi, #how, #eventi, .pricing-section, footer { content-visibility: auto; contain-intrinsic-size: 1000px; } } /* ========================================================= HOME — HOW SECTION (layout + steps) ========================================================= */ .aa-section-2xl{ padding-top: calc(var(--aa-space-xl) * 2); padding-bottom: calc(var(--aa-space-xl) * 2); } @media (min-width: 1024px){ .aa-section-2xl{ padding-top: calc(var(--aa-space-xl) * 2.5); padding-bottom: calc(var(--aa-space-xl) * 2.5); } } .ar-how-section{ position: relative; overflow: hidden; background: rgba(2,6,23,0.80); } .ar-how-inner{ position: relative; z-index: 2; } .ar-how-grid{ gap: calc(var(--aa-space-xl) * 1.25); } @media (min-width: 768px){ .ar-how-grid{ grid-template-columns: repeat(2, 1fr); align-items: start; } } .ar-how-h3{ margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.15; color: #fff; } .ar-how-text{ margin-top: 10px; font-size: 0.95rem; color: #94a3b8; line-height: 1.5; } .ar-how-steps{ margin-top: calc(var(--aa-space-md) * 1.25); } .ar-step-grid{ gap: var(--aa-space-md); } @media (min-width: 768px){ .ar-step-grid{ grid-template-columns: repeat(3, 1fr); } } .ar-step{ display: flex; align-items: flex-start; gap: var(--aa-space-sm); } .ar-step-num{ width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(56,189,248,.30); color: rgba(226,232,240,.95); font-size: 0.75rem; font-weight: 900; box-shadow: 0 0 8px rgba(56,189,248,.35); flex: 0 0 auto; } .ar-step-title{ margin: 0; font-size: 0.9rem; font-weight: 800; color: #e2e8f0; line-height: 1.1; } .ar-step-text{ margin: 4px 0 0; font-size: 0.82rem; color: #94a3b8; line-height: 1.25; } /* ========================================================= ARENA UI — DESIGN TOKENS (Palette unificata + Alias) ? Palette ufficiale: AA ? Alias retrocompatibili: ZL ? Niente valori inventati ========================================================= */ :root { /* ===================================================== PALETTE UFFICIALE — ARENA UI (Colori realmente usati in card, hero, overlay, CTA ecc.) ===================================================== */ --aa-cyan: #38bdf8; /* da game-card, grid, pill */ --aa-pink: #ec4899; /* CTA neon */ --aa-violet: #8b5cf6; /* CTA neon gradient */ --aa-dark: #020617; /* sfondo globale (giΰ usato) */ --aa-slate: #0f172a; /* background slate (card/hero) */ /* Overlay system (estratto dalle tue card originali) */ --aa-overlay-top: rgba(2,6,23,0.10); --aa-overlay-mid: rgba(2,6,23,0.62); --aa-overlay-deep: rgba(2,6,23,0.92); /* Border */ --aa-border-slate: rgba(148,163,184,0.12); /* ===================================================== RADII REALI usati nelle tue card e CTA ===================================================== */ --aa-radius-sm: 12px; --aa-radius-md: 16px; --aa-radius-lg: 18px; /* ===================================================== SHADOW SYSTEM (copiato dal tuo file al 100%) ===================================================== */ --aa-shadow-card: 0 18px 46px rgba(0,0,0,.45); --aa-shadow-card-hover: 0 28px 70px rgba(0,0,0,.58); --aa-shadow-neon: 0 12px 28px rgba(236,72,153,.45); /* ===================================================== TYPOGRAPHY ===================================================== */ --aa-font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --aa-font-h1-min: 2.2rem; --aa-font-h1-max: 4rem; --aa-font-body: 1rem; /* ===================================================== SPACING SCALE ===================================================== */ --aa-space-xs: 4px; --aa-space-sm: 8px; --aa-space-md: 16px; --aa-space-lg: 32px; --aa-space-xl: 48px; /* ===================================================== TIMINGS ===================================================== */ --aa-time-fast: 0.25s; --aa-time-normal: 0.45s; /* ===================================================== PALETTE ALIAS — ZERO LATENCY (retrocompatibilitΰ) Usa i colori AA come base, senza cambiare estetica ===================================================== */ --zl-cyan: var(--aa-cyan); /* prima era #22d3ee */ --zl-blue: #0ea5e9; /* lo manteniamo come colore secondario */ --zl-bg: var(--aa-dark); /* prima era lo stesso colore */ /* CTA arancione (giΰ usata da .btn-cta nel tuo file) */ --aa-cta-from: #f97316; /* arancio neon */ --aa-cta-to: #facc15; /* giallo neon */ } /* ========================================================= ARENA UI — ACCESSIBILITY RULES Supporto alle preferenze utente (reduced motion) Estratto e isolato dal file arena-ui originale Mobile-first, nessuna modifica agli effetti desktop ========================================================= */ @media (prefers-reduced-motion: reduce) { /* Disattiva smooth scroll: alcuni utenti non lo tollerano */ html { scroll-behavior: auto !important; } /* Rimuove animazioni e transizioni quando l’utente lo richiede */ * { animation: none !important; transition: none !important; } } /* ========================================================= ARENA UI — BACKGROUND EFFECTS MODULE Estratto da arena-ui.css (particles, noise, glow) Mobile-first, nessuna modifica ai valori originali ========================================================= */ /* -------------------------- SOFT BACKGROUND GRADIENT (usato come layer principale) --------------------------- */ .bg-zl { background: radial-gradient(1200px 700px at 10% -10%, rgba(34, 211, 238, .14), transparent 60% ), var(--zl-bg); } /* -------------------------- PARTICLES — MOBILE FIRST Mobile: disattivi per performance --------------------------- */ #particles { display:none !important; width:0 !important; height:0 !important; position: static !important; opacity:0 !important; } /* -------------------------- PARTICLES — DESKTOP ONLY Desktop: attivi fullscreen --------------------------- */ @media (min-width: 900px) and (hover: hover) and (pointer: fine) { #particles { display: block !important; position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; z-index: 0 !important; /* invece di 0 */ opacity: .85 !important; /* opzionale, se vuoi piω visibile */ pointer-events: none !important; } } /* -------------------------- FILM NOISE (grain FX) --------------------------- */ .film-noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .06; /* mobile basso */ mix-blend-mode: soft-light; /* SVG fractal noise inline */ background-image: url("data:image/svg+xml;utf8,"); } /* -------------------------- DESKTOP FX BOOST --------------------------- */ @media (min-width: 900px) and (hover: hover) and (pointer: fine) { .film-noise { opacity: .12; } .mouse-spotlight { display: block; } } /* -------------------------- MOUSE SPOTLIGHT (inizialmente off by default) --------------------------- */ .mouse-spotlight { display: none; } @media (min-width: 900px) and (hover: hover) and (pointer: fine){ .mouse-spotlight{ display:block; position: fixed; inset: 0; pointer-events: none; z-index: 1; /* sopra particles, sotto UI */ opacity: .95; background: radial-gradient( 520px circle at var(--mx, 50%) var(--my, 35%), rgba(34, 211, 238, 0.18), rgba(124, 58, 237, 0.10) 35%, transparent 62% ); mix-blend-mode: screen; } } /* ========================================= ARENA UI — SECTION PATTERN (HOW / INFO) ========================================= */ .ar-section-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .55; z-index: 0; } .ar-section-pattern::before { content: ""; position: absolute; inset: 0; background-image: url("/static/bg-cyberpattern.webp"); background-size: cover; background-position: center; filter: contrast(1.35) brightness(1.05); } /* ========================================================= SEO PARALLAX BACKGROUND (section-scoped) MOBILE FIRST — ARENA UI SAFE ========================================================= */ /* --------------------------------------------------------- BASE (MOBILE) --------------------------------------------------------- */ .seo-parallax-section { position: relative; overflow: hidden; min-height: 70vh; padding-top: 6rem; padding-bottom: 6rem; } /* CONTENITORE PARALLAX (il JS lavora QUI) */ .seo-parallax-bg { position: absolute; inset: 0; height: 100%; top: 0; /* variabile mossa dal JS */ --parallax-y: 0px; z-index: 1; } /* IMMAGINE (immune ai reset Arena UI) */ .seo-parallax-bg::before { content: ""; position: absolute; inset: 0; background-image: url("/static/media/home/adventure_arena_vr_background_sicily_catania_misterbianco_image_mithology.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; transform: translate3d(0, var(--parallax-y), 0); will-change: transform; z-index: 0; } /* OVERLAY LEGGIBILITΐ (SEMPRE SOPRA L’IMMAGINE) */ .seo-parallax-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(2, 6, 23, 0.70), rgba(2, 6, 23, 0.90) ); z-index: 1; } /* CONTENUTO TESTO SOPRA TUTTO */ .seo-parallax-section .aa-container { position: relative; z-index: 2; } /* --------------------------------------------------------- DESKTOP ENHANCEMENT --------------------------------------------------------- */ @media (min-width: 768px) { .seo-parallax-section { min-height: auto; padding-top: 12rem; padding-bottom: 12rem; } .seo-parallax-bg { height: 240%; top: -80%; } .seo-parallax-bg::before { background-position: center top; } } /* ========================================================= ARENA UI — BOOKING HERO BACKGROUND Mobile-first, no hover, no FX aggressivi ========================================================= */ .ar-booking-hero-bg { position: relative; overflow: hidden; /* immagine principale */ background-image: linear-gradient( to bottom, rgba(2,6,23,.65), rgba(2,6,23,.92) ), url("/static/bg-adventure-arena-vr-scritta-brand.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ========================================================= ARENA UI — BG CYBERPUNK (SECTION / CARD) Single-class, no extra HTML ========================================================= */ .bg-cyberpunk{ background-image: linear-gradient( to bottom, rgba(2,6,23,.75), rgba(2,6,23,.95) ), url("/static/bg-cyberpattern.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; backdrop-filter: none; } /* ========================================================= ARENA UI — NEON SYSTEM MODULE Estratto e ottimizzato leggermente dal file originale Nessuna modifica visiva, solo ordine e pulizia ========================================================= */ /* ------------------------------ CONTAINER DEL SISTEMA NEON ------------------------------ */ .neon-system { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; /* sopra BG, sotto contenuti */ } .neon-system--top { top: 0; bottom: auto; } /* TOP variant: the LINE must be anchored to TOP too */ .neon-system--top .neon-line{ top: 0; bottom: auto; } .neon-system--top .neon-glow-inner{ top: 0; bottom: auto; transform: translateY(50%); /* era -50% (buono per bottom), qui serve dentro */ } /* ------------------------------ LINEA NEON PRINCIPALE ------------------------------ */ .neon-line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient( 90deg, var(--zl-cyan), #d946ef, /* colore reale presente nel file */ var(--zl-cyan) ); z-index: 20; } /* ------------------------------ NEON GLOW — OUTER ------------------------------ */ .neon-glow-outer { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient( 90deg, var(--zl-cyan), #d946ef, var(--zl-cyan) ); filter: blur(20px); opacity: 0.75; z-index: 10; } /* ------------------------------ NEON GLOW — INNER ------------------------------ */ .neon-glow-inner { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient( 90deg, var(--zl-cyan), #d946ef, var(--zl-cyan) ); filter: blur(25px); opacity: 0.30; transform: translateY(-50%); z-index: 15; } .footer-shell .neon-system--top .neon-line{ top: 0; bottom: auto; height: 3px; /* o 4px se la vuoi piω “presente” */ opacity: 1; /* ribadiamo il background cosμ vince su eventuali override */ background: linear-gradient(90deg, var(--zl-cyan), #d946ef, var(--zl-cyan)); } /* ========================================================= ARENA UI — FORMS MODULE Estratto dal file originale, zero modifiche estetiche Mobile-first • Focus neon cyan ========================================================= */ /* --------------------------------------------------------- INPUT FIELD BASE --------------------------------------------------------- */ .input { width: 100%; padding: 0.7rem 1rem; font-size: 0.9rem; color: #e5e7eb; border-radius: 0.75rem; border: 1px solid rgba(148,163,184,0.7); background: rgba(15,23,42,0.96); outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } /* --------------------------------------------------------- PLACEHOLDER --------------------------------------------------------- */ .input::placeholder { color: rgba(148,163,184,0.9); } /* --------------------------------------------------------- FOCUS STATE (neon cyan, esattamente come nel file) --------------------------------------------------------- */ .input:focus { border-color: var(--zl-cyan); box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 0 18px rgba(56,189,248,0.55); background: var(--aa-dark); } /* ========================================================= ARENA UI — UTILITIES MODULE Estratto e ottimizzato leggermente dal file originale Nessuna modifica estetica ========================================================= */ /* --------------------------------------------------------- TEXT UTILITIES --------------------------------------------------------- */ /* Uppercase con letter-spacing stretto — usato nel footer e altrove */ .uppercase-tight { text-transform: uppercase; letter-spacing: 0.22em; } /* --------------------------------------------------------- ICON UTILITIES (Estratto da .contatti-icon — utile anche fuori dal footer) --------------------------------------------------------- */ .contatti-icon { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 19, 35, 0.96); border: 1px solid rgba(51, 65, 85, 0.9); box-shadow: 0 0 12px rgba(15, 23, 42, 0.9); } .contatti-icon svg { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(34,211,238,0.45)); } /* Accent text (cyan Arena) */ .ar-accent{ color: var(--zl-cyan); } .zl-cyan{ color: var(--zl-cyan); } /* ========================================================= ARENA UI — BUTTON SYSTEM (DEFINITIVO) Mobile-first, hover desktop-only Coerente con arena-ui.css originale ========================================================= */ /* ---------- BASE BUTTON ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.4rem; border-radius: 999px; /* come nel file originale */ font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #e2e8f0; background: rgba(255, 255, 255, 0.04); border: none; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--aa-time-fast) ease, color var(--aa-time-fast) ease, box-shadow var(--aa-time-fast) ease, transform var(--aa-time-fast) ease; } /* Stato disabilitato (mobile-first) */ .btn:disabled { opacity: .45; cursor: not-allowed; } /* Focus/Active mobile — niente glow */ .btn:focus, .btn:active { outline: none; box-shadow: none; } /* Hover desktop-only */ @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } } /* ========================================================= PRIMARY BUTTON (VERO!) -> btn-cta nel file originale ========================================================= */ .btn-primary, .btn-cta { background: linear-gradient(135deg, var(--aa-cta-from), var(--aa-cta-to)); color: var(--aa-dark); box-shadow: 0 0 18px rgba(249, 115, 22, 0.55); /* uguale al file */ } @media (hover: hover) and (pointer: fine) { .btn-primary:hover, .btn-cta:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.05); box-shadow: 0 0 24px rgba(250, 204, 21, 0.9); } } /* ========================================================= SECONDARY BUTTON (VERO!) -> gradient cyan/blue ========================================================= */ .btn-secondary { background: linear-gradient(135deg, var(--zl-cyan), var(--zl-blue)); color: var(--aa-dark); box-shadow: 0 0 14px rgba(56, 189, 248, 0.55); } @media (hover: hover) and (pointer: fine) { .btn-secondary:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.07); box-shadow: 0 0 22px rgba(56, 189, 248, 0.95); } } /* ========================================================= CARD CTA (SPECIFICHE DELLE GAME CARD) -> rosa/viola, NON primary ========================================================= */ .btn-card { width: 100%; padding: 10px 12px; background: linear-gradient(135deg, var(--aa-pink), var(--aa-violet)); color: var(--aa-dark); border-radius: var(--aa-radius-sm); border: 1px solid rgba(255,255,255,.12); font-size: 0.9rem; font-weight: 900; box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, var(--aa-shadow-neon); } @media (hover: hover) and (pointer: fine) { .btn-card:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 18px 42px rgba(236,72,153,.65), 0 0 48px rgba(139,92,246,.55); } } /* ========================================================= UTILITIES ========================================================= */ .btn-block { width: 100%; display: flex; } .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.8rem; } .btn .label{ display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .btn svg{ width: 13px; height: 13px; flex: 0 0 auto; } /* ========================================================= ARENA UI — CARD SYSTEM (Base) Mobile-first, atomic, senza regole duplicate ========================================================= */ /* ---------- BASE CARD ---------- */ .card { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: var(--aa-radius-lg); background: rgba(15,23,42,0.55); /* tuo slate semitrasparente */ border: 1px solid var(--aa-border-slate); box-shadow: var(--aa-shadow-card); overflow: hidden; isolation: isolate; /* evita mix di z-index */ transition: transform var(--aa-time-fast) ease, box-shadow var(--aa-time-fast) ease, border-color var(--aa-time-fast) ease; } /* Hover solo desktop */ @media (hover:hover) and (pointer:fine){ .card:hover { transform: translateY(-4px); box-shadow: var(--aa-shadow-card-hover); border-color: rgba(56,189,248,.22); /* cyan glow che hai giΰ */ } } /* ---------- CARD SECTIONS ---------- */ .card-header { padding: var(--aa-space-md); display: flex; flex-direction: column; gap: var(--aa-space-sm); } .card-body { padding: var(--aa-space-md); flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--aa-space-sm); } .card-footer { padding: var(--aa-space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--aa-space-sm); } /* ---------- TITLES & TEXT ---------- */ .card-title { margin: 0; font-size: 1.2rem; font-weight: 900; line-height: 1.1; color: #fff; } .card-subtitle { margin: 0; font-size: 0.9rem; opacity: .85; } /* ---------- CARD IMAGE SYSTEM ---------- */ .card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity var(--aa-time-normal) ease, transform var(--aa-time-normal) ease, filter var(--aa-time-normal) ease; z-index: 0; } .card-bg.bg-ready { opacity: 1; } @media (hover:hover) and (pointer:fine){ .card:hover .card-bg { transform: scale(1.05); filter: saturate(1.1) contrast(1.1); } } /* ---------- CARD OVERLAY (Hero-style, giΰ usato nelle game-card) ---------- */ .card-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, var(--aa-overlay-top) 0%, var(--aa-overlay-mid) 55%, var(--aa-overlay-deep) 100% ); z-index: 1; } /* ---------- CONTENT ON TOP ---------- */ .card-content { position: relative; z-index: 2; padding: var(--aa-space-md); display: flex; flex-direction: column; gap: var(--aa-space-sm); } /* ---------- CARD BADGES SUPPORT (base, senza colori) ---------- */ .card-badges { display: flex; flex-wrap: wrap; gap: var(--aa-space-xs); margin-top: auto; } .card-badge { padding: 4px 10px; font-size: 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); font-weight: 700; letter-spacing: .02em; } /* ========================================================= ARENA UI — TEXT REVEAL & SHINE (alias di ar-shine / ar-reveal giΰ presenti) ========================================================= */ /* Shine effect (copiato dal tuo .ar-shine) */ .shine { position: relative; background: linear-gradient( 90deg, #fff, #a5f3fc 35%, #c7d2fe 55%, #fff 75% ); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: arShineMove 3.8s ease-in-out infinite; } @keyframes arShineMove { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ========================================================= LEGACY REVEAL (per pagine non ancora migrate) ========================================================= */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible, .reveal.is-in { opacity: 1; transform: none; } /* Reveal effect (copiato da .ar-reveal) */ .ar-reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; } .ar-reveal.is-in { opacity: 1; transform: none; } .ar-reveal-delay-2 { transition-delay: .16s; } /* ========================================================= ARENA UI — BACKGROUND IMAGE SYSTEM (3A nel tuo CSS originale) Mobile-first, fade-in via .bg-ready ========================================================= */ .ar-bg-image { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity .6s ease; } .ar-bg-image.bg-ready { opacity: 1; } /* ========================================================= ARENA UI — HEADER SYSTEM Header Desktop + Header Mobile + Mobile Drawer Estratto e ottimizzato da arena-ui.css Nessun cambiamento estetico ========================================================= */ /* ========================================================= 1) HEADER BASE (mobile-first) ========================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: transparent; backdrop-filter: none; transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; } .header-inner { max-width: 1200px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .header-logo img { width: auto; object-fit: contain; } /* ========================================================= 2) HEADER SCROLL STATE (desktop & mobile) ========================================================= */ .site-header.is-scrolled { background: linear-gradient( 90deg, rgba(34, 211, 238, 0.08) 0%, rgba(217, 70, 239, 0.08) 50%, rgba(34, 211, 238, 0.08) 100% ), rgba(2, 6, 23, 0.80); backdrop-filter: blur(24px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.9); } /* ========================================================= 3) NAVBAR DESKTOP (mobile-first: OFF) ========================================================= */ .desktop-nav { display: none; gap: 18px; align-items: center; } .nav-link { font-size: 0.85rem; font-weight: 600; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; transition: color 0.2s ease; } .nav-link--highlight { color: #f9a8ff; } /* ========================================================= 4) NAVBAR DESKTOP — ON (lg) ========================================================= */ @media (min-width: 1024px) { .desktop-nav { display: flex; } } /* ========================================================= 5) HAMBURGER BUTTON (mobile) ========================================================= */ #hamburgerBtn { display: flex; align-items: center; justify-content: center; } /* Desktop: hamburger OFF */ @media (min-width: 1024px) { #hamburgerBtn { display: none; } } /* ========================================================= 6) MOBILE DRAWER — BACKDROP ========================================================= */ .mobile-drawer-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(5px); z-index: 9990; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .mobile-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } /* ========================================================= 7) MOBILE DRAWER PANEL ========================================================= */ .mobile-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: 78%; max-width: 300px; background: #0f172a; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 80px 24px 24px; border-left: 1px solid rgba(255, 255, 255, 0.1); z-index: 9999; display: flex; flex-direction: column; gap: 20px; } .mobile-drawer.is-open { transform: translateX(0); } /* ========================================================= 8) MOBILE DRAWER — LINKS ========================================================= */ .mobile-drawer nav a { padding: 14px 12px; font-weight: 600; font-size: 0.95rem; } /* ========================================================= 9) FAILSAFE RESPONSIVE BEHAVIOR (garantisce coerenza in casi estremi) ========================================================= */ @media (max-width: 1023px) { .desktop-nav { display: none !important; } #hamburgerBtn { display: flex !important; } } @media (min-width: 1024px) { .desktop-nav { display: flex !important; } #hamburgerBtn { display: none !important; } } /* ========================================================= ARENA UI — FOOTER COMPONENT Estratto da arena-ui.css e ottimizzato Mobile-first, nessuna modifica estetica ========================================================= */ /* --------------------------------------------------------- FOOTER WRAPPER --------------------------------------------------------- */ .footer-shell { position: relative; padding-top: 2.75rem; background: rgba(2, 4, 12, 0.95); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow: visible; } .footer-shell section:last-child { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .footer-inner { position: relative; z-index: 1; } /* Grid interno: mobile-first */ footer .grid > section { display: flex; flex-direction: column; justify-content: flex-start; } .footer-shell > .neon-system--top{ z-index: 30; } /* --------------------------------------------------------- SOCIAL ICONS --------------------------------------------------------- */ .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: #020617; background: linear-gradient(135deg, var(--zl-cyan), var(--zl-blue)); box-shadow: 0 0 14px rgba(34, 211, 238, 0.65); border: 1px solid rgba(56, 189, 248, 0.9); transition: box-shadow 0.15s ease, filter 0.15s ease, transform 0.15s ease; transform: none; /* mobile-first */ } .footer-social-link svg { width: 18px; height: 18px; } /* --------------------------------------------------------- MOBILE HOVER FIX Su mobile gli hover invisibili vanno disattivati --------------------------------------------------------- */ @media (max-width: 768px) { .footer-shell a:hover:not(.footer-social-link), .footer-shell a:active:not(.footer-social-link), .footer-shell a:focus-visible:not(.footer-social-link) { color: inherit; background: none; border-color: inherit; box-shadow: none; filter: none; transform: none; opacity: 1; text-decoration: none; } } /* ========================================================= ARENA UI — CARDS COMPONENT (AR Cards + Game Cards) Estratto e ottimizzato da arena-ui.css Mobile-first • Zero modifiche estetiche ========================================================= */ /* ========================================================= 1) AR CARD — VARIANTI ARENA ========================================================= */ /* ----- Base AR Card ----- */ .ar-card { position: relative; display: flex; flex-direction: column; padding: 1.6rem; border-radius: 1rem; background: rgba(5, 8, 22, 0.92); border: 1px solid rgba(34, 211, 238, 0.25); box-shadow: 0 0 14px rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ----- Soft Variant ----- */ .ar-card--soft { background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.45), transparent 60%), rgba(5, 8, 22, 0.92); } /* ----- Glow Variant ----- */ .ar-card--glow { border-color: rgba(34, 211, 238, 0.45); background: linear-gradient( 135deg, rgba(5, 8, 22, 0.96), rgba(2, 6, 23, 0.96) ); box-shadow: 0 0 18px rgba(15, 23, 42, 0.9), 0 0 22px rgba(34, 211, 238, 0.15); } /* ----- CTA Variant (arancione) ----- */ .ar-card--cta { border-color: rgba(249, 115, 22, 0.75); background: linear-gradient( 135deg, rgba(249, 115, 22, 0.18), rgba(250, 204, 21, 0.12) ); box-shadow: 0 0 22px rgba(249, 115, 22, 0.55); } /* ----- Typography AR ----- */ .ar-kicker { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--zl-cyan); margin-bottom: 0.75rem; } .ar-title { font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; } .ar-subtitle { font-size: 0.95rem; color: #94a3b8; line-height: 1.5; margin-bottom: 1rem; } .ar-body > *:not(:last-child) { margin-bottom: 0.75rem; } /* ========================================================= 2) GAME CARD — COMP PAGINA GIOCHI ========================================================= */ /* ----- Wrapper Game Card ----- */ /* --------------------------------------------------------- GAME CARD (versione finale e stabile) --------------------------------------------------------- */ .ar-game-card { position: relative; display: grid; overflow: hidden; isolation: isolate; border-radius: 18px; background: rgba(15, 23, 42, .55); border: 1px solid var(--aa-border-slate); box-shadow: var(--aa-shadow-card); aspect-ratio: 4 / 5; transform: translateY(0); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* ----- Background Lazy ----- */ .ar-game-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(1.02); filter: saturate(1.05) contrast(1.05); transition: opacity .45s ease, transform .5s ease, filter .5s ease; } .ar-game-bg.bg-ready { opacity: 1; } /* ----- Overlay ----- */ .ar-game-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(2,6,23,0.10) 0%, rgba(2,6,23,0.62) 55%, rgba(2,6,23,0.92) 100% ); } /* ----- Content ----- */ .ar-game-content { position: absolute; inset: 0; z-index: 2; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; } /* ----- Text ----- */ .ar-game-title { margin: 0; font-size: 1.28rem; text-shadow: 0 2px 12px rgba(0,0,0,0.55); font-weight: 900; letter-spacing: -0.01em; line-height: 1.1; color: #fff; } .ar-game-desc { margin: 0; max-width: 90%; color: rgba(240,240,245,.92); font-size: .93rem; line-height: 1.35; } .ar-game-meta-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; opacity: .95; } /* ----- Badges ----- */ .ar-game-badges { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; margin-top: auto; } /* ----- Game Badge — glass dark + cyan glow (no hover) ----- */ .ar-game-badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:0.72rem; font-weight:700; line-height:1; color:rgba(226,232,240,.95); background:rgba(5, 8, 22, 0.55); /* SCURO vetroso */ border:1px solid rgba(56,189,248,.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow: 0 0 0 1px rgba(56,189,248,.10) inset, 0 0 12px rgba(56,189,248,.22); white-space:nowrap; } .ar-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background:rgba(56,189,248,.28); /* CYAN evidente */ border:1px solid rgba(56,189,248,.38); box-shadow: 0 0 0 1px rgba(56,189,248,.22) inset, 0 0 22px rgba(56,189,248,.48); backdrop-filter: blur(6px); font-size: 0.80rem; font-weight: 700; color: rgba(226,232,240,0.95); } /* ----- Footer / CTA area ----- */ .ar-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; } /* CTA “Gioca” */ .ar-game-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 10px; width: 100%; font-size: 0.92rem; font-weight: 900; letter-spacing: .01em; border-radius: 14px; background: linear-gradient( 135deg, var(--aa-pink), var(--aa-violet) ); border: 1px solid rgba(255,255,255,.12); color: var(--aa-dark); box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, var(--aa-shadow-neon); transition: transform .2s ease, border-color .2s ease, background .2s ease; } /* ========================================================= 3) DESKTOP HOVER (solo desktop) ========================================================= */ @media (hover: hover) and (pointer: fine) { /* AR Card */ .ar-card:hover { transform: translateY(-2px); transition: transform 0.25s ease, box-shadow 0.25s ease; } .ar-card--glow:hover { box-shadow: 0 0 24px rgba(56, 189, 248, 0.35), 0 0 28px rgba(15, 23, 42, 1); } .ar-card--cta:hover { filter: brightness(1.05); box-shadow: 0 0 28px rgba(250, 204, 21, 0.85); } /* Game Card */ .ar-game-card:hover { transform: translateY(-6px); border-color: rgba(56,189,248,.22); box-shadow: var(--aa-shadow-card-hover); } .ar-game-card:hover .ar-game-bg { transform: scale(1.06); filter: saturate(1.15) contrast(1.12); } .ar-game-cta:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 18px 42px rgba(236,72,153,.65), 0 0 48px rgba(139,92,246,.55); } } /* ========================================================= ARENA UI — GAMES GRID COMPONENT Estratto da arena-ui.css e ottimizzato Mobile-first • Zero modifiche estetiche ========================================================= */ /* --------------------------------------------------------- 1) BASE GRID (mobile-first) --------------------------------------------------------- */ .ar-game-grid { max-width: 1100px; margin: 0 auto; padding: 0 16px 64px; display: grid; gap: 18px; grid-template-columns: 1fr; /* mobile */ } /* --------------------------------------------------------- 2) TABLET GRID (= 640px) --------------------------------------------------------- */ @media (min-width: 640px) { .ar-game-grid { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------- 3) DESKTOP GRID (= 1024px) --------------------------------------------------------- */ @media (min-width: 1024px) { .ar-game-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= HOME — GAMES SECTION WRAPPER (Arena UI v17) Serve solo a rimuovere Tailwind dal wrapper di #giochi ========================================================= */ .ar-games-section{ position: relative; overflow: hidden; /* equivalente del bg-slate-950/70 */ background: rgba(2,6,23,0.70); /* in home hai anche un override inline che mette z-index:25 su #giochi */ z-index: 25; /* niente bordo: in home c'θ giΰ un override che lo rimuove */ border-top: none; } /* equivalente di: mx-auto max-w-6xl px-4 pt-16 */ .ar-games-head{ padding-top: 64px; } /* equivalente di: mb-8 max-w-2xl */ .ar-games-intro{ max-width: 42rem; /* ~ max-w-2xl */ margin-bottom: 32px; /* ~ mb-8 */ } /* ========================================================= COMPONENT — GAME CAROUSEL (ex inline in game_carousel.html) Obiettivo: zero CSS inline/scope, tutto in Arena UI v17 ========================================================= */ .games-shell{ max-width: 1200px; margin: 0 auto; padding: 0 16px 72px; } .games-carousel{ position: relative; overflow: hidden; } .games-track{ display: flex; gap: 16px; will-change: transform; transition: transform .4s cubic-bezier(.33, .69, .24, 1); padding-block: 32px; } /* Base: mobile, 1 card per volta */ .game-card{ position: relative; overflow: hidden; border-radius: 1.6rem; border: 1px solid rgba(148,163,184,.22); background: radial-gradient(circle at 0 0, rgba(34,211,238,.16), transparent 55%), radial-gradient(circle at 100% 100%, rgba(79,70,229,.22), transparent 55%), rgba(2,6,23,.95); min-height: 340px; flex: 0 0 100%; /* ? fondamentale: i wrapper interni ora riempiono la min-height */ display: flex; align-items: stretch; box-shadow: none !important; opacity: 1; transition: opacity .35s ease, border-color .35s ease; } /* Tablet */ @media (min-width: 768px){ .game-card{ flex: 0 0 calc((100% - 16px) / 2); min-height: 380px; } } /* Desktop — 3 card, centrale piω grande, laterali piω piccole */ @media (min-width: 1200px){ .game-card{ flex: 0 0 calc((100% - 32px) / 3); min-height: 420px; opacity: 1; transform: scale(1); transform-origin: center center; } .game-card:not(.is-center){ opacity: 0.6; transform: scale(0.8); outline: none; } .game-card.is-center{ opacity: 1; transform: scale(1.05); outline: 3px solid rgba(34,211,238,0.8); outline-offset: 0; border-color: rgba(34,211,238,0.7); z-index: 2; } } .game-card::before{ content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 20% 0, rgba(56,189,248,.35), transparent 55%); opacity: .25; mix-blend-mode: screen; } /* Tilt wrapper: la card esterna resta scalabile (is-center), tilt vive qui */ .game-tilt{ position: relative; /* ? riempie la card (che ora θ flex) */ flex: 1 1 auto; min-height: inherit; border-radius: inherit; overflow: hidden; } /* FX wrapper: qui possiamo fare reveal senza toccare la scale della card */ .game-fx{ position: relative; width: 100%; height: 100%; } .game-card:hover .game-bg{ transform: scale(1.04); filter: brightness(1.12) saturate(1.18); } .game-card::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(120% 160% at 50% 120%, rgba(2,6,23,.9), transparent 60%); pointer-events: none; } .game-bg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: .96; transform: scale(1.1); filter: brightness(1.02) saturate(1.08); transition: transform .9s ease, opacity .9s ease, filter .9s ease; } .game-overlay{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.05) 0%, rgba(2,6,23,.55) 45%, rgba(2,6,23,.97) 100%); mix-blend-mode: multiply; } .game-content{ position: absolute; inset: 0; z-index: 2; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .game-meta-badges{ display: flex; flex-wrap: wrap; gap: .35rem; font-size: 10px; } .game-title{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: #e5e7eb; margin: 0; } .game-desc{ margin-top: .35rem; font-size: .82rem; color: #cbd5e1; } .game-footer{ display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; } .game-footer .game-meta-badges .ar-game-badge{ flex: 0 1 auto; min-width: 0; max-width: min(14rem, 56vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-footer .btn{ flex: 0 0 auto; } .game-footer .game-meta-badges .ar-game-badge{ flex: 0 1 auto; min-width: 0; max-width: min(14rem, 56vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* ? badge lunghi non spingono il bottone */ } .games-cta-wrap{ margin-top: 32px; display:flex; justify-content:center; } /* ========================================================= ARENA UI — HERO COMPONENT (Pagina Giochi) Estratto e ottimizzato dai blocchi hero + compat games Mobile-first • Zero modifiche estetiche ========================================================= */ /* --------------------------------------------------------- 1) HERO WRAPPER (mobile-first) --------------------------------------------------------- */ .ar-hero { position: relative; min-height: 100dvh; padding: 96px 16px 48px; display: flex; align-items: center; justify-content: center; overflow: hidden; /* Background radiale neon (preso dal tuo file) */ background: radial-gradient(900px 520px at 0% 0%, rgba(56,189,248,.18), transparent 60%), radial-gradient(820px 560px at 100% 100%, rgba(236,72,153,.14), transparent 62%), linear-gradient(180deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,.86) 60%, rgba(2,6,23,.96) 100%); } /* --------------------------------------------------------- 2) HERO INNER LAYOUT --------------------------------------------------------- */ .ar-hero-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; position: relative; z-index: 2; /* Sopra i neon e bg */ } /* --------------------------------------------------------- 3) HERO TEXT BLOCK --------------------------------------------------------- */ .ar-hero-text { text-align: center; } .ar-hero-text h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; line-height: 1.05; margin-bottom: 12px; text-shadow: 0 12px 44px rgba(0,0,0,.55); } .ar-hero-text p { max-width: 640px; opacity: .9; text-shadow: 0 10px 34px rgba(0,0,0,.45); } /* CTA area */ .ar-hero-cta { margin-top: 24px; } /* --------------------------------------------------------- 4) HERO SIDE INFO / META --------------------------------------------------------- */ /* Meta card */ .ar-hero-meta{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom: 1.1rem; /* spazio prima del CTA */ } @media (min-width: 1024px){ .ar-hero-meta{ margin-bottom: 1.25rem; } } .ar-hero-meta.ar-hero-meta--panel{ border-radius: 16px; background: rgba(15,23,42,.55); border: 1px solid rgba(148,163,184,.12); box-shadow: 0 18px 44px rgba(0,0,0,.45); backdrop-filter: blur(10px); } .ar-hero-meta span { padding: 6px 10px; border-radius: 999px; background: rgba(56,189,248,.10); border: 1px solid rgba(56,189,248,.18); font-size: .78rem; font-weight: 700; color: rgba(226,232,240,.95); } /* --------------------------------------------------------- 5) SHINE & REVEAL SUPPORT (usa ui-reveal, ma teniamo alias) --------------------------------------------------------- */ .shine { position: relative; background: linear-gradient( 90deg,#fff,#a5f3fc 35%,#c7d2fe 55%,#fff 75% ); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; animation: arShineMove 3.8s ease-in-out infinite; } @keyframes arShineMove { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } } .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } .reveal-delay-2 { transition-delay: .16s; } /* ========================================================= HERO CAROUSEL — BACKGROUND GENERICO ========================================================= */ .hero-carousel{ position:relative; min-height:100dvh; overflow:hidden; background:#020617; } /* BACKGROUND WRAPPER */ .hero-carousel-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } /* SINGOLA SLIDE */ .hero-carousel-slide{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity .7s ease-in-out; } /* SLIDE ATTIVA */ .hero-carousel-slide.is-active{ opacity:1; } /* OVERLAY LEGGIBILITΐ (opzionale) */ .hero-carousel-overlay{ position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.85) ), radial-gradient(circle at 40% 0%, rgba(34,211,238,.10), transparent 65% ); backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px); } /* CONTENUTO SOPRA */ .hero-carousel .ar-hero-inner{ position:relative; z-index:2; } /* HERO CAROUSEL — BACKGROUND SOURCES (NO INLINE) */ .hero-carousel-slide[data-hero-bg="zombie"]{ background-image:url("/static/media/home/adventure_arena_vr_games_category_zombie.webp"); } .hero-carousel-slide[data-hero-bg="horror"]{ background-image:url("/static/media/home/adventure_arena_vr_games_category_horror.webp"); } .hero-carousel-slide[data-hero-bg="scifi-arena"]{ background-image:url("/static/media/home/adventure_arena_vr_games_category_scifi_pvp.webp"); } .hero-carousel-slide[data-hero-bg="fantasy"]{ background-image:url("/static/media/home/adventure_arena_vr_games_category_fantasy.webp"); } .hero-carousel-slide[data-hero-bg="escape"]{ background-image:url("/static/media/home/adventure_arena_vr_games_category_escape.webp"); } .hero-carousel-slide[data-hero-bg="family"]{ background-image:url("/static/media/home/adventure_arena_vr_games_category_family.webp"); } /* ========================================================= ARENA UI — FAQ COMPONENT Estratto da arena-ui.css e ottimizzato Mobile-first • Zero cambiamenti estetici ========================================================= */ /* --------------------------------------------------------- FAQ ITEM (wrapper) --------------------------------------------------------- */ .faq-item { border-radius: 16px; background: transparent; border: 1px solid rgba(51, 65, 85, 0.9); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } /* --------------------------------------------------------- FAQ QUESTION BUTTON --------------------------------------------------------- */ .faq-q { width: 100%; text-align: left; padding: 14px 18px; font-size: 0.95rem; font-weight: 600; color: #e2e8f0; display: flex; justify-content: space-between; align-items: center; background: transparent; border: none; cursor: pointer; } /* Mobile-first: no sticky focus */ .faq-q:focus, .faq-q:active, .faq-q:focus-visible { background: transparent; outline: none; box-shadow: none; } /* --------------------------------------------------------- FAQ ANSWER PANEL --------------------------------------------------------- */ .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 18px; color: #94a3b8; font-size: 0.85rem; line-height: 1.5; } .faq-a p { padding-bottom: 14px; } /* --------------------------------------------------------- MOBILE SAFETY: NO HOVER STATES --------------------------------------------------------- */ @media (max-width: 768px) { /* Nessun hover sugli item per evitare glitch touch */ .faq-item:hover { background: transparent; border-color: rgba(51, 65, 85, 0.9); box-shadow: none; transform: none; } } /* --------------------------------------------------------- DESKTOP HOVER ENHANCEMENT (>=769px) --------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) and (min-width: 769px) { .faq-item:hover { border-color: rgba(56, 189, 248, 0.85); background: rgba(10, 20, 40, 0.96); box-shadow: 0 0 18px rgba(15, 23, 42, 0.95), 0 0 22px rgba(56, 189, 248, 0.35); transform: translateY(-1px); } } /* ========================================================= ARENA UI — COOKIE CONSENT COMPONENT Estratto e ottimizzato da arena-ui.css Mobile-first • Zero modifiche visive ========================================================= */ /* --------------------------------------------------------- 1) COOKIE BANNER WRAPPER --------------------------------------------------------- */ .cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050; padding: 8px 10px; padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); pointer-events: none; } /* --------------------------------------------------------- 2) COOKIE BANNER CARD --------------------------------------------------------- */ .cc-banner .cc-card { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(5,8,22,.88); border: 1px solid rgba(51,65,85,.8); box-shadow: 0 4px 14px rgba(15,23,42,.6); pointer-events: auto; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; } .cc-text { min-width: 0; overflow-wrap: anywhere; } /* Nasconde il titolo grande nella versione banner */ #cc-banner .cc-title { display: none; } /* --------------------------------------------------------- 3) COOKIE BANNER TEXT --------------------------------------------------------- */ .cc-desc { font-size: .78rem; line-height: 1.25; color: #cbd5e1; margin: 0; } .cc-link { color: var(--zl-cyan); text-decoration: underline; text-underline-offset: 2px; } .cc-dot { color: #64748b; padding: 0 6px; } /* --------------------------------------------------------- 4) ACTIONS (Buttons mini) --------------------------------------------------------- */ .cc-actions { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; } .cc-actions .btn { padding: .4rem .75rem; min-height: 44px; min-width: 0; max-width: 100%; font-size: .7rem; line-height: 1.4; letter-spacing: .04em; white-space: normal; overflow-wrap: anywhere; text-align: center; box-shadow: none; } /* --------------------------------------------------------- 5) COOKIE BANNER — MOBILE LAYOUT --------------------------------------------------------- */ @media (max-width: 640px) { .cc-banner .cc-card { flex-direction: column; align-items: stretch; gap: 8px; } .cc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; } .cc-actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* --------------------------------------------------------- 6) COOKIE MODAL (overlay) --------------------------------------------------------- */ .cc-modal { position: fixed; inset: 0; z-index: 10060; background: rgba(2,6,23,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); padding-bottom: calc(12px + env(safe-area-inset-bottom)); } /* FIX HARD: hidden deve SEMPRE precedere */ #cc-modal[hidden], #cc-banner[hidden] { display: none !important; opacity: 0 !important; pointer-events: none !important; } /* --------------------------------------------------------- 7) COOKIE MODAL CARD --------------------------------------------------------- */ .cc-modal-card { box-sizing: border-box; width: min(720px, 100%); min-width: 0; margin-bottom: 0; max-height: calc(100vh - 24px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; } /* Each label is one touch target; descriptions stay beside its checkbox. */ .cc-toggles { display: grid; gap: 10px; margin-block: 16px; } .cc-toggles + .cc-toggles { margin-top: -6px; } .cc-toggle { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 44px; padding: 10px 0; text-align: left; cursor: pointer; } .cc-toggle input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--aa-mint, #67e8f9); } .cc-toggle > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; } .cc-toggle small { display: inline-block; margin-top: 3px; font-size: .8rem; line-height: 1.6; } /* Native Astro dialogs share the rows with the legacy consent panel. */ .astro-preview .aa-consent-dialog.arena-cookie-notice { position: fixed; inset: 0; margin: auto; box-sizing: border-box; width: min(560px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; } /* Keep the native modal anchored while its own content scrolls on short screens. */ html:has(.aa-consent-dialog[open]) { overflow: hidden; } .astro-preview .aa-consent-dialog .arena-cookie-notice__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 18px 14px; } .astro-preview .aa-consent-dialog .arena-cookie-notice__actions .btn { min-width: 0; min-height: 44px; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; text-align: center; } @media (max-width: 640px) { .astro-preview .aa-consent-dialog.arena-cookie-notice, .cc-modal .cc-modal-card { padding: 20px; } .astro-preview .aa-consent-dialog .ar-title, .cc-modal .ar-title { font-size: 22px; line-height: 1.25; } } /* --------------------------------------------------------- 8) COOKIE MODAL — DESKTOP CENTERING --------------------------------------------------------- */ @media (min-width: 768px) { .cc-modal { align-items: center; padding-bottom: 12px; } .cc-modal-card { margin-bottom: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } } /* --------------------------------------------------------- 9) COOKIE MODAL — MOBILE FOCUS FIX --------------------------------------------------------- */ .cc-banner .btn:focus-visible, .cc-modal .btn:focus-visible, .cc-toggle input:focus-visible, .astro-preview .aa-consent-dialog .btn:focus-visible { outline: 2px solid var(--aa-mint, #67e8f9); outline-offset: 3px; } /* ========================================================= ARENA UI — LANGUAGE FLAG COMPONENT Estratto dal file originale e ottimizzato Mobile-first • Zero modifiche estetiche ========================================================= */ /* --------------------------------------------------------- FLAG WRAPPER --------------------------------------------------------- */ .lang-flag { width: 18px; height: 18px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient( circle at 30% 0%, rgba(148,163,184,0.6), transparent 60% ), #020617; box-shadow: 0 0 10px rgba(15,23,42,0.9); } /* --------------------------------------------------------- FLAG IMAGE --------------------------------------------------------- */ .lang-flag img { width: 100%; height: 100%; display: block; object-fit: cover; } .lang-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(5, 8, 22, 0.55); border: 1px solid rgba(56,189,248,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(56,189,248,.10) inset, 0 0 12px rgba(56,189,248,.22); } .lang-pill__opt{ display: inline-flex; align-items: center; justify-content: center; /* ?? pill “circolare” attorno alla bandiera */ width: 38px; height: 32px; border-radius: 999px; border: 1px solid transparent; background: transparent; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease; } .lang-pill__opt.is-active{ background: rgba(56,189,248,.22); border-color: rgba(56,189,248,.38); box-shadow: 0 0 0 1px rgba(56,189,248,.18) inset, 0 0 18px rgba(56,189,248,.32); } @media (hover:hover) and (pointer:fine){ .lang-pill__opt:hover{ background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.20); } } .lang-pill__opt:focus-visible{ outline: 2px solid rgba(56,189,248,.55); outline-offset: 2px; } /* drawer full-width (optional) */ .lang-pill--block{ width: 100%; justify-content: space-between; } /* ========================================================= ARENA UI — CONTATTI COMPONENT Estratto dal file originale (ID #contatti) Mobile-first • Nessuna modifica visiva ========================================================= */ /* --------------------------------------------------------- ICON WRAPPER (specifico del layout contatti) --------------------------------------------------------- */ #contatti span.w-10.h-10 { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(10, 19, 35, 0.95); border: 1px solid rgba(51, 65, 85, 0.9); box-shadow: 0 0 12px rgba(15, 23, 42, 0.9); border-radius: 999px; } /* --------------------------------------------------------- ICONA SVG (neon cyan) --------------------------------------------------------- */ #contatti span.w-10.h-10 svg { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)); } /* ========================================================= ARENA UI v17 — comp-pricing.css (Savepoint 20) Mobile-first. Required section variants (add ONE on the
): -
-
Features: - Mobile cards full width - No tilt / no movement - No shadows / no blur - Crisp background image (card + booking panel + home desktop section) - Readability: subtle text-shadow + micro "ink plate" behind text only - HOME: * Mobile: 2 cards with internal bg, no section bg * Desktop: section bg, text-only blocks (no cards) - BOOKING: * Mobile: 2 cards with internal bg (a bit wider) * Desktop: single bordered panel with bg, 2 text columns ========================================================= */ /* --------------------------- BASE SECTION (neutral) ---------------------------- */ .pricing-section{ position: relative; /* Mobile-first padding (keeps cards wide) */ padding: 26px 16px; background: none !important; box-shadow: none !important; /* Background asset */ --aa-pricing-bg-image: url("/static/media/home/adventure_arenavr_background_characters_all_catania_misterbianco.webp"); --aa-pricing-gold: #facc15; border-radius: 0 !important; overflow: visible; /* kill any inherited blur */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } .pricing-section::before, .pricing-section::after{ border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* BOOKING mobile: a bit wider (less side padding) */ @media (max-width: 767px){ .pricing-section--booking{ padding-left: 10px; padding-right: 10px; } } /* --------------------------- GRID Mobile: no side padding; items stretch full width ---------------------------- */ .pricing-grid{ display: grid; gap: 16px; padding: 0; justify-items: stretch; } /* --------------------------- CARD (mobile-first) ---------------------------- */ .pricing-gold{ position: relative; width: 100%; justify-self: stretch; margin: 0; padding: 32px; border-radius: 28px; /* dark base but transparent so bg shows */ background: rgba(2, 6, 23, 0.46); /* gold border only */ border: 1.2px solid var(--aa-pricing-gold); /* no shadows */ box-shadow: none !important; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: space-between; gap: 10px; overflow: hidden; /* no movement */ transform: none !important; transition: border-color .18s ease; /* no blur */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* crisp internal background image */ .pricing-gold::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: var(--aa-pricing-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.72; filter: none !important; transform: none !important; } /* light readability veil (NO blur) */ .pricing-gold::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 520px at 50% 18%, rgba(56,189,248,0.06), transparent 70%), linear-gradient(to bottom, rgba(2,6,23,0.10), rgba(2,6,23,0.44)); filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .pricing-gold > *{ position: relative; z-index: 1; } /* Hover desktop: border only (no translate, no glow) */ @media (hover:hover) and (pointer:fine){ .pricing-gold:hover{ border-color: rgba(250,204,21,0.95); transform: none !important; box-shadow: none !important; } } /* Kill any global tilt from generic .card/.ar-card hovers */ @media (hover:hover) and (pointer:fine){ .pricing-section .ar-card:hover, .pricing-section .card:hover, .pricing-section .pricing-gold:hover{ transform: none !important; } } /* Ensure nothing inside adds dark slabs */ .pricing-section .pricing-content, .pricing-section .pricing-content *{ background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } /* --------------------------- TYPO + READABILITY Subtle "ink plate" only behind text content ---------------------------- */ .pricing-content{ width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(to bottom, rgba(2,6,23,0.18), rgba(2,6,23,0.06)); } .pricing-gold .ar-title, .pricing-gold .ar-subtitle, .pricing-gold .price{ text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.35); } .pricing-gold .ar-title{ color:#fff; } .pricing-gold .ar-subtitle{ color: rgba(226,232,240,.88); } .pricing-gold .price{ margin-top: 16px; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.01em; color: var(--aa-pricing-gold); } .pricing-cta-wrap{ margin-top: 48px; display: flex; justify-content: center; } .pricing-cta-wrap .btn-cta{ padding-left: 2.2rem; padding-right: 2.2rem; } /* ========================================================= DESKTOP AND UP ========================================================= */ @media (min-width: 768px){ .pricing-section{ padding: 40px 32px; } .pricing-grid{ grid-template-columns: repeat(2, minmax(0, 540px)); justify-content: center; gap: 48px; padding: 0 8px; } .pricing-gold{ max-width: 600px; margin: 0 auto; } } /* ========================================================= HOME VARIANT (desktop) More height (requested): increase top/bottom padding Section has background, cards removed (text-only) ========================================================= */ @media (min-width: 768px){ .pricing-section.pricing-section--home{ /* ? even taller */ padding: 180px 32px ; background-image: radial-gradient(1200px 700px at 18% 10%, rgba(56,189,248,0.14), transparent 62%), radial-gradient(1000px 640px at 82% 18%, rgba(139,92,246,0.12), transparent 60%), linear-gradient(to bottom, rgba(2,6,23,0.12), rgba(2,6,23,0.46)), var(--aa-pricing-bg-image) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* remove cards on desktop home: text only */ .pricing-section--home .pricing-gold{ padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; overflow: visible; max-width: none; } .pricing-section--home .pricing-gold::before, .pricing-section--home .pricing-gold::after{ display: none; } /* remove ink plate when there's no card */ .pricing-section--home .pricing-content{ padding: 0; border-radius: 0; background: transparent; } .pricing-section--home .pricing-grid{ gap: 56px; padding: 0 8px; } } /* ========================================================= BOOKING VARIANT (desktop) Single bordered panel with bg, 2 columns text ========================================================= */ @media (min-width: 768px){ .pricing-section--booking .pricing-grid{ position: relative; padding: 34px; border-radius: 24px; border: 1.2px solid var(--aa-pricing-gold); background: rgba(2, 6, 23, 0.20); box-shadow: none !important; overflow: hidden; gap: 0; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* background image inside booking panel */ .pricing-section--booking .pricing-grid::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: var(--aa-pricing-bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.72; filter: none !important; } /* very light veil */ .pricing-section--booking .pricing-grid::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 520px at 50% 18%, rgba(56,189,248,0.05), transparent 70%), linear-gradient(to bottom, rgba(2,6,23,0.06), rgba(2,6,23,0.34)); filter: none !important; } .pricing-section--booking .pricing-grid > *{ position: relative; z-index: 1; } /* inner blocks become text-only */ .pricing-section--booking .pricing-gold{ padding: 10px 26px; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; overflow: visible; max-width: none; } .pricing-section--booking .pricing-gold::before, .pricing-section--booking .pricing-gold::after{ display: none; } /* keep ink plate on booking desktop */ .pricing-section--booking .pricing-content{ padding: 10px 12px; border-radius: 18px; background: linear-gradient(to bottom, rgba(2,6,23,0.18), rgba(2,6,23,0.06)); } .pricing-section--booking .pricing-gold + .pricing-gold{ border-left: 1px solid rgba(250,204,21,0.26); } } /* ========================================================= BOOKING MODAL β€” ARENA UI (FINAL) Mobile-first Β· Premium Β· Zero glitch ========================================================= */ /* =================== ROOT =================== */ .booking-modal{ position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; } .booking-modal.hidden{ display: none; } /* =================== OVERLAY =================== */ .booking-modal-overlay{ position: absolute; inset: 0; background: rgba(2,6,23,.88); backdrop-filter: blur(6px); pointer-events: auto; } /* =================== BOX =================== */ .booking-modal-box{ position: relative; z-index: 2; width: min(92vw, 420px); max-height: 90dvh; overflow-y: auto; background: linear-gradient(180deg,#020617,#0b1020); border-radius: 1.25rem; border: 1px solid rgba(56,189,248,.45); padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 30px 90px rgba(0,0,0,.85), 0 0 40px rgba(56,189,248,.45); } /* =================== CLOSE =================== */ .booking-modal-close{ position: absolute; top: .55rem; right: .55rem; width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #e5e7eb; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; } .booking-modal-close:hover{ background: rgba(255,255,255,.12); transform: scale(1.05); } /* =================== ICON =================== */ .booking-modal-icon{ width: 56px; height: 56px; margin: 0 auto .6rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 26px; font-weight: 900; color: #22c55e; background: rgba(34,197,94,.18); box-shadow: 0 0 28px rgba(34,197,94,.6); } /* ===== ERROR MODE β€” SOLUTION B ===== */ .booking-modal-icon.error{ color: transparent; background: radial-gradient(circle at center, rgba(239,68,68,.35), rgba(239,68,68,.15) ); box-shadow: 0 0 32px rgba(239,68,68,.85); } .booking-modal-icon.error::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fecaca; box-shadow: 0 0 14px rgba(239,68,68,1); } /* =================== TEXT =================== */ .booking-modal-title{ text-align: center; font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; } .booking-modal-sub{ text-align: center; font-size: .85rem; color: #9ca3af; margin-top: .15rem; } .booking-modal-divider{ height: 1px; margin: 1rem 0; background: linear-gradient( 90deg, transparent, rgba(56,189,248,.6), transparent ); } .booking-modal-message{ font-size: .95rem; color: #e5e7eb; line-height: 1.5; } /* =================== DETAILS =================== */ .booking-modal-details{ display: flex; flex-direction: column; gap: .45rem; margin-top: .2rem; } .booking-modal-row{ display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; } .booking-modal-label{ color: #9ca3af; } .booking-modal-value{ font-weight: 700; color: #e5e7eb; text-align: right; } .booking-modal-total{ margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed rgba(148,163,184,.35); text-align: center; font-size: 1.1rem; font-weight: 900; color: #22c55e; } /* =================== CTA =================== */ .booking-modal-cta{ margin-top: 1.3rem; width: 100%; border-radius: 999px; padding: .95rem 1.2rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(135deg,#22c1c3,#0ea5e9); color: #020617; border: 1px solid rgba(56,189,248,.9); box-shadow: 0 0 22px rgba(56,189,248,.6), 0 0 40px rgba(45,212,191,.4); cursor: pointer; } /* =================== MOBILE TWEAK =================== */ @media (max-width: 420px){ .booking-modal-box{ padding: 1.2rem 1.1rem 1.3rem; } } /* ========================================================= ARENA UI v17 β€” comp-gallery.css (v7) Mobile-first. v7: Riscrittura completa navigazione. - Rimosso tutto il sistema thumbnail/strip - Navigazione: frecce prev/next + counter - Blur sfondo statico (zero ricalcoli) - GPU layer su hero img e bg - Shimmer rimosso (non piΓΉ usato) ========================================================= */ body.is-gallery{ padding-top: 0 !important; } body.is-gallery .film-noise{ display:none !important; } /* ── HERO ─────────────────────────────────────────────── */ .gal-hero{ position: relative; height: 100dvh; min-height: 100dvh; width: 100%; overflow: hidden; background: #020617; color: rgba(226,232,240,.95); } .gal-media{ position:absolute; inset:0; z-index:0; } /* Blur STATICO β€” impostato una sola volta via JS */ .gal-img-bg{ position:absolute; inset:0; width:100%; height:100%; background-size: cover; background-position: center; display:block; transform: translateZ(0) scale(1.1); filter: blur(22px) saturate(1.1) brightness(0.75); opacity: 0.6; backface-visibility: hidden; } /* Hero image β€” nitida, interamente visibile, centrata */ .gal-img{ position:absolute; inset:0; width:100%; height:100%; object-fit: contain; object-position: center; display:block; transform: translateZ(0); will-change: opacity; backface-visibility: hidden; } .gal-overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(to bottom, rgba(2,6,23,.15), rgba(2,6,23,.55)), radial-gradient(circle at 28% 12%, rgba(34,211,238,.10), transparent 52%), radial-gradient(circle at 78% 92%, rgba(236,72,153,.08), transparent 60%); } /* ── CONTENT ──────────────────────────────────────────── */ .gal-content{ position:relative; z-index:2; max-width: 980px; margin:0 auto; padding: calc(72px + env(safe-area-inset-top)) 16px 0; text-align:center; } .gal-kicker{ font-size:.72rem; font-weight:900; letter-spacing:.26em; text-transform:uppercase; color: rgba(165,243,252,.95); } .gal-title{ margin-top:10px; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight:900; letter-spacing:-.03em; } .gal-caption{ margin-top:14px; display:inline-block; max-width: min(720px, 100%); padding: 10px 14px; border-radius: 999px; background: rgba(2,6,23,.26); border: 1px solid rgba(148,163,184,.16); font-size:.92rem; font-weight:800; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── NAVIGAZIONE: frecce + counter ───────────────────── */ .gal-nav{ position:absolute; left:0; right:0; bottom:0; z-index:10; transform: translateZ(0); backface-visibility: hidden; display:flex; align-items:center; justify-content:center; gap:1.5rem; padding: 1.4rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(2,6,23,.65), transparent 85%); } .gal-nav-btn{ width:52px; height:52px; border-radius:999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #e2e8f0; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .gal-nav-btn svg{ width:22px; height:22px; } .gal-nav-btn:disabled{ opacity:.28; cursor:default; } @media (hover:hover) and (pointer:fine){ .gal-nav-btn:hover:not(:disabled){ background: rgba(34,211,238,.18); border-color: rgba(34,211,238,.5); transform: scale(1.08); } } .gal-nav-counter{ font-size:1rem; font-weight:700; color: rgba(226,232,240,.85); letter-spacing:.08em; min-width:72px; text-align:center; text-shadow: 0 1px 4px rgba(0,0,0,.6); } /* ── HERO IMAGE TRANSITION ────────────────────────────── */ #galHeroImg{ transition: opacity 0.2s ease; } @media (prefers-reduced-motion: reduce){ #galHeroImg{ transition: none; } } /* ── DESKTOP ──────────────────────────────────────────── */ @media (min-width: 900px){ .gal-content{ padding-top: calc(88px + env(safe-area-inset-top)); } .gal-nav-btn{ width:58px; height:58px; } .gal-nav-btn svg{ width:24px; height:24px; } .gal-nav-counter{ font-size:1.05rem; min-width:80px; } } /* ========================================================= ARENA UI β€” comp-google-reviews.css Sezione recensioni Google in homepage. Mobile-first, segue le stesse convenzioni di comp-cards.css e comp-pricing.css (token --aa-*, .ar-card look & feel). ========================================================= */ .ar-reviews-section { position: relative; padding: 0 16px 48px; } .ar-reviews-head { padding-top: 64px; margin-bottom: 32px; } .ar-reviews-intro { max-width: 42rem; } /* --------------------------- GRID ---------------------------- */ .ar-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 56px; } /* --------------------------- CARD (stesso linguaggio visivo di .ar-card) ---------------------------- */ .ar-review-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 1.5rem; border-radius: var(--aa-radius-lg); background: rgba(5, 8, 22, 0.92); border: 1px solid var(--aa-border-slate); box-shadow: var(--aa-shadow-card); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transform: translateY(0); transition: transform var(--aa-time-fast) ease, border-color var(--aa-time-fast) ease; } .ar-review-stars { display: flex; gap: 2px; font-size: 1.05rem; line-height: 1; } .ar-review-star { color: rgba(148, 163, 184, 0.35); } .ar-review-star.is-filled { color: var(--aa-pricing-gold, #facc15); } .ar-review-text { margin: 0; color: rgba(226, 232, 240, 0.92); font-size: 0.95rem; line-height: 1.55; /* non far esplodere la card con recensioni lunghissime */ display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .ar-review-footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--aa-border-slate); } .ar-review-avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; flex-shrink: 0; } .ar-review-avatar--placeholder { background: linear-gradient(135deg, var(--aa-pink), var(--aa-violet)); } .ar-review-meta { display: flex; flex-direction: column; min-width: 0; } .ar-review-author { font-size: 0.85rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-review-date { font-size: 0.75rem; color: #94a3b8; } /* --------------------------- DESKTOP ---------------------------- */ @media (min-width: 768px) { .ar-reviews-section { padding: 0 32px 64px; } .ar-reviews-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } } @media (hover: hover) and (pointer: fine) { .ar-review-card:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.28); } } /* ========================================================= ARENA UI — DESKTOP ENHANCEMENTS MODULE Hover-only effects • Fine pointer devices Estratto e ordinato dal file originale ========================================================= */ @media (hover: hover) and (pointer: fine) { /* --------------------------------------------- NAV LINK HOVER --------------------------------------------- */ .nav-link:hover { color: var(--zl-cyan); } /* --------------------------------------------- BUTTONS — CTA HOVER --------------------------------------------- */ .btn-cta:hover, .btn-primary:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.05); box-shadow: 0 0 24px rgba(250, 204, 21, 0.9); } /* --------------------------------------------- BUTTONS — SECONDARY HOVER --------------------------------------------- */ .btn-secondary:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.07); box-shadow: 0 0 22px rgba(56, 189, 248, 0.95); } /* --------------------------------------------- FOOTER — SOCIAL ICON HOVER --------------------------------------------- */ .footer-social-link:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 22px rgba(56, 189, 248, 1); filter: brightness(1.08); } /* --------------------------------------------- FAQ ITEM HOVER (solo desktop) --------------------------------------------- */ @media (min-width: 769px) { .faq-item:hover { border-color: rgba(56, 189, 248, 0.85); background: rgba(10, 20, 40, 0.96); box-shadow: 0 0 18px rgba(15, 23, 42, 0.95), 0 0 22px rgba(56, 189, 248, 0.35); transform: translateY(-1px); } } /* --------------------------------------------- DESKTOP FX BOOST (Noise & Spotlight) --------------------------------------------- */ @media (min-width: 900px) { .film-noise { opacity: .12; } .mouse-spotlight { display: block; } } } /* ========================================================= FRANCHISING PAGE Mobile-first, pulito, coerente con Arena UI ========================================================= */ .fr-hero{ min-height: 100svh; background: linear-gradient(180deg, rgba(5,10,18,.52), rgba(5,10,18,.88)), radial-gradient(circle at 18% 20%, rgba(34,211,238,.08), transparent 30%), radial-gradient(circle at 82% 18%, rgba(168,85,247,.08), transparent 28%), url('/static/img/franchising-hero.jpg') center/cover no-repeat; } .fr-hero-inner{ min-height: 100svh; padding-top: calc(66px + 24px); padding-bottom: 56px; display: flex; align-items: center; } .fr-hero-copy{ max-width: 860px; margin: 0 auto; text-align: center; } .fr-hero-title{ font-size: clamp(2.4rem, 11vw, 4.2rem); line-height: .92; } .fr-hero-title span{ display: block; color: #67e8f9; } .fr-section{ padding: 64px 0; } .fr-section-alt{ padding: 64px 0; background: radial-gradient(circle at top left, rgba(34,211,238,.05), transparent 28%), linear-gradient(180deg, rgba(7,12,22,.90), rgba(8,15,28,.98)); } .fr-section-head{ max-width: 820px; } .fr-overlay-box{ border: 1px solid rgba(255,255,255,.10); background: rgba(7,12,22,.56); backdrop-filter: blur(12px); } .fr-two-col{ display: grid; gap: 32px; } .fr-two-col--hero{ display: grid; gap: 32px; } .fr-stack{ display: grid; gap: 16px; } .fr-step{ display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .fr-step-num{ width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; color: #fff; border: 1px solid rgba(34,211,238,.24); background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(14,165,233,.12)); box-shadow: 0 0 18px rgba(34,211,238,.10); } .fr-form-wrap textarea{ min-height: 150px; resize: vertical; } .fr-select{ appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%), linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%); background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .fr-select option{ background: #0b1220; color: #fff; } @media (min-width: 768px){ .fr-section, .fr-section-alt{ padding: 72px 0; } .fr-step{ flex-direction: row; } .fr-step-num{ width: 60px; height: 60px; } } @media (min-width: 1024px){ .fr-hero{ min-height: 100dvh; } .fr-hero-inner{ min-height: 100dvh; padding-top: calc(74px + 32px); padding-bottom: 72px; } .fr-hero-title{ font-size: clamp(3rem, 7vw, 6.4rem); } .fr-two-col{ grid-template-columns: 1fr 1fr; align-items: start; } .fr-two-col--hero{ grid-template-columns: 1.15fr .85fr; align-items: center; } .fr-section, .fr-section-alt{ padding: 80px 0; } }