/* 0.18.38 — keep the approved 0.18.37 glass wheel. Only reduce boom distance slightly and make the faint rings visibly travel outward from the VOZAYA hub while the wheel is open. */ /* Slightly tighter boom spacing — about 14% less travel than 0.18.37. */ .early-access-hero .piece-eat{--dx:0%!important;--dy:-22.4%!important} .early-access-hero .piece-nightlife{--dx:16.35%!important;--dy:-16.35%!important} .early-access-hero .piece-events{--dx:22.4%!important;--dy:0%!important} .early-access-hero .piece-wellness{--dx:16.35%!important;--dy:16.35%!important} .early-access-hero .piece-style{--dx:0%!important;--dy:23.2%!important} .early-access-hero .piece-property{--dx:-16.35%!important;--dy:16.35%!important} .early-access-hero .piece-travel{--dx:-22.4%!important;--dy:0%!important} .early-access-hero .piece-experiences{--dx:-16.35%!important;--dy:-16.35%!important} /* Outward pulse waves: start just outside the hub rim, then physically expand behind the segments. */ .early-access-hero .vozaya-hub-pulse{ width:48%!important; aspect-ratio:1!important; border:1px solid rgba(210,228,246,.20)!important; box-shadow: 0 0 10px rgba(198,220,244,.05), 0 0 22px rgba(153,188,226,.025)!important; opacity:0!important; z-index:3!important; will-change:transform,opacity!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay.hub-pulses-open .vozaya-hub-pulse{ animation:vozayaOutwardWave1838 6.6s linear infinite!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay.hub-pulses-open .pulse-a{ animation-delay:0s!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay.hub-pulses-open .pulse-b{ animation-delay:2.2s!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay.hub-pulses-open .pulse-c{ animation-delay:4.4s!important; } @keyframes vozayaOutwardWave1838{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.98); border-color:rgba(226,239,252,.22); } 8%{ opacity:.13; } 28%{ opacity:.10; border-color:rgba(207,228,248,.16); } 58%{ opacity:.055; border-color:rgba(185,213,241,.10); } 82%{ opacity:.018; border-color:rgba(165,199,233,.045); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(3.05); border-color:rgba(150,190,228,0); } } @media(max-width:760px){ .early-access-hero .piece-eat{--dy:-20.8%!important} .early-access-hero .piece-nightlife{--dx:15.1%!important;--dy:-15.1%!important} .early-access-hero .piece-events{--dx:20.8%!important} .early-access-hero .piece-wellness{--dx:15.1%!important;--dy:15.1%!important} .early-access-hero .piece-style{--dy:21.4%!important} .early-access-hero .piece-property{--dx:-15.1%!important;--dy:15.1%!important} .early-access-hero .piece-travel{--dx:-20.8%!important} .early-access-hero .piece-experiences{--dx:-15.1%!important;--dy:-15.1%!important} } /* 0.18.39 — slightly smaller overall wheel and tighter boom spacing so the expanded pieces do not cover the stage label or bottom copy. */ /* Overall wheel: reduce from 0.18.38 while keeping proportions. */ .early-access-hero .join-wheel-assembly{ width:clamp(350px,30vw,445px)!important; } .early-access-hero .join-impact-halo, .early-access-hero .join-impact-ring{ width:clamp(350px,30vw,445px)!important; } /* Reduced expansion travel. */ .early-access-hero .piece-eat{--dx:0%!important;--dy:-17.8%!important} .early-access-hero .piece-nightlife{--dx:12.8%!important;--dy:-12.8%!important} .early-access-hero .piece-events{--dx:17.8%!important;--dy:0%!important} .early-access-hero .piece-wellness{--dx:12.8%!important;--dy:12.8%!important} .early-access-hero .piece-style{--dx:0%!important;--dy:18.4%!important} .early-access-hero .piece-property{--dx:-12.8%!important;--dy:12.8%!important} .early-access-hero .piece-travel{--dx:-17.8%!important;--dy:0%!important} .early-access-hero .piece-experiences{--dx:-12.8%!important;--dy:-12.8%!important} /* Give the top/bottom copy a little extra breathing room. */ .early-wheel-panel{padding-top:.45rem!important;padding-bottom:.55rem!important} .wheel-stage-label{margin-bottom:.65rem!important} .wheel-sequence-copy{margin-top:.15rem!important;position:relative!important;z-index:60!important} @media(max-width:760px){ .early-access-hero .join-wheel-assembly{width:min(64vw,315px)!important} .early-access-hero .join-impact-halo, .early-access-hero .join-impact-ring{width:min(64vw,315px)!important} .early-access-hero .piece-eat{--dy:-15.8%!important} .early-access-hero .piece-nightlife{--dx:11.4%!important;--dy:-11.4%!important} .early-access-hero .piece-events{--dx:15.8%!important} .early-access-hero .piece-wellness{--dx:11.4%!important;--dy:11.4%!important} .early-access-hero .piece-style{--dy:16.4%!important} .early-access-hero .piece-property{--dx:-11.4%!important;--dy:11.4%!important} .early-access-hero .piece-travel{--dx:-15.8%!important} .early-access-hero .piece-experiences{--dx:-11.4%!important;--dy:-11.4%!important} } @media(max-width:430px){ .early-access-hero .join-wheel-assembly{width:min(68vw,285px)!important} .early-access-hero .join-impact-halo, .early-access-hero .join-impact-ring{width:min(68vw,285px)!important} .wheel-stage-label{margin-bottom:.8rem!important} .wheel-sequence-copy{margin-top:.35rem!important} } /* 0.18.43 — stronger visible under-wheel pulses that continue until fully closed. */ /* More space around the wheel copy. */ .early-wheel-panel{padding-top:.75rem!important;padding-bottom:1rem!important} .wheel-stage-label{margin-bottom:1.2rem!important;position:relative!important;z-index:80!important} .wheel-sequence-copy{margin-top:1.25rem!important;position:relative!important;z-index:80!important} /* Noticeably smaller than 0.18.39 so expanded pieces stay clear of copy. */ .early-access-hero .join-wheel-canvas{ height:clamp(430px,40vw,540px)!important; overflow:visible!important; } .early-access-hero .join-wheel-assembly{ width:clamp(300px,25.5vw,385px)!important; z-index:20!important; } /* Stronger reduction in fly-out travel. */ .early-access-hero .piece-eat{--dx:0%!important;--dy:-11.6%!important} .early-access-hero .piece-nightlife{--dx:8.2%!important;--dy:-8.2%!important} .early-access-hero .piece-events{--dx:11.6%!important;--dy:0%!important} .early-access-hero .piece-wellness{--dx:8.2%!important;--dy:8.2%!important} .early-access-hero .piece-style{--dx:0%!important;--dy:12.0%!important} .early-access-hero .piece-property{--dx:-8.2%!important;--dy:8.2%!important} .early-access-hero .piece-travel{--dx:-11.6%!important;--dy:0%!important} .early-access-hero .piece-experiences{--dx:-8.2%!important;--dy:-8.2%!important} /* Explicit under-wheel pulse layer. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay{ position:relative!important; isolation:isolate!important; } .early-access-hero .wheel-under-pulses{ position:absolute!important; left:50%!important; top:50%!important; width:clamp(300px,25.5vw,385px)!important; aspect-ratio:1!important; transform:translate(-50%,-50%)!important; pointer-events:none!important; z-index:9!important; overflow:visible!important; } .early-access-hero .wheel-under-pulses .under-pulse{ position:absolute!important; inset:0!important; border-radius:50%!important; border:1.6px solid rgba(230,242,255,.46)!important; box-shadow: 0 0 12px rgba(220,236,252,.22), 0 0 30px rgba(154,197,236,.18), inset 0 0 12px rgba(255,255,255,.06)!important; opacity:0!important; transform:scale(.88)!important; animation:none!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-1{ animation:vozayaUnderPulse1843 4.2s ease-out infinite!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-2{ animation:vozayaUnderPulse1843 4.2s ease-out 1.4s infinite!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-3{ animation:vozayaUnderPulse1843 4.2s ease-out 2.8s infinite!important; } @keyframes vozayaUnderPulse1843{ 0%{opacity:0;transform:scale(.88);border-color:rgba(236,245,255,.48)} 10%{opacity:.36} 24%{opacity:.28;border-color:rgba(217,234,251,.38)} 48%{opacity:.18;border-color:rgba(192,221,247,.22)} 72%{opacity:.09;border-color:rgba(173,208,240,.12)} 100%{opacity:0;transform:scale(1.48);border-color:rgba(160,198,234,0)} } /* Keep the smaller hub pulses as well, behind the wheel. */ .early-access-hero .vozaya-hub-pulse{ z-index:6!important; border-color:rgba(225,240,253,.34)!important; } @media(max-width:760px){ .early-access-hero .join-wheel-canvas{height:410px!important} .early-access-hero .join-wheel-assembly, .early-access-hero .wheel-under-pulses{width:min(56vw,265px)!important} .early-access-hero .piece-eat{--dy:-10.2%!important} .early-access-hero .piece-nightlife{--dx:7.2%!important;--dy:-7.2%!important} .early-access-hero .piece-events{--dx:10.2%!important} .early-access-hero .piece-wellness{--dx:7.2%!important;--dy:7.2%!important} .early-access-hero .piece-style{--dy:10.6%!important} .early-access-hero .piece-property{--dx:-7.2%!important;--dy:7.2%!important} .early-access-hero .piece-travel{--dx:-10.2%!important} .early-access-hero .piece-experiences{--dx:-7.2%!important;--dy:-7.2%!important} .wheel-stage-label{margin-bottom:1.25rem!important} .wheel-sequence-copy{margin-top:1.35rem!important} } @media(max-width:430px){ .early-access-hero .join-wheel-canvas{height:360px!important} .early-access-hero .join-wheel-assembly, .early-access-hero .wheel-under-pulses{width:min(58vw,225px)!important} } /* 0.18.44 — pulse layer immediately beneath wheel artwork; category icons snap on exactly when the segments reach their locked-open position. */ /* PULSES: visible under segments, above page background. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .wheel-under-pulses{ z-index:18!important; width:clamp(300px,25.5vw,385px)!important; overflow:visible!important; mix-blend-mode:screen; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-wheel-assembly{ z-index:20!important; } .early-access-hero .wheel-under-pulses .under-pulse{ border:1.35px solid rgba(226,240,255,.44)!important; box-shadow: 0 0 10px rgba(218,235,252,.22), 0 0 24px rgba(146,196,238,.13)!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-1{ animation:vozayaUnderPulse1844 4.6s linear infinite!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-2{ animation:vozayaUnderPulse1844 4.6s linear 1.53s infinite!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-3{ animation:vozayaUnderPulse1844 4.6s linear 3.06s infinite!important; } @keyframes vozayaUnderPulse1844{ 0%{opacity:0;transform:scale(.72);border-color:rgba(238,247,255,.50)} 8%{opacity:.33} 28%{opacity:.25;border-color:rgba(219,237,252,.38)} 55%{opacity:.15;border-color:rgba(192,221,247,.24)} 78%{opacity:.065;border-color:rgba(171,209,242,.13)} 100%{opacity:0;transform:scale(1.56);border-color:rgba(158,198,235,0)} } /* CATEGORY MARKS — deliberately no transition/fade. */ .early-access-hero .vozaya-category-mark{ position:absolute; left:50%; top:19%; transform:translate(-50%,-50%); z-index:15; display:grid; place-items:center; gap:.18rem; min-width:80px; opacity:0; visibility:hidden; transition:none!important; animation:none!important; pointer-events:none; color:#fff; text-align:center; text-shadow:0 2px 8px rgba(0,0,0,.88),0 0 10px rgba(255,255,255,.18); filter:drop-shadow(0 0 5px rgba(255,255,255,.16)); } .early-access-hero .join-wheel-canvas.icons-locked-open .vozaya-category-mark{ opacity:1!important; visibility:visible!important; } .early-access-hero .vozaya-category-icon{ display:block; font-size:clamp(1.25rem,1.8vw,1.65rem); line-height:1; font-weight:500; } .early-access-hero .vozaya-category-label{ display:block; font-size:clamp(.42rem,.55vw,.58rem); line-height:1; font-weight:900; letter-spacing:.065em; white-space:nowrap; } /* Because the same master piece is rotated 8 times, counter-rotate each mark so its icon/label remains upright while staying physically attached. */ .early-access-hero .piece-eat .vozaya-category-mark{transform:translate(-50%,-50%) rotate(0deg)} .early-access-hero .piece-nightlife .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-45deg)} .early-access-hero .piece-events .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-90deg)} .early-access-hero .piece-wellness .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-135deg)} .early-access-hero .piece-style .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-180deg)} .early-access-hero .piece-property .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-225deg)} .early-access-hero .piece-travel .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-270deg)} .early-access-hero .piece-experiences .vozaya-category-mark{transform:translate(-50%,-50%) rotate(-315deg)} @media(max-width:760px){ .early-access-hero .vozaya-category-mark{top:19%;min-width:62px;gap:.12rem} .early-access-hero .vozaya-category-icon{font-size:1.05rem} .early-access-hero .vozaya-category-label{font-size:.36rem;letter-spacing:.045em} .early-access-hero .join-wheel-canvas.join-wheel-autoplay .wheel-under-pulses{width:min(56vw,265px)!important} } @media(max-width:430px){ .early-access-hero .vozaya-category-label{font-size:.31rem} .early-access-hero .vozaya-category-icon{font-size:.92rem} .early-access-hero .join-wheel-canvas.join-wheel-autoplay .wheel-under-pulses{width:min(58vw,225px)!important} } /* 0.18.45 — official VOZAYA global category icon system. Same icon geometry is intended for web, app, search, category and destination surfaces. */ /* Pulse plane: immediately under the glass artwork, above the page background. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .wheel-under-pulses{ z-index:18!important; mix-blend-mode:screen!important; } .early-access-hero .join-wheel-assembly{z-index:20!important} .early-access-hero .wheel-under-pulses .under-pulse{ border:1.8px solid rgba(222,239,255,.48)!important; box-shadow:0 0 14px rgba(210,233,255,.23),0 0 34px rgba(116,178,238,.16)!important; } .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-1{animation:vozayaBrandPulse1845 4.8s ease-out infinite!important} .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-2{animation:vozayaBrandPulse1845 4.8s ease-out 1.6s infinite!important} .early-access-hero .join-wheel-canvas.hub-pulses-open .wheel-under-pulses .pulse-3{animation:vozayaBrandPulse1845 4.8s ease-out 3.2s infinite!important} @keyframes vozayaBrandPulse1845{ 0%{opacity:0;transform:scale(.86)} 8%{opacity:.34} 32%{opacity:.24} 62%{opacity:.12} 100%{opacity:0;transform:scale(1.56)} } /* Category marks are physically inside each full-canvas moving segment element. */ .early-access-hero .vozaya-category-mark{ position:absolute!important; left:var(--mark-x)!important; top:var(--mark-y)!important; transform:translate(-50%,-50%)!important; z-index:30!important; display:grid!important; justify-items:center!important; align-content:center!important; gap:.22rem!important; width:24%!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; color:#fff!important; text-align:center!important; filter:drop-shadow(0 2px 5px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(220,238,255,.24))!important; } /* SNAP on. No fade/transition. */ .early-access-hero .join-wheel-canvas.icons-locked-open .vozaya-category-mark{ opacity:1!important; visibility:visible!important; transition:none!important; animation:none!important; } .early-access-hero .vozaya-category-icon{width:30px!important;height:30px!important;display:grid!important;place-items:center!important} .early-access-hero .vozaya-category-icon svg{width:100%!important;height:100%!important;fill:none!important;stroke:currentColor!important;stroke-width:2.35!important;stroke-linecap:round!important;stroke-linejoin:round!important;overflow:visible!important} .early-access-hero .vozaya-category-label{font-size:.47rem!important;line-height:1!important;font-weight:900!important;letter-spacing:.055em!important;white-space:nowrap!important;text-shadow:0 2px 7px rgba(0,0,0,.92)!important} /* Exact on-segment anchor points. No counter-rotation: the moving segment carries its own mark. */ .early-access-hero .piece-eat{--mark-x:50%;--mark-y:19.5%} .early-access-hero .piece-nightlife{--mark-x:71.5%;--mark-y:28.5%} .early-access-hero .piece-events{--mark-x:80.5%;--mark-y:50%} .early-access-hero .piece-wellness{--mark-x:71.5%;--mark-y:71.5%} .early-access-hero .piece-style{--mark-x:50%;--mark-y:80.5%} .early-access-hero .piece-property{--mark-x:28.5%;--mark-y:71.5%} .early-access-hero .piece-travel{--mark-x:19.5%;--mark-y:50%} .early-access-hero .piece-experiences{--mark-x:28.5%;--mark-y:28.5%} /* Kill all old inverse rotation rules. */ .early-access-hero .piece-eat .vozaya-category-mark, .early-access-hero .piece-nightlife .vozaya-category-mark, .early-access-hero .piece-events .vozaya-category-mark, .early-access-hero .piece-wellness .vozaya-category-mark, .early-access-hero .piece-style .vozaya-category-mark, .early-access-hero .piece-property .vozaya-category-mark, .early-access-hero .piece-travel .vozaya-category-mark, .early-access-hero .piece-experiences .vozaya-category-mark{transform:translate(-50%,-50%)!important} @media(max-width:760px){ .early-access-hero .vozaya-category-icon{width:24px!important;height:24px!important} .early-access-hero .vozaya-category-label{font-size:.38rem!important;letter-spacing:.04em!important} } @media(max-width:430px){ .early-access-hero .vozaya-category-icon{width:21px!important;height:21px!important} .early-access-hero .vozaya-category-label{font-size:.32rem!important} } /* 0.18.46 — real traveller-intent wheel, warmer dimensional category marks. */ /* Slightly smaller visual centre to reduce accidental centre taps. */ .early-access-hero .join-wheel-center::after{ width:92%!important; height:92%!important; } .early-access-hero .vozaya-ask-overlay{ position:absolute!important; left:50%!important; top:33.5%!important; transform:translate(-50%,-50%)!important; z-index:40!important; pointer-events:none!important; color:#f5d695!important; font-size:clamp(.43rem,.52vw,.57rem)!important; line-height:1!important; font-weight:800!important; letter-spacing:.22em!important; text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(244,202,117,.24)!important; } /* Warm metallic/glass category treatment rather than cold flat white linework. */ .early-access-hero .vozaya-category-mark{ gap:.26rem!important; color:#f7d995!important; filter:drop-shadow(0 4px 6px rgba(0,0,0,.85)) drop-shadow(0 0 8px rgba(255,210,122,.22))!important; } .early-access-hero .vozaya-category-icon{ width:34px!important; height:34px!important; border-radius:11px!important; background:linear-gradient(145deg,rgba(255,241,203,.15),rgba(255,190,76,.055) 42%,rgba(0,0,0,.18))!important; border:1px solid rgba(255,226,160,.34)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -5px 12px rgba(0,0,0,.20),0 4px 10px rgba(0,0,0,.32),0 0 10px rgba(255,200,96,.10)!important; } .early-access-hero .vozaya-category-icon svg{ width:74%!important; height:74%!important; stroke:#ffe1a0!important; stroke-width:2.25!important; filter:drop-shadow(0 1px 0 rgba(255,255,255,.24)) drop-shadow(0 2px 2px rgba(0,0,0,.65)) drop-shadow(0 0 3px rgba(255,202,112,.22))!important; } .early-access-hero .vozaya-category-label{ color:#ffe5ad!important; font-size:.46rem!important; letter-spacing:.05em!important; text-shadow:0 2px 3px rgba(0,0,0,.92),0 0 7px rgba(255,205,114,.18)!important; } /* The pulse plane remains directly under the segments and is more visible. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .wheel-under-pulses{z-index:19!important} .early-access-hero .join-wheel-assembly{z-index:20!important} .early-access-hero .wheel-under-pulses .under-pulse{ border:1.6px solid rgba(224,239,255,.50)!important; box-shadow:0 0 14px rgba(213,233,252,.24),0 0 34px rgba(121,184,238,.16)!important; } .wheel-intent-note{ display:block!important; max-width:460px!important; margin:.38rem auto 0!important; color:rgba(216,224,236,.72)!important; font-size:.68rem!important; line-height:1.45!important; } .wheel-intent-note span+span::before{content:' • ';color:rgba(246,211,145,.68)} @media(max-width:760px){ .early-access-hero .join-wheel-center::after{width:91%!important;height:91%!important} .early-access-hero .vozaya-category-icon{width:27px!important;height:27px!important;border-radius:9px!important} .early-access-hero .vozaya-category-label{font-size:.36rem!important} .wheel-intent-note{font-size:.61rem!important;max-width:330px!important} } @media(max-width:430px){ .early-access-hero .join-wheel-center::after{width:90%!important;height:90%!important} .early-access-hero .vozaya-category-icon{width:23px!important;height:23px!important;border-radius:8px!important} .early-access-hero .vozaya-category-label{font-size:.30rem!important} .wheel-intent-note{font-size:.55rem!important;max-width:280px!important} } /* 0.18.48 — ACTUAL category elements, no little icon boxes. */ .early-access-hero .vozaya-category-mark{ width:28%!important; gap:.30rem!important; color:#f5d692!important; z-index:35!important; text-align:center!important; filter:drop-shadow(0 3px 5px rgba(0,0,0,.76)) drop-shadow(0 0 8px rgba(244,205,125,.20))!important; transition:none!important; animation:none!important; } /* Remove the actual small rounded icon boxes. */ .early-access-hero .vozaya-category-icon{ width:38px!important; height:38px!important; display:grid!important; place-items:center!important; background:none!important; background-color:transparent!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; padding:0!important; } .early-access-hero .vozaya-category-icon::before, .early-access-hero .vozaya-category-icon::after{ content:none!important; display:none!important; } .early-access-hero .vozaya-category-icon svg{ width:34px!important; height:34px!important; fill:none!important; stroke:#f7d997!important; stroke-width:2.05!important; stroke-linecap:round!important; stroke-linejoin:round!important; filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 2px rgba(0,0,0,.66)) drop-shadow(0 0 5px rgba(247,216,151,.18))!important; } .early-access-hero .vozaya-category-label{ color:#f8dda1!important; font-size:clamp(.52rem,.62vw,.64rem)!important; line-height:1.05!important; font-weight:900!important; letter-spacing:.055em!important; white-space:nowrap!important; text-shadow:0 2px 3px rgba(0,0,0,.90),0 0 8px rgba(247,215,147,.16)!important; } /* Move marks toward the visual centre of each glass wedge. */ .early-access-hero .piece-eat{--mark-x:50%;--mark-y:21.2%} .early-access-hero .piece-nightlife{--mark-x:70.5%;--mark-y:29.5%} .early-access-hero .piece-events{--mark-x:78.8%;--mark-y:50%} .early-access-hero .piece-wellness{--mark-x:70.5%;--mark-y:70.5%} .early-access-hero .piece-style{--mark-x:50%;--mark-y:78.8%} .early-access-hero .piece-property{--mark-x:29.5%;--mark-y:70.5%} .early-access-hero .piece-travel{--mark-x:21.2%;--mark-y:50%} .early-access-hero .piece-experiences{--mark-x:29.5%;--mark-y:29.5%} /* The actual JS now owns rotation. Do not counter-rotate in CSS. */ .early-access-hero .piece-eat .vozaya-category-mark, .early-access-hero .piece-nightlife .vozaya-category-mark, .early-access-hero .piece-events .vozaya-category-mark, .early-access-hero .piece-wellness .vozaya-category-mark, .early-access-hero .piece-style .vozaya-category-mark, .early-access-hero .piece-property .vozaya-category-mark, .early-access-hero .piece-travel .vozaya-category-mark, .early-access-hero .piece-experiences .vozaya-category-mark{ transform:translate(-50%,-50%) rotate(0deg)!important; } /* Once snapped on, no later CSS animation may hide them. */ .early-access-hero .join-wheel-canvas.icons-locked-open .vozaya-category-mark{ opacity:1!important; visibility:visible!important; animation:none!important; transition:none!important; } @media(max-width:760px){ .early-access-hero .vozaya-category-mark{width:30%!important;gap:.22rem!important} .early-access-hero .vozaya-category-icon{width:31px!important;height:31px!important} .early-access-hero .vozaya-category-icon svg{width:28px!important;height:28px!important} .early-access-hero .vozaya-category-label{font-size:.42rem!important} } @media(max-width:430px){ .early-access-hero .vozaya-category-icon{width:27px!important;height:27px!important} .early-access-hero .vozaya-category-icon svg{width:24px!important;height:24px!important} .early-access-hero .vozaya-category-label{font-size:.35rem!important} } /* 0.18.49 — move category graphics to the true centre of each wedge. This keeps icon + text centred in the glass in BOTH open and closed states. */ /* True radial centres of the eight master wedges. */ .early-access-hero .piece-eat{--mark-x:50%!important;--mark-y:16.8%!important} .early-access-hero .piece-nightlife{--mark-x:73.4%!important;--mark-y:26.6%!important} .early-access-hero .piece-events{--mark-x:83.2%!important;--mark-y:50%!important} .early-access-hero .piece-wellness{--mark-x:73.4%!important;--mark-y:73.4%!important} .early-access-hero .piece-style{--mark-x:50%!important;--mark-y:83.2%!important} .early-access-hero .piece-property{--mark-x:26.6%!important;--mark-y:73.4%!important} .early-access-hero .piece-travel{--mark-x:16.8%!important;--mark-y:50%!important} .early-access-hero .piece-experiences{--mark-x:26.6%!important;--mark-y:26.6%!important} /* Slightly clearer without crowding the metal/glass perimeter. */ .early-access-hero .vozaya-category-mark{ width:25%!important; gap:.24rem!important; } .early-access-hero .vozaya-category-icon{ width:40px!important; height:40px!important; } .early-access-hero .vozaya-category-icon svg{ width:36px!important; height:36px!important; stroke-width:2.15!important; } .early-access-hero .vozaya-category-label{ font-size:clamp(.54rem,.64vw,.66rem)!important; letter-spacing:.045em!important; } /* No boxes. */ .early-access-hero .vozaya-category-icon{ background:none!important; border:0!important; box-shadow:none!important; border-radius:0!important; } @media(max-width:760px){ .early-access-hero .vozaya-category-mark{width:27%!important;gap:.18rem!important} .early-access-hero .vozaya-category-icon{width:32px!important;height:32px!important} .early-access-hero .vozaya-category-icon svg{width:29px!important;height:29px!important} .early-access-hero .vozaya-category-label{font-size:.43rem!important} } @media(max-width:430px){ .early-access-hero .vozaya-category-mark{width:29%!important} .early-access-hero .vozaya-category-icon{width:27px!important;height:27px!important} .early-access-hero .vozaya-category-icon svg{width:24px!important;height:24px!important} .early-access-hero .vozaya-category-label{font-size:.35rem!important} } /* 0.18.50 — approved visual direction: OPEN = icon + label, CLOSED = icon only. ASK is slightly larger, centre disk size is unchanged. */ .early-access-hero .vozaya-ask-overlay{ font-size:clamp(.58rem,.72vw,.76rem)!important; font-weight:900!important; letter-spacing:.20em!important; color:#f6d795!important; text-shadow: 0 1px 2px rgba(0,0,0,.88), 0 0 10px rgba(246,215,149,.24)!important; } /* Open state: premium, clear, warm icon + short label. */ .early-access-hero .vozaya-category-mark{ width:25%!important; gap:.28rem!important; color:#f6d894!important; filter: drop-shadow(0 3px 5px rgba(0,0,0,.78)) drop-shadow(0 0 7px rgba(246,216,151,.18))!important; } .early-access-hero .vozaya-category-icon{ width:41px!important; height:41px!important; background:none!important; border:0!important; box-shadow:none!important; border-radius:0!important; } .early-access-hero .vozaya-category-icon svg{ width:37px!important; height:37px!important; stroke:#f7d99a!important; stroke-width:2.1!important; filter: drop-shadow(0 1px 0 rgba(255,255,255,.16)) drop-shadow(0 2px 2px rgba(0,0,0,.62)) drop-shadow(0 0 4px rgba(247,217,154,.16))!important; } .early-access-hero .vozaya-category-label{ font-size:clamp(.55rem,.66vw,.68rem)!important; line-height:1.05!important; letter-spacing:.045em!important; color:#f8dda1!important; text-shadow: 0 2px 3px rgba(0,0,0,.90), 0 0 7px rgba(247,216,151,.14)!important; } /* When closing/closed, only the icon remains. This keeps the real wheel orientation without crowding the hub with text. */ .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-label, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-label{ opacity:0!important; visibility:hidden!important; } /* Slightly enlarge icon-only closed state so it still reads as intentional. */ .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-icon, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-icon{ width:43px!important; height:43px!important; } .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-icon svg, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-icon svg{ width:39px!important; height:39px!important; } @media(max-width:760px){ .early-access-hero .vozaya-ask-overlay{font-size:.58rem!important} .early-access-hero .vozaya-category-icon{width:33px!important;height:33px!important} .early-access-hero .vozaya-category-icon svg{width:30px!important;height:30px!important} .early-access-hero .vozaya-category-label{font-size:.43rem!important} .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-icon, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-icon{ width:35px!important;height:35px!important; } .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-icon svg, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-icon svg{ width:32px!important;height:32px!important; } } @media(max-width:430px){ .early-access-hero .vozaya-ask-overlay{font-size:.52rem!important} .early-access-hero .vozaya-category-icon{width:28px!important;height:28px!important} .early-access-hero .vozaya-category-icon svg{width:25px!important;height:25px!important} .early-access-hero .vozaya-category-label{font-size:.35rem!important} } /* 0.18.51 — VIP/boom category treatment. Makes icon + label feel integrated into the premium glass wedges. */ .early-access-hero .vozaya-category-mark{ width:27%!important; gap:.34rem!important; transform-origin:50% 50%!important; filter:none!important; } /* No icon tile/box: only the icon itself, with metallic depth. */ .early-access-hero .vozaya-category-icon{ width:46px!important; height:46px!important; display:grid!important; place-items:center!important; background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; position:relative!important; } .early-access-hero .vozaya-category-icon::before, .early-access-hero .vozaya-category-icon::after{ content:none!important; display:none!important; } /* Layered gold/chrome feel: brighter top edge, warmer body, dark depth. */ .early-access-hero .vozaya-category-icon svg{ width:42px!important; height:42px!important; stroke:#f5d28a!important; stroke-width:2.15!important; fill:none!important; filter: drop-shadow(0 1px 0 rgba(255,255,255,.52)) drop-shadow(0 2px 0 rgba(121,78,26,.72)) drop-shadow(0 4px 5px rgba(0,0,0,.66)) drop-shadow(0 0 7px rgba(249,210,132,.19))!important; } /* Stronger premium label, still compact enough to stay inside the wedge. */ .early-access-hero .vozaya-category-label{ font-size:clamp(.60rem,.72vw,.74rem)!important; line-height:1.02!important; font-weight:950!important; letter-spacing:.045em!important; color:#f7d793!important; text-transform:uppercase!important; white-space:nowrap!important; text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 2px 0 rgba(116,74,26,.55), 0 4px 5px rgba(0,0,0,.78), 0 0 8px rgba(247,211,143,.14)!important; } /* Give the whole mark a subtle 'set into the glass' depth. */ .early-access-hero .join-wheel-canvas.category-icons-shown .vozaya-category-mark, .early-access-hero .join-wheel-canvas.icons-locked-open .vozaya-category-mark{ opacity:1!important; visibility:visible!important; filter: drop-shadow(0 4px 7px rgba(0,0,0,.52)) drop-shadow(0 0 5px rgba(249,214,145,.08))!important; } /* Open lock gets a tiny one-shot pop, not a fade. */ .early-access-hero .join-wheel-canvas.icons-locked-open .vozaya-category-mark{ animation:vozayaVipSnap1851 .22s cubic-bezier(.15,.92,.22,1.12) 1 both!important; } @keyframes vozayaVipSnap1851{ 0%{transform:translate(-50%,-50%) scale(.92)} 72%{transform:translate(-50%,-50%) scale(1.045)} 100%{transform:translate(-50%,-50%) scale(1)} } /* 0.18.54: mark rotation is owned exclusively by the manual JS engine. */ /* Closed/minimised keeps icon only, but with premium depth. */ .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-label, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-label{ opacity:0!important; visibility:hidden!important; } .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-icon, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-icon{ width:45px!important; height:45px!important; } .early-access-hero .join-wheel-canvas.wheel-closing-clean .vozaya-category-icon svg, .early-access-hero .join-wheel-canvas.wheel-closed-clean .vozaya-category-icon svg{ width:41px!important; height:41px!important; } /* ASK: slightly more premium without enlarging the centre disk. */ .early-access-hero .vozaya-ask-overlay{ font-size:clamp(.64rem,.78vw,.82rem)!important; font-weight:950!important; letter-spacing:.22em!important; color:#f8d995!important; text-shadow: 0 1px 0 rgba(255,255,255,.30), 0 2px 0 rgba(107,70,28,.48), 0 0 9px rgba(245,210,139,.18)!important; } @media(max-width:760px){ .early-access-hero .vozaya-category-mark{width:28%!important;gap:.24rem!important} .early-access-hero .vozaya-category-icon{width:36px!important;height:36px!important} .early-access-hero .vozaya-category-icon svg{width:33px!important;height:33px!important;stroke-width:2!important} .early-access-hero .vozaya-category-label{font-size:.46rem!important;letter-spacing:.035em!important} .early-access-hero .vozaya-ask-overlay{font-size:.60rem!important} } @media(max-width:430px){ .early-access-hero .vozaya-category-mark{width:29%!important} .early-access-hero .vozaya-category-icon{width:31px!important;height:31px!important} .early-access-hero .vozaya-category-icon svg{width:28px!important;height:28px!important} .early-access-hero .vozaya-category-label{font-size:.38rem!important} .early-access-hero .vozaya-ask-overlay{font-size:.54rem!important} } html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important} @media(max-width:760px){ .early-access-hero{padding-top:2.8rem!important} .early-access-grid{grid-template-columns:1fr!important;gap:1.2rem!important} .early-access-copy{text-align:center!important;margin-inline:auto!important;width:min(92vw,430px)!important} .early-access-copy h1{font-size:clamp(3.2rem,14vw,4.9rem)!important;line-height:.92!important;margin-inline:auto!important} .early-access-copy p{margin-inline:auto!important} .early-wheel-panel{width:100%!important;max-width:100%!important;margin-inline:auto!important;overflow:visible!important} .wheel-stage-label{display:block!important;text-align:center!important;margin-bottom:.8rem!important;font-size:.62rem!important;letter-spacing:.17em!important} .early-access-hero .join-wheel-canvas{height:420px!important;width:100%!important;overflow:visible!important;display:grid!important;place-items:center!important} .early-access-hero .join-wheel-assembly{width:min(68vw,300px)!important;max-width:300px!important} .early-access-hero .piece-eat{--dx:0%!important;--dy:-10.5%!important} .early-access-hero .piece-nightlife{--dx:7.5%!important;--dy:-7.5%!important} .early-access-hero .piece-events{--dx:10.5%!important;--dy:0%!important} .early-access-hero .piece-wellness{--dx:7.5%!important;--dy:7.5%!important} .early-access-hero .piece-style{--dx:0%!important;--dy:10.9%!important} .early-access-hero .piece-property{--dx:-7.5%!important;--dy:7.5%!important} .early-access-hero .piece-travel{--dx:-10.5%!important;--dy:0%!important} .early-access-hero .piece-experiences{--dx:-7.5%!important;--dy:-7.5%!important} .early-access-hero .vozaya-category-mark{width:29%!important;gap:.18rem!important} .early-access-hero .vozaya-category-icon{width:34px!important;height:34px!important} .early-access-hero .vozaya-category-icon svg{width:31px!important;height:31px!important} .early-access-hero .vozaya-category-label{font-size:.42rem!important;line-height:1!important;letter-spacing:.025em!important} .early-access-hero .vozaya-ask-overlay{font-size:.6rem!important} .wheel-sequence-copy{margin-top:.7rem!important;text-align:center!important;position:relative!important;z-index:80!important} .wheel-sequence-copy b{display:block!important;font-size:.72rem!important;letter-spacing:.14em!important} .wheel-sequence-copy span{display:block!important;margin-top:.35rem!important;font-size:.72rem!important;line-height:1.3!important} } @media(max-width:430px){ .early-access-hero .join-wheel-canvas{height:390px!important} .early-access-hero .join-wheel-assembly{width:min(72vw,278px)!important} .early-access-hero .vozaya-category-mark{width:30%!important} .early-access-hero .vozaya-category-icon{width:31px!important;height:31px!important} .early-access-hero .vozaya-category-icon svg{width:28px!important;height:28px!important} .early-access-hero .vozaya-category-label{font-size:.36rem!important} .early-access-hero .vozaya-ask-overlay{font-size:.56rem!important} } /* 0.18.53 PRE-SERVER CONSOLIDATION OPEN: all marks upright + centred. CLOSING: JS progressively rotates the mark with its physical wedge. CLOSED: icon only, physical wheel perspective. Segment geometry itself is unchanged. */ .early-access-hero .join-wheel-canvas.icons-locked-open:not(.wheel-closing-clean):not(.wheel-closed-clean) .vozaya-category-mark{ /* JS also owns this inline; this is a defensive open-state fallback. */ opacity:1!important; visibility:visible!important; } /* Keep the VIP snap as a scale/opacity effect only. Do not let a CSS keyframe rotate or relocate the mark. */ .early-access-hero .join-wheel-canvas.icons-locked-open .vozaya-category-mark{ animation:none!important; } /* Preserve VIP depth without a box. */ .early-access-hero .vozaya-category-icon{ background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } /* Cleaner open-state spacing inside the glass. */ .early-access-hero .vozaya-category-mark{ gap:.30rem!important; } .early-access-hero .vozaya-category-label{ max-width:8.9rem!important; text-align:center!important; } /* iPhone: slightly tighter but still premium. */ @media(max-width:760px){ .early-access-hero .vozaya-category-mark{gap:.20rem!important} .early-access-hero .vozaya-category-label{ max-width:6.4rem!important; white-space:nowrap!important; } } .vozaya-reg-modal[hidden]{display:none!important} .vozaya-reg-modal{ position:fixed;inset:0;z-index:12000; display:grid;place-items:center;padding:1rem; background:rgba(2,7,15,.78); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px) } .vozaya-reg-dialog{ width:min(92vw,520px);max-height:88vh;overflow:auto; padding:1.25rem;border-radius:22px; background:linear-gradient(160deg,rgba(18,29,45,.98),rgba(5,12,23,.98)); border:1px solid rgba(255,255,255,.17); box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08); color:#f7f9fd } .vozaya-reg-dialog h2{margin:.1rem 0 .45rem;font-size:1.35rem} .vozaya-reg-dialog p{color:#b9c7da;line-height:1.45} .vozaya-reg-close{ float:right;border:0;background:transparent;color:#dce7f5; font-size:1.4rem;line-height:1;padding:.25rem;cursor:pointer } .vozaya-reg-field{display:grid;gap:.35rem;margin:.85rem 0} .vozaya-reg-field label{font-weight:800;font-size:.78rem;letter-spacing:.04em} .vozaya-reg-field input,.vozaya-reg-field select{ width:100%;box-sizing:border-box;padding:.8rem .9rem;border-radius:12px; color:#f8fbff;background:#091322;border:1px solid rgba(255,255,255,.18) } .vozaya-reg-consent{display:flex;gap:.55rem;align-items:flex-start;margin:.9rem 0;color:#c5d1e1;font-size:.82rem} .vozaya-reg-status{min-height:1.25rem;margin:.7rem 0;font-size:.82rem;color:#c7d8ec}.vozaya-reg-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important} .vozaya-reg-submit[disabled]{opacity:.55;cursor:not-allowed}