/* 0.18.18 — persistent chrome edge on every segment image, both while expanded and when the wheel settles closed again. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float > img{ filter: drop-shadow(0 0 .55px rgba(255,255,255,.96)) drop-shadow(0 0 1.15px rgba(214,222,234,.88)) drop-shadow(0 1px .7px rgba(34,42,54,.86)) drop-shadow(0 -1px .45px rgba(255,255,255,.28))!important; } /* 0.18.24 — MASTER SEGMENT REBUILD Each wedge is now one finished, uniform annular sector. The artwork and chrome frame are clipped/moved together, so there can be no centre spokes. */ /* Remove the historical per-image clipping differences. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float > img{ clip-path:none!important; -webkit-clip-path:none!important; position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; } /* The float wrapper becomes the actual finished segment silhouette. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float{ position:absolute!important; inset:0!important; overflow:hidden!important; isolation:isolate!important; } /* Metal frame is part of each segment itself and therefore moves with it. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float::before{ content:""!important; position:absolute!important; inset:0!important; z-index:8!important; pointer-events:none!important; background:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22m%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233d4655%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23b9c4d3%22%2F%3E%0A%20%20%3Cstop%20offset%3D%22.43%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%22.58%22%20stop-color%3D%22%23d6deea%22%2F%3E%0A%20%20%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%237e8b9d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23242b36%22%2F%3E%0A%20%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20d%3D%22M%2031.249%204.730%20A%2049.0%2049.0%200%200%201%2068.751%204.730%20L%2060.332%2025.055%20A%2027.0%2027.0%200%200%200%2039.668%2025.055%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23202733%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%2031.249%204.730%20A%2049.0%2049.0%200%200%201%2068.751%204.730%20L%2060.332%2025.055%20A%2027.0%2027.0%200%200%200%2039.668%2025.055%20Z%22%20fill%3D%22none%22%20stroke%3D%22url%28%23m%29%22%20stroke-width%3D%221.45%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M%2031.249%204.730%20A%2049.0%2049.0%200%200%201%2068.751%204.730%20L%2060.332%2025.055%20A%2027.0%2027.0%200%200%200%2039.668%2025.055%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.72%22%20stroke-width%3D%22.42%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E")!important; transform:rotate(var(--master-frame-rot,0deg))!important; transform-origin:50% 50%!important; filter:drop-shadow(0 0 .7px rgba(255,255,255,.92)) drop-shadow(0 0 2.1px rgba(165,182,205,.55))!important; opacity:.98!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float::after{ content:none!important; display:none!important; } .early-access-hero .piece-eat .join-segment-float{ clip-path:polygon(31.249% 4.730%,35.776% 3.110%,40.441% 1.942%,45.197% 1.236%,50.000% 1.000%,54.803% 1.236%,59.559% 1.942%,64.224% 3.110%,68.751% 4.730%,60.332% 25.055%,57.838% 24.163%,55.267% 23.519%,52.646% 23.130%,50.000% 23.000%,47.354% 23.130%,44.733% 23.519%,42.162% 24.163%,39.668% 25.055%)!important; -webkit-clip-path:polygon(31.249% 4.730%,35.776% 3.110%,40.441% 1.942%,45.197% 1.236%,50.000% 1.000%,54.803% 1.236%,59.559% 1.942%,64.224% 3.110%,68.751% 4.730%,60.332% 25.055%,57.838% 24.163%,55.267% 23.519%,52.646% 23.130%,50.000% 23.000%,47.354% 23.130%,44.733% 23.519%,42.162% 24.163%,39.668% 25.055%)!important; --master-frame-rot:0deg; } .early-access-hero .piece-nightlife .join-segment-float{ clip-path:polygon(68.751% 4.730%,73.098% 6.786%,77.223% 9.258%,81.085% 12.122%,84.648% 15.352%,87.878% 18.915%,90.742% 22.777%,93.214% 26.902%,95.270% 31.249%,74.945% 39.668%,73.812% 37.272%,72.450% 35.000%,70.871% 32.871%,69.092% 30.908%,67.129% 29.129%,65.000% 27.550%,62.728% 26.188%,60.332% 25.055%)!important; -webkit-clip-path:polygon(68.751% 4.730%,73.098% 6.786%,77.223% 9.258%,81.085% 12.122%,84.648% 15.352%,87.878% 18.915%,90.742% 22.777%,93.214% 26.902%,95.270% 31.249%,74.945% 39.668%,73.812% 37.272%,72.450% 35.000%,70.871% 32.871%,69.092% 30.908%,67.129% 29.129%,65.000% 27.550%,62.728% 26.188%,60.332% 25.055%)!important; --master-frame-rot:45deg; } .early-access-hero .piece-events .join-segment-float{ clip-path:polygon(95.270% 31.249%,96.890% 35.776%,98.058% 40.441%,98.764% 45.197%,99.000% 50.000%,98.764% 54.803%,98.058% 59.559%,96.890% 64.224%,95.270% 68.751%,74.945% 60.332%,75.837% 57.838%,76.481% 55.267%,76.870% 52.646%,77.000% 50.000%,76.870% 47.354%,76.481% 44.733%,75.837% 42.162%,74.945% 39.668%)!important; -webkit-clip-path:polygon(95.270% 31.249%,96.890% 35.776%,98.058% 40.441%,98.764% 45.197%,99.000% 50.000%,98.764% 54.803%,98.058% 59.559%,96.890% 64.224%,95.270% 68.751%,74.945% 60.332%,75.837% 57.838%,76.481% 55.267%,76.870% 52.646%,77.000% 50.000%,76.870% 47.354%,76.481% 44.733%,75.837% 42.162%,74.945% 39.668%)!important; --master-frame-rot:90deg; } .early-access-hero .piece-wellness .join-segment-float{ clip-path:polygon(95.270% 68.751%,93.214% 73.098%,90.742% 77.223%,87.878% 81.085%,84.648% 84.648%,81.085% 87.878%,77.223% 90.742%,73.098% 93.214%,68.751% 95.270%,60.332% 74.945%,62.728% 73.812%,65.000% 72.450%,67.129% 70.871%,69.092% 69.092%,70.871% 67.129%,72.450% 65.000%,73.812% 62.728%,74.945% 60.332%)!important; -webkit-clip-path:polygon(95.270% 68.751%,93.214% 73.098%,90.742% 77.223%,87.878% 81.085%,84.648% 84.648%,81.085% 87.878%,77.223% 90.742%,73.098% 93.214%,68.751% 95.270%,60.332% 74.945%,62.728% 73.812%,65.000% 72.450%,67.129% 70.871%,69.092% 69.092%,70.871% 67.129%,72.450% 65.000%,73.812% 62.728%,74.945% 60.332%)!important; --master-frame-rot:135deg; } .early-access-hero .piece-style .join-segment-float{ clip-path:polygon(68.751% 95.270%,64.224% 96.890%,59.559% 98.058%,54.803% 98.764%,50.000% 99.000%,45.197% 98.764%,40.441% 98.058%,35.776% 96.890%,31.249% 95.270%,39.668% 74.945%,42.162% 75.837%,44.733% 76.481%,47.354% 76.870%,50.000% 77.000%,52.646% 76.870%,55.267% 76.481%,57.838% 75.837%,60.332% 74.945%)!important; -webkit-clip-path:polygon(68.751% 95.270%,64.224% 96.890%,59.559% 98.058%,54.803% 98.764%,50.000% 99.000%,45.197% 98.764%,40.441% 98.058%,35.776% 96.890%,31.249% 95.270%,39.668% 74.945%,42.162% 75.837%,44.733% 76.481%,47.354% 76.870%,50.000% 77.000%,52.646% 76.870%,55.267% 76.481%,57.838% 75.837%,60.332% 74.945%)!important; --master-frame-rot:180deg; } .early-access-hero .piece-property .join-segment-float{ clip-path:polygon(31.249% 95.270%,26.902% 93.214%,22.777% 90.742%,18.915% 87.878%,15.352% 84.648%,12.122% 81.085%,9.258% 77.223%,6.786% 73.098%,4.730% 68.751%,25.055% 60.332%,26.188% 62.728%,27.550% 65.000%,29.129% 67.129%,30.908% 69.092%,32.871% 70.871%,35.000% 72.450%,37.272% 73.812%,39.668% 74.945%)!important; -webkit-clip-path:polygon(31.249% 95.270%,26.902% 93.214%,22.777% 90.742%,18.915% 87.878%,15.352% 84.648%,12.122% 81.085%,9.258% 77.223%,6.786% 73.098%,4.730% 68.751%,25.055% 60.332%,26.188% 62.728%,27.550% 65.000%,29.129% 67.129%,30.908% 69.092%,32.871% 70.871%,35.000% 72.450%,37.272% 73.812%,39.668% 74.945%)!important; --master-frame-rot:225deg; } .early-access-hero .piece-travel .join-segment-float{ clip-path:polygon(4.730% 68.751%,3.110% 64.224%,1.942% 59.559%,1.236% 54.803%,1.000% 50.000%,1.236% 45.197%,1.942% 40.441%,3.110% 35.776%,4.730% 31.249%,25.055% 39.668%,24.163% 42.162%,23.519% 44.733%,23.130% 47.354%,23.000% 50.000%,23.130% 52.646%,23.519% 55.267%,24.163% 57.838%,25.055% 60.332%)!important; -webkit-clip-path:polygon(4.730% 68.751%,3.110% 64.224%,1.942% 59.559%,1.236% 54.803%,1.000% 50.000%,1.236% 45.197%,1.942% 40.441%,3.110% 35.776%,4.730% 31.249%,25.055% 39.668%,24.163% 42.162%,23.519% 44.733%,23.130% 47.354%,23.000% 50.000%,23.130% 52.646%,23.519% 55.267%,24.163% 57.838%,25.055% 60.332%)!important; --master-frame-rot:270deg; } .early-access-hero .piece-experiences .join-segment-float{ clip-path:polygon(4.730% 31.249%,6.786% 26.902%,9.258% 22.777%,12.122% 18.915%,15.352% 15.352%,18.915% 12.122%,22.777% 9.258%,26.902% 6.786%,31.249% 4.730%,39.668% 25.055%,37.272% 26.188%,35.000% 27.550%,32.871% 29.129%,30.908% 30.908%,29.129% 32.871%,27.550% 35.000%,26.188% 37.272%,25.055% 39.668%)!important; -webkit-clip-path:polygon(4.730% 31.249%,6.786% 26.902%,9.258% 22.777%,12.122% 18.915%,15.352% 15.352%,18.915% 12.122%,22.777% 9.258%,26.902% 6.786%,31.249% 4.730%,39.668% 25.055%,37.272% 26.188%,35.000% 27.550%,32.871% 29.129%,30.908% 30.908%,29.129% 32.871%,27.550% 35.000%,26.188% 37.272%,25.055% 39.668%)!important; --master-frame-rot:315deg; } /* Keep the segment-label overlays above the new metal frame. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .segment-action{z-index:12!important} @media(max-width:430px){ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float::before{ opacity:.96!important; filter:drop-shadow(0 0 .55px rgba(255,255,255,.9)) drop-shadow(0 0 1.6px rgba(165,182,205,.48))!important; } } /* 0.18.25 — remove lingering legacy baked-edge glow from the source images and let every wedge fill the full outer circle silhouette. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float > img{ filter:none!important; inset:-2.35%!important; width:104.7%!important; height:104.7%!important; object-fit:cover!important; } /* Slightly strengthen the new frame so the clean chrome edge reads clearly after the source-image glow is removed. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float::before{ opacity:1!important; filter:drop-shadow(0 0 .85px rgba(255,255,255,.95)) drop-shadow(0 0 2.4px rgba(165,182,205,.62))!important; } /* 0.18.26 — clean master segments. Remove every icon/word/baked image from the wedge interiors and retain only coloured glass + the new high-quality metal/glass perimeter. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float > img{ opacity:0!important; visibility:hidden!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay .segment-action{ display:none!important; opacity:0!important; visibility:hidden!important; } /* One consistent glass construction across all 8 pieces. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float{ background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 28%,transparent 47%), linear-gradient(var(--glass-angle,180deg),rgba(255,255,255,.18) 0%,rgba(var(--glass-rgb),.88) 22%,rgba(var(--glass-rgb),.62) 58%,rgba(2,7,16,.72) 100%)!important; box-shadow: inset 0 0 28px rgba(255,255,255,.08), inset 0 -18px 26px rgba(0,0,0,.34)!important; } .early-access-hero .piece-eat .join-segment-float{--glass-rgb:194,18,24;--glass-angle:180deg} .early-access-hero .piece-nightlife .join-segment-float{--glass-rgb:174,15,111;--glass-angle:225deg} .early-access-hero .piece-events .join-segment-float{--glass-rgb:79,31,151;--glass-angle:270deg} .early-access-hero .piece-wellness .join-segment-float{--glass-rgb:20,48,155;--glass-angle:315deg} .early-access-hero .piece-style .join-segment-float{--glass-rgb:0,113,139;--glass-angle:0deg} .early-access-hero .piece-property .join-segment-float{--glass-rgb:30,121,20;--glass-angle:45deg} .early-access-hero .piece-travel .join-segment-float{--glass-rgb:151,103,0;--glass-angle:90deg} .early-access-hero .piece-experiences .join-segment-float{--glass-rgb:216,102,0;--glass-angle:135deg} /* Refine the master perimeter: dark structural base, polished steel band, white glass highlight. This frame is identical on every segment. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float::before{ opacity:1!important; filter: drop-shadow(0 0 .55px rgba(255,255,255,1)) drop-shadow(0 0 1.8px rgba(201,214,232,.82)) drop-shadow(0 1px 2.4px rgba(0,0,0,.7))!important; } /* 0.18.27 — segment contents physically removed from HTML. These backgrounds are the segment interiors; there is no icon/text image underneath. */ .early-access-hero .join-wheel-canvas.join-wheel-autoplay .join-segment-float{ background: radial-gradient(circle at 48% 24%,rgba(255,255,255,.20),transparent 25%), radial-gradient(circle at 52% 76%,rgba(var(--glass-rgb),.30),transparent 58%), linear-gradient(var(--glass-angle),rgba(255,255,255,.11),rgba(var(--glass-rgb),.78) 22%,rgba(var(--glass-rgb),.48) 58%,rgba(2,7,16,.90) 100%)!important; box-shadow: inset 0 0 24px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -18px 24px rgba(0,0,0,.36)!important; } .early-access-hero .piece-eat .join-segment-float{--glass-rgb:190,20,25;--glass-angle:180deg} .early-access-hero .piece-nightlife .join-segment-float{--glass-rgb:169,19,111;--glass-angle:225deg} .early-access-hero .piece-events .join-segment-float{--glass-rgb:77,33,148;--glass-angle:270deg} .early-access-hero .piece-wellness .join-segment-float{--glass-rgb:24,52,151;--glass-angle:315deg} .early-access-hero .piece-style .join-segment-float{--glass-rgb:0,111,137;--glass-angle:0deg} .early-access-hero .piece-property .join-segment-float{--glass-rgb:33,119,22;--glass-angle:45deg} .early-access-hero .piece-travel .join-segment-float{--glass-rgb:150,101,0;--glass-angle:90deg} .early-access-hero .piece-experiences .join-segment-float{--glass-rgb:211,98,0;--glass-angle:135deg} /* 0.18.28 — old centre artwork physically removed. New centre diameter is matched to the 27% inner radius of the master segments so the hub rim meets all eight wedges when the wheel is closed. */ .early-access-hero .join-wheel-center{ display:grid!important; place-items:center!important; pointer-events:none!important; } .early-access-hero .join-wheel-center > img{display:none!important} .early-access-hero .vozaya-new-hub{ position:absolute; left:50%; top:50%; width:54.4%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; display:grid; place-content:center; text-align:center; z-index:2; overflow:hidden; background: radial-gradient(circle at 42% 30%,rgba(255,255,255,.15),transparent 22%), radial-gradient(circle at 50% 54%,rgba(24,37,55,.72),rgba(2,7,15,.96) 69%), #030914; box-shadow: 0 0 0 1px rgba(28,34,44,.98), 0 0 0 2.1px rgba(150,165,184,.95), 0 0 0 3.1px rgba(248,251,255,.94), 0 0 0 4.2px rgba(101,115,134,.92), inset 0 0 0 1px rgba(255,255,255,.15), inset 0 0 24px rgba(83,113,149,.18), 0 8px 26px rgba(0,0,0,.55)!important; } .early-access-hero .vozaya-new-hub::before{content:none!important;display:none!important} .early-access-hero .vozaya-new-hub::after{ content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 28%,transparent 70%,rgba(102,177,215,.07)); pointer-events:none; } .early-access-hero .vozaya-new-hub .hub-brand{ position:relative; z-index:2; color:#e7c582; font-size:clamp(.92rem,1.65vw,1.45rem); letter-spacing:.12em; font-weight:500; line-height:1; text-shadow:0 0 12px rgba(230,191,111,.14); } .early-access-hero .vozaya-new-hub small{ position:relative; z-index:2; margin-top:.42rem; color:rgba(255,255,255,.75); font-size:clamp(.28rem,.42vw,.4rem); letter-spacing:.22em; font-weight:800; } @media(max-width:760px){ .early-access-hero .vozaya-new-hub{width:54.6%} } @media(max-width:430px){ .early-access-hero .vozaya-new-hub{width:54.8%} .early-access-hero .vozaya-new-hub .hub-brand{font-size:.78rem} .early-access-hero .vozaya-new-hub small{font-size:.24rem;margin-top:.28rem} } /* 0.18.30 — keep one clean metallic hub edge only. Removes the faint inner ring caused by inset shadow layering. */ .early-access-hero .join-wheel-center{ overflow:visible!important; } .early-access-hero .join-wheel-center::before{ content:""; position:absolute; left:50%; top:50%; width:55.1%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:6; background:transparent; box-shadow: 0 0 0 1px rgba(36,42,54,.98), 0 0 0 2px rgba(146,160,178,.95), 0 0 0 2.9px rgba(248,251,255,.90), 0 0 0 4px rgba(96,110,129,.94), 0 6px 18px rgba(0,0,0,.24)!important; } .early-access-hero .vozaya-new-hub{ z-index:7; } @media(max-width:760px){ .early-access-hero .join-wheel-center::before{width:55.3%} } @media(max-width:430px){ .early-access-hero .join-wheel-center::before{width:55.5%} } /* 0.18.31 — one clean hub face: no thin inner circle. */ .early-access-hero .vozaya-new-hub::before{ content:none!important; display:none!important; } /* Slow, faint circular waves appear only while the segments are expanded. */ .early-access-hero .vozaya-hub-pulse{ position:absolute; left:50%; top:50%; width:55%; aspect-ratio:1; transform:translate(-50%,-50%) scale(1); border-radius:50%; border:1px solid rgba(208,225,244,.22); box-shadow: 0 0 8px rgba(198,219,241,.055), inset 0 0 5px rgba(255,255,255,.025); opacity:0; z-index:5; pointer-events:none; animation:none!important; } .early-access-hero .join-wheel-canvas.join-wheel-autoplay.hub-pulses-open .vozaya-hub-pulse{ animation:vozayaHubWave1831 5.4s cubic-bezier(.20,.42,.24,1) 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:1.8s!important} .early-access-hero .join-wheel-canvas.join-wheel-autoplay.hub-pulses-open .pulse-c{animation-delay:3.6s!important} @keyframes vozayaHubWave1831{ 0%{opacity:0;transform:translate(-50%,-50%) scale(1.00);border-color:rgba(228,239,251,.20)} 10%{opacity:.15} 48%{opacity:.075;border-color:rgba(190,218,244,.13)} 82%{opacity:.02} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.35);border-color:rgba(170,205,236,.02)} } @media(max-width:430px){ .early-access-hero .vozaya-hub-pulse{border-width:.8px} }