1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta name="theme-color" content="#BE4AFF"> 5 <meta property="og:type" content="website"> 6 <meta property="og:title" content="Products | Unreal Studios"> 7 <meta property="og:description" content="Unreal Studios creates premium FiveM scripts, Minecraft mods, websites, and custom software."> 8 <meta property="og:url" content="https://unrealstudios.ca/products/view-all"> 9 <meta property="og:image" content="https://unrealstudios.ca/assets/img/backgrounds/url-embed-banner.png"> 10 <meta property="og:image:secure_url" content="https://unrealstudios.ca/assets/img/backgrounds/url-embed-banner.png"> 11 <meta property="og:image:type" content="image/png"> 12 <meta property="og:image:width" content="468"> 13 <meta property="og:image:height" content="60"> 14 <meta property="og:image:alt" content="Products | Unreal Studios"> 15 <meta name="twitter:card" content="summary_large_image"> 16 <meta name="twitter:title" content="Products | Unreal Studios"> 17 <meta name="twitter:description" content="Unreal Studios creates premium FiveM scripts, Minecraft mods, websites, and custom software."> 18 <meta name="twitter:image" content="https://unrealstudios.ca/assets/img/backgrounds/url-embed-banner.png"> 19 <link rel="canonical" href="https://unrealstudios.ca/products/view-all"> 20 <!-- Global social preview v1 --> 21 <meta charset="UTF-8"> 22 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 23 24 <title>Products | Unreal Studios</title> 25 26
26<script src="https://unpkg.com/lucide@latest"></script>
26 27 28 <link rel="preconnect" href="https://fonts.googleapis.com"> 29 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 30 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@600;700;800&display=swap" rel="stylesheet"> 31 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> 32 33 <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/normal-apple-touch-icon.png"> 34 <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/normal-favicon-32x32.png"> 35 <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/normal-favicon-16x16.png"> 36 <link rel="icon" type="image/x-icon" href="/assets/img/favicons/normal-favicon.ico"> 37 <link rel="manifest" href="/assets/img/favicons/site.webmanifest"> 38 39 <link rel="stylesheet" href="/css/public/browse-products.css?v=20261004-old-price-purple-2"> 40 41 <!-- Product hover video performance hints --> 42 <link rel="preconnect" href="https://www.youtube.com"> 43 <link rel="preconnect" href="https://i.ytimg.com"> 44 <link rel="preconnect" href="https://googlevideo.com"> 45 46 47</head> 48 49<body> 50 51 <!-- Server-provided state is available before the shared header initializes. --> 52
52<script> 53 window.__AUTH_USER__ = null; 54 window.__PRODUCTS__ = [{"product_id":1,"title":"Unreal Studios Extra Menu + Livery + Licence Plate [Escrow]","slug":"urs-extra-menu","description":"Vehicle extras, livery, and plate editor system with a clean modern UI.","image_url":"/assets/img/posters/fivem/URS-Vehicle Extras V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6817107","product_url":"/products/urs-extra-menu","video_url":"/assets/videos/extra-menu.mp4\n/assets/videos/extra-menu-guide.mp4","price":"9.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"ESX,QBCore,QBox, Standalone"},{"product_id":2,"title":"Unreal Studios Vehicle Hud + AOP + Postal Code [Escrow]","slug":"urs-vehicle-hud","description":"Clean vehicle HUD with AOP display, postal code support, and QBCore integration.","image_url":"/assets/img/posters/fivem/URS-Hud V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6853335","product_url":"/products/urs-vehicle-hud","video_url":"/assets/videos/vehicle-hud.mp4","price":"15.45","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"QBCore, QBox"},{"product_id":3,"title":"Unreal Studios Police Lanyard + Animations [Escrow]","slug":"urs-police-lanyard","description":"Police lanyard system with animations, job checks, and clean interaction flow.","image_url":"/assets/img/posters/fivem/URS-Police Lanyards V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6821318","product_url":"/products/urs-police-lanyard","video_url":"/assets/videos/police-lanyards.mp4","price":"5.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"Standalone"},{"product_id":5,"title":"Unreal Studios Music Zones + Playlists + Multiple Locations [Escrow]","slug":"urs-music-zones","description":"Create music zones with playlists, multiple locations, and synchronized playback.","image_url":"/assets/img/posters/fivem/URS-Music Zones V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/7106893","product_url":"/products/urs-music-zones","video_url":"/assets/videos/music-zones.mp4\n/assets/videos/music-zones-v3.mp4","price":"11.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"ESX,QBCore,QBox,Standalone"},{"product_id":6,"title":"Unreal Studios ControlX [Escrow]","slug":"urs-lvc-controller","description":"Standalone emergency vehicle control system for FiveM with integrated sirens, lighting controls, UVC support, driver settings, and optional Stream Deck integration.\n","image_url":"/assets/img/posters/fivem/URS-Controlx-V3.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6853245","product_url":"/products/urs-lvc-controller","video_url":"/assets/videos/siren-controller.mp4","price":"20.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"Standalone"},{"product_id":7,"title":"Unreal Studios Vehicle Spawner + Job Locks + Multiple Locations [Escrow]","slug":"urs-vehicle-spawner","description":"Job-locked vehicle spawner with configurable locations and clean spawn logic.","image_url":"/assets/img/posters/fivem/URS-Vehicle Spawner V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/6853340","product_url":"/products/urs-vehicle-spawner","video_url":"/assets/videos/vehicle-spawner.mp4","price":"4.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"QBCore, QBox"},{"product_id":8,"title":"Unreal Studios TAB Bridge Plugin","slug":"urs-tab-bridge","description":"FPP TAB Bridge connects Fake Player Plugin bot data to Velocity network TAB displays.","image_url":"/assets/img/posters/minecraft/URS-FPP Bridge V2.png","checkout_url":"https://modrinth.com/plugin/fpp-tab-bridge","product_url":"/products/urs-tab-bridge","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v21.1x","game":"Minecraft","frameworks":"Velocity"},{"product_id":9,"title":"Unreal Studios Player Radar Plugin","slug":"urs-player-radar","description":"Player Radar is a highly customizable mod that provides real-time player tracking and a adjustable HUD.","image_url":"/assets/img/posters/minecraft/URS-Player Radars V2.png","checkout_url":"https://modrinth.com/mod/urs-player-radar","product_url":"/products/urs-player-radar","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v26.3x","game":"Minecraft","frameworks":"Fabric"},{"product_id":10,"title":"Unreal Studios Mace Rituals Plugin","slug":"urs-mace-rituals","description":"Mace Ritual is a plugin built around a one-at-a-time ritual mace system with hard anti-dupe and anti-storage protection.","image_url":"/assets/img/posters/minecraft/URS-Mace Rituals V2.png","checkout_url":"https://modrinth.com/plugin/mace-rituals","product_url":"/products/urs-mace-rituals","video_url":"https://cdn.modrinth.com/data/kCdA5Zpx/images/ad24ba0c17e327bab20fbbadca2ed962424eb222.gif","price":"0.00","old_price":"0.00","discount_label":"v26.2x","game":"Minecraft","frameworks":"Paper, Purpur, Spigot, Bukkit"},{"product_id":11,"title":"Unreal Studios Mythical Cards Plugin","slug":"urs-mythical-cards","description":"Mythical Cards is a paper plugin that grants players the ability to obtain powers from cards.","image_url":"/assets/img/posters/minecraft/URS-Mythical Cards V2.png","checkout_url":"https://www.curseforge.com/minecraft/bukkit-plugins/mythical-cards","product_url":"/products/urs-mythical-cards","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v26.2x","game":"Minecraft","frameworks":"Paper, Purpur, Spigot, Bukkit"},{"product_id":12,"title":"Unreal Studios Mythical Cards Rebinded","slug":"urs-mythical-cards-rebinded","description":"Mythical Cards Rebinded is a Fabric mod that grants players the ability to rebind the Mythical Cards keybinds.","image_url":"/assets/img/posters/minecraft/URS-Cards Rebinded V2.png","checkout_url":"https://modrinth.com/mod/mythical-cards-rebinded","product_url":"/products/urs-mythical-cards-rebinded","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v26.2x","game":"Minecraft","frameworks":"Fabric"},{"product_id":13,"title":"Unreal Studios Trailer Support [Escrow]","slug":"urs-trailer-support","description":"A menu to build trailer and vehicle combos and spawn them together, as well as attach and detach them.","image_url":"/assets/img/posters/fivem/URS-Trailer Support V2.png","checkout_url":"https://unreal-studios-shop.tebex.io/package/7600741","product_url":"/products/urs-trailer-support","video_url":"/assets/videos/trailer-support.mp4","price":"8.99","old_price":null,"discount_label":"30% OFF","game":"FiveM","frameworks":"ESX,QBCore,QBox"},{"product_id":14,"title":"Unreal Studios No Extras [Open-Source]","slug":"urs-no-extras","description":"A script that is used to disable all extras on a specific vehicle and model.","image_url":"/assets/img/posters/fivem/URS-No Extras V2.png","checkout_url":"https://github.com/OfficialUnrealNetwork/URS-No-Extras","product_url":"/products/urs-no-extras","video_url":"/assets/placeholders/videos/product-video.mp4","price":"0.00","old_price":"0.00","discount_label":"v1.1.0","game":"FiveM","frameworks":"Standalone"}]; 55 </script>
55 56 57 <!-- Unreal Studios shared header --> 58<style id="urs-shared-header-base"> 59/* Keep the layout viewport width identical between short and long pages. 60 Prevents the shared header from shifting sideways when the vertical scrollbar 61 appears or disappears during navigation. */ 62html { 63 /* Always reserve the desktop scrollbar track so a reload cannot resize the viewport. */ 64 overflow-y: scroll; 65 scrollbar-gutter: stable; 66} 67 68/* ========================================================= 69 EXACT PRODUCTS-PAGE TOPBAR LANGUAGE 70 ========================================================= */ 71 72 #navbar.topbar { 73 position: fixed !important; 74 top: 0 !important; 75 left: 0 !important; 76 right: 0 !important; 77 z-index: 1000 !important; 78 width: 100% !important; 79 height: 64px !important; 80 min-height: 64px !important; 81 padding: 0 !important; 82 display: block !important; 83 border: 0 !important; 84 border-bottom: 1px solid rgba(255,255,255,.06) !important; 85 /* Keep the bar on one stable paint layer. A sticky backdrop-filter was 86 forcing Chromium to rebuild the header layer during full page navs. */ 87 background: #09090d !important; 88 box-shadow: none !important; 89 backdrop-filter: none !important; 90 -webkit-backdrop-filter: none !important; 91 isolation: isolate !important; 92 } 93 94 .urs-topbar-flow-spacer { 95 width: 100%; 96 height: 64px; 97 min-height: 64px; 98 flex: 0 0 64px; 99 pointer-events: none; 100 } 101 102 #navbar.topbar::after { 103 display: none !important; 104 } 105 106 #navbar .nav-inner { 107 position: relative; 108 /* Lock the header to the visual viewport instead of the document's 109 scrollable client width. Chrome can briefly remove/re-add the 110 scrollbar during a full navigation; 100% + margin:auto then moves 111 the whole header by half a scrollbar width. Using vw for both the 112 width and left gutter keeps every top-bar item pixel-stable. */ 113 width: min(1440px, calc(100vw - 48px)); 114 height: 100%; 115 margin: 0; 116 margin-left: max(24px, calc((100vw - 1440px) / 2)); 117 padding: 0; 118 display: flex; 119 align-items: center; 120 justify-content: space-between; 121 gap: 0; 122 } 123 124 #navbar .topbar-left { 125 min-width: 0; 126 display: inline-flex; 127 align-items: center; 128 gap: 16px; 129 } 130 131 @media (min-width: 1181px) { 132 #navbar .topbar-left { 133 /* Same visual offset without promoting this side of the header to 134 a separate transformed compositor layer. */ 135 margin-left: 34px; 136 transform: none !important; 137 } 138 } 139 140 #navbar .brand { 141 min-width: 0; 142 display: inline-flex; 143 align-items: center; 144 flex: 0 0 auto; 145 } 146 147 #navbar .brand img { 148 display: block; 149 width: 106px; 150 height: auto; 151 } 152 153 #navbar .topbar-socials { 154 display: inline-flex; 155 align-items: center; 156 gap: 3px; 157 } 158 159 #navbar .topbar-social-divider { 160 width: 1px; 161 height: 20px; 162 margin-right: 8px; 163 background: rgba(255,255,255,.07); 164 } 165 166 #navbar .topbar-socials a { 167 width: 31px; 168 height: 31px; 169 display: inline-flex; 170 align-items: center; 171 justify-content: center; 172 border: 0; 173 border-radius: 8px; 174 background: transparent; 175 color: rgba(255,255,255,.34); 176 font-size: 13px; 177 transition: color 140ms ease, background 140ms ease, transform 140ms ease; 178 } 179 180 #navbar .topbar-socials a:hover { 181 color: rgba(235,222,243,.92); 182 background: rgba(185,143,214,.055); 183 transform: translateY(-1px); 184 } 185 186 #navbar .desktop-nav { 187 position: absolute; 188 inset: 0; 189 height: 100%; 190 display: flex; 191 align-items: center; 192 justify-content: center; 193 gap: 2px; 194 transform: none !important; 195 pointer-events: none; 196 } 197 198 #navbar .desktop-nav .nav-link { 199 pointer-events: auto; 200 } 201 202 #navbar .nav-link { 203 position: relative; 204 height: 100%; 205 padding: 0 15px; 206 display: inline-flex; 207 align-items: center; 208 justify-content: center; 209 border-radius: 0; 210 background: transparent !important; 211 color: rgba(255,255,255,.44); 212 font-size: 12.5px; 213 font-weight: 690; 214 letter-spacing: -.01em; 215 transition: color 150ms ease; 216 } 217 218 #navbar .nav-link:hover { 219 color: rgba(255,255,255,.78); 220 } 221 222 #navbar .nav-link.active { 223 color: rgba(255,255,255,.92); 224 } 225 226 #navbar .nav-link.active::after { 227 display: none !important; 228 } 229 230 #navbar .desktop-actions { 231 position: relative; 232 z-index: 2; 233 margin-left: auto; 234 display: flex; 235 align-items: center; 236 justify-content: flex-end; 237 gap: 3px; 238 opacity: 1 !important; 239 visibility: visible !important; 240 } 241 242 #navbar .basket-icon, 243 #navbar .basket-icon > svg, 244 #navbar #currency-widget-container, 245 #navbar #desktopAuth { 246 opacity: 1 !important; 247 visibility: visible !important; 248 } 249 250 #navbar .desktop-actions::before { 251 content: ""; 252 width: 1px; 253 height: 21px; 254 margin-right: 7px; 255 background: rgba(255,255,255,.065); 256 } 257 258 #navbar .icon-btn, 259 #navbar #trigger-btn { 260 height: 36px; 261 border: 0; 262 border-radius: 8px; 263 background: transparent; 264 color: rgba(255,255,255,.54); 265 box-shadow: none; 266 cursor: pointer; 267 } 268 269 #navbar .icon-btn:hover, 270 #navbar #trigger-btn:hover, 271 #navbar #trigger-btn[aria-expanded="true"] { 272 background: rgba(255,255,255,.04) !important; 273 color: white !important; 274 } 275 276 #navbar .basket-icon { 277 width: 36px; 278 min-width: 36px; 279 padding: 0; 280 display: inline-flex; 281 align-items: center; 282 justify-content: center; 283 } 284 285 #navbar .basket-icon svg, 286 #navbar .basket-icon i { 287 width: 15px; 288 height: 15px; 289 } 290 291 #currency-widget-container { 292 position: relative; 293 z-index: 1010; 294 } 295 296 #trigger-btn { 297 width: auto !important; 298 min-width: 0 !important; 299 padding: 0 7px !important; 300 display: inline-flex !important; 301 align-items: center !important; 302 justify-content: center !important; 303 gap: 5px !important; 304 color: rgba(255,255,255,.58) !important; 305 } 306 307 #trigger-btn #active-label { 308 color: rgba(255,255,255,.62) !important; 309 font-size: 11px !important; 310 font-weight: 700 !important; 311 line-height: 1 !important; 312 letter-spacing: .035em !important; 313 } 314 315 #trigger-btn #widget-arrow { 316 width: 11px !important; 317 height: 11px !important; 318 color: rgba(255,255,255,.25) !important; 319 transition: transform 150ms ease, color 150ms ease; 320 } 321 322 #trigger-btn[aria-expanded="true"] #widget-arrow { 323 transform: rotate(180deg); 324 } 325 326 #dropdown-wrapper { 327 position: fixed !important; 328 top: calc(100% + 7px) !important; 329 right: -7px !important; 330 z-index: 6500 !important; 331 width: 228px !important; 332 max-width: calc(100vw - 24px) !important; 333 margin: 0 !important; 334 padding: 0 !important; 335 border: 0 !important; 336 background: transparent !important; 337 box-shadow: none !important; 338 } 339 340 .currency-menu { 341 width: 100%; 342 overflow: hidden; 343 padding: 6px; 344 border: 1px solid rgba(255,255,255,.10); 345 border-radius: 14px; 346 background: rgba(12,14,18,.38); 347 box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08); 348 backdrop-filter: blur(44px) saturate(150%) brightness(.88); 349 -webkit-backdrop-filter: blur(44px) saturate(150%) brightness(.88); 350 } 351 352 .currency-menu-title { 353 height: 30px; 354 padding: 0 8px; 355 display: flex; 356 align-items: center; 357 margin-bottom: 4px; 358 border-bottom: 1px solid rgba(255,255,255,.045); 359 color: rgba(255,255,255,.30); 360 font-size: 9px; 361 font-weight: 720; 362 letter-spacing: .11em; 363 text-transform: uppercase; 364 } 365 366 #currency-grid { 367 width: 100% !important; 368 max-height: 310px !important; 369 overflow-y: auto !important; 370 padding: 0 !important; 371 display: flex !important; 372 flex-direction: column !important; 373 gap: 1px !important; 374 border: 0 !important; 375 border-radius: 0 !important; 376 background: transparent !important; 377 box-shadow: none !important; 378 scrollbar-width: thin; 379 scrollbar-color: rgba(185,143,214,.28) transparent; 380 } 381 382 #currency-grid .currency-btn { 383 position: relative; 384 width: 100% !important; 385 height: 34px !important;
386 padding: 0 30px 0 9px !important; 387 display: grid !important; 388 grid-template-columns: 42px minmax(0,1fr) !important; 389 align-items: center !important; 390 gap: 5px !important; 391 border: 0 !important; 392 border-radius: 7px !important; 393 background: transparent !important; 394 color: rgba(255,255,255,.72) !important; 395 text-align: left !important; 396 font-size: 10.5px !important; 397 line-height: 1 !important; 398 font-weight: 720 !important; 399 letter-spacing: .03em !important; 400 } 401 402 #currency-grid .currency-btn:hover { 403 background: rgba(255,255,255,.035) !important; 404 color: rgba(255,255,255,.92) !important; 405 } 406 407 #currency-grid .currency-btn.active { 408 background: rgba(185,143,214,.08) !important; 409 color: rgba(238,226,245,.96) !important; 410 } 411 412 #navbar .login-pill { 413 height: 36px; 414 padding: 0 8px; 415 display: inline-flex; 416 align-items: center; 417 gap: 6px; 418 border: 0; 419 border-radius: 8px; 420 background: transparent; 421 color: rgba(232,218,240,.82); 422 font-size: 11.5px; 423 font-weight: 700; 424 } 425 426 #navbar .login-pill:hover { 427 background: rgba(255,255,255,.04); 428 color: #fff; 429 } 430 431 #mobile-menu-btn { 432 display: none; 433 width: 36px; 434 min-width: 36px; 435 height: 36px; 436 border: 0; 437 border-radius: 8px; 438 background: transparent; 439 color: rgba(255,255,255,.58); 440 } 441 442@media (max-width: 1180px) { 443 #navbar .desktop-nav, 444 #navbar .desktop-actions { 445 display: none !important; 446 } 447 448 #navbar .topbar-left { 449 transform: none; 450 } 451 452 #navbar .topbar-socials { 453 display: none; 454 } 455 456 #mobile-menu-btn { 457 display: inline-flex !important; 458 align-items: center; 459 justify-content: center; 460 } 461} 462 463@media (max-width: 680px) { 464 #navbar .nav-inner { 465 width: min(calc(100% - 40px), 1380px) !important; 466 margin-left: 24px !important; 467 } 468 469 #navbar.topbar { 470 height: 60px !important; 471 min-height: 60px !important; 472 } 473 474 #navbar .brand img { 475 width: 94px !important; 476 } 477} 478/* Screenshot-calibrated alignment: align KEY / INITIATIVES text stack with EXPLORE / UNREAL STUDIOS. */ 479.about-mega-initiatives > h3{ 480 align-self:start!important; 481 margin:8px 0 0 0!important; 482 padding:0!important; 483 transform:none!important; 484} 485 486 487/* Final title alignment: match actual Explore text wrapper position. */ 488.about-mega-initiatives > h3{ 489 height:55px!important; 490 margin:0!important; 491 padding:0!important; 492 display:flex!important; 493 flex-direction:column!important; 494 justify-content:center!important; 495 gap:1px!important; 496 transform:translateY(7px)!important; 497} 498 499</style> 500 501 <style id="urs-topbar-auth-currency-exact-match"> 502 .hidden { 503 display: none !important; 504 } 505 506 /* ========================================================= 507 CURRENCY â EXACT PRODUCT PAGE MATCH 508 ========================================================= */ 509 510 #currency-widget-container { 511 position: relative !important; 512 z-index: 1100 !important; 513 } 514 515 #trigger-btn { 516 width: auto !important; 517 min-width: 0 !important; 518 height: 34px !important; 519 padding: 0 7px !important; 520 display: inline-flex !important; 521 align-items: center !important; 522 justify-content: center !important; 523 gap: 5px !important; 524 border: 0 !important; 525 border-radius: 7px !important; 526 background: transparent !important; 527 box-shadow: none !important; 528 color: rgba(255,255,255,.58) !important; 529 cursor: pointer !important; 530 } 531 532 #trigger-btn #active-label { 533 color: rgba(255,255,255,.62) !important; 534 font-size: 11px !important; 535 font-weight: 700 !important; 536 line-height: 1 !important; 537 letter-spacing: .035em !important; 538 } 539 540 #trigger-btn #widget-arrow { 541 width: 11px !important; 542 height: 11px !important; 543 color: rgba(255,255,255,.25) !important; 544 transition: 545 transform 150ms ease, 546 color 150ms ease !important; 547 } 548 549 #trigger-btn:hover, 550 #trigger-btn[aria-expanded="true"] { 551 background: rgba(255,255,255,.035) !important; 552 } 553 554 #trigger-btn:hover #active-label, 555 #trigger-btn[aria-expanded="true"] #active-label { 556 color: rgba(245,240,248,.9) !important; 557 } 558 559 #trigger-btn:hover #widget-arrow, 560 #trigger-btn[aria-expanded="true"] #widget-arrow { 561 color: rgba(198,168,216,.62) !important; 562 } 563 564 #trigger-btn[aria-expanded="true"] #widget-arrow { 565 transform: rotate(180deg) !important; 566 } 567 568 #dropdown-wrapper { 569 position: fixed !important; 570 top: calc(100% + 7px) !important; 571 right: -7px !important; 572 left: auto !important; 573 width: 228px !important; 574 max-width: calc(100vw - 24px) !important; 575 height: auto !important; 576 margin: 0 !important; 577 padding: 6px !important; 578 border: 1px solid rgba(255,255,255,.14) !important; 579 border-radius: 13px !important; 580 background: rgba(12,14,18,.44) !important; 581 box-shadow: 0 18px 48px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.075), 0 0 0 1px rgba(0,0,0,.16) !important; 582 backdrop-filter: blur(48px) saturate(140%) brightness(.86) !important; 583 -webkit-backdrop-filter: blur(48px) saturate(140%) brightness(.86) !important; 584 overflow: hidden !important; 585 transform-origin: top right !important; 586 z-index: 995 !important; 587 } 588 589 #dropdown-wrapper[style*="display: block"], 590 #dropdown-wrapper:not([style*="display: none"]) { 591 animation: none !important; 592 } 593 594 .currency-menu { 595 width: 100% !important; 596 overflow: visible !important; 597 padding: 0 !important; 598 border: 0 !important; 599 border-radius: 0 !important; 600 background: transparent !important; 601 box-shadow: none !important; 602 backdrop-filter: none !important; 603 -webkit-backdrop-filter: none !important; 604 } 605 606 .currency-menu-title { 607 height: 30px !important; 608 padding: 0 8px !important; 609 display: flex !important; 610 align-items: center !important; 611 margin: 0 0 4px !important; 612 border-bottom: 1px solid rgba(255,255,255,.045) !important; 613 color: rgba(255,255,255,.30) !important; 614 font-size: 9px !important; 615 font-weight: 720 !important; 616 letter-spacing: .11em !important; 617 text-transform: uppercase !important; 618 } 619 620 #currency-grid { 621 width: 100% !important; 622 max-height: 310px !important; 623 overflow-y: auto !important; 624 padding: 0 !important; 625 display: flex !important; 626 flex-direction: column !important; 627 grid-template-columns: none !important; 628 gap: 1px !important; 629 border: 0 !important; 630 border-radius: 0 !important; 631 background: transparent !important; 632 box-shadow: none !important; 633 scrollbar-width: thin !important; 634 scrollbar-color: rgba(185,143,214,.22) rgba(255,255,255,.02) !important; 635 } 636 637 #currency-grid::-webkit-scrollbar {
638 width: 6px; 639 } 640 641 #currency-grid::-webkit-scrollbar-track { 642 background: rgba(255,255,255,.02); 643 border-radius: 999px; 644 } 645 646 #currency-grid::-webkit-scrollbar-thumb { 647 border-radius: 999px; 648 background: rgba(185,143,214,.22); 649 } 650 651 #currency-grid .currency-btn { 652 position: relative !important; 653 width: 100% !important; 654 min-width: 0 !important; 655 height: 34px !important; 656 padding: 0 30px 0 9px !important; 657 display: grid !important; 658 grid-template-columns: 42px minmax(0,1fr) !important; 659 align-items: center !important; 660 gap: 5px !important; 661 border: 0 !important; 662 border-radius: 7px !important; 663 background: transparent !important; 664 box-shadow: none !important; 665 color: rgba(255,255,255,.72) !important; 666 text-align: left !important; 667 font-size: 10.5px !important; 668 line-height: 1 !important; 669 font-weight: 720 !important; 670 letter-spacing: .03em !important; 671 cursor: pointer !important; 672 transition: 673 background 120ms ease, 674 color 120ms ease !important; 675 } 676 677 #currency-grid .currency-btn::after { 678 display: block !important; 679 min-width: 0 !important; 680 overflow: hidden !important; 681 color: rgba(255,255,255,.30) !important; 682 font-size: 9.5px !important; 683 line-height: 1 !important; 684 font-weight: 500 !important; 685 letter-spacing: 0 !important; 686 text-overflow: ellipsis !important; 687 white-space: nowrap !important; 688 } 689 690 #currency-grid .currency-btn[data-currency="AUD"]::after { content: "Australian Dollar"; } 691 #currency-grid .currency-btn[data-currency="BRL"]::after { content: "Brazilian Real"; } 692 #currency-grid .currency-btn[data-currency="CAD"]::after { content: "Canadian Dollar"; } 693 #currency-grid .currency-btn[data-currency="DKK"]::after { content: "Danish Krone"; } 694 #currency-grid .currency-btn[data-currency="EUR"]::after { content: "Euro"; } 695 #currency-grid .currency-btn[data-currency="NOK"]::after { content: "Norwegian Krone"; } 696 #currency-grid .currency-btn[data-currency="NZD"]::after { content: "New Zealand Dollar"; } 697 #currency-grid .currency-btn[data-currency="PLN"]::after { content: "Polish Zloty"; } 698 #currency-grid .currency-btn[data-currency="GBP"]::after { content: "British Pound"; } 699 #currency-grid .currency-btn[data-currency="SEK"]::after { content: "Swedish Krona"; } 700 #currency-grid .currency-btn[data-currency="TRY"]::after { content: "Turkish Lira"; } 701 #currency-grid .currency-btn[data-currency="USD"]::after { content: "US Dollar"; } 702 703 #currency-grid .currency-btn:hover { 704 background: rgba(255,255,255,.04) !important; 705 color: rgba(255,255,255,.94) !important; 706 transform: none !important; 707 } 708 709 #currency-grid .currency-btn:hover::after { 710 color: rgba(255,255,255,.46) !important; 711 } 712 713 #currency-grid .currency-btn.active { 714 background: rgba(185,143,214,.085) !important; 715 color: rgba(235,220,244,.96) !important; 716 border: 0 !important; 717 box-shadow: none !important; 718 transform: none !important; 719 } 720 721 #currency-grid .currency-btn.active::before { 722 content: "â" !important; 723 position: absolute !important; 724 right: 10px !important; 725 top: 50% !important; 726 transform: translateY(-50%) !important; 727 color: rgba(204,173,222,.82) !important; 728 font-size: 10px !important; 729 font-weight: 800 !important; 730 } 731 732 #currency-grid .currency-btn.active::after { 733 color: rgba(211,190,224,.55) !important; 734 } 735 736 /* ========================================================= 737 AUTH / ACCOUNT â EXACT PRODUCT PAGE MATCH 738 ========================================================= */ 739 740 #desktopAuth.auth-wrap { 741 position: relative !important; 742 z-index: 1200 !important; 743 width: 104px !important; 744 min-width: 104px !important; 745 flex: 0 0 104px !important; 746 display: inline-flex !important; 747 align-items: center !important; 748 justify-content: flex-end !important; 749 } 750 751 /* Keep auth content out of paint until we have either a cached or verified state. */ 752 #desktopAuth.auth-wrap:not([data-auth-ready="true"]) { 753 visibility: hidden !important; 754 } 755 756 #open-login.login-pill { 757 width: 104px !important; 758 min-width: 104px !important; 759 justify-content: center !important; 760 height: 34px !important; 761 padding: 0 8px !important; 762 display: inline-flex !important; 763 align-items: center !important; 764 gap: 6px !important; 765 border: 0 !important; 766 border-radius: 8px !important; 767 background: transparent !important; 768 box-shadow: none !important; 769 color: rgba(232,218,240,.82) !important; 770 font-size: 11.5px !important; 771 font-weight: 700 !important; 772 } 773 774 #open-login.login-pill:hover { 775 background: rgba(255,255,255,.04) !important; 776 color: #fff !important; 777 } 778 779 /* Logged-out button stays close to Currency while the 104px auth slot remains reserved. */ 780 #desktopAuth.auth-wrap:has(#open-login:not(.hidden):not([hidden])) { 781 justify-content: flex-start !important; 782 } 783 #desktopAuth.auth-wrap #open-login.login-pill:not(.hidden):not([hidden]) { 784 width: auto !important; 785 min-width: 0 !important; 786 max-width: none !important; 787 flex: 0 0 auto !important; 788 padding-inline: 8px !important; 789 } 790 791 #desktopUserBtn.user-pill { 792 width: 104px !important; 793 min-width: 104px !important; 794 max-width: 104px !important; 795 height: 34px !important; 796 padding: 0 6px 0 3px !important; 797 display: inline-flex !important; 798 align-items: center !important; 799 gap: 6px !important; 800 border: 0 !important; 801 border-radius: 8px !important; 802 background: transparent !important; 803 box-shadow: none !important; 804 color: rgba(255,255,255,.72) !important; 805 cursor: pointer !important; 806 user-select: none !important; 807 -webkit-user-select: none !important; 808 } 809 810 #desktopUserBtn.user-pill:hover, 811 #desktopUserBtn.user-pill[aria-expanded="true"] { 812 background: rgba(255,255,255,.03) !important; 813 } 814 815 #desktopUserBtn .user-avatar { 816 width: 26px !important;
817 height: 26px !important; 818 flex: 0 0 26px !important; 819 display: block !important; 820 border-radius: 8px !important; 821 border: 1px solid rgba(255,255,255,.075) !important; 822 object-fit: cover !important; 823 background: rgba(185,143,214,.10) !important; 824 } 825 826 #desktopUserBtn .user-name { 827 flex: 1 1 auto !important; 828 min-width: 0 !important; 829 max-width: none !important; 830 overflow: hidden !important; 831 color: rgba(255,255,255,.58) !important; 832 font-size: 9.5px !important; 833 font-weight: 620 !important; 834 line-height: 1 !important; 835 text-overflow: ellipsis !important; 836 white-space: nowrap !important; 837 } 838 839 #desktopUserBtn:hover .user-name, 840 #desktopUserBtn[aria-expanded="true"] .user-name { 841 color: rgba(255,255,255,.86) !important; 842 } 843 844 #desktopUserBtn > svg:last-child, 845 #desktopUserBtn > i:last-child { 846 width: 11px !important; 847 height: 11px !important; 848 color: rgba(255,255,255,.24) !important; 849 transition: 850 color 120ms ease, 851 transform 120ms ease !important; 852 } 853 854 #desktopUserBtn[aria-expanded="true"] > svg:last-child, 855 #desktopUserBtn[aria-expanded="true"] > i:last-child { 856 color: rgba(202,178,216,.65) !important; 857 transform: rotate(180deg) !important; 858 } 859 860 #desktopUserDropdown.urs-account-menu-minimal { 861 position: fixed !important; 862 top: 72px !important; 863 right: 12px !important; 864 left: auto !important; 865 z-index: 995 !important; 866 width: 220px !important; 867 margin: 0 !important; 868 padding: 5px !important; 869 overflow: hidden !important; 870 border: 1px solid rgba(255,255,255,.10) !important; 871 border-radius: 13px !important; 872 background: rgba(12,14,18,.38) !important; 873 box-shadow: 0 22px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.075) !important; 874 backdrop-filter: blur(44px) saturate(150%) brightness(.88) !important; 875 -webkit-backdrop-filter: blur(44px) saturate(150%) brightness(.88) !important; 876 opacity: 1 !important; 877 visibility: hidden !important; 878 pointer-events: none !important; 879 transform: translateY(calc(-100% - 16px)) !important; 880 transform-origin: top right !important; 881 transition: transform 220ms cubic-bezier(.4,0,.2,1), visibility 0s linear 220ms !important; 882 } 883 884 #desktopUserDropdown.urs-account-menu-minimal.active { 885 visibility: visible !important; 886 pointer-events: auto !important; 887 transform: translateY(0) !important; 888 transition: transform 280ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s !important; 889 } 890 891 #desktopUserDropdown.urs-account-menu-minimal > * { 892 opacity: 1 !important; 893 transform: none !important; 894 transition: none !important; 895 } 896 897 .urs-account-mini-profile { 898 min-height: 48px !important; 899 margin-bottom: 2px !important; 900 border-radius: 9px !important; 901 background: rgba(255,255,255,.018) !important; 902 padding: 6px 7px !important; 903 display: flex !important; 904 align-items: center !important; 905 gap: 7px !important; 906 } 907 908 .urs-account-mini-profile #dropdownUserAvatar { 909 width: 32px !important; 910 height: 32px !important; 911 flex: 0 0 32px !important; 912 display: block !important; 913 border-radius: 8px !important; 914 border: 1px solid rgba(255,255,255,.09) !important; 915 object-fit: cover !important; 916 background: rgba(255,255,255,.035) !important; 917 box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; 918 } 919 920 .urs-account-mini-identity { 921 min-width: 0 !important; 922 display: flex !important; 923 flex-direction: column !important; 924 gap: 3px !important; 925 } 926 927 #desktopUserDropdown.urs-account-menu-minimal .user-dropdown-name { 928 margin: 0 !important; 929 max-width: 150px !important; 930 overflow: hidden !important; 931 color: rgba(255,255,255,.94) !important; 932 font-size: 11px !important; 933 line-height: 1 !important; 934 font-weight: 720 !important; 935 letter-spacing: -.01em !important; 936 text-overflow: ellipsis !important; 937 white-space: nowrap !important; 938 } 939 940 #desktopUserDropdown.urs-account-menu-minimal .user-dropdown-sub { 941 margin: 0 !important; 942 max-width: 150px !important; 943 overflow: hidden !important; 944 color: rgba(255,255,255,.38) !important; 945 font-size: 8px !important; 946 line-height: 1 !important; 947 font-weight: 560 !important; 948 text-overflow: ellipsis !important; 949 white-space: nowrap !important; 950 } 951 952 .urs-account-mini-links { 953 padding: 4px 1px !important; 954 display: flex !important; 955 flex-direction: column !important; 956 gap: 2px !important; 957 border-top: 1px solid rgba(255,255,255,.055) !important; 958 } 959 960 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link, 961 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout { 962 position: relative !important; 963 width: 100% !important; 964 height: 32px !important; 965 min-height: 32px !important; 966 padding: 0 7px !important; 967 display: flex !important; 968 align-items: center !important; 969 justify-content: flex-start !important; 970 gap: 7px !important; 971 border: 1px solid transparent !important; 972 border-radius: 7px !important; 973 background: transparent !important; 974 box-shadow: none !important; 975 color: rgba(255,255,255,.57) !important; 976 text-decoration: none !important; 977 font-size: 10px !important; 978 font-weight: 620 !important; 979 transition: background 130ms ease, color 130ms ease, border-color 130ms ease !important; 980 } 981 982 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link > svg, 983 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link > i, 984 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout > svg, 985 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout > i { 986 width: 17px !important; 987 height: 17px !important; 988 flex: 0 0 17px !important; 989 padding: 0 !important; 990 box-sizing: border-box !important; 991 border: 0 !important; 992 border-radius: 0 !important; 993 background: transparent !important; 994 color: rgba(207,188,220,.58) !important; 995 stroke-width: 1.8 !important; 996 } 997 998 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:not(.urs-account-staff-link)::after { 999 content: "âº"; 1000 margin-left: auto; 1001 color: rgba(255,255,255,.20); 1002 font-size: 14px; 1003 line-height: 1; 1004 font-weight: 400; 1005 transform: translateY(-1px); 1006 } 1007 1008 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:hover { 1009 background: rgba(255,255,255,.045) !important; 1010 border-color: rgba(255,255,255,.045) !important; 1011 color: rgba(255,255,255,.92) !important; 1012 } 1013 1014 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:hover > svg, 1015 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-link:hover > i { 1016 background: transparent !important; 1017 color: rgba(222,205,233,.82) !important; 1018 } 1019 1020 .urs-account-mini-divider { 1021 height: 1px !important; 1022 margin: 3px 3px !important; 1023 background: rgba(255,255,255,.055) !important; 1024 } 1025 1026 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout { 1027 margin: 1px 2px 2px !important; 1028 width: calc(100% - 4px) !important; 1029 color: rgba(255,255,255,.42) !important; 1030 } 1031 1032 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout:hover { 1033 background: rgba(255,84,110,.05) !important; 1034 border-color: rgba(255,84,110,.06) !important; 1035 color: rgba(255,144,160,.88) !important; 1036 } 1037 1038 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout:hover > svg, 1039 #desktopUserDropdown.urs-account-menu-minimal .urs-account-mini-logout:hover > i { 1040 color: rgba(255,144,160,.78) !important; 1041 background: rgba(255,84,110,.035) !important; 1042 } 1043 1044 #desktopPartnerSection[hidden], 1045 #mobilePartnerLink[hidden], 1046 #desktopStaffSection[hidden], 1047 #mobileStaffLink[hidden] { 1048 display: none !important; 1049 } 1050 1051 #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-section { 1052 display: block; 1053 padding: 2px 1px !important; 1054 } 1055 1056 #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link { 1057 height: 32px !important; 1058 margin: 0 !important; 1059 padding: 0 7px !important; 1060 border: 1px solid transparent !important; 1061 border-radius: 7px !important; 1062 color: rgba(218,200,230,.76) !important; 1063 background: transparent !important; 1064 box-shadow: none !important; 1065 } 1066 1067 #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link > svg, 1068 #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link > i { 1069 width: 16px !important; 1070 height: 16px !important; 1071 flex: 0 0 16px !important; 1072 padding: 0 !important; 1073 border: 0 !important; 1074 border-radius: 0 !important; 1075 background: transparent !important; 1076 color: rgba(195,164,214,.72) !important; 1077 } 1078 1079 #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link:hover { 1080 color: rgba(244,236,249,.96) !important; 1081 background: rgba(185,143,214,.055) !important; 1082 border-color: transparent !important; 1083 box-shadow: none !important; 1084 } 1085 1086 #desktopUserDropdown.urs-account-menu-minimal .urs-account-staff-link::after { 1087 content: "âº"; 1088 margin-left: 3px; 1089 color: rgba(224,204,236,.26); 1090 font-size: 13px; 1091 line-height: 1; 1092 transform: translateY(-1px); 1093 } 1094 1095 .urs-account-staff-badge { 1096 margin-left: auto !important; 1097 min-width: 30px !important; 1098 height: 16px !important; 1099 padding: 0 5px !important; 1100 display: inline-flex !important; 1101 align-items: center !important; 1102 justify-content: center !important; 1103 border: 1px solid rgba(185,143,214,.13) !important; 1104 border-radius: 999px !important; 1105 color: rgba(221,200,234,.62) !important; 1106 background: rgba(185,143,214,.03) !important; 1107 box-shadow: none !important; 1108 font-size: 6px !important; 1109 line-height: 1 !important; 1110 font-weight: 800 !important; 1111 letter-spacing: .09em !important; 1112 } 1113 1114 1115 /* Used only when another top-bar dropdown replaces the current one. */ 1116 #desktopUserDropdown.urs-topbar-instant-close, 1117 #dropdown-wrapper.urs-topbar-instant-close, 1118 #aboutMegaMenu.urs-topbar-instant-close { 1119 display: none !important; 1120 visibility: hidden !important; 1121 opacity: 0 !important; 1122 pointer-events: none !important; 1123 transition: none !important; 1124 animation: none !important; 1125 } 1126 1127 .urs-topbar-instant-close *, 1128 .urs-topbar-instant-close::before, 1129 .urs-topbar-instant-close::after, 1130 .urs-topbar-instant-close *::before, 1131 .urs-topbar-instant-close *::after { 1132 transition: none !important; 1133 animation: none !important; 1134 } 1135</style><style id="urs-auth-logged-out-safety"> 1136 #desktopUserBtn.hidden { 1137 display: none !important; 1138 } 1139 1140 #desktopUserDropdown:not(.active) { 1141 visibility: hidden !important; 1142 pointer-events: none !important; 1143 } 1144</style><style id="urs-home-exact-product-currency"> 1145 /* =========================================================
1146 CURRENCY MENU â COMPACT MINIMAL REDESIGN 1147 ========================================================= */ 1148 1149 #currency-widget-container { 1150 position: relative; 1151 z-index: 1100; 1152 } 1153 1154 /* Flat trigger â no permanent box. */ 1155 #trigger-btn { 1156 width: auto !important; 1157 min-width: 0 !important; 1158 height: 34px !important; 1159 padding: 0 7px !important; 1160 display: inline-flex !important; 1161 align-items: center !important; 1162 justify-content: center !important; 1163 gap: 5px !important; 1164 border: 0 !important; 1165 border-radius: 7px !important; 1166 background: transparent !important; 1167 box-shadow: none !important; 1168 color: rgba(255,255,255,.58) !important; 1169 } 1170 1171 #trigger-btn #active-label { 1172 color: rgba(255,255,255,.62) !important; 1173 font-size: 11px !important; 1174 font-weight: 700 !important; 1175 line-height: 1 !important; 1176 letter-spacing: .035em !important; 1177 } 1178 1179 #trigger-btn #widget-arrow { 1180 width: 11px !important; 1181 height: 11px !important; 1182 color: rgba(255,255,255,.25) !important; 1183 transition: 1184 transform 150ms ease, 1185 color 150ms ease; 1186 } 1187 1188 #trigger-btn:hover, 1189 #trigger-btn[aria-expanded="true"] { 1190 background: rgba(255,255,255,.035) !important; 1191 } 1192 1193 #trigger-btn:hover #active-label, 1194 #trigger-btn[aria-expanded="true"] #active-label { 1195 color: rgba(245,240,248,.9) !important; 1196 } 1197 1198 #trigger-btn:hover #widget-arrow, 1199 #trigger-btn[aria-expanded="true"] #widget-arrow { 1200 color: rgba(198,168,216,.62) !important; 1201 } 1202 1203 #trigger-btn[aria-expanded="true"] #widget-arrow { 1204 transform: rotate(180deg); 1205 } 1206 1207 #dropdown-wrapper[style*="display: block"], 1208 #dropdown-wrapper:not([style*="display: none"]) { 1209 animation: none !important; 1210 } 1211 1212 @keyframes currencyMenuOpen { 1213 from { 1214 opacity: 0; 1215 transform: translateY(-4px); 1216 } 1217 to { 1218 opacity: 1; 1219 transform: translateY(0); 1220 } 1221 } 1222 1223 .currency-menu-title { 1224 height: 30px; 1225 padding: 0 8px; 1226 display: flex; 1227 align-items: center; 1228 color: rgba(255,255,255,.30); 1229 font-size: 9px; 1230 font-weight: 720; 1231 letter-spacing: .11em; 1232 text-transform: uppercase; 1233 border-bottom: 1px solid rgba(255,255,255,.045); 1234 margin-bottom: 4px; 1235 } 1236 1237 #currency-grid { 1238 width: 100% !important; 1239 max-height: 310px !important; 1240 overflow-y: auto !important; 1241 padding: 0 !important; 1242 display: flex !important; 1243 flex-direction: column !important; 1244 gap: 1px !important; 1245 border: 0 !important; 1246 border-radius: 0 !important; 1247 background: transparent !important; 1248 box-shadow: none !important; 1249 } 1250 1251 #currency-grid .currency-btn { 1252 position: relative; 1253 width: 100% !important; 1254 min-width: 0 !important; 1255 height: 34px !important; 1256 padding: 0 30px 0 9px !important; 1257 display: grid !important; 1258 grid-template-columns: 42px minmax(0,1fr) !important; 1259 align-items: center !important; 1260 gap: 5px !important; 1261 border: 0 !important; 1262 border-radius: 7px !important; 1263 background: transparent !important; 1264 box-shadow: none !important; 1265 color: rgba(255,255,255,.72) !important; 1266 text-align: left !important; 1267 font-size: 10.5px !important; 1268 line-height: 1 !important; 1269 font-weight: 720 !important; 1270 letter-spacing: .03em !important; 1271 cursor: pointer; 1272 transition: 1273 background 120ms ease, 1274 color 120ms ease; 1275 } 1276 1277 #currency-grid .currency-btn::after { 1278 display: block !important; 1279 min-width: 0; 1280 overflow: hidden; 1281 color: rgba(255,255,255,.30); 1282 font-size: 9.5px; 1283 line-height: 1; 1284 font-weight: 500; 1285 letter-spacing: 0; 1286 text-overflow: ellipsis; 1287 white-space: nowrap; 1288 } 1289 1290 #currency-grid .currency-btn[data-currency="AUD"]::after { content: "Australian Dollar"; } 1291 #currency-grid .currency-btn[data-currency="BRL"]::after { content: "Brazilian Real"; } 1292 #currency-grid .currency-btn[data-currency="CAD"]::after { content: "Canadian Dollar"; } 1293 #currency-grid .currency-btn[data-currency="DKK"]::after { content: "Danish Krone"; } 1294 #currency-grid .currency-btn[data-currency="EUR"]::after { content: "Euro"; } 1295 #currency-grid .currency-btn[data-currency="NOK"]::after { content: "Norweg
1295ian Krone"; } 1296 #currency-grid .currency-btn[data-currency="NZD"]::after { content: "New Zealand Dollar"; } 1297 #currency-grid .currency-btn[data-currency="PLN"]::after { content: "Polish Zloty"; } 1298 #currency-grid .currency-btn[data-currency="GBP"]::after { content: "British Pound"; } 1299 #currency-grid .currency-btn[data-currency="SEK"]::after { content: "Swedish Krona"; } 1300 #currency-grid .currency-btn[data-currency="TRY"]::after { content: "Turkish Lira"; } 1301 #currency-grid .currency-btn[data-currency="USD"]::after { content: "US Dollar"; } 1302 1303 #currency-grid .currency-btn:hover { 1304 background: rgba(255,255,255,.04) !important; 1305 color: rgba(255,255,255,.94) !important; 1306 transform: none !important; 1307 } 1308 1309 #currency-grid .currency-btn:hover::after { 1310 color: rgba(255,255,255,.46); 1311 } 1312 1313 #currency-grid .currency-btn.active { 1314 background: rgba(185,143,214,.085) !important; 1315 color: rgba(235,220,244,.96) !important; 1316 border: 0 !important; 1317 box-shadow: none !important; 1318 transform: none !important; 1319 } 1320 1321 #currency-grid .currency-btn.active::before { 1322 content: "â"; 1323 position: absolute; 1324 right: 10px; 1325 top: 50%; 1326 transform: translateY(-50%); 1327 color: rgba(204,173,222,.82); 1328 font-size: 10px; 1329 font-weight: 800; 1330 } 1331 1332 #currency-grid .currency-btn.active::after { 1333 color: rgba(211,190,224,.55); 1334 } 1335 1336 /* Remove all pieces from the previous currency redesign. */ 1337 .currency-dropdown-panel, 1338 .currency-dropdown-head, 1339 .currency-dropdown-head-icon, 1340 .currency-dropdown-head-copy, 1341 .currency-dropdown-foot, 1342 #trigger-btn .currency-trigger-icon { 1343 display: none !important; 1344 } 1345 1346 #currency-grid { 1347 scrollbar-width: thin; 1348 scrollbar-color: rgba(185,143,214,.28) transparent; 1349 } 1350 1351 #currency-grid::-webkit-scrollbar {
1352 width: 4px; 1353 } 1354 1355 #currency-grid::-webkit-scrollbar-track { 1356 background: transparent; 1357 } 1358 1359 #currency-grid::-webkit-scrollbar-thumb { 1360 border-radius: 999px; 1361 background: rgba(185,143,214,.24); 1362 } 1363 1364 @media (max-width: 520px) { 1365 #dropdown-wrapper { 1366 right: 0 !important; 1367 width: 220px !important; 1368 } 1369 } 1370</style><style id="urs-auth-visibility-safety"> 1371 #open-login.hidden, 1372 .open-login-btn.hidden, 1373 #open-login[hidden], 1374 .open-login-btn[hidden] { 1375 display: none !important; 1376 } 1377 1378 #desktopUserBtn.hidden, 1379 #desktopUserBtn[hidden] { 1380 display: none !important; 1381 } 1382</style><style id="urs-mobile-drawer-base-fix"> 1383/* ========================================================= 1384 UNREAL STUDIOS MOBILE MENU â PREMIUM COMPACT RESTYLE 1385 Same IDs/behavior, redesigned presentation only. 1386 ========================================================= */ 1387 1388.us-menu { 1389 position: relative; 1390 z-index: 20000; 1391} 1392 1393.us-menu .menu-overlay { 1394 position: fixed !important; 1395 inset: 0 !important; 1396 z-index: 20000 !important; 1397 display: block !important; 1398 width: 100vw !important; 1399 height: 100dvh !important; 1400 margin: 0 !important; 1401 background: rgba(3,3,7,.70) !important; 1402 backdrop-filter: blur(9px) saturate(112%) !important; 1403 -webkit-backdrop-filter: blur(9px) saturate(112%) !important; 1404 opacity: 0 !important; 1405 visibility: hidden !important; 1406 pointer-events: none !important; 1407 transition: opacity 180ms ease, visibility 180ms ease !important; 1408} 1409 1410.us-menu .menu-overlay.active { 1411 opacity: 1 !important; 1412 visibility: visible !important; 1413 pointer-events: auto !important; 1414} 1415 1416.us-menu .drawer { 1417 position: fixed !important; 1418 top: 10px !important; 1419 right: 10px !important; 1420 bottom: 10px !important; 1421 left: auto !important; 1422 z-index: 20001 !important; 1423 1424 width: min(360px, calc(100vw - 20px)) !important; 1425 height: auto !important; 1426 max-height: calc(100dvh - 20px) !important; 1427 margin: 0 !important; 1428 padding: 0 !important; 1429 1430 overflow: hidden !important; 1431 border: 1px solid rgba(255,255,255,.075) !important; 1432 border-radius: 20px !important; 1433 1434 background: 1435 radial-gradient(circle at 82% -4%, rgba(185,143,214,.12), transparent 180px), 1436 linear-gradient(180deg, rgba(17,17,23,.99), rgba(10,10,15,.995)) !important; 1437 1438 box-shadow: 1439 0 30px 90px rgba(0,0,0,.58), 1440 inset 0 1px 0 rgba(255,255,255,.025) !important; 1441 1442 transform: translate3d(calc(100% + 24px),0,0) scale(.985) !important; 1443 opacity: 0 !important; 1444 visibility: hidden !important; 1445 pointer-events: none !important; 1446 1447 transition: 1448 transform 220ms cubic-bezier(.22,.8,.24,1), 1449 opacity 180ms ease, 1450 visibility 220ms ease !important; 1451 1452 will-change: transform, opacity; 1453} 1454 1455.us-menu .drawer.active { 1456 transform: translate3d(0,0,0) scale(1) !important; 1457 opacity: 1 !important; 1458 visibility: visible !important; 1459 pointer-events: auto !important; 1460} 1461 1462.us-menu .drawer-inner { 1463 width: 100% !important; 1464 height: 100% !important; 1465 max-height: calc(100dvh - 20px) !important; 1466 padding: 0 14px 16px !important; 1467 overflow-x: hidden !important; 1468 overflow-y: auto !important; 1469 overscroll-behavior: contain; 1470 -webkit-overflow-scrolling: touch; 1471 scrollbar-width: none; 1472} 1473 1474.us-menu .drawer-inner::-webkit-scrollbar {
1475 display: none; 1476} 1477 1478/* Header */ 1479.us-menu .drawer .topbar { 1480 position: sticky !important; 1481 top: 0 !important; 1482 z-index: 5 !important; 1483 1484 height: 72px !important; 1485 min-height: 72px !important; 1486 margin: 0 -14px 8px !important; 1487 padding: 0 14px !important; 1488 1489 display: flex !important; 1490 align-items: center !important; 1491 justify-content: space-between !important; 1492 1493 border: 0 !important; 1494 border-bottom: 1px solid rgba(255,255,255,.05) !important; 1495 background: rgba(14,14,20,.92) !important; 1496 backdrop-filter: blur(18px) !important; 1497 -webkit-backdrop-filter: blur(18px) !important; 1498 box-shadow: none !important; 1499} 1500 1501.us-menu .drawer .brand { 1502 display: flex !important; 1503 flex-direction: column !important; 1504 align-items: flex-start !important; 1505 justify-content: center !important; 1506 gap: 4px !important; 1507 min-width: 0 !important; 1508} 1509 1510.us-menu .drawer .brand img { 1511 display: block !important; 1512 width: 104px !important; 1513 height: auto !important; 1514} 1515 1516 1517.us-menu .drawer .close-btn { 1518 position: static !important; 1519 width: 36px !important; 1520 height: 36px !important; 1521 min-width: 36px !important; 1522 padding: 0 !important; 1523 1524 display: inline-grid !important; 1525 place-items: center !important; 1526 1527 border: 1px solid rgba(255,255,255,.06) !important; 1528 border-radius: 10px !important; 1529 background: rgba(255,255,255,.025) !important; 1530 color: rgba(255,255,255,.48) !important; 1531 1532 font-size: 13px !important; 1533 line-height: 1 !important; 1534 cursor: pointer !important; 1535 1536 transition: 1537 background 140ms ease, 1538 border-color 140ms ease, 1539 color 140ms ease, 1540 transform 140ms ease !important; 1541} 1542 1543.us-menu .drawer .close-btn:hover { 1544 border-color: rgba(185,143,214,.20) !important; 1545 background: rgba(185,143,214,.075) !important; 1546 color: rgba(255,255,255,.92) !important; 1547 transform: rotate(3deg) !important; 1548} 1549 1550/* Groups */ 1551.us-menu .group { 1552 width: 100% !important; 1553 margin: 0 !important; 1554 padding: 12px 0 !important; 1555 border: 0 !important; 1556 border-top: 1px solid rgba(255,255,255,.045) !important; 1557} 1558 1559.us-menu .group:first-of-type { 1560 padding-top: 4px !important; 1561 border-top: 0 !important; 1562} 1563 1564.us-menu .section-title { 1565 margin: 0 0 8px !important; 1566 padding: 0 5px !important; 1567 color: rgba(255,255,255,.28) !important; 1568 font-size: 8px !important; 1569 font-weight: 780 !important; 1570 line-height: 1 !important; 1571 letter-spacing: .13em !important; 1572 text-transform: uppercase !important; 1573} 1574 1575/* Main nav */ 1576.us-menu .nav-list { 1577 display: grid !important; 1578 gap: 5px !important; 1579} 1580 1581.us-menu .nav-item, 1582.us-menu .nav-toggle { 1583 width: 100% !important; 1584 min-height: 48px !important; 1585 padding: 5px 9px 5px 7px !important; 1586 1587 display: flex !important; 1588 align-items: center !important; 1589 justify-content: space-between !important; 1590 gap: 10px !important; 1591 1592 border: 1px solid transparent !important; 1593 border-radius: 11px !important; 1594 background: transparent !important; 1595 color: rgba(255,255,255,.62) !important; 1596 1597 font: inherit !important; 1598 font-size: 11px !important; 1599 font-weight: 660 !important; 1600 text-align: left !important; 1601 text-decoration: none !important; 1602 cursor: pointer !important; 1603 1604 transition: 1605 background 130ms ease, 1606 border-color 130ms ease, 1607 color 130ms ease, 1608 transform 130ms ease !important; 1609} 1610 1611.us-menu .nav-item:hover, 1612.us-menu .nav-toggle:hover { 1613 border-color: rgba(255,255,255,.055) !important; 1614 background: rgba(255,255,255,.028) !important; 1615 color: rgba(255,255,255,.92) !important; 1616 transform: translateX(2px) !important; 1617} 1618 1619.us-menu .nav-left { 1620 min-width: 0 !important; 1621 display: flex !important; 1622 align-items: center !important; 1623 gap: 10px !important; 1624} 1625 1626.us-menu .nav-icon { 1627 width: 34px !important; 1628 height: 34px !important; 1629 flex: 0 0 34px !important; 1630 1631 display: grid !important; 1632 place-items: center !important; 1633 1634 border: 1px solid rgba(255,255,255,.045) !important; 1635 border-radius: 9px !important; 1636 background: rgba(255,255,255,.018) !important; 1637 color: rgba(202,173,220,.72) !important; 1638 1639 font-size: 12px !important; 1640} 1641 1642.us-menu .nav-arrow { 1643 color: rgba(255,255,255,.17) !important; 1644 font-size: 8px !important; 1645 transition: transform 150ms ease, color 150ms ease !important; 1646} 1647 1648.us-menu .nav-item:hover .nav-arrow, 1649.us-menu .nav-toggle:hover .nav-arrow { 1650 color: rgba(204,176,220,.58) !important; 1651} 1652 1653.us-menu #usScriptsToggle.open .nav-arrow { 1654 transform: rotate(180deg) !important; 1655 color: rgba(204,176,220,.70) !important; 1656} 1657 1658/* Products submenu */ 1659.us-menu .submenu { 1660 max-height: 0 !important; 1661 overflow: hidden !important; 1662 opacity: 0 !important; 1663 transition: 1664 max-height 180ms ease, 1665 opacity 140ms ease, 1666 margin 180ms ease !important; 1667} 1668 1669.us-menu .submenu.open { 1670 max-height: 100px !important; 1671 margin-top: 2px !important; 1672 opacity: 1 !important; 1673} 1674 1675.us-menu .submenu-inner { 1676 padding: 4px 3px 2px 51px !important; 1677 display: grid !important; 1678 grid-template-columns: repeat(3,minmax(0,1fr)) !important; 1679 gap: 5px !important; 1680} 1681 1682.us-menu .submenu-inner a { 1683 min-width: 0 !important; 1684 min-height: 33px !important; 1685 padding: 0 6px !important; 1686 1687 display: flex !important;
1688 align-items: center !important; 1689 justify-content: center !important; 1690 1691 border: 1px solid rgba(255,255,255,.045) !important; 1692 border-radius: 8px !important; 1693 background: rgba(255,255,255,.012) !important; 1694 color: rgba(255,255,255,.34) !important; 1695 1696 font-size: 8.5px !important; 1697 font-weight: 670 !important; 1698 text-decoration: none !important; 1699 white-space: nowrap !important; 1700 1701 transition: 1702 background 120ms ease, 1703 border-color 120ms ease, 1704 color 120ms ease !important; 1705} 1706 1707.us-menu .submenu-inner a:hover { 1708 border-color: rgba(185,143,214,.13) !important; 1709 background: rgba(185,143,214,.055) !important; 1710 color: rgba(235,224,241,.90) !important; 1711} 1712 1713/* Socials */ 1714.us-menu .social-grid { 1715 display: grid !important; 1716 grid-template-columns: repeat(3,minmax(0,1fr)) !important; 1717 gap: 6px !important; 1718} 1719 1720.us-menu .social-btn { 1721 min-width: 0 !important; 1722 min-height: 66px !important; 1723 padding: 9px 5px !important; 1724 1725 display: flex !important; 1726 flex-direction: column !important; 1727 align-items: center !important; 1728 justify-content: center !important; 1729 gap: 7px !important; 1730 1731 border: 1px solid rgba(255,255,255,.05) !important; 1732 border-radius: 11px !important; 1733 background: rgba(255,255,255,.015) !important; 1734 color: rgba(255,255,255,.38) !important; 1735 1736 font-size: 9px !important; 1737 font-weight: 650 !important; 1738 text-decoration: none !important; 1739 1740 transition: 1741 transform 130ms ease, 1742 background 130ms ease, 1743 border-color 130ms ease, 1744 color 130ms ease !important; 1745} 1746 1747.us-menu .social-btn i { 1748 font-size: 16px !important; 1749 color: rgba(199,171,216,.66) !important; 1750} 1751 1752.us-menu .social-btn:hover { 1753 transform: translateY(-2px) !important; 1754 border-color: rgba(185,143,214,.14) !important; 1755 background: rgba(185,143,214,.045) !important; 1756 color: rgba(255,255,255,.88) !important; 1757} 1758 1759/* Currency */ 1760.us-menu .currency-grid { 1761 display: grid !important; 1762 grid-template-columns: repeat(4,minmax(0,1fr)) !important; 1763 gap: 5px !important; 1764} 1765 1766.us-menu .currency-grid .currency-btn { 1767 width: 100% !important; 1768 height: 34px !important; 1769 padding: 0 !important; 1770 1771 border: 1px solid rgba(255,255,255,.045) !important; 1772 border-radius: 8px !important; 1773 background: rgba(255,255,255,.012) !important; 1774 color: rgba(255,255,255,.34) !important; 1775 1776 font-size: 9px !important; 1777 font-weight: 720 !important; 1778 letter-spacing: .02em !important; 1779 1780 cursor: pointer !important; 1781 transition: 1782 background 120ms ease, 1783 border-color 120ms ease, 1784 color 120ms ease, 1785 transform 120ms ease !important; 1786} 1787 1788.us-menu .currency-grid .currency-btn:hover { 1789 border-color: rgba(255,255,255,.075) !important; 1790 background: rgba(255,255,255,.03) !important; 1791 color: rgba(255,255,255,.76) !important; 1792 transform: translateY(-1px) !important; 1793} 1794 1795.us-menu .currency-grid .currency-btn.active { 1796 border-color: rgba(185,143,214,.20) !important; 1797 background: rgba(185,143,214,.095) !important; 1798 color: rgba(236,223,244,.96) !important; 1799 box-shadow: inset 0 0 0 1px rgba(185,143,214,.025) !important; 1800} 1801 1802/* Basket + account */ 1803.us-menu .basket-btn, 1804.us-menu .login-btn { 1805 width: 100% !important; 1806 min-height: 44px !important; 1807 padding: 0 12px !important; 1808 1809 display: flex !important; 1810 align-items: center !important; 1811 justify-content: center !important; 1812 gap: 9px !important; 1813 1814 border-radius: 10px !important; 1815 text-decoration: none !important; 1816 font-size: 10px !important; 1817 font-weight: 720 !important; 1818 1819 transition: 1820 transform 130ms ease, 1821 border-color 130ms ease, 1822 background 130ms ease, 1823 color 130ms ease !important; 1824} 1825 1826.us-menu .basket-btn { 1827 border: 1px solid rgba(255,255,255,.10) !important; 1828 background: rgba(255,255,255,.94) !important; 1829 color: #101014 !important; 1830} 1831 1832.us-menu .basket-btn:hover { 1833 background: #fff !important; 1834 color: #08080c !important; 1835 transform: translateY(-1px) !important; 1836} 1837 1838.us-menu .login-btn { 1839 border: 1px solid rgba(185,143,214,.16) !important; 1840 background: rgba(185,143,214,.065) !important; 1841 color: rgba(233,219,242,.88) !important; 1842} 1843 1844.us-menu .login-btn:hover { 1845 border-color: rgba(185,143,214,.26) !important; 1846 background: rgba(185,143,214,.10) !important; 1847 color: #fff !important; 1848} 1849 1850.us-menu .basket-btn i, 1851.us-menu .login-btn i { 1852 font-size: 11px !important; 1853} 1854 1855/* Visibility */
1856@media (min-width: 1181px) { 1857 .us-menu { 1858 display: none !important; 1859 } 1860} 1861 1862@media (max-width: 1180px) { 1863 .us-menu { 1864 display: block !important; 1865 } 1866} 1867 1868@media (max-width: 480px) { 1869 .us-menu .drawer { 1870 top: 6px !important; 1871 right: 6px !important; 1872 bottom: 6px !important; 1873 width: calc(100vw - 12px) !important; 1874 max-height: calc(100dvh - 12px) !important; 1875 border-radius: 17px !important; 1876 } 1877 1878 .us-menu .drawer-inner { 1879 max-height: calc(100dvh - 12px) !important; 1880 padding-left: 11px !important; 1881 padding-right: 11px !important; 1882 } 1883 1884 .us-menu .drawer .topbar { 1885 margin-left: -11px !important; 1886 margin-right: -11px !important; 1887 padding-left: 11px !important; 1888 padding-right: 11px !important; 1889 } 1890 1891 .us-menu .submenu-inner { 1892 padding-left: 45px !important; 1893 } 1894} 1895 1896@media (prefers-reduced-motion: reduce) { 1897 .us-menu .menu-overlay, 1898 .us-menu .drawer, 1899 .us-menu .submenu, 1900 .us-menu .nav-item, 1901 .us-menu .nav-toggle, 1902 .us-menu .social-btn, 1903 .us-menu .currency-btn, 1904 .us-menu .basket-btn, 1905 .us-menu .login-btn { 1906 transition: none !important; 1907 } 1908} 1909</style><style id="urs-mobile-product-submenu-icons"> 1910.us-menu .submenu-inner { 1911 align-items: stretch !important; 1912} 1913 1914.us-menu .submenu-inner a { 1915 min-height: 35px !important; 1916 padding: 0 8px !important; 1917 display: inline-flex !important; 1918 align-items: center !important; 1919 justify-content: center !important; 1920 gap: 5px !important; 1921 text-align: center !important; 1922} 1923 1924.us-menu .submenu-product-icon, 1925.us-menu .submenu-brand-logo { 1926 flex: 0 0 auto !important; 1927 display: inline-block !important; 1928} 1929 1930.us-menu .submenu-product-icon { 1931 width: 10px !important; 1932 font-size: 9px !important; 1933 line-height: 1 !important; 1934 text-align: center !important; 1935 color: rgba(202,173,220,.62) !important; 1936 transition: color 120ms ease, transform 120ms ease !important; 1937} 1938 1939.us-menu .submenu-brand-logo { 1940 width: 11px !important; 1941 height: 11px !important; 1942 object-fit: contain !important; 1943 object-position: center !important; 1944 filter: drop-shadow(0 0 0 rgba(0,0,0,0)) !important; 1945 transition: transform 120ms ease !important; 1946} 1947 1948.us-menu .submenu-brand-logo-fivem { 1949 width: 12px !important; 1950} 1951 1952.us-menu .submenu-brand-logo-minecraft { 1953 width: 11px !important; 1954 height: 11px !important; 1955 image-rendering: -webkit-optimize-contrast; 1956 image-rendering: crisp-edges; 1957} 1958 1959.us-menu .submenu-inner a:hover .submenu-product-icon { 1960 color: rgba(225,204,238,.92) !important; 1961 transform: translateY(-1px) !important; 1962} 1963 1964.us-menu .submenu-inner a:hover .submenu-brand-logo { 1965 transform: translateY(-1px) !important; 1966} 1967 1968.us-menu .submenu-inner a span { 1969 min-width: 0 !important; 1970 overflow: hidden !important; 1971 text-overflow: ellipsis !important; 1972 white-space: nowrap !important; 1973} 1974 1975@media (max-width: 480px) { 1976 .us-menu .submenu-inner { 1977 grid-template-columns: repeat(3, minmax(0,1fr)) !important; 1978 gap: 5px !important; 1979 } 1980 1981 .us-menu .submenu-inner a { 1982 min-height: 34px !important; 1983 padding: 0 7px !important; 1984 font-size: 8.25px !important; 1985 } 1986 1987 .us-menu .submenu-brand-logo-fivem { 1988 width: 11px !important; 1989 } 1990 1991 .us-menu .submenu-brand-logo-minecraft, 1992 .us-menu .submenu-product-icon { 1993 width: 10px !important; 1994 } 1995} 1996</style><style id="urs-mobile-product-submenu-alignment-fix"> 1997/* Products submenu: align exactly with the Products dropdown row */ 1998.us-menu #usScriptsMenu { 1999 width: 100% !important; 2000 margin: 0 !important; 2001 padding: 0 !important; 2002 box-sizing: border-box !important; 2003} 2004 2005.us-menu #usScriptsMenu.open { 2006 margin-top: 6px !important; 2007} 2008 2009.us-menu #usScriptsMenu .submenu-inner { 2010 width: 100% !important; 2011 max-width: none !important; 2012 margin: 0 !important; 2013 padding: 0 !important; 2014 2015 display: grid !important; 2016 grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 2017 align-items: stretch !important; 2018 justify-items: stretch !important; 2019 gap: 6px !important; 2020 2021 box-sizing: border-box !important; 2022} 2023 2024.us-menu #usScriptsMenu .submenu-inner > a { 2025 width: 100% !important; 2026 min-width: 0 !important; 2027 max-width: none !important; 2028 height: 36px !important; 2029 min-height: 36px !important; 2030 margin: 0 !important; 2031 padding: 0 8px !important; 2032 2033 display: flex !important;
2034 align-items: center !important; 2035 justify-content: center !important; 2036 gap: 6px !important; 2037 2038 box-sizing: border-box !important; 2039 overflow: hidden !important; 2040} 2041 2042.us-menu #usScriptsMenu .submenu-inner > a span { 2043 min-width: 0 !important; 2044 max-width: 100% !important; 2045 overflow: hidden !important; 2046 text-overflow: ellipsis !important; 2047 white-space: nowrap !important; 2048} 2049 2050.us-menu #usScriptsMenu .submenu-brand-logo, 2051.us-menu #usScriptsMenu .submenu-product-icon { 2052 flex-shrink: 0 !important; 2053} 2054 2055/* Keep the product row aligned with the same inner edges as Products */ 2056.us-menu .nav-list { 2057 width: 100% !important; 2058 box-sizing: border-box !important; 2059} 2060 2061@media (max-width: 480px) { 2062 .us-menu #usScriptsMenu .submenu-inner { 2063 grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 2064 gap: 5px !important; 2065 } 2066 2067 .us-menu #usScriptsMenu .submenu-inner > a { 2068 height: 35px !important; 2069 min-height: 35px !important; 2070 padding: 0 6px !important; 2071 gap: 5px !important; 2072 } 2073} 2074</style><style id="urs-mobile-product-submenu-final-alignment"> 2075/* Final visual alignment for the Products submenu */ 2076.us-menu #usScriptsMenu { 2077 width: calc(100% - 12px) !important; 2078 margin-left: 6px !important; 2079 margin-right: 6px !important; 2080 box-sizing: border-box !important; 2081} 2082 2083.us-menu #usScriptsMenu.open { 2084 margin-top: 5px !important; 2085} 2086 2087.us-menu #usScriptsMenu .submenu-inner { 2088 width: 100% !important; 2089 margin: 0 !important; 2090 padding: 0 !important; 2091 2092 grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 2093 gap: 5px !important; 2094 2095 box-sizing: border-box !important; 2096} 2097 2098.us-menu #usScriptsMenu .submenu-inner > a { 2099 width: 100% !important; 2100 min-width: 0 !important; 2101 height: 35px !important; 2102 min-height: 35px !important; 2103 padding: 0 7px !important; 2104 2105 display: flex !important; 2106 align-items: center !important; 2107 justify-content: center !important; 2108 gap: 5px !important; 2109 2110 box-sizing: border-box !important; 2111} 2112 2113.us-menu #usScriptsMenu .submenu-inner > a span { 2114 flex: 0 1 auto !important; 2115 min-width: 0 !important; 2116 text-align: center !important; 2117} 2118 2119.us-menu #usScriptsMenu .submenu-brand-logo, 2120.us-menu #usScriptsMenu .submenu-product-icon { 2121 flex: 0 0 auto !important; 2122} 2123 2124@media (max-width: 480px) { 2125 .us-menu #usScriptsMenu { 2126 width: calc(100% - 10px) !important; 2127 margin-left: 5px !important; 2128 margin-right: 5px !important; 2129 } 2130 2131 .us-menu #usScriptsMenu .submenu-inner { 2132 gap: 4px !important; 2133 } 2134 2135 .us-menu #usScriptsMenu .submenu-inner > a { 2136 height: 34px !important; 2137 min-height: 34px !important; 2138 padding: 0 6px !important; 2139 gap: 4px !important; 2140 } 2141} 2142 2143/* Final auth visibility guard. Specific ID selectors intentionally override all 2144 page/header display:flex rules so hidden auth controls can never bleed through. */ 2145#navbar #desktopAuth #open-login.hidden, 2146#navbar #desktopAuth #open-login[hidden], 2147#navbar #desktopAuth #desktopUserBtn.hidden, 2148#navbar #desktopAuth #desktopUserBtn[hidden] { 2149 display: none !important; 2150} 2151 2152 2153/* Normalize the desktop currency control across pages with/without CSS resets. */ 2154#navbar #currency-widget-container { 2155 width: 64px !important; 2156 min-width: 64px !important; 2157 max-width: 64px !important; 2158 flex: 0 0 64px !important; 2159} 2160#navbar #currency-widget-container #trigger-btn { 2161 width: 64px !important; 2162 min-width: 64px !important; 2163 max-width: 64px !important; 2164 height: 34px !important; 2165 padding: 0 7px !important; 2166 box-sizing: border-box !important; 2167 font-family: Inter, Arial, sans-serif !important; 2168 font-size: 11px !important; 2169 line-height: 1 !important; 2170 font-weight: 700 !important; 2171 font-style: normal !important; 2172 text-transform: none !important; 2173 -webkit-appearance: none !important; 2174 appearance: none !important; 2175} 2176#navbar #currency-widget-container #trigger-btn #active-label { 2177 width: 27px !important; 2178 min-width: 27px !important; 2179 max-width: 27px !important; 2180 flex: 0 0 27px !important; 2181 display: inline-block !important; 2182 font-family: Inter, Arial, sans-serif !important; 2183 font-size: 11px !important; 2184 line-height: 11px !important; 2185 font-weight: 700 !important; 2186 letter-spacing: .035em !important; 2187 text-align: left !important; 2188 white-space: nowrap !important; 2189} 2190#navbar #currency-widget-container #trigger-btn #widget-arrow { 2191 width: 11px !important; 2192 min-width: 11px !important; 2193 max-width: 11px !important; 2194 height: 11px !important; 2195 flex: 0 0 11px !important; 2196} 2197 2198</style><style id="urs-mobile-navigation-label-fix"> 2199.us-menu .group:first-of-type { 2200 padding-top: 9px !important; 2201} 2202 2203.us-menu .group:first-of-type > .section-title { 2204 margin: 0 0 8px !important; 2205 padding: 0 6px !important; 2206 line-height: 1 !important; 2207} 2208</style><style id="urs-mobile-account-products-match"> 2209/* ========================================================= 2210 MOBILE ACCOUNT â MATCH PRODUCTS PAGE 2211 ========================================================= */ 2212 2213.us-menu #mobileAuthSlot { 2214 width: 100% !important; 2215} 2216 2217.us-menu #mobileLoginBtn.hidden, 2218.us-menu #mobileLoginBtn[hidden], 2219.us-menu #mobileUserBox.hidden, 2220.us-menu #mobileUserBox[hidden] { 2221 display: none !important; 2222} 2223 2224/* Logged-out row */ 2225.us-menu #mobileLoginBtn { 2226 width: 100% !important; 2227 min-height: 46px !important; 2228 padding: 0 11px !important; 2229 display: flex !important;
2230 align-items: center !important; 2231 justify-content: space-between !important; 2232 gap: 10px !important; 2233 2234 border: 1px solid transparent !important; 2235 border-radius: 11px !important; 2236 background: transparent !important; 2237 color: rgba(247,247,251,.68) !important; 2238 2239 font-size: 11px !important; 2240 font-weight: 700 !important; 2241 text-decoration: none !important; 2242} 2243 2244.us-menu #mobileLoginBtn:hover { 2245 color: #fff !important; 2246 border-color: rgba(255,255,255,.08) !important; 2247 background: rgba(255,255,255,.03) !important; 2248} 2249 2250/* Logged-in row â deliberately NOT a card */ 2251.us-menu .home-mobile-auth-user { 2252 width: 100% !important; 2253 margin: 0 !important; 2254 padding: 0 !important; 2255} 2256 2257.us-menu .home-mobile-auth-head { 2258 width: 100% !important; 2259 min-height: 46px !important; 2260 margin: 0 !important; 2261 padding: 0 11px !important; 2262 2263 display: flex !important; 2264 align-items: center !important; 2265 justify-content: space-between !important; 2266 gap: 10px !important; 2267 2268 border: 1px solid transparent !important; 2269 border-radius: 11px !important; 2270 background: transparent !important; 2271 box-shadow: none !important; 2272 color: rgba(247,247,251,.68) !important; 2273 2274 font: inherit !important; 2275 font-size: 11px !important; 2276 font-weight: 800 !important; 2277 cursor: pointer !important; 2278 2279 transition: 2280 color 150ms ease, 2281 border-color 150ms ease, 2282 background 150ms ease !important; 2283} 2284 2285.us-menu .home-mobile-auth-head:hover, 2286.us-menu .home-mobile-auth-head[aria-expanded="true"] { 2287 color: #fff !important; 2288 border-color: rgba(255,255,255,.08) !important; 2289 background: rgba(255,255,255,.03) !important; 2290} 2291 2292.us-menu .home-mobile-auth-left { 2293 min-width: 0 !important; 2294 display: inline-flex !important; 2295 align-items: center !important; 2296 gap: 9px !important; 2297} 2298 2299.us-menu .home-mobile-auth-left > img { 2300 width: 30px !important; 2301 height: 30px !important; 2302 flex: 0 0 30px !important; 2303 display: block !important; 2304 object-fit: cover !important; 2305 border: 0 !important; 2306 border-radius: 9px !important; 2307 background: rgba(255,255,255,.03) !important; 2308} 2309 2310.us-menu .home-mobile-auth-left > span:last-child { 2311 min-width: 0 !important; 2312 display: flex !important; 2313 flex-direction: column !important; 2314 align-items: flex-start !important; 2315} 2316 2317.us-menu .home-mobile-auth-name { 2318 max-width: 190px !important; 2319 overflow: hidden !important; 2320 text-overflow: ellipsis !important; 2321 white-space: nowrap !important; 2322 color: #fff !important; 2323 font-size: 11px !important; 2324 font-weight: 850 !important; 2325 line-height: 1.15 !important; 2326} 2327 2328.us-menu .home-mobile-auth-sub { 2329 max-width: 190px !important; 2330 overflow: hidden !important; 2331 text-overflow: ellipsis !important; 2332 white-space: nowrap !important; 2333 color: rgba(247,247,251,.43) !important; 2334 font-size: 9px !important; 2335 font-weight: 700 !important; 2336 line-height: 1.15 !important; 2337} 2338 2339.us-menu .mobile-account-toggle-chevron { 2340 width: 14px !important; 2341 height: 14px !important; 2342 flex: 0 0 14px !important; 2343 color: rgba(255,255,255,.28) !important; 2344 font-size: 8px !important; 2345 transition: 2346 transform 150ms ease, 2347 color 150ms ease !important; 2348} 2349 2350.us-menu .home-mobile-auth-head[aria-expanded="true"] .mobile-account-toggle-chevron { 2351 transform: rotate(180deg) !important; 2352 color: rgba(255,255,255,.55) !important; 2353} 2354 2355/* Dropdown stays completely out of layout until the row is tapped */ 2356.us-menu #mobileAccountDropdown.home-account-dropdown { 2357 display: none !important; 2358 width: 100% !important; 2359 margin: 0 !important; 2360 padding: 4px 0 4px 14px !important; 2361 border: 0 !important; 2362 border-radius: 0 !important; 2363 background: transparent !important; 2364 box-shadow: none !important; 2365 backdrop-filter: none !important; 2366 -webkit-backdrop-filter: none !important; 2367} 2368 2369.us-menu #mobileAccountDropdown.home-account-dropdown.open { 2370 display: grid !important; 2371 gap: 3px !important; 2372} 2373 2374/* Same lightweight nested links as Products */ 2375.us-menu #mobileAccountDropdown a, 2376.us-menu #mobileAccountDropdown button { 2377 width: 100% !important; 2378 min-height: 40px !important; 2379 margin: 0 !important; 2380 padding: 0 11px !important; 2381 2382 display: flex !important;
2383 align-items: center !important; 2384 gap: 8px !important; 2385 2386 border: 0 !important; 2387 border-radius: 9px !important; 2388 background: transparent !important; 2389 box-shadow: none !important; 2390 color: rgba(247,247,251,.43) !important; 2391 2392 font: inherit !important; 2393 font-size: 10.5px !important; 2394 font-weight: 700 !important; 2395 text-align: left !important; 2396 text-decoration: none !important; 2397 cursor: pointer !important; 2398 2399 transition: 2400 color 140ms ease, 2401 background 140ms ease !important; 2402} 2403 2404.us-menu #mobileAccountDropdown a > i, 2405.us-menu #mobileAccountDropdown button > i { 2406 width: 14px !important; 2407 flex: 0 0 14px !important; 2408 text-align: center !important; 2409 font-size: 9px !important; 2410 color: rgba(185,143,214,.60) !important; 2411} 2412 2413.us-menu #mobileAccountDropdown a:hover { 2414 color: #fff !important; 2415 background: rgba(185,143,214,.10) !important; 2416} 2417 2418.us-menu #mobileAccountDropdown .home-account-dropdown-logout { 2419 color: rgba(255,110,130,.72) !important; 2420} 2421 2422.us-menu #mobileAccountDropdown .home-account-dropdown-logout > i { 2423 color: rgba(255,110,130,.68) !important; 2424} 2425 2426.us-menu #mobileAccountDropdown .home-account-dropdown-logout:hover { 2427 color: rgba(255,135,150,.98) !important; 2428 background: rgba(255,66,102,.06) !important; 2429} 2430 2431.us-menu #mobileAccountDropdown .home-account-dropdown-staff { 2432 color: rgba(216,190,236,.72) !important; 2433 background: rgba(185,143,214,.035) !important; 2434} 2435 2436.us-menu #mobileAccountDropdown .home-account-dropdown-staff:hover { 2437 color: rgba(240,226,249,.96) !important; 2438 background: rgba(185,143,214,.10) !important; 2439} 2440 2441/* Keep the Account section spacing consistent with the drawer */ 2442.us-menu .mobile-account-group { 2443 padding-top: 12px !important; 2444 padding-bottom: 12px !important; 2445} 2446 2447@media (max-width: 480px) { 2448 .us-menu .home-mobile-auth-name, 2449 .us-menu .home-mobile-auth-sub { 2450 max-width: 175px !important; 2451 } 2452} 2453</style> 2454 2455<style id="urs-shared-currency-visibility"> 2456/* ========================================================= 2457 CURRENCY MENU 2458 Closed is the hard default. It only becomes visible after 2459 the trigger explicitly adds .urs-currency-open. 2460 ========================================================= */ 2461 2462#dropdown-wrapper { 2463 display: block !important; 2464 opacity: 1 !important; 2465 visibility: hidden !important; 2466 pointer-events: none !important; 2467 margin-top: 0 !important; 2468 transform: translateY(calc(-100% - 16px)) !important; 2469 transform-origin: top right !important; 2470 transition: transform 220ms cubic-bezier(.4,0,.2,1), visibility 0s linear 220ms !important; 2471} 2472 2473#dropdown-wrapper.urs-currency-open { 2474 opacity: 1 !important; 2475 visibility: visible !important; 2476 pointer-events: auto !important; 2477 margin-top: 0 !important; 2478 transform: translateY(0) !important; 2479 transition: transform 280ms cubic-bezier(.16,1,.3,1), visibility 0s linear 0s !important; 2480} 2481 2482#dropdown-wrapper .currency-menu-title, 2483#dropdown-wrapper #currency-grid { 2484 opacity: 1 !important; 2485 transform: none !important; 2486 transition: none !important; 2487} 2488 2489</style> 2490 2491<style id="urs-404-navbar-hover-fix"> 2492/* Navbar hover: text color only. No box, background, border, shadow, or movement. */ 2493#navbar .nav-link, 2494#navbar .nav-link:hover, 2495#navbar .nav-link:focus, 2496#navbar .nav-link:focus-visible, 2497#navbar .nav-link:active { 2498 border: 0 !important; 2499 outline: 0 !important; 2500 box-shadow: none !important; 2501 background: transparent !important; 2502 transform: none !important; 2503} 2504 2505#navbar .nav-link:hover, 2506#navbar .nav-link:focus-visible { 2507 color: #ffffff !important; 2508} 2509 2510#navbar .nav-link::before, 2511#navbar .nav-link::after { 2512 display: none !important; 2513 content: none !important; 2514} 2515</style> 2516 2517 <style id="urs-shared-shell-firewall"> 2518/* Shared-shell firewall: public page CSS must not alter header metrics. */ 2519#navbar, 2520#navbar button, 2521#navbar a, 2522#navbar input, 2523#navbar select { 2524 font-family: Inter, Arial, sans-serif !important; 2525 font-style: normal !important; 2526 text-decoration: none; 2527} 2528#navbar, 2529#navbar *, 2530#navbar *::before, 2531#navbar *::after { 2532 box-sizing: border-box !important; 2533} 2534#navbar img { max-width: none !important; } 2535 2536#navbar #currency-widget-container #trigger-btn, 2537#navbar #currency-widget-container #trigger-btn #active-label { 2538 font-family: Inter, Arial, sans-serif !important; 2539 font-size: 11px !important; 2540 line-height: 11px !important; 2541 font-weight: 700 !important; 2542 font-style: normal !important; 2543 letter-spacing: .035em !important; 2544 text-transform: none !important; 2545} 2546#navbar #desktopUserBtn .user-name { 2547 font-family: Inter, Arial, sans-serif !important; 2548 font-size: 9.5px !important; 2549 line-height: 9.5px !important; 2550 font-weight: 620 !important; 2551 font-style: normal !important; 2552 letter-spacing: 0 !important; 2553 text-transform: none !important; 2554} 2555#navbar #desktopUserBtn .user-avatar { 2556 width: 26px !important;
2557 height: 26px !important; 2558 min-width: 26px !important; 2559 max-width: 26px !important; 2560 min-height: 26px !important; 2561 max-height: 26px !important; 2562} 2563</style> 2564 2565<style id="urs-about-mega-menu-style"> 2566#navbar .about-mega-trigger{appearance:none;-webkit-appearance:none;border:0;font-family:inherit;cursor:pointer;gap:5px} 2567#navbar .about-mega-trigger svg{display:block;width:13px;height:13px;min-width:13px;max-width:13px;flex:0 0 13px;transition:transform 180ms cubic-bezier(.2,.75,.25,1),color 150ms ease} 2568#navbar .about-mega-trigger[aria-expanded="true"]{color:rgba(255,255,255,.92)} 2569#navbar .about-mega-trigger[aria-expanded="true"] svg{transform:rotate(180deg)} 2570.about-mega-menu{position:fixed;top:64px;left:50%;z-index:995;width:min(1435px,calc(100vw - 56px));opacity:1;visibility:hidden;pointer-events:none;transform:translate(-50%,-432px);transform-origin:50% 0;transition:transform 260ms cubic-bezier(.4,0,.2,1),visibility 0s linear 260ms} 2571.about-mega-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:transform 320ms cubic-bezier(.16,1,.3,1),visibility 0s linear 0s} 2572.about-mega-shell{position:relative;display:grid;grid-template-columns:385px minmax(0,1fr) 405px;height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(12,14,18,.38);box-shadow:0 28px 78px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.02);backdrop-filter:blur(44px) saturate(150%) brightness(.88);-webkit-backdrop-filter:blur(44px) saturate(150%) brightness(.88)} 2573.about-mega-shell::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008));opacity:.82} 2574.about-mega-shell>section{position:relative;z-index:1} 2575.about-mega-shell>section{min-width:0;padding:19px 20px}.about-mega-shell>section+section{border-left:1px solid rgba(255,255,255,.065)} 2576.about-mega-shell h3{margin:0 0 13px;display:flex;align-items:center;gap:4px;color:#ececef;font-size:12px;font-weight:760;letter-spacing:-.012em}.about-mega-shell h3 svg{width:12px;height:12px;color:#7a7d83} 2577.about-mega-heading-link{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none;cursor:pointer} 2578.about-mega-brand{height:55px;margin:0 0 18px;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px;color:inherit;text-decoration:none} 2579.about-mega-brand-map{position:relative;width:150px;height:46px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:linear-gradient(28deg,rgba(219,223,218,.95),rgba(245,246,241,.98));box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)} 2580.about-mega-brand-map::before{content:"";position:absolute;inset:-10px;background:linear-gradient(28deg,transparent 0 17%,rgba(181,187,180,.30) 17% 21%,transparent 21% 47%,rgba(190,196,189,.28) 47% 52%,transparent 52%),linear-gradient(118deg,transparent 0 28%,rgba(204,209,202,.45) 28% 34%,transparent 34% 63%,rgba(194,201,194,.34) 63% 69%,transparent 69%);transform:rotate(-5deg)} 2581.about-mega-brand-map::before{display:none!important} 2582.about-mega-brand-map .about-mega-map-art{position:absolute;inset:0;z-index:1;width:100%!important;height:100%!important;display:block;filter:none!important;overflow:hidden} 2583.about-mega-brand-map{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 1px 0 rgba(255,255,255,.05)} 2584.about-mega-brand>span:nth-child(2){display:flex;flex-direction:column;gap:1px;min-width:0}.about-mega-brand small{color:#70747b;font-size:7.5px;font-weight:800;letter-spacing:.22em}.about-mega-brand strong{color:#f0f0f2;font-size:11px;font-weight:760;white-space:nowrap} 2585.about-mega-link-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.035);border-radius:11px;overflow:hidden;background:rgba(10,12,16,.34)} 2586.about-mega-link-list>a{height:62px;padding:0 10px;display:grid;grid-template-columns:34px minmax(0,1fr) 12px;align-items:center;gap:9px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.055);transition:background 140ms ease}.about-mega-link-list>a:last-child{border-bottom:0}.about-mega-link-list>a:hover{background:rgba(255,255,255,.035)} 2587.about-mega-link-list>a>svg{width:12px;height:12px;
2587color:#777a80}.about-mega-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:#c2c4c9;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.055)}.about-mega-icon svg,.about-mega-icon i{width:17px;height:17px;font-size:16px} 2588.about-mega-link-list a>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}.about-mega-link-list strong{color:#e9e9eb;font-size:10px;font-weight:720}.about-mega-link-list small{color:#74777d;font-size:8.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 2589.about-mega-initiatives{display:flex;flex-direction:column}.about-mega-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;height:306px} 2590.about-mega-card{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.04);border-radius:11px;background:rgba(10,12,16,.34);color:inherit;text-decoration:none;transition:transform 160ms ease,border-color 160ms ease,background 160ms ease}.about-mega-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.08);background:rgba(18,20,25,.40)} 2591.about-mega-card-media{position:relative;height:118px;display:block;overflow:hidden;background:#101114}.about-mega-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.03),rgba(7,8,10,.34))}.about-mega-card-media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.7) brightness(.68);transform:scale(1.01);transition:transform 220ms ease,filter 220ms ease}.about-mega-card:hover .about-mega-card-media img{transform:scale(1.025);filter:saturate(.82) brightness(.75)} 2592.about-mega-card-badge{position:absolute;z-index:2;left:13px;top:13px;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:white;font-size:25px;font-weight:800;line-height:1;box-shadow:0 5px 15px rgba(0,0,0,.28)}.about-mega-card-badge.is-orange{background:linear-gradient(145deg,#f89a36,#e75a14)}.about-mega-card-badge.is-purple{background:linear-gradient(145deg,#bd49f1,#7a22d8)}.about-mega-card-badge svg{width:20px;height:20px} 2593.about-mega-card-copy{padding:11px 13px 42px;display:flex;flex-direction:column;gap:5px}.about-mega-card-copy strong{color:#ececee;font-size:10.5px;font-weight:750}.about-mega-card-copy small{color:#7c7f84;font-size:8.7px;line-height:1.45}.about-mega-card-arrow{position:absolute;left:13px;bottom:12px;width:27px;height:27px;display:grid;place-items:center;border-radius:7px;color:#b3b4b9;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06)}.about-mega-card-arrow svg{width:12px;height:12px} 2594.about-mega-search{height:46px;margin:0 0 17px;padding:0 14px;display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.035);border-radius:12px;background:rgba(10,12,16,.30);transition:border-color 150ms ease,background 150ms ease}.about-mega-search:focus-within{border-color:rgba(124,109,242,.18);background:rgba(14,16,21,.38)}.about-mega-search svg{width:15px;height:15px;color:#777980}.about-mega-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#e7e7e9;font:inherit;font-size:9.5px}.about-mega-search input::placeholder{color:#62656b} 2595.about-mega-update-list{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.035);border-radius:11px;overflow:hidden;background:rgba(10,12,16,.32)}.about-mega-update-list>a{height:82px;padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) 55px;gap:10px;align-items:center;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.05);transition:background 140ms ease}.about-mega-update-list>a:last-child{border-bottom:0}.about-mega-update-list>a:hover{background:rgba(255,255,255,.035)} 2596.about-mega-update-list>a>span:first-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}.about-mega-update-list strong{color:#e9e9eb;font-size:9.4px;font-weight:720;line-height:1.25}.about-mega-update-list small{color:#74777c;font-size:7.9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.about-mega-update-date{display:inline-flex!important;align-items:center!important;gap:4px!important;margin-top:1px!important;color:#74777c!important;font-size:7.5px!important;line-height:1!important;font-weight:500!important;white-space:nowrap!important}.about-mega-update-date svg{width:9px!important;height:9px!important;flex:0 0 9px!important} 2597.about-mega-update-thumb{width:55px;height:48px;display:block;overflow:hidden;border-radius:8px;background:#15151a;border:1px solid rgba(255,255,255,.055)}.about-mega-update-thumb img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.75) brightness(.72)}.about-mega-update-thumb.is-logo{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(134,51,193,.36),rgba(44,28,55,.9))}.about-mega-update-thumb.is-logo img{width:30px;height:30px;object-fit:contain;filter:none} 2598.about-mega-empty{min-height:128px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;border:1px solid rgba(255,255,255,.045);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)} 2599.about-mega-empty-icon{width:36px;height:36px;display:grid;place-items:center;margin-bottom:2px;border-radius:10px;color:#cfc7e9;background:rgba(124,109,242,.10);border:1px solid rgba(124,109,242,.16)}.about-mega-empty-icon svg{width:16px;height:16px} 2600.about-mega-empty strong{color:#e9e9ed;font-size:10.5px;font-weight:730}.about-mega-empty small{max-width:260px;color:#7d8088;font-size:8.4px;line-height:1.45} 2601.about-mega-empty-clear{height:30px;margin-top:3px;padding:0 12px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:rgba(255,255,255,.035);color:#d9d9de;font:inherit;font-size:8.5px;font-weight:650;cursor:pointer;transition:background 140ms ease,border-color 140ms ease,transform 140ms ease}.about-mega-empty-clear:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}.about-mega-empty-clear:active{transform:translateY(1px)} 2602.about-mega-menu [hidden]{display:none!important} 2603.about-mega-updates.is-empty .about-mega-update-list{display:none!important} 2604.about-mega-updates.is-empty .about-mega-empty{min-height:250px;margin-top:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:30px 18px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:9px} 2605.about-mega-updates.is-empty .about-mega-empty-icon{width:36px;height:36px;border-radius:10px;margin:0 0 1px;background:rgba(124,109,242,.08);border:1px solid rgba(124,109,242,.14);box-shadow:none} 2606.about-mega-updates.is-empty .about-mega-empty strong{font-size:11px} 2607.about-mega-updates.is-empty .about-mega-empty small{font-size:8px;max-width:235px;color:#74777c} 2608.about-mega-updates.is-empty .about-mega-empty-clear{height:28px;padding:0 11px;margin-top:2px;font-size:8.3px;background:rgba(255,255,255,.028)} 2609 2610/* Shared alignment baseline for the three mega-menu columns. */ 2611.about-mega-company,.about-mega-initiatives,.about-mega-updates{box-sizing:border-box} 2612.about-mega-shell h3{min-height:15px;line-height:15px} 2613.about-mega-link-list,.about-mega-cards,.about-mega-update-list{margin-top:0!important} 2614.about-mega-card,.about-mega-link-list,.about-mega-update-list{align-self:stretch} 2615.about-mega-update-list>a,.about-mega-link-list>a{box-sizing:border-box} 2616 2617 2618/* Reference-lock: one shared vertical grid for all three mega-menu columns. */ 2619.about-mega-shell>section{ 2620 display:grid; 2621 grid-template-rows:72px 28px minmax(0,1fr); 2622 align-content:stretch; 2623} 2624.about-mega-company .about-mega-brand, 2625.about-mega-updates .about-mega-search{ 2626 grid-row:1; 2627 align-self:start; 2628 margin:0; 2629} 2630.about-mega-company .about-mega-brand{height:46px;} 2631.about-mega-company>
2631h3, 2632.about-mega-initiatives>h3, 2633.about-mega-updates>h3{ 2634 grid-row:2; 2635 align-self:center; 2636 margin:0; 2637} 2638.about-mega-link-list, 2639.about-mega-cards, 2640.about-mega-update-list{ 2641 grid-row:3; 2642 align-self:stretch; 2643 height:auto; 2644 min-height:0; 2645} 2646.about-mega-link-list{ 2647 display:grid; 2648 grid-template-rows:repeat(4,minmax(0,1fr)); 2649} 2650.about-mega-link-list>a{height:auto;min-height:0;} 2651.about-mega-cards{height:auto;} 2652.about-mega-card{height:100%;min-height:0;} 2653.about-mega-update-list{ 2654 display:grid; 2655 grid-template-rows:repeat(3,minmax(0,1fr)); 2656} 2657.about-mega-update-list>a{height:auto;min-height:0;} 2658.about-mega-initiatives>h3{padding-left:2px;} 2659.about-mega-initiatives .about-mega-cards{margin-top:2px!important;} 2660 2661/* Let Key Initiatives use the otherwise-empty top row while keeping its bottom aligned with the side columns. */ 2662.about-mega-initiatives{ 2663 grid-template-rows:28px minmax(0,1fr)!important; 2664} 2665.about-mega-initiatives>h3{ 2666 grid-row:1!important; 2667 align-self:start!important; 2668 margin:0!important; 2669} 2670.about-mega-initiatives .about-mega-cards{ 2671 grid-row:2!important; 2672 align-self:stretch!important; 2673 height:auto!important; 2674 min-height:0!important; 2675 grid-template-rows:minmax(0,1.75fr) minmax(0,.9fr)!important; 2676 gap:12px!important; 2677 margin-top:2px!important; 2678} 2679.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{ 2680 height:118px!important; 2681 flex:0 0 118px!important; 2682} 2683.about-mega-initiatives .about-mega-card:nth-child(3){ 2684 grid-template-rows:1fr!important; 2685 height:auto!important; 2686 min-height:0!important; 2687} 2688.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{ 2689 height:100%!important; 2690 min-height:0!important; 2691} 2692 2693/* Final 2 + 1 Key Initiatives layout. */ 2694.about-mega-initiatives{ 2695 grid-template-rows:28px minmax(0,1fr)!important; 2696} 2697.about-mega-initiatives>h3{ 2698 grid-row:1!important; 2699 align-self:start!important; 2700 margin:0 0 10px!important; 2701} 2702.about-mega-initiatives .about-mega-cards{ 2703 grid-row:2!important; 2704 display:grid!important; 2705 grid-template-columns:repeat(2,minmax(0,1fr))!important; 2706 grid-template-rows:minmax(0,1.7fr) minmax(0,.85fr)!important; 2707 gap:12px!important; 2708 height:100%!important; 2709 min-height:0!important; 2710 align-self:stretch!important; 2711 margin-top:0!important; 2712} 2713.about-mega-initiatives .about-mega-card{ 2714 height:auto!important; 2715 min-height:0!important; 2716 border-radius:12px!important; 2717 overflow:hidden!important; 2718 background:rgba(255,255,255,.028)!important; 2719 border-color:rgba(255,255,255,.045)!important; 2720} 2721.about-mega-initiatives .about-mega-card:nth-child(-n+2){ 2722 display:flex!important; 2723 flex-direction:column!important; 2724} 2725.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{ 2726 height:92px!important; 2727 flex:0 0 92px!important; 2728} 2729.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-copy{ 2730 padding:11px 13px 39px!important; 2731 gap:4px!important; 2732} 2733.about-mega-initiatives .about-mega-card-copy strong{ 2734 font-size:10.25px!important; 2735 line-height:1.25!important; 2736} 2737.about-mega-initiatives .about-mega-card-copy small{ 2738 font-size:8.25px!important; 2739 line-height:1.4!important; 2740} 2741.about-mega-initiatives .about-mega-card-arrow{ 2742 width:28px!important; 2743 height:28px!important; 2744} 2745.about-mega-initiatives .about-mega-card-badge{ 2746 width:34px!important; 2747 height:34px!important; 2748 left:12px!important; 2749 top:12px!important; 2750 border-radius:9px!important; 2751} 2752.about-mega-initiatives .about-mega-card-badge svg{width:18px!important;height:18px!important} 2753.about-mega-initiatives .about-mega-card:nth-child(3){ 2754 grid-column:1 / -1!important; 2755 display:grid!important;
2756 grid-template-columns:170px minmax(0,1fr)!important; 2757 grid-template-rows:minmax(0,1fr)!important; 2758 height:auto!important; 2759 min-height:0!important; 2760} 2761.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{ 2762 height:100%!important; 2763 min-height:0!important; 2764} 2765.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-copy{ 2766 justify-content:center!important; 2767 padding:12px 56px 12px 15px!important; 2768} 2769.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-arrow{ 2770 left:auto!important; 2771 right:14px!important; 2772 bottom:50%!important; 2773 transform:translateY(50%)!important; 2774} 2775.about-mega-initiatives .about-mega-card:hover{ 2776 transform:translateY(-2px)!important; 2777 background:rgba(255,255,255,.04)!important; 2778 border-color:rgba(255,255,255,.075)!important; 2779} 2780 2781 2782/* Purpose-built art for the three initiative cards. */ 2783.about-mega-initiatives .about-mega-card-media img{ 2784 filter:saturate(.92) brightness(.82)!important; 2785 object-position:center center; 2786} 2787.about-mega-initiatives .about-mega-card:hover .about-mega-card-media img{ 2788 filter:saturate(1) brightness(.9)!important; 2789} 2790.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media img{ 2791 object-position:center 48%; 2792} 2793 2794/* Align Key Initiatives with the Explore / Unreal Studios header block. */ 2795.about-mega-initiatives{ 2796 display:grid!important; 2797 grid-template-rows:72px minmax(0,1fr)!important; 2798 align-content:stretch!important; 2799} 2800.about-mega-initiatives>h3{ 2801 grid-row:1!important; 2802 align-self:start!important; 2803 margin:8px 0 0 0!important; 2804 padding-left:0!important; 2805} 2806.about-mega-initiatives .about-mega-cards{ 2807 grid-row:2!important; 2808 align-self:stretch!important; 2809 margin-top:0!important; 2810} 2811 2812/* Match Key Initiatives header hierarchy to the Explore / Unreal Studios brand block. */ 2813.about-mega-initiatives-kicker{ 2814 grid-row:1!important; 2815 align-self:start!important; 2816 margin:-2px 0 0 0!important; 2817 display:grid!important; 2818 grid-template-columns:auto auto 1fr!important; 2819 grid-template-rows:auto auto!important; 2820 column-gap:8px!important; 2821 row-gap:1px!important; 2822 align-items:center!important; 2823 width:max-content!important; 2824} 2825.about-mega-initiatives-kicker small{ 2826 grid-column:1 / 3!important; 2827 color:#70747b!important; 2828 font-size:7.5px!important; 2829 font-weight:800!important; 2830 letter-spacing:.22em!important; 2831 line-height:1.1!important; 2832} 2833.about-mega-initiatives-kicker strong{ 2834 grid-column:1!important; 2835 grid-row:2!important; 2836 color:#f0f0f2!important; 2837 font-size:11px!important; 2838 font-weight:760!important; 2839 line-height:1.15!important; 2840} 2841.about-mega-initiatives-kicker svg{ 2842 grid-column:2!important; 2843 grid-row:2!important; 2844 width:12px!important; 2845 height:12px!important; 2846 color:#7a7d83!important; 2847} 2848.about-mega-initiatives .about-mega-cards{grid-row:2!important;} 2849 2850/* Exact vertical alignment for Explore + Key heading stacks. */ 2851.about-mega-brand>span:nth-child(2), 2852.about-mega-initiatives>h3{ 2853 align-self:center!important; 2854} 2855.about-mega-brand small, 2856.about-mega-initiatives>h3 .initiative-eyebrow{ 2857 line-height:1!important; 2858} 2859.about-mega-brand strong, 2860.about-mega-initiatives>h3 .initiative-title{ 2861 line-height:1.05!important; 2862} 2863.about-mega-initiatives>h3{ 2864 margin:0!important; 2865 padding:0!important; 2866 display:flex!important; 2867 flex-direction:column!important; 2868 justify-content:center!important; 2869 gap:5px!important; 2870 height:46px!important; 2871} 2872.about-mega-initiatives>h3 .initiative-eyebrow{ 2873 display:block!important; 2874 color:#70747b!important; 2875 font-size:7.5px!important; 2876 font-weight:800!important; 2877 letter-spacing:.22em!important; 2878} 2879.about-mega-initiatives>h3 .initiative-title{ 2880 display:flex!important; 2881 align-items:center!important; 2882 gap:5px!important; 2883 color:#f0f0f2!important; 2884 font-size:11px!important; 2885 font-weight:760!important; 2886 letter-spacing:0!important; 2887} 2888.about-mega-initiatives>h3 .initiative-title svg{ 2889 width:12px!important; 2890 height:12px!important; 2891} 2892@media(max-width:1180px){.about-mega-menu{display:none!important}}@media(prefers-reduced-motion:reduce){.about-mega-menu,#navbar .about-mega-trigger svg,.about-mega-card,.about-mega-card-media img{transition:none!important}} 2893 2894/* Definitive alignment: mirror the EXPLORE / UNREAL STUDIOS text stack exactly. */ 2895.about-mega-initiatives > h3{ 2896 grid-row:1!important;
2897 align-self:start!important; 2898 width:max-content!important; 2899 height:46px!important; 2900 margin:0!important; 2901 padding:0!important; 2902 transform:translateY(12px)!important; 2903 display:flex!important; 2904 flex-direction:column!important; 2905 justify-content:center!important; 2906 align-items:flex-start!important; 2907 gap:1px!important; 2908} 2909.about-mega-initiatives > h3 .initiative-eyebrow{ 2910 display:block!important; 2911 color:#70747b!important; 2912 font-size:7.5px!important; 2913 font-weight:800!important; 2914 letter-spacing:.22em!important; 2915 line-height:normal!important; 2916} 2917.about-mega-initiatives > h3 .initiative-title{ 2918 display:flex!important; 2919 align-items:center!important; 2920 gap:5px!important; 2921 color:#f0f0f2!important; 2922 font-size:11px!important; 2923 font-weight:760!important; 2924 line-height:normal!important; 2925} 2926 2927 2928 2929</style> 2930 2931<style id="urs-topbar-nav-font-layout-lock"> 2932/* Keep the desktop nav completely immune to webfont swaps during page loads. 2933 Each slot has a fixed width, so fallback-font metrics cannot move the group. */ 2934@media (min-width:1181px) { 2935 #navbar .desktop-nav { 2936 position:absolute !important; 2937 top:0 !important; 2938 left:50% !important; 2939 right:auto !important; 2940 width:516px !important; 2941 min-width:516px !important; 2942 max-width:516px !important; 2943 height:64px !important; 2944 margin-left:-258px !important; 2945 display:grid !important; 2946 grid-template-columns:68px 86px 132px 68px 80px 82px !important; 2947 align-items:stretch !important; 2948 justify-content:initial !important; 2949 gap:0 !important; 2950 transform:none !important; 2951 } 2952 #navbar .desktop-nav > .nav-link { 2953 width:100% !important; 2954 min-width:0 !important; 2955 max-width:none !important; 2956 padding:0 !important; 2957 margin:0 !important; 2958 justify-self:stretch !important; 2959 font-family:"Segoe UI", Arial, sans-serif !important; 2960 font-size:12.5px !important; 2961 line-height:1 !important; 2962 font-weight:650 !important; 2963 letter-spacing:-.01em !important; 2964 white-space:nowrap !important; 2965 } 2966} 2967</style> 2968 2969<nav id="navbar" class="topbar"> 2970 <div class="nav-inner"> 2971 <div class="topbar-left"> 2972 <a href="/" class="brand" aria-label="Unreal Studios home"> 2973 <img src="/assets/img/logos/logoandtext-display.png?v=20261007-3" alt="Unreal Studios"> 2974 </a> 2975 2976 <div class="topbar-socials" aria-label="Unreal Studios social links"> 2977 <span class="topbar-social-divider" aria-hidden="true"></span> 2978 2979 <a href="https://discord.com/invite/WAZe8ruSTm" 2980 target="_blank" 2981 rel="noopener noreferrer nofollow" 2982 aria-label="Discord" 2983 title="Discord"> 2984 <i class="fa-brands fa-discord"></i> 2985 </a> 2986 2987 <a href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw" 2988 target="_blank" 2989 rel="noopener noreferrer nofollow" 2990 aria-label="YouTube" 2991 title="YouTube"> 2992 <i class="fa-brands fa-youtube"></i> 2993 </a> 2994 2995 <a href="https://github.com/Official-Unreal-Studios" 2996 target="_blank" 2997 rel="noopener noreferrer nofollow" 2998 aria-label="GitHub" 2999 title="GitHub"> 3000 <i class="fa-brands fa-github"></i> 3001 </a> 3002 </div> 3003 </div> 3004 3005 <div class="desktop-nav"> 3006 <a href="/" class="nav-link">Home</a> 3007 <a href="/products/view-all" class="nav-link">Products</a> 3008 <a href="/documentation" 3009 rel="noopener noreferrer nofollow" 3010 class="nav-link">Documentation</a> 3011 <a href="/news" class="nav-link" id="newsNavLink">News</a> 3012 <a href="/support" class="nav-link">Support</a> 3013 <button id="aboutMegaTrigger" type="button" class="nav-link about-mega-trigger" aria-expanded="false" aria-controls="aboutMegaMenu">
3014 <span>More</span> 3015 <svg class="about-mega-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 3016 <path d="m6 9 6 6 6-6"></path> 3017 </svg> 3018 </button> 3019 </div> 3020 <div class="desktop-actions"> 3021 <a href="https://unreal-studios-shop.tebex.io/checkout/basket" 3022 id="open-basket-btn" 3023 class="icon-btn basket-icon" 3024 aria-label="Basket" 3025 title="Basket" 3026 data-click-set="true"> 3027 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 3028 <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"></path> 3029 <path d="M3 6h18"></path> 3030 <path d="M16 10a4 4 0 0 1-8 0"></path> 3031 </svg> 3032 </a> 3033 3034 <div id="currency-widget-container"> 3035 <button id="trigger-btn" type="button" aria-label="Change currency" aria-expanded="false"> 3036 <span id="active-label">USD</span> 3037 <svg id="widget-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"> 3038 <path d="m6 9 6 6 6-6"></path> 3039 </svg> 3040 </button> 3041 3042 </div> 3043 3044 3045 <div id="desktopAuth" class="auth-wrap" data-auth-ready="true"> 3046 <a href="/login" id="open-login" class="login-pill" data-click-set="true"> 3047 <i class="fa-solid fa-arrow-right-to-bracket"></i> 3048 <span>Login</span> 3049 </a> 3050 3051 <button id="desktopUserBtn" class="user-pill hidden" hidden type="button" aria-expanded="false"> 3052 <img id="desktopUserAvatar" class="user-avatar" src="/assets/img/logos/urs-logo-bw.png" alt="Profile"> 3053 <span id="desktopUserName" class="user-name">Account</span> 3054 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 3055 <path d="m6 9 6 6 6-6"></path> 3056 </svg> 3057 </button> 3058 </div> 3059 </div> 3060 3061 <button id="mobile-menu-btn" type="button" aria-label="Open mobile menu" aria-expanded="false"> 3062 <i data-lucide="menu"></i> 3063 </button> 3064 </div> 3065</nav> 3066<div class="urs-topbar-flow-spacer" aria-hidden="true"></div>
3067<script> 3068 (() => { 3069 const newsNavLink = document.getElementById('newsNavLink'); 3070 const path = window.location.pathname.replace(/\/+$/, '') || '/'; 3071 const onNewsPage = path === '/news' || path.startsWith('/news/'); 3072 if (!newsNavLink) return; 3073 newsNavLink.classList.toggle('active', onNewsPage); 3074 if (onNewsPage) newsNavLink.setAttribute('aria-current', 'page'); 3075 else newsNavLink.removeAttribute('aria-current'); 3076 })(); 3077</script>
3077 3078 3079<div id="desktopUserDropdown" class="user-dropdown urs-account-menu-minimal"> 3080 <div class="urs-account-mini-profile"> 3081 <img id="dropdownUserAvatar" alt="Profile"> 3082 3083 <div class="urs-account-mini-identity"> 3084 <div id="dropdownUserName" class="user-dropdown-name">Account</div> 3085 <div class="urs-account-subline"> 3086 <div id="dropdownUserSub" class="user-dropdown-sub">Signed in</div> 3087 <span id="dropdownStatusBadge" class="urs-account-status-pill" hidden></span> 3088 </div> 3089 </div> 3090 </div> 3091 3092 <div class="urs-account-mini-links"> 3093 <a href="/account/settings" class="user-shortcut urs-account-mini-link"> 3094 <i data-lucide="circle-user-round"></i> 3095 <span>My Account</span> 3096 </a> 3097 3098 <a href="/account/transactions" class="user-shortcut urs-account-mini-link"> 3099 <i data-lucide="receipt-text"></i> 3100 <span>Orders</span> 3101 </a> 3102 3103 <a href="/account/support" class="user-shortcut urs-account-mini-link"> 3104 <i data-lucide="life-buoy"></i> 3105 <span>Support</span> 3106 </a> 3107 3108 <a href="/account/security" class="user-shortcut urs-account-mini-link"> 3109 <i data-lucide="shield-check"></i> 3110 <span>Security</span> 3111 </a> 3112 </div> 3113 3114 <div id="desktopPartnerSection" class="urs-account-staff-section" hidden aria-hidden="true"> 3115 <div class="urs-account-mini-divider"></div> 3116 <a href="/partner/portal" id="desktopPartnerLink" class="user-shortcut urs-account-mini-link urs-account-staff-link"> 3117 <i data-lucide="handshake"></i> 3118 <span>Partner Portal</span> 3119 <span class="urs-account-staff-badge">PARTNER</span> 3120 </a> 3121 </div> 3122 3123 <div id="desktopStaffSection" class="urs-account-staff-section" hidden aria-hidden="true"> 3124 <div class="urs-account-mini-divider"></div> 3125 <a href="/employee/dashboard" id="desktopStaffLink" class="user-shortcut urs-account-mini-link urs-account-staff-link"> 3126 <i data-lucide="badge-check"></i> 3127 <span>Service Desk</span> 3128 <span class="urs-account-staff-badge">STAFF</span> 3129 </a> 3130 </div> 3131 3132 <div class="urs-account-mini-divider"></div> 3133 3134 <a href="/api/logout" class="user-shortcut danger urs-account-mini-logout"> 3135 <i data-lucide="log-out"></i> 3136 <span>Sign out</span> 3137 </a> 3138 </div> 3139<div id="dropdown-wrapper"> 3140 <div class="currency-menu"> 3141 <div class="currency-menu-title">Currency</div> 3142 <div id="currency-grid"></div> 3143 </div> 3144</div> 3145 3146<div id="aboutMegaMenu" class="about-mega-menu" aria-hidden="true"> 3147 <div class="about-mega-shell"> 3148 <section class="about-mega-company" aria-labelledby="aboutMegaCompanyTitle"> 3149 <a href="/about" class="about-mega-brand"> 3150 <span class="about-mega-brand-map" aria-hidden="true"> 3151 <svg class="about-mega-map-art" viewBox="0 0 300 92" preserveAspectRatio="none" focusable="false"> 3152 <rect width="300" height="92" rx="16" fill="#e7eae4"/> 3153 <path d="M-18 62L74 6L118 6L24 72Z" fill="#d8ddd6"/> 3154 <path d="M76 -8L156 28L139 49L58 13Z" fill="#daddd8"/> 3155 <path d="M176 -10L319 48L319 74L160 9Z" fill="#d7dbd5"/> 3156 <path d="M165 53L250 20L319 42L319 92L236 92Z" fill="#d9ddd7"/> 3157 <path d="M-8 87L73 44L113 65L63 92H-8Z" fill="#d5dad3"/> 3158 <path d="M0 33C44 37 66 48 97 65C126 80 163 91 210 93" fill="none" stroke="#f5f6f2" stroke-width="15" stroke-linecap="round"/> 3159 <path d="M205 -9C189 15 176 35 167 55C160 69 158 81 157 95" fill="none" stroke="#f5f6f2" stroke-width="14" stroke-linecap="round"/> 3160 <path d="M-10 18C42 30 84 27 125 18C166 10 205 7 311 21" fill="none" stroke="#f2f4ef" stroke-width="10" stroke-linecap="round"/> 3161 <path d="M11 0C31 24 55 45 88 64C110 77 129 84 151 91" fill="none" stroke="#cfd4ce" stroke-width="2" opacity=".65"/> 3162 <path d="M211 -3C192 21 179 41 171 61C167 72 164 82 164 94" fill="none" stroke="#cfd4ce" stroke-width="2" opacity=".62"/> 3163 <path d="M-2 20C39 30 83 29 126 20C174 10 220 10 301 22" fill="none" stroke="#d2d6d0" stroke-width="1.8" opacity=".55"/> 3164 <g transform="translate(136 27)"> 3165 <path d="M14 0C6.27 0 0 6.27 0 14c0 10.25 14 25.8 14 25.8S28 24.25 28 14C28 6.27 21.73 0 14 0Z" fill="#9f4fd8"/> 3166 <circle cx="14" cy="14" r="5.25" fill="#eef1ec"/> 3167 </g> 3168 </svg> 3169 </span>
3170 <span><small>EXPLORE</small><strong>UNREAL STUDIOS</strong></span> 3171 </a> 3172 <h3 id="aboutMegaCompanyTitle"><a href="/about" class="about-mega-heading-link">Company & Resources <i data-lucide="chevron-right"></i></a></h3> 3173 <div class="about-mega-link-list"> 3174 <a href="/about#team" data-about-search="meet the team team staff people"> 3175 <span class="about-mega-icon"><i data-lucide="users"></i></span> 3176 <span><strong>Meet the Team</strong><small>Get to know our team</small></span> 3177 <i data-lucide="chevron-right"></i> 3178 </a> 3179 <a href="/about#mission" data-about-search="our mission mission values what we stand for"> 3180 <span class="about-mega-icon"><i data-lucide="file-text"></i></span> 3181 <span><strong>Our Mission</strong><small>What we stand for</small></span> 3182 <i data-lucide="chevron-right"></i> 3183 </a> 3184 <a href="https://discord.com/invite/WAZe8ruSTm" target="_blank" rel="noopener noreferrer nofollow" data-about-search="community forum conversation discord"> 3185 <span class="about-mega-icon"><i data-lucide="message-square"></i></span> 3186 <span><strong>Community Forum</strong><small>Join the conversation</small></span> 3187 <i data-lucide="chevron-right"></i> 3188 </a> 3189 <a href="/partners" data-about-search="partnership program creators partners"> 3190 <span class="about-mega-icon"><i data-lucide="handshake"></i></span> 3191 <span><strong>Partnership Program</strong><small>Creators & partners</small></span> 3192 <i data-lucide="chevron-right"></i> 3193 </a> 3194 </div> 3195 </section> 3196 3197 <section class="about-mega-initiatives" aria-labelledby="aboutMegaInitiativesTitle"> 3198 <div class="about-mega-initiatives-kicker"><small>KEY</small><strong>INITIATIVES</strong><i data-lucide="chevron-right"></i></div> 3199 <div class="about-mega-cards"> 3200 <a href="/products/view-all" class="about-mega-card" data-about-search="game server solutions hosting deployment management"> 3201 <span class="about-mega-card-media fivem"><img src="/assets/img/banners/site banners/game-resource-development-banner.png" alt=""><span class="about-mega-card-badge is-orange"><i data-lucide="gamepad-2"></i></span></span> 3202 <span class="about-mega-card-copy"><strong>Game Resource Development</strong><small>Custom scripts, systems, and polished gameplay tools built for game communities.</small><span class="about-mega-card-meta"><span>FiveM Resources</span><span>Minecraft Mods</span><span>Custom Systems</span></span></span> 3203 <span class="about-mega-card-arrow"><i data-lucide="arrow-up-right"></i></span> 3204 </a> 3205 <a href="/documentation" class="about-mega-card" data-about-search="project catalyst class editor block utilities custom code tools"> 3206 <span class="about-mega-card-media minecraft"><img src="/assets/img/banners/site banners/software-development-banner.png" alt=""><span class="about-mega-card-badge is-purple"><i data-lucide="code-2"></i></span></span> 3207 <span class="about-mega-card-copy"><strong>Software Development</strong><small>Purpose-built apps, integrations, utilities, and backend tools for real workflows.</small><span class="about-mega-card-meta"><span>Desktop Tools</span><span>Automation</span><span>Integrations</span></span></span> 3208 <span class="about-mega-card-arrow"><i data-lucide="arrow-up-right"></i></span> 3209 </a> 3210 <a href="/about#direction" class="about-mega-card" data-about-search="studio partnerships creators partners community collaboration"> 3211 <span class="about-mega-card-media minecraft"><img src="/assets/img/banners/site banners/website-development-banner.png" alt=""><span class="about-mega-card-badge is-purple"><i data-lucide="panels-top-left"></i></span></span>
3212 <span class="about-mega-card-copy"><strong>Website Development</strong><small>Modern websites, dashboards, storefronts, and web apps designed for performance.</small><span class="about-mega-card-meta"><span>Dashboards</span><span>Storefronts</span><span>Web Apps</span></span></span> 3213 <span class="about-mega-card-arrow"><i data-lucide="arrow-up-right"></i></span> 3214 </a> 3215 </div> 3216 </section> 3217 3218 <section class="about-mega-updates" aria-labelledby="aboutMegaUpdatesTitle"> 3219 <label class="about-mega-search"> 3220 <i data-lucide="search"></i> 3221 <input id="aboutMegaSearch" type="search" placeholder="Search Updates & News..." autocomplete="off" aria-label="Search About resources"> 3222 </label> 3223 <h3 id="aboutMegaUpdatesTitle"><a href="/news" class="about-mega-heading-link">Updates & News <i data-lucide="chevron-right"></i></a></h3> 3224 <div class="about-mega-update-list"> 3225 3226 <a href="/news/controlx-v3-1-0" 3227 3228 data-about-search="ControlX v3.1.0 3.1.0 FiveM update UVC lighting PARK sync emergency vehicle standalone"> 3229 <span> 3230 <strong>ControlX v3.1.0 Is Now Available</strong> 3231 <small>ControlX v3.1.0 is out now with improved UVC compatibility, lighting reliability, PARK synchronization, and general stability improvements.</small> 3232 <span class="about-mega-update-date"><i data-lucide="calendar-days"></i> 06 Oct, 2026</span> 3233 </span> 3234 <span class="about-mega-update-thumb"><img src="/assets/img/news/updates/controlx-v3.1.0/thumbnail.png" alt=""></span> 3235 </a> 3236 3237 <a href="/news/fall-sale-2026" 3238 3239 data-about-search="fall sale 2026 30 off sitewide sale unreal studios discount fivem minecraft software products"> 3240 <span> 3241 <strong>Fall Sale 2026: 30% Off Sitewide</strong> 3242 <small>The Unreal Studios Fall Sale 2026 is live with 30% off across the entire store for a limited time.</small> 3243 <span class="about-mega-update-date"><i data-lucide="calendar-days"></i> 04 Oct, 2026</span> 3244 </span> 3245 <span class="about-mega-update-thumb"><img src="/assets/img/news/announcements/fall-sale-2026/thumbnail.png" alt=""></span> 3246 </a> 3247 3248 <a href="/news/rocketnode-partnership" 3249 3250 data-about-search="rocketnode partnership hosting fivem minecraft game server community partner"> 3251 <span> 3252 <strong>Unreal Studios partners with RocketNode</strong> 3253 <small>Weâre partnering with RocketNode to give our FiveM and Minecraft communities access to game-server hosting with instant setup, DDoS protection, global locations, 24/7 support, and partner offers.</small> 3254 <span class="about-mega-update-date"><i data-lucide="calendar-days"></i> 27 Sep, 2026</span> 3255 </span> 3256 <span class="about-mega-update-thumb"><img src="/assets/img/news/partners/rocketnode/thumbnail.png" alt=""></span> 3257 </a> 3258 3259 </div> 3260 <div id="aboutMegaNoResults" class="about-mega-empty" hidden> 3261 <span class="about-mega-empty-icon"><i data-lucide="search-x"></i></span> 3262 <strong>No matching updates</strong> 3263 <small>Try another keyword or clear your search to see all updates.</small> 3264 <button type="button" id="aboutMegaClearSearch" class="about-mega-empty-clear">Clear search</button> 3265 </div> 3266 </section> 3267 </div> 3268</div> 3269 3270 <div class="us-menu"> 3271 3272 <div class="menu-overlay" id="usMenuOverlay"></div> 3273 3274 <aside class="drawer" id="usMenuDrawer">
3275 <div class="drawer-inner"> 3276 <div class="topbar"> 3277 <div class="brand"> 3278 <img 3279 src="/assets/img/logos/logoandtext-display.png?v=20261007-3" 3280 alt="Unreal Studios" 3281 /> 3282 </div> 3283 3284 <button class="close-btn" id="usMenuCloseBtn" aria-label="Close menu"> 3285 <i class="fa-solid fa-xmark"></i> 3286 </button> 3287 </div> 3288 3289 <div class="group"> 3290 <div class="section-title">Navigation</div> 3291 <div class="nav-list"> 3292 <a href="/" class="nav-item"> 3293 <div class="nav-left"> 3294 <span class="nav-icon"><i class="fa-solid fa-house"></i></span> 3295 <span>Home</span> 3296 </div> 3297 <i class="fa-solid fa-chevron-right nav-arrow"></i> 3298 </a> 3299 3300 <button class="nav-toggle" id="usScriptsToggle" type="button"> 3301 <div class="nav-left"> 3302 <span class="nav-icon"><i class="fa-solid fa-code"></i></span> 3303 <span>Products</span> 3304 </div> 3305 <i class="fa-solid fa-chevron-down nav-arrow"></i> 3306 </button> 3307 3308 <div class="submenu" id="usScriptsMenu"> 3309 <div class="submenu-inner"> 3310 <a href="/products/fivem"> 3311 <img 3312 class="submenu-brand-logo submenu-brand-logo-fivem" 3313 src="https://cdn.simpleicons.org/fivem/F40552" 3314 alt="" 3315 aria-hidden="true" 3316 /> 3317 <span>FiveM</span> 3318 </a> 3319 <a href="/products/minecraft"> 3320 <img 3321 class="submenu-brand-logo submenu-brand-logo-minecraft" 3322 src="https://commons.wikimedia.org/wiki/Special:Redirect/file/Minecraft-creeper-face.svg" 3323 alt="" 3324 aria-hidden="true" 3325 /> 3326 <span>Minecraft</span> 3327 </a> 3328 <a href="/products/other"> 3329 <i class="fa-solid fa-shapes submenu-product-icon" aria-hidden="true"></i> 3330 <span>Other</span> 3331 </a> 3332 </div> 3333 </div> 3334 3335 <a href="/documentation" class="nav-item"> 3336 <div class="nav-left"> 3337 <span class="nav-icon"><i class="fa-regular fa-file-lines"></i></span> 3338 <span>Documentation</span> 3339 </div> 3340 <i class="fa-solid fa-chevron-right nav-arrow"></i> 3341 </a> 3342 </div> 3343 </div> 3344 3345 <div class="group"> 3346 <div class="section-title">Follow us</div> 3347 <div class="social-grid"> 3348 <a href="https://discord.com/invite/WAZe8ruSTm" class="social-btn"> 3349 <i class="fa-brands fa-discord"></i> 3350 <span>Discord</span> 3351 </a> 3352 <a href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw" class="social-btn"> 3353 <i class="fa-brands fa-youtube"></i> 3354 <span>YouTube</span> 3355 </a> 3356 <a href="https://github.com/Official-Unreal-Studios" class="social-btn"> 3357 <i class="fa-brands fa-github"></i> 3358 <span>GitHub</span> 3359 </a> 3360 </div> 3361 </div> 3362 3363 <div class="group"> 3364 <div class="section-title">Currency</div> 3365 <div class="currency-grid"> 3366 <button class="currency-btn active" type="button" data-currency="USD">USD</button> 3367 <button class="currency-btn" type="button" data-currency="GBP">GBP</button> 3368 <button class="currency-btn" type="button" data-currency="EUR">EUR</button> 3369 <button class="currency-btn" type="button" data-currency="AUD">AUD</button> 3370 <button class="currency-btn" type="button" data-currency="CAD">CAD</button> 3371 <button class="currency-btn" type="button" data-currency="PLN">PLN</button> 3372 </div> 3373 </div> 3374 3375 <div class="group"> 3376 <a href="https://unreal-studios-shop.tebex.io/checkout/basket" class="basket-btn"> 3377 <i class="fa-solid fa-cart-shopping"></i> 3378 <span>Basket</span> 3379 <i class="fa-solid fa-chevron-right" aria-hidden="true"></i> 3380</a> 3381 </div> 3382 3383 <div class="group mobile-account-group"> 3384 <div class="section-title">Account</div> 3385 3386 <div id="mobileAuthSlot"> 3387 <a id="mobileLoginBtn" href="/login" class="login-btn open-login-btn">
3388 <span> 3389 <i class="fa-solid fa-arrow-right-to-bracket"></i> 3390 Login 3391 </span> 3392 <i class="fa-solid fa-chevron-right"></i> 3393 </a> 3394 3395 <div id="mobileUserBox" class="home-mobile-auth-user hidden" hidden aria-hidden="true"> 3396 <button 3397 id="mobileAccountToggle" 3398 class="home-mobile-auth-head" 3399 type="button" 3400 aria-expanded="false" 3401 > 3402 <span class="home-mobile-auth-left"> 3403 <img 3404 id="mobileUserAvatar" 3405 alt="Profile" 3406 > 3407 <span> 3408 <span id="mobileUserName" class="home-mobile-auth-name">Account</span> 3409 <span class="home-mobile-auth-meta"> 3410 <span id="mobileUserRole" class="home-mobile-auth-sub">Signed in</span> 3411 <span id="mobileStatusBadge" class="urs-account-status-pill" hidden></span> 3412 </span> 3413 </span> 3414 </span> 3415 3416 <i class="fa-solid fa-chevron-down mobile-account-toggle-chevron"></i> 3417 </button> 3418 3419 <div id="mobileAccountDropdown" class="home-account-dropdown"> 3420 <a href="/account/settings"> 3421 <i class="fa-solid fa-user"></i> 3422 <span>My Account</span> 3423 </a> 3424 3425 <a href="/account/transactions"> 3426 <i class="fa-solid fa-receipt"></i> 3427 <span>Orders</span> 3428 </a> 3429 3430 <a href="/account/support"> 3431 <i class="fa-solid fa-life-ring"></i> 3432 <span>Support</span> 3433 </a> 3434 3435 <a href="/account/security"> 3436 <i class="fa-solid fa-shield-halved"></i> 3437 <span>Security</span> 3438 </a> 3439 3440 <a href="/partner/portal" id="mobilePartnerLink" class="home-account-dropdown-staff" hidden aria-hidden="true"> 3441 <i class="fa-solid fa-handshake"></i> 3442 <span>Partner Portal</span> 3443 </a> 3444 3445 <a href="/employee/dashboard" id="mobileStaffLink" class="home-account-dropdown-staff" hidden aria-hidden="true"> 3446 <i class="fa-solid fa-user-shield"></i> 3447 <span>Service Desk</span> 3448 </a> 3449 3450 <button 3451 type="button" 3452 class="home-account-dropdown-logout logout-trigger" 3453 > 3454 <i class="fa-solid fa-right-from-bracket"></i> 3455 <span>Logout</span> 3456 </button> 3457 </div> 3458 </div> 3459 </div> 3460</div> 3461 </div> 3462 </aside> 3463</div> 3464 3465 3466<style id="urs-account-status-pill-style"> 3467.urs-account-subline,.home-mobile-auth-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} 3468.urs-account-status-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;padding:0;border:0;border-radius:0;background:transparent;opacity:.94} 3469.urs-account-status-pill.is-limited{color:#f4c542 !important;background:transparent !important;border:0 !important} 3470.urs-account-status-pill.is-limited::before{content:"\f017";font-family:"Font Awesome 6 Free";font-weight:400;font-size:8.5px;line-height:1;color:inherit;transform:translateY(-.15px)} 3471.urs-account-status-pill.is-flagged{color:#fb923c !important;background:transparent !important;border:0 !important} 3472 3473/* Structural alignment: mirror the 55px Explore brand text row exactly. */ 3474.about-mega-initiatives{ 3475 grid-template-rows:73px minmax(0,1fr)!important; 3476} 3477.about-mega-initiatives > h3{ 3478 grid-row:1!important; 3479 height:55px!important; 3480 margin:0!important; 3481 padding:0!important; 3482 transform:none!important; 3483 align-self:start!important; 3484 display:flex!important; 3485 flex-direction:column!important; 3486 justify-content:center!important; 3487 gap:1px!important; 3488} 3489.about-mega-initiatives > h3 .initiative-eyebrow{ 3490 line-height:normal!important; 3491} 3492.about-mega-initiatives > h3 .initiative-title{ 3493 line-height:normal!important; 3494} 3495.about-mega-initiatives .about-mega-cards{ 3496 grid-row:2!important; 3497} 3498 3499/* REAL Key Initiatives alignment fix: target the element that actually renders. */ 3500.about-mega-initiatives{ 3501 grid-template-rows:55px minmax(0,1fr)!important; 3502} 3503.about-mega-initiatives-kicker{ 3504 grid-row:1!important;
3505 align-self:stretch!important; 3506 height:55px!important; 3507 margin:0!important; 3508 padding:0!important; 3509 transform:translateY(-6px)!important; 3510 display:grid!important; 3511 grid-template-columns:auto auto!important; 3512 grid-template-rows:auto auto!important; 3513 column-gap:5px!important; 3514 row-gap:1px!important; 3515 align-content:center!important; 3516 justify-content:start!important; 3517 width:max-content!important; 3518} 3519.about-mega-initiatives-kicker small{grid-column:1 / 3!important;grid-row:1!important;line-height:normal!important;} 3520.about-mega-initiatives-kicker strong{grid-column:1!important;grid-row:2!important;line-height:normal!important;} 3521.about-mega-initiatives-kicker svg{grid-column:2!important;grid-row:2!important;align-self:center!important;} 3522.about-mega-initiatives .about-mega-cards{grid-row:2!important;} 3523 3524/* Fill Key Initiatives cards without making them heavy. */ 3525.about-mega-card-copy{padding:13px 14px 46px!important;gap:6px!important} 3526.about-mega-card-copy strong{font-size:11px!important;line-height:1.2!important} 3527.about-mega-card-copy small{font-size:8.5px!important;line-height:1.45!important;max-width:96%!important} 3528.about-mega-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px} 3529.about-mega-card-meta>span{height:20px;padding:0 7px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.045);color:#bfc1c8;font-size:7.3px;font-weight:620;line-height:1;white-space:nowrap} 3530.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-meta{margin-top:5px} 3531 3532/* Clean final Key Initiatives layout. */ 3533.about-mega-initiatives .about-mega-cards{ 3534 display:grid!important; 3535 grid-template-columns:repeat(2,minmax(0,1fr))!important; 3536 grid-template-rows:238px 123px!important; 3537 gap:12px!important; 3538 height:373px!important; 3539 min-height:0!important; 3540 overflow:visible!important; 3541} 3542.about-mega-initiatives .about-mega-card{position:relative!important;min-height:0!important;height:100%!important;overflow:hidden!important;} 3543.about-mega-initiatives .about-mega-card:nth-child(-n+2){display:flex!important;flex-direction:column!important;} 3544.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{height:108px!important;flex:0 0 108px!important;} 3545.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-copy{flex:1 1 auto!important;padding:13px 58px 13px 14px!important;display:flex!important;flex-direction:column!important;gap:6px!important;justify-content:flex-start!important;overflow:hidden!important;} 3546.about-mega-initiatives .about-mega-card-copy strong{font-size:10.7px!important;line-height:1.22!important;} 3547.about-mega-initiatives .about-mega-card-copy small{font-size:8.35px!important;line-height:1.4!important;max-width:100%!important;} 3548.about-mega-initiatives .about-mega-card-meta{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:2px!important;padding:0!important;} 3549.about-mega-initiatives .about-mega-card-meta>span{height:19px!important;padding:0 7px!important;font-size:7.1px!important;} 3550.about-mega-initiatives .about-mega-card-arrow{position:absolute!important;left:auto!important;right:14px!important;bottom:14px!important;width:34px!important;height:34px!important;border-radius:10px!important;display:grid!important;place-items:center!important;color:#eeeef4!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;border:1px solid rgba(255,255,255,.065)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 6px 16px rgba(0,0,0,.16)!important;transform:none!important;transition:transform 160ms ease,background 160ms ease,border-color 160ms ease!important;} 3551.about-mega-initiatives .about-mega-card-arrow svg{width:14px!important;height:14px!important;} 3552.about-mega-initiatives .about-mega-card:hover .about-mega-card-arrow{transform:translate(1px,-1px)!important;background:linear-gradient(180deg,rgba(139,108,255,.18),rgba(255,255,255,.045))!important;border-color:rgba(150,120,255,.20)!important;} 3553.about-mega-initiatives .about-mega-card:nth-child(3){grid-column:1/-1!important;display:grid!important;
3553grid-template-columns:170px minmax(0,1fr)!important;grid-template-rows:123px!important;height:123px!important;} 3554.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{height:123px!important;min-height:123px!important;} 3555.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-copy{padding:18px 64px 16px 16px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;overflow:hidden!important;} 3556.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-meta{margin-top:2px!important;padding:0!important;} 3557.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-arrow{right:14px!important;bottom:50%!important;transform:translateY(50%)!important;} 3558.about-mega-initiatives .about-mega-card:nth-child(3):hover .about-mega-card-arrow{transform:translate(1px,calc(50% - 1px))!important;} 3559 3560/* Keep only the middle initiative cards contained; do not resize the side columns. */ 3561.about-mega-shell{height:430px!important;min-height:0!important;} 3562.about-mega-initiatives{display:grid!important;grid-template-rows:55px minmax(0,1fr)!important;min-height:0!important;overflow:hidden!important;} 3563.about-mega-initiatives .about-mega-cards{height:100%!important;min-height:0!important;overflow:hidden!important;grid-template-rows:minmax(0,1.55fr) minmax(0,.72fr)!important;} 3564.about-mega-initiatives .about-mega-card{min-height:0!important;max-height:100%!important;} 3565.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-media{height:88px!important;flex:0 0 88px!important;} 3566.about-mega-initiatives .about-mega-card:nth-child(-n+2) .about-mega-card-copy{padding:10px 12px 44px!important;overflow:hidden!important;} 3567.about-mega-initiatives .about-mega-card:nth-child(3){min-height:0!important;overflow:hidden!important;} 3568.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-media{min-height:0!important;overflow:hidden!important;} 3569.about-mega-initiatives .about-mega-card:nth-child(3) .about-mega-card-copy{min-height:0!important;overflow:hidden!important;padding:10px 56px 10px 14px!important;} 3570 3571/* Keep Updates & News fully visible in the final mega-menu layout. */ 3572.about-mega-updates{ 3573 display:grid!important; 3574 grid-template-rows:55px 28px minmax(0,1fr)!important; 3575 min-height:0!important; 3576 overflow:visible!important; 3577} 3578.about-mega-updates .about-mega-search{grid-row:1!important;align-self:start!important;} 3579.about-mega-updates>h3{grid-row:2!important;align-self:center!important;} 3580.about-mega-updates .about-mega-update-list{ 3581 grid-row:3!important; 3582 display:grid!important; 3583 grid-template-rows:repeat(3,minmax(0,1fr))!important; 3584 width:100%!important; 3585 min-height:0!important; 3586 height:auto!important; 3587 opacity:1!important; 3588 visibility:visible!important; 3589 overflow:hidden!important; 3590} 3591.about-mega-updates .about-mega-update-list>a:not([hidden]){ 3592 display:grid!important; 3593 min-height:0!important; 3594 opacity:1!important; 3595 visibility:visible!important; 3596} 3597 3598/* Landscape thumbnails for Updates & News. */ 3599.about-mega-update-list>a{grid-template-columns:minmax(0,1fr) 110px!important;gap:14px!important;padding:11px 12px!important;} 3600.about-mega-update-thumb{width:110px!important;height:62px!important;border-radius:5px!important;justify-self:end!important;border:0!important;box-shadow:none!important;} 3601.about-mega-update-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:saturate(.82) brightness(.78)!important;} 3602.about-mega-update-thumb.is-logo{display:block!important;background:radial-gradient(circle at 50% 45%,rgba(134,51,193,.32),rgba(44,28,55,.82))!important;} 3603.about-mega-update-thumb.is-logo img{width:100%!important;height:100%!important;object-fit:cover!important;filter:none!important;} 3604 3605</style> 3606
3607<script src="/javascript/public/currency-system.js?v=20261004-usd-tebex-sale-3"></script>
vendor: 1 bytes, line 3607
3607
3608<script id="urs-site-shell-controller"> 3609(() => { 3610 const CURRENCIES = [ 3611 ["USD", "US Dollar"], 3612 ["GBP", "British Pound"], 3613 ["EUR", "Euro"], 3614 ["AUD", "Australian Dollar"], 3615 ["CAD", "Canadian Dollar"], 3616 ["PLN", "Polish Zloty"] 3617 ]; 3618 3619 const $ = (id) => document.getElementById(id); 3620 3621 function displayName(user) { 3622 return ( 3623 user?.global_name || 3624 user?.display_name || 3625 user?.displayName || 3626 user?.discord_username || 3627 user?.username || 3628 user?.name || 3629 user?.cfx_username || 3630 "Account" 3631 ); 3632 } 3633 3634 function avatarUrl(user) { 3635 if (!user) return "/assets/img/logos/urs-logo-bw.png"; 3636 3637 const avatar = String(user.avatar || "").trim(); 3638 3639 if (avatar.startsWith("/uploads/")) return avatar; 3640 if (/^https?:\/\//i.test(avatar)) return avatar; 3641 3642 const discordId = String(user.discord_id || user.discordId || "").trim(); 3643 3644 if (avatar && discordId) { 3645 const ext = avatar.startsWith("a_") ? "gif" : "png"; 3646 return `https://cdn.discordapp.com/avatars/${discordId}/${avatar}.${ext}?size=128`; 3647 } 3648 3649 if (discordId && /^\d+$/.test(discordId)) { 3650 try { 3651 const index = Number((BigInt(discordId) >> 22n) % 6n); 3652 return `https://cdn.discordapp.com/embed/avatars/${index}.png`; 3653 } catch (_) {} 3654 } 3655 3656 return "/assets/img/logos/urs-logo-bw.png"; 3657 } 3658 3659 function accountRole(user) { 3660 return user?.account_rank || user?.login_platform || "Signed in"; 3661 } 3662 3663 function accountStatus(user) { 3664 const status = String(user?.account_status || '').trim().toLowerCase(); 3665 return status === 'limited' ? status : ''; 3666 } 3667 3668 function isStaffAccount(user) { 3669 const rank = String( 3670 user?.account_rank || 3671 user?.staff_rank || 3672 user?.rank || 3673 user?.role || 3674 "" 3675 ).trim().toLowerCase(); 3676 3677 return ["trial support", "support", "senior support", "mod", "moderator", "senior moderator", "manager", "admin", "administrator", "owner"].includes(rank); 3678 } 3679 3680 function isPartnerAccount(user) { 3681 const rank = String(user?.account_rank || user?.rank || user?.role || "").trim().toLowerCase(); 3682 return rank === "partner" || Number(user?.partner_portal_access || 0) === 1; 3683 } 3684 3685 // -------------------------------------------------------- 3686 // Desktop account 3687 // -------------------------------------------------------- 3688 const desktopLogin = $("open-login"); 3689 const desktopUserBtn = $("desktopUserBtn"); 3690 const desktopDropdown = $("desktopUserDropdown"); 3691 const desktopPartnerSection = $("desktopPartnerSection"); 3692 const desktopStaffSection = $("desktopStaffSection"); 3693 3694 function positionDesktopAccountDropdown() { 3695 if (!desktopUserBtn || !desktopDropdown) return; 3696 const rect = desktopUserBtn.getBoundingClientRect(); 3697 const navBottom = document.getElementById("navbar")?.getBoundingClientRect().bottom || 64; 3698 const right = Math.max(12, window.innerWidth - rect.right); 3699 desktopDropdown.style.setProperty("top", `${Math.round(Math.max(rect.bottom + 8, navBottom + 8))}px`, "important"); 3700 desktopDropdown.style.setProperty("right", `${Math.round(right)}px`, "important"); 3701 desktopDropdown.style.setProperty("left", "auto", "important"); 3702 } 3703 3704 function closeDesktopAccount({ instant = false } = {}) { 3705 if (instant) desktopDropdown?.classList.add("urs-topbar-instant-close"); 3706 desktopDropdown?.classList.remove("active"); 3707 desktopUserBtn?.setAttribute("aria-expanded", "false"); 3708 if (instant && desktopDropdown) { 3709 void desktopDropdown.offsetHeight; 3710 requestAnimationFrame(() => desktopDropdown.classList.remove("urs-topbar-instant-close")); 3711 } 3712 } 3713 3714 desktopUserBtn?.addEventListener("click", (event) => { 3715 event.preventDefault(); 3716 event.stopPropagation(); 3717 3718 if (desktopDropdown?.classList.contains("active")) { 3719 closeDesktopAccount(); 3720 return; 3721 } 3722 3723 setDesktopCurrencyOpen(false, { instant: true }); 3724 closeAboutMega({ instant: true }); 3725 3726 // A forced close from a previous top-bar switch must never consume 3727 // the next Account click. Clear that state before opening explicitly. 3728 desktopDropdown?.classList.remove("urs-topbar-instant-close"); 3729 desktopDropdown?.style.removeProperty("display"); 3730 positionDesktopAccountDropdown(); 3731 desktopDropdown?.classList.add("active"); 3732 desktopUserBtn.setAttribute("aria-expanded", "true"); 3733 }); 3734 3735 window.addEventListener("resize", () => { 3736 if (desktopDropdown?.classList.contains("active")) positionDesktopAccountDropdown(); 3737 }, { passive: true }); 3738 3739 desktopDropdown?.addEventListener("click", (event) => event.stopPropagation()); 3740 3741 // -------------------------------------------------------- 3742 // Mobile drawer 3743 // -------------------------------------------------------- 3744 const mobileMenuBtn = $("mobile-menu-btn"); 3745 const mobileOverlay = $("usMenuOverlay"); 3746 const mobileDrawer = $("usMenuDrawer"); 3747 const mobileClose = $("usMenuCloseBtn"); 3748 const productsToggle = $("usScriptsToggle"); 3749 const productsMenu = $("usScriptsMenu"); 3750 3751 function openMobileMenu() { 3752 mobileOverlay?.classList.add("active"); 3753 mobileDrawer?.classList.add("active"); 3754 mobileDrawer?.setAttribute("aria-hidden", "false"); 3755 mobileMenuBtn?.setAttribute("aria-expanded", "true"); 3756 document.documentElement.style.overflow = "hidden"; 3757 } 3758 3759 function closeMobileMenu() { 3760 mobileOverlay?.classList.remove("active"); 3761 mobileDrawer?.classList.remove("active"); 3762 mobileDrawer?.setAttribute("aria-hidden", "true"); 3763 mobileMenuBtn?.setAttribute("aria-expanded", "false"); 3764 document.documentElement.style.removeProperty("overflow"); 3765 } 3766 3767 mobileMenuBtn?.addEventListener("click", (event) => { 3768 event.preventDefault(); 3769 event.stopPropagation(); 3770 openMobileMenu(); 3771 }); 3772 3773 mobileClose?.addEventListener("click", closeMobileMenu); 3774 mobileOverlay?.addEventListener("click", closeMobileMenu); 3775 3776 productsToggle?.addEventListener("click", (event) => { 3777 event.preventDefault(); 3778 const open = !productsMenu?.classList.contains("open");
3779 productsMenu?.classList.toggle("open", open); 3780 productsToggle.classList.toggle("open", open); 3781 productsToggle.setAttribute("aria-expanded", open ? "true" : "false"); 3782 }); 3783 3784 // -------------------------------------------------------- 3785 // Currency 3786 // -------------------------------------------------------- 3787 const desktopCurrencyTrigger = $("trigger-btn"); 3788 const desktopCurrencyDropdown = $("dropdown-wrapper"); 3789 const desktopCurrencyGrid = $("currency-grid"); 3790 const activeLabel = $("active-label"); 3791 3792 function getCurrency() { 3793 if (window.URS_CURRENCY) return window.URS_CURRENCY.getSelected(); 3794 const saved = String(localStorage.getItem("user-currency") || "USD").toUpperCase(); 3795 return CURRENCIES.some(([code]) => code === saved) ? saved : "USD"; 3796 } 3797 3798 function setCurrency(code) { 3799 if (!CURRENCIES.some(([item]) => item === code)) return; 3800 3801 if (window.URS_CURRENCY) { 3802 window.URS_CURRENCY.setSelected(code); 3803 } else { 3804 localStorage.setItem("user-currency", code); 3805 window.dispatchEvent(new CustomEvent("urs:currency-change", { detail: { currency: code } })); 3806 } 3807 3808 if (activeLabel) activeLabel.textContent = code; 3809 3810 document.querySelectorAll(".us-menu .currency-btn").forEach((button) => { 3811 const buttonCode = String(button.dataset.currency || button.textContent || "").trim().toUpperCase(); 3812 button.dataset.currency = buttonCode; 3813 button.classList.toggle("active", buttonCode === code); 3814 }); 3815 3816 desktopCurrencyGrid?.querySelectorAll(".currency-btn").forEach((button) => { 3817 button.classList.toggle("active", button.dataset.currency === code); 3818 }); 3819 } 3820 3821 if (desktopCurrencyGrid) { 3822 desktopCurrencyGrid.innerHTML = ""; 3823 3824 CURRENCIES.forEach(([code, name]) => { 3825 const button = document.createElement("button"); 3826 button.type = "button"; 3827 button.className = "currency-btn"; 3828 button.dataset.currency = code; 3829 button.textContent = code; 3830 button.setAttribute("aria-label", name); 3831 button.addEventListener("click", () => { 3832 setCurrency(code); 3833 setDesktopCurrencyOpen(false); 3834 desktopCurrencyTrigger?.setAttribute("aria-expanded", "false"); 3835 }); 3836 desktopCurrencyGrid.appendChild(button); 3837 }); 3838 } 3839 3840 function positionDesktopCurrencyDropdown() { 3841 if (!desktopCurrencyTrigger || !desktopCurrencyDropdown) return; 3842 const rect = desktopCurrencyTrigger.getBoundingClientRect(); 3843 const navBottom = document.getElementById("navbar")?.getBoundingClientRect().bottom || 64; 3844 const right = Math.max(12, window.innerWidth - rect.right); 3845 desktopCurrencyDropdown.style.setProperty("top", `${Math.round(Math.max(rect.bottom + 7, navBottom + 7))}px`, "important"); 3846 desktopCurrencyDropdown.style.setProperty("right", `${Math.round(right)}px`, "important"); 3847 desktopCurrencyDropdown.style.setProperty("left", "auto", "important"); 3848 } 3849 3850 function setDesktopCurrencyOpen(open, { instant = false } = {}) { 3851 if (!desktopCurrencyDropdown || !desktopCurrencyTrigger) return; 3852 if (open) { 3853 closeDesktopAccount({ instant: true }); 3854 closeAboutMega({ instant: true }); 3855 positionDesktopCurrencyDropdown(); 3856 } else if (instant) { 3857 desktopCurrencyDropdown.classList.add("urs-topbar-instant-close"); 3858 } 3859 desktopCurrencyDropdown.classList.toggle("urs-currency-open", open); 3860 desktopCurrencyTrigger.setAttribute("aria-expanded", open ? "true" : "false"); 3861 if (!open && instant) { 3862 void desktopCurrencyDropdown.offsetHeight; 3863 requestAnimationFrame(() => desktopCurrencyDropdown.classList.remove("urs-topbar-instant-close")); 3864 } 3865 } 3866 3867 desktopCurrencyTrigger?.addEventListener("click", (event) => { 3868 event.preventDefault(); 3869 event.stopPropagation(); 3870 setDesktopCurrencyOpen(!desktopCurrencyDropdown?.classList.contains("urs-currency-open")); 3871 }); 3872 3873 window.addEventListener("resize", () => { 3874 if (desktopCurrencyDropdown?.classList.contains("urs-currency-open")) positionDesktopCurrencyDropdown(); 3875 }, { passive: true }); 3876 3877 desktopCurrencyDropdown?.addEventListener("click", (event) => event.stopPropagation()); 3878 3879 document.querySelectorAll(".us-menu .currency-btn").forEach((button) => { 3880 const code = String(button.textContent || "").trim().toUpperCase(); 3881 button.dataset.currency = code; 3882 button.addEventListener("click", () => setCurrency(code)); 3883 }); 3884 3885 setDesktopCurrencyOpen(false); 3886 desktopCurrencyTrigger?.setAttribute("aria-expanded", "false"); 3887 setCurrency(getCurrency()); 3888 3889 // -------------------------------------------------------- 3890 // Mobile account 3891 // -------------------------------------------------------- 3892 const mobileLogin = $("mobileLoginBtn"); 3893 const mobileUserBox = $("mobileUserBox"); 3894 const mobileAccountToggle = $("mobileAccountToggle"); 3895 const mobileAccountDropdown = $("mobileAccountDropdown"); 3896 const mobilePartnerLink = $("mobilePartnerLink"); 3897 const mobileStaffLink = $("mobileStaffLink"); 3898 3899 const HEADER_AUTH_CACHE_KEY = "urs-header-auth-v2"; 3900 3901 function readHeaderAuthCache() { 3902 try { 3903 const raw = sessionStorage.getItem(HEADER_AUTH_CACHE_KEY); 3904 if (!raw) return null; 3905 const cached = JSON.parse(raw); 3906 return cached && typeof cached === "object" ? cached : null; 3907 } catch (_) { 3908 return null; 3909 } 3910 } 3911 3912 function writeHeaderAuthCache(user) { 3913 try { 3914 sessionStorage.setItem(HEADER_AUTH_CACHE_KEY, JSON.stringify({ 3915 global_name: displayName(user), 3916 avatar: avatarUrl(user), 3917 account_rank: user?.account_rank || 'Member', 3918 account_status: user?.account_status || 'enabled', 3919 login_platform: user?.login_platform || null 3920 })); 3921 } catch (_) {} 3922 } 3923 3924 function clearHeaderAuthCache() { 3925 try { sessionStorage.removeItem(HEADER_AUTH_CACHE_KEY); } catch (_) {} 3926 } 3927 3928 function closeMobileAccount() { 3929 mobileAccountDropdown?.classList.remove("open"); 3930 mobileAccountToggle?.setAttribute("aria-expanded", "false"); 3931 } 3932 3933 mobileAccountToggle?.addEventListener("click", (event) => { 3934 event.preventDefault(); 3935 event.stopPropagation(); 3936 3937 const open = !mobileAccountDropdown?.classList.contains("open");
3938 mobileAccountDropdown?.classList.toggle("open", open); 3939 mobileAccountToggle.setAttribute("aria-expanded", open ? "true" : "false"); 3940 }); 3941 3942 mobileAccountDropdown?.addEventListener("click", (event) => event.stopPropagation()); 3943 3944 // -------------------------------------------------------- 3945 // Auth state from the real session endpoint. 3946 // -------------------------------------------------------- 3947 function showLoggedOut() { 3948 try { 3949 sessionStorage.setItem(HEADER_AUTH_CACHE_KEY, JSON.stringify({ loggedOut: true })); 3950 } catch (_) {} 3951 desktopAuth?.setAttribute("data-auth-ready", "true"); 3952 if (desktopLogin) { 3953 desktopLogin.classList.remove("hidden"); 3954 desktopLogin.hidden = false; 3955 desktopLogin.style.removeProperty("display"); 3956 } 3957 3958 if (desktopUserBtn) { 3959 desktopUserBtn.classList.add("hidden"); 3960 desktopUserBtn.hidden = true; 3961 } 3962 3963 if (desktopPartnerSection) { 3964 desktopPartnerSection.hidden = true; 3965 desktopPartnerSection.setAttribute("aria-hidden", "true"); 3966 } 3967 3968 if (mobilePartnerLink) { 3969 mobilePartnerLink.hidden = true; 3970 mobilePartnerLink.setAttribute("aria-hidden", "true"); 3971 } 3972 3973 if (desktopStaffSection) { 3974 desktopStaffSection.hidden = true; 3975 desktopStaffSection.setAttribute("aria-hidden", "true"); 3976 } 3977 3978 if (mobileStaffLink) { 3979 mobileStaffLink.hidden = true; 3980 mobileStaffLink.setAttribute("aria-hidden", "true"); 3981 } 3982 3983 if (mobileLogin) { 3984 mobileLogin.classList.remove("hidden"); 3985 mobileLogin.hidden = false; 3986 mobileLogin.style.removeProperty("display"); 3987 } 3988 3989 if (mobileUserBox) { 3990 mobileUserBox.classList.add("hidden"); 3991 mobileUserBox.hidden = true; 3992 mobileUserBox.setAttribute("aria-hidden", "true"); 3993 } 3994 3995 closeDesktopAccount(); 3996 closeMobileAccount(); 3997 } 3998 3999 function showLoggedIn(user) { 4000 const name = displayName(user); 4001 const avatar = avatarUrl(user); 4002 const role = accountRole(user); 4003 writeHeaderAuthCache(user); 4004 desktopAuth?.setAttribute("data-auth-ready", "true"); 4005 4006 if (desktopLogin) { 4007 desktopLogin.classList.add("hidden"); 4008 desktopLogin.hidden = true; 4009 desktopLogin.style.setProperty("display", "none", "important"); 4010 } 4011 4012 if (desktopUserBtn) { 4013 desktopUserBtn.classList.remove("hidden"); 4014 desktopUserBtn.hidden = false; 4015 } 4016 4017 const desktopAvatar = $("desktopUserAvatar"); 4018 const desktopName = $("desktopUserName"); 4019 const dropdownAvatar = $("dropdownUserAvatar"); 4020 const dropdownName = $("dropdownUserName"); 4021 const dropdownSub = $("dropdownUserSub"); 4022 4023 if (desktopAvatar) desktopAvatar.src = avatar; 4024 if (desktopName) desktopName.textContent = name; 4025 if (dropdownAvatar) dropdownAvatar.src = avatar; 4026 if (dropdownName) dropdownName.textContent = name; 4027 if (dropdownSub) dropdownSub.textContent = role; 4028 const status = accountStatus(user); 4029 const dropdownStatusBadge = $("dropdownStatusBadge"); 4030 if (dropdownStatusBadge) { 4031 dropdownStatusBadge.hidden = true; 4032 dropdownStatusBadge.textContent = ''; 4033 dropdownStatusBadge.classList.remove('is-limited', 'is-flagged'); 4034 } 4035 4036 const rawStatus = String(user?.account_status || '').trim().toLowerCase(); 4037 const limitedAccount = rawStatus === 'limited'; 4038 const privateLinks = document.querySelectorAll( 4039 '#desktopUserDropdown a[href="/account/settings"], #desktopUserDropdown a[href="/account/transactions"], #desktopUserDropdown a[href="/account/security"], ' + 4040 '#mobileAccountDropdown a[href="/account/settings"], #mobileAccountDropdown a[href="/account/transactions"], #mobileAccountDropdown a[href="/account/security"]' 4041 ); 4042 privateLinks.forEach((link) => { link.hidden = limitedAccount; }); 4043 4044 const partnerAccount = !limitedAccount && isPartnerAccount(user); 4045 if (desktopPartnerSection) { 4046 desktopPartnerSection.hidden = !partnerAccount; 4047 desktopPartnerSection.setAttribute("aria-hidden", partnerAccount ? "false" : "true"); 4048 } 4049 if (mobilePartnerLink) { 4050 mobilePartnerLink.hidden = !partnerAccount; 4051 mobilePartnerLink.setAttribute("aria-hidden", partnerAccount ? "false" : "true"); 4052 } 4053 4054 const staffAccount = !limitedAccount && isStaffAccount(user); 4055 if (desktopStaffSection) { 4056 desktopStaffSection.hidden = !staffAccount; 4057 desktopStaffSection.setAttribute("aria-hidden", staffAccount ? "false" : "true"); 4058 } 4059 if (mobileStaffLink) { 4060 mobileStaffLink.hidden = !staffAccount; 4061 mobileStaffLink.setAttribute("aria-hidden", staffAccount ? "false" : "true"); 4062 } 4063 4064 if (mobileLogin) { 4065 mobileLogin.classList.add("hidden"); 4066 mobileLogin.hidden = true; 4067 mobileLogin.style.setProperty("display", "none", "important"); 4068 } 4069 4070 if (mobileUserBox) { 4071 mobileUserBox.classList.remove("hidden"); 4072 mobileUserBox.hidden = false;
4073 mobileUserBox.style.removeProperty("display"); 4074 mobileUserBox.setAttribute("aria-hidden", "false"); 4075 } 4076 4077 const mobileAvatar = $("mobileUserAvatar"); 4078 const mobileName = $("mobileUserName"); 4079 const mobileRole = $("mobileUserRole"); 4080 4081 if (mobileAvatar) mobileAvatar.src = avatar; 4082 if (mobileName) mobileName.textContent = name; 4083 if (mobileRole) mobileRole.textContent = role; 4084 const mobileStatusBadge = $("mobileStatusBadge"); 4085 if (mobileStatusBadge) { 4086 mobileStatusBadge.hidden = true; 4087 mobileStatusBadge.textContent = ''; 4088 mobileStatusBadge.classList.remove('is-limited', 'is-flagged'); 4089 } 4090 4091 closeDesktopAccount(); 4092 closeMobileAccount(); 4093 } 4094 4095 const headerWasServerAuthenticated = !!( 4096 desktopUserBtn && 4097 !desktopUserBtn.hidden && 4098 !desktopUserBtn.classList.contains("hidden") 4099 ); 4100 4101 async function syncAuth() { 4102 try { 4103 const response = await fetch("/api/user", { 4104 credentials: "include", 4105 cache: "no-store", 4106 headers: { Accept: "application/json" } 4107 }); 4108 4109 /* A full navigation already rendered the signed-in account from the 4110 server. Never blank that stable UI because a background auth 4111 refresh briefly fails or races the session store. */ 4112 if (!response.ok) { 4113 if (!headerWasServerAuthenticated) showLoggedOut(); 4114 return; 4115 } 4116 4117 const data = await response.json(); 4118 4119 if ( 4120 data?.loggedIn === true && 4121 data?.user && 4122 typeof data.user === "object" 4123 ) { 4124 showLoggedIn(data.user); 4125 } else if (!headerWasServerAuthenticated) { 4126 showLoggedOut(); 4127 } 4128 } catch (_) { 4129 if (!headerWasServerAuthenticated && !readHeaderAuthCache()) showLoggedOut(); 4130 } 4131 } 4132 4133 async function logout(event) { 4134 event.preventDefault(); 4135 event.stopPropagation(); 4136 4137 try { 4138 await fetch("/api/logout", { 4139 method: "POST", 4140 credentials: "include", 4141 cache: "no-store", 4142 headers: { Accept: "application/json" } 4143 }); 4144 } catch (_) {} 4145 4146 window.location.replace("/"); 4147 } 4148 4149 document.querySelectorAll(".urs-account-mini-logout, .logout-trigger").forEach((node) => { 4150 node.addEventListener("click", logout); 4151 }); 4152 4153 // Login controls go to the real login page. 4154 desktopLogin?.addEventListener("click", (event) => { 4155 event.preventDefault(); 4156 window.location.href = "/login"; 4157 }); 4158 mobileLogin?.setAttribute("href", "/login"); 4159 4160 // -------------------------------------------------------- 4161 // About mega menu. 4162 // -------------------------------------------------------- 4163 const aboutMegaTrigger = document.getElementById('aboutMegaTrigger'); 4164 const aboutMegaMenu = document.getElementById('aboutMegaMenu'); 4165 const aboutMegaSearch = document.getElementById('aboutMegaSearch'); 4166 const aboutMegaNoResults = document.getElementById('aboutMegaNoResults'); 4167 const aboutMegaUpdates = aboutMegaMenu?.querySelector('.about-mega-updates'); 4168 4169 function closeAboutMega({ restoreFocus = false, instant = false } = {}) { 4170 if (!aboutMegaMenu || !aboutMegaTrigger) return; 4171 if (instant) aboutMegaMenu.classList.add('urs-topbar-instant-close'); 4172 aboutMegaMenu.classList.remove('is-open'); 4173 aboutMegaMenu.setAttribute('aria-hidden', 'true'); 4174 aboutMegaTrigger.setAttribute('aria-expanded', 'false'); 4175 if (aboutMegaSearch) { 4176 aboutMegaSearch.value = ''; 4177 aboutMegaMenu.querySelectorAll('[data-about-search]').forEach((item) => { item.hidden = false; }); 4178 if (aboutMegaNoResults) aboutMegaNoResults.hidden = true; 4179 aboutMegaUpdates?.classList.remove('is-empty'); 4180 } 4181 if (restoreFocus) aboutMegaTrigger.focus({ preventScroll: true }); 4182 if (instant) { 4183 void aboutMegaMenu.offsetHeight; 4184 requestAnimationFrame(() => aboutMegaMenu.classList.remove('urs-topbar-instant-close')); 4185 } 4186 } 4187 4188 function openAboutMega() { 4189 if (!aboutMegaMenu || !aboutMegaTrigger || window.innerWidth <= 1180) return; 4190 closeDesktopAccount({ instant: true }); 4191 closeMobileAccount(); 4192 setDesktopCurrencyOpen(false, { instant: true }); 4193 desktopCurrencyTrigger?.setAttribute('aria-expanded', 'false'); 4194 aboutMegaMenu.classList.add('is-open'); 4195 aboutMegaMenu.setAttribute('aria-hidden', 'false'); 4196 aboutMegaTrigger.setAttribute('aria-expanded', 'true'); 4197 } 4198 4199 aboutMegaTrigger?.addEventListener('click', (event) => { 4200 event.preventDefault(); 4201 event.stopPropagation(); 4202 const shouldOpen = !aboutMegaMenu?.classList.contains('is-open'); 4203 if (shouldOpen) openAboutMega(); 4204 else closeAboutMega(); 4205 }); 4206 4207 aboutMegaMenu?.addEventListener('click', (event) => { 4208 event.stopPropagation(); 4209 if (event.target.closest('a')) closeAboutMega(); 4210 }); 4211 4212 aboutMegaSearch?.addEventListener('keydown', (event) => { 4213 if (event.key !== 'Enter') return; 4214 event.preventDefault(); 4215 const query = String(aboutMegaSearch.value || '').trim(); 4216 const target = query ? `/news?q=${encodeURIComponent(query)}` : '/news'; 4217 window.location.assign(target); 4218 }); 4219 4220 aboutMegaSearch?.addEventListener('input', () => { 4221 const query = String(aboutMegaSearch.value || '').trim().toLowerCase(); 4222 let visible = 0; 4223 const updateItems = aboutMegaMenu?.querySelectorAll('.about-mega-updates .about-mega-update-list [data-about-search]') || [];
4224 updateItems.forEach((item) => { 4225 const haystack = `${item.getAttribute('data-about-search') || ''} ${item.textContent || ''}`.toLowerCase(); 4226 const match = !query || haystack.includes(query); 4227 item.hidden = !match; 4228 if (match) visible += 1; 4229 }); 4230 if (aboutMegaNoResults) aboutMegaNoResults.hidden = !query || visible > 0; 4231 aboutMegaUpdates?.classList.toggle('is-empty', !!query && visible === 0); 4232 }); 4233 4234 document.getElementById('aboutMegaClearSearch')?.addEventListener('click', () => { 4235 if (!aboutMegaSearch) return; 4236 aboutMegaSearch.value = ''; 4237 aboutMegaSearch.dispatchEvent(new Event('input', { bubbles: true })); 4238 aboutMegaSearch.focus({ preventScroll: true }); 4239 }); 4240 4241 window.addEventListener('resize', () => { 4242 if (window.innerWidth <= 1180) closeAboutMega(); 4243 }, { passive: true }); 4244 4245 document.addEventListener("click", () => { 4246 closeAboutMega(); 4247 closeDesktopAccount(); 4248 closeMobileAccount(); 4249 4250 setDesktopCurrencyOpen(false); 4251 desktopCurrencyTrigger?.setAttribute("aria-expanded", "false"); 4252 }); 4253 4254 document.addEventListener("keydown", (event) => { 4255 if (event.key !== "Escape") return; 4256 closeAboutMega({ restoreFocus: aboutMegaMenu?.classList.contains('is-open') }); 4257 closeDesktopAccount(); 4258 closeMobileAccount(); 4259 closeMobileMenu(); 4260 4261 setDesktopCurrencyOpen(false); 4262 desktopCurrencyTrigger?.setAttribute("aria-expanded", "false"); 4263 }); 4264 4265 const cachedHeaderAuth = readHeaderAuthCache(); 4266 if (cachedHeaderAuth?.loggedOut === true) { 4267 showLoggedOut(); 4268 } else if (cachedHeaderAuth) { 4269 showLoggedIn(cachedHeaderAuth); 4270 } 4271 syncAuth(); 4272 4273 if (window.lucide) { 4274 window.lucide.createIcons(); 4275 } 4276})(); 4277</script>
4277 4278 4279 4280 <main class="products-page-content"> 4281 <!-- ===================================================== 4282 PRODUCT CATALOG HEADER 4283 This is intentionally compact: products are the focus. 4284 ===================================================== --> 4285 <header class="catalog-header"> 4286 <div class="page-shell catalog-heading"> 4287 <div class="catalog-intro"> 4288 <div class="breadcrumb"> 4289 <span>Unreal Studios</span> 4290 <i data-lucide="chevron-right"></i> 4291 <span>Store</span> 4292 <i data-lucide="chevron-right"></i> 4293 <span>Products</span> 4294 </div> 4295 4296 <h1 class="catalog-title">Browse <span>Products</span></h1> 4297 4298 <p class="catalog-subtitle"> 4299 Search all Unreal Studios resources in one place. Filter by platform and framework, 4300 then open a product to view details, compatibility, and purchase options. 4301 </p> 4302 4303 <div class="catalog-game-row"> 4304 <div class="game-filters" aria-label="Product categories"> 4305 <button class="game-chip active" data-game="all" type="button"> 4306 <i data-lucide="grid-2x2"></i> 4307 All 4308 </button> 4309 4310 <button class="game-chip" data-game="FiveM" type="button"> 4311 <img 4312 class="game-brand-logo game-brand-logo-fivem" 4313 src="https://cdn.simpleicons.org/fivem/F40552" 4314 alt="" 4315 aria-hidden="true" 4316 > 4317 FiveM 4318 </button> 4319 4320 <button class="game-chip" data-game="Minecraft" type="button"> 4321 <img 4322 class="game-brand-logo game-brand-logo-minecraft" 4323 src="https://commons.wikimedia.org/wiki/Special:Redirect/file/Minecraft-creeper-face.svg" 4324 alt="" 4325 aria-hidden="true" 4326 > 4327 Minecraft 4328 </button> 4329 4330 <button class="game-chip" data-game="Other" type="button"> 4331 <i data-lucide="package"></i> 4332 Other 4333 </button> 4334 </div> 4335 </div> 4336 </div> 4337 4338 </div> 4339 </header> 4340 4341 <!-- ===================================================== 4342 FILTERS 4343 ===================================================== --> 4344 <section class="filters-layer"> 4345 <div class="page-shell"> 4346 <div class="filter-panel"> 4347 <div class="filter-row-secondary"> 4348 <div class="framework-filter-group"> 4349 <p id="frameworkLabel">Filter</p> 4350 4351 <div id="frameworkFilters"></div> 4352 4353 <div id="frameworkDropdownWrap" class="framework-dropdown-wrap hidden"> 4354 <button id="frameworkDropdownBtn" class="framework-dropdown-btn" type="button"> 4355 <span id="frameworkDropdownLabel">All Frameworks</span> 4356 <i data-lucide="chevron-down"></i> 4357 </button> 4358 4359 <div id="frameworkDropdownMenu" class="framework-dropdown-menu hidden"></div> 4360 </div> 4361 </div> 4362 4363 <div class="catalog-search-actions"> 4364 <label class="filter-search-box" for="productSearch"> 4365 <i data-lucide="search"></i> 4366 <input id="productSearch" type="search" placeholder="Search products" autocomplete="off"> 4367 </label> 4368
4369 <div class="catalog-filter-menu-wrap"> 4370 <button 4371 id="ursCatalogFilterToggle" 4372 class="urs-catalog-filter-toggle" 4373 type="button" 4374 aria-label="Open product filters" 4375 aria-expanded="false" 4376 aria-controls="ursCatalogFilterPanel" 4377 > 4378 <i data-lucide="sliders-horizontal" aria-hidden="true"></i> 4379 <span class="urs-filter-active-dot" aria-hidden="true"></span> 4380 </button> 4381 4382 <div id="ursCatalogFilterPanel" class="urs-filter-panel hidden" hidden aria-hidden="true" role="dialog" aria-label="Product filters"> 4383 <div class="urs-filter-panel-head"> 4384 <div> 4385 <strong>Filters</strong> 4386 <span>Refine the product list</span> 4387 </div> 4388 4389 <button id="ursCatalogFilterClose" class="urs-filter-panel-close" type="button" aria-label="Close filters"> 4390 <i data-lucide="x"></i> 4391 </button> 4392 </div> 4393 4394 <div class="urs-filter-panel-content"> 4395 <section class="urs-filter-group"> 4396 <div class="urs-filter-group-label">Availability</div> 4397 4398 <div class="availability-filter urs-filter-pills" role="group" aria-label="Product pricing type"> 4399 <button class="catalog-filter-chip active" type="button" data-availability="all">All</button> 4400 <button class="catalog-filter-chip" type="button" data-availability="paid">Paid</button> 4401 <button class="catalog-filter-chip" type="button" data-availability="free">Free</button> 4402 <button class="catalog-filter-chip" type="button" data-availability="sale">Sale</button> 4403 </div> 4404 </section> 4405 4406 <section class="urs-filter-list"> 4407 <label class="urs-filter-list-row"> 4408 <span class="urs-filter-list-icon"> 4409 <i data-lucide="badge-dollar-sign"></i> 4410 </span> 4411 <span class="urs-filter-list-copy"> 4412 <strong>Price</strong> 4413 <small>Limit by cost</small> 4414 </span> 4415 <span class="urs-filter-select"> 4416 <select id="catalogPriceFilter" aria-label="Filter by price"> 4417 <option value="all">Any price</option> 4418 <option value="free">Free</option> 4419 <option value="under10">Under 10</option> 4420 <option value="10to25">10 â 25</option> 4421 <option value="25to50">25 â 50</option> 4422 <option value="50plus">50+</option> 4423 </select> 4424 <i data-lucide="chevron-down"></i> 4425 </span> 4426 </label> 4427 4428 <label class="urs-filter-list-row">
4429 <span class="urs-filter-list-icon"> 4430 <i data-lucide="arrow-up-down"></i> 4431 </span> 4432 <span class="urs-filter-list-copy"> 4433 <strong>Sort by</strong> 4434 <small>Change the order</small> 4435 </span> 4436 <span class="urs-filter-select"> 4437 <select id="catalogSort" aria-label="Sort products"> 4438 <option value="default">Default</option> 4439 <option value="newest">Newest</option> 4440 <option value="oldest">Oldest</option> 4441 <option value="price-asc">Price â</option> 4442 <option value="price-desc">Price â</option> 4443 <option value="title-asc">A â Z</option> 4444 </select> 4445 <i data-lucide="chevron-down"></i> 4446 </span> 4447 </label> 4448 </section> 4449 </div> 4450 4451 <div class="urs-filter-panel-foot"> 4452 <span id="catalogResultCount" class="urs-filter-result-count">0 products</span> 4453 4454 <button id="clearCatalogFilters" class="urs-filter-reset" type="button"> 4455 <i data-lucide="rotate-ccw"></i> 4456 Reset 4457 </button> 4458 </div> 4459 </div> 4460 </div> 4461 </div> 4462 </div> 4463 </div> 4464 </div> 4465 </section> 4466 4467 <!-- ===================================================== 4468 PRODUCT GRID 4469 browse-products.js renders real product cards here. 4470 ===================================================== --> 4471 <section id="products" class="products-layer"> 4472 <div class="page-shell"> 4473 <div id="productGrid"></div> 4474 4475 <div id="emptyState" class="empty-state"> 4476 <div class="empty-state-icon"> 4477 <i data-lucide="search-x" class="h-5 w-5"></i> 4478 </div> 4479 <h3>No products found</h3> 4480 <p>Try another search term or change the selected platform/framework filter.</p> 4481 </div> 4482 </div> 4483 </section> 4484 </main> 4485 4486 <!-- Unreal Studios shared footer --> 4487<style id="urs-shared-footer-style"> 4488.site-footer { 4489 --border: rgba(255, 255, 255, 0.08); 4490 --text-2: rgba(247, 247, 251, 0.68); 4491 --text-3: rgba(247, 247, 251, 0.43); 4492 --text-4: rgba(247, 247, 251, 0.25); 4493 --purple-soft: rgba(185, 143, 214, 0.12); 4494 --purple-line: rgba(185, 143, 214, 0.28); 4495 4496 width: 100%; 4497 max-width: 100%; 4498 overflow: hidden; 4499 border-top: 1px solid var(--border); 4500 background: #09090d; 4501 box-sizing: border-box; 4502 color: #f7f7fb; 4503 font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 4504 font-style: normal; 4505 letter-spacing: normal; 4506} 4507 4508.site-footer, 4509.site-footer * { 4510 box-sizing: border-box; 4511} 4512 4513/* Footer owns its own link presentation so page-level article CSS cannot leak into it. */ 4514.site-footer a, 4515.site-footer a:hover, 4516.site-footer a:focus, 4517.site-footer a:active { 4518 text-decoration: none; 4519} 4520 4521.footer-main { 4522 width: min(1380px, calc(100% - 40px)); 4523 margin: 0 auto; 4524 padding: 46px 0 34px; 4525 4526 display: grid; 4527 grid-template-columns: minmax(250px, 1fr) minmax(0, 1.7fr); 4528 gap: 70px; 4529 4530 min-width: 0; 4531} 4532 4533.footer-brand, 4534.footer-columns, 4535.footer-column { 4536 min-width: 0; 4537} 4538 4539/* ========================= 4540 BRAND 4541 ========================= */ 4542 4543.footer-logo-link { 4544 display: inline-block; 4545 line-height: 0; 4546 border-radius: 10px; 4547 transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease; 4548} 4549 4550.footer-logo-link:hover { 4551 transform: translateY(-2px); 4552} 4553 4554.footer-logo-link img { 4555 display: block; 4556 width: 150px; 4557 max-width: 100%; 4558 height: auto; 4559 transition: transform 160ms ease, filter 160ms ease; 4560} 4561 4562.footer-logo-link:hover img { 4563 transform: scale(1.025); 4564 filter: brightness(1.12); 4565} 4566 4567.footer-brand p { 4568 max-width: 390px; 4569 margin: 14px 0 0; 4570 4571 color: var(--text-3); 4572 4573 font-size: 10px; 4574 line-height: 1.7; 4575 font-weight: 600; 4576
4577 overflow-wrap: anywhere; 4578} 4579 4580.footer-powered { 4581 width: fit-content; 4582 max-width: 100%; 4583 4584 margin-top: 16px; 4585 padding: 6px 8px; 4586 4587 border: 1px solid var(--border); 4588 border-radius: 8px; 4589 4590 color: var(--text-4); 4591 background: rgba(255,255,255,.02); 4592 4593 font-size: 8px; 4594 font-weight: 800; 4595 letter-spacing: .05em; 4596 text-transform: uppercase; 4597 4598 white-space: normal; 4599} 4600 4601.footer-powered strong { 4602 color: var(--text-2); 4603} 4604 4605/* ========================= 4606 COLUMNS 4607 ========================= */ 4608 4609.footer-columns { 4610 display: grid; 4611 grid-template-columns: repeat(4, minmax(0, 1fr)); 4612 gap: 26px; 4613} 4614 4615.footer-column h4 { 4616 margin: 0 0 12px; 4617 4618 color: var(--text-2); 4619 4620 font-size: 9px; 4621 font-weight: 900; 4622 letter-spacing: .13em; 4623 text-transform: uppercase; 4624} 4625 4626.footer-column ul { 4627 margin: 0; 4628 padding: 0; 4629 list-style: none; 4630 4631 display: grid; 4632 gap: 8px; 4633} 4634 4635.footer-column li { 4636 min-width: 0; 4637} 4638 4639.footer-column a { 4640 display: inline-block; 4641 max-width: 100%; 4642 4643 color: var(--text-3); 4644 4645 font-size: 10px; 4646 font-weight: 650; 4647 line-height: 1.4; 4648 4649 overflow-wrap: anywhere; 4650 word-break: normal; 4651 4652 transition: color 140ms ease; 4653} 4654 4655.footer-column a:hover { 4656 color: white; 4657} 4658 4659/* ========================= 4660 BOTTOM 4661 ========================= */ 4662 4663.footer-bottom { 4664 width: min(1380px, calc(100% - 40px)); 4665 margin: 0 auto; 4666 padding: 18px 0 25px; 4667 4668 display: flex; 4669 align-items: flex-start; 4670 justify-content: space-between; 4671 gap: 30px; 4672 4673 border-top: 1px solid var(--border); 4674 4675 min-width: 0; 4676} 4677 4678.footer-legal { 4679 max-width: 930px; 4680 min-width: 0; 4681 4682 color: rgba(255,255,255,.22); 4683 4684 font-size: 8px; 4685 line-height: 1.65; 4686 font-weight: 600; 4687 4688 overflow-wrap: anywhere; 4689} 4690 4691.footer-legal p { 4692 margin: 0; 4693} 4694 4695.footer-legal p + p { 4696 margin-top: 4px; 4697} 4698 4699.footer-socials { 4700 display: flex; 4701 align-items: center; 4702 flex-shrink: 0; 4703 gap: 6px; 4704} 4705 4706.footer-socials a { 4707 width: 34px; 4708 height: 34px; 4709 4710 display: inline-flex; 4711 align-items: center; 4712 justify-content: center; 4713 4714 flex: 0 0 34px; 4715 4716 border: 1px solid var(--border); 4717 border-radius: 9px; 4718 4719 background: rgba(255,255,255,.02); 4720 color: var(--text-3); 4721 4722 transition: 4723 color 140ms ease, 4724 border-color 140ms ease, 4725 background 140ms ease, 4726 transform 140ms ease; 4727} 4728 4729.footer-socials a:hover { 4730 color: white; 4731 border-color: var(--purple-line); 4732 background: var(--purple-soft); 4733 transform: translateY(-1px); 4734} 4735 4736 4737/* ========================================================= 4738 TABLET 4739 ========================================================= */ 4740 4741@media (max-width: 900px) { 4742 .footer-main { 4743 grid-template-columns: 1fr; 4744 gap: 34px; 4745 } 4746 4747 .footer-columns { 4748 grid-template-columns: repeat(4, minmax(0, 1fr)); 4749 } 4750} 4751 4752 4753/* ========================================================= 4754 MOBILE 4755 ========================================================= */ 4756 4757@media (max-width: 680px) { 4758 .site-footer { 4759 overflow-x: hidden; 4760 } 4761 4762 .footer-main { 4763 width: calc(100% - 28px); 4764 padding: 34px 0 28px; 4765 gap: 30px; 4766 } 4767 4768 .footer-logo-link img { 4769 width: 136px; 4770 } 4771 4772 .footer-brand p { 4773 max-width: 320px; 4774 margin-top: 12px; 4775 font-size: 9.5px; 4776 line-height: 1.65; 4777 } 4778 4779 .footer-powered { 4780 margin-top: 13px; 4781 font-size: 7.5px; 4782 } 4783 4784 .footer-columns { 4785 grid-template-columns: repeat(2, minmax(0, 1fr)); 4786 gap: 28px 22px; 4787 } 4788 4789 .footer-column h4 { 4790 margin-bottom: 10px; 4791 font-size: 8.5px; 4792 } 4793 4794 .footer-column ul { 4795 gap: 7px; 4796 } 4797 4798 .footer-column a { 4799 font-size: 10px; 4800 } 4801 4802 .footer-bottom { 4803 width: calc(100% - 28px); 4804 padding: 20px 0 24px; 4805 4806 flex-direction: column; 4807 align-items: flex-start; 4808 4809 gap: 17px; 4810 } 4811 4812 .footer-legal { 4813 width: 100%; 4814 max-width: 100%; 4815 4816 font-size: 7.75px; 4817 line-height: 1.6; 4818 } 4819 4820 .footer-socials { 4821 width: 100%; 4822 justify-content: flex-start; 4823 } 4824 4825 .footer-socials a { 4826 width: 36px; 4827 height: 36px; 4828 flex-basis: 36px; 4829 } 4830} 4831 4832 4833/* ========================================================= 4834 SMALL PHONES 4835 ========================================================= */ 4836 4837@media (max-width: 420px) { 4838 .footer-main, 4839 .footer-bottom { 4840 width: calc(100% - 24px); 4841 } 4842 4843 .footer-main { 4844 padding-top: 30px; 4845 } 4846 4847 .footer-columns { 4848 gap: 25px 16px; 4849 } 4850 4851 .footer-column h4 {
4852 font-size: 8px; 4853 letter-spacing: .11em; 4854 } 4855 4856 .footer-column a { 4857 font-size: 9.5px; 4858 } 4859 4860 .footer-brand p { 4861 font-size: 9px; 4862 } 4863 4864 .footer-legal { 4865 font-size: 7.5px; 4866 } 4867} 4868</style> 4869 4870 4871<style id="urs-shared-footer-firewall"> 4872/* Shared-shell firewall: public page CSS must not alter footer metrics. */ 4873.site-footer { 4874 font-family: Inter, Arial, sans-serif !important; 4875 font-size: 16px !important; 4876 line-height: normal !important; 4877 font-style: normal !important; 4878 letter-spacing: normal; 4879 text-transform: none; 4880} 4881.site-footer, 4882.site-footer *, 4883.site-footer *::before, 4884.site-footer *::after { 4885 box-sizing: border-box !important; 4886} 4887.site-footer a, 4888.site-footer button, 4889.site-footer input, 4890.site-footer select { 4891 font-family: Inter, Arial, sans-serif !important; 4892 font-style: normal !important; 4893} 4894.site-footer img { max-width: none; } 4895.site-footer .footer-logo-link img { max-width: 100% !important; } 4896</style> 4897 4898<footer class="site-footer"> 4899 <div class="footer-main"> 4900 4901 <div class="footer-brand"> 4902 <a href="/" class="footer-logo-link" aria-label="Go to Unreal Studios home"> 4903 <img 4904 src="/assets/img/logos/logoandtext-display.png?v=20261007-3" 4905 alt="Unreal Studios" 4906 > 4907 </a> 4908 4909 <p> 4910 Premium FiveM resources, Minecraft projects, and development tools from Unreal Studios. 4911 </p> 4912 4913 <div class="footer-powered"> 4914 Checkout powered by <strong>Tebex</strong> 4915 </div> 4916 </div> 4917 4918 4919 <div class="footer-columns"> 4920 4921 <div class="footer-column"> 4922 <h4>Store</h4> 4923 4924 <ul> 4925 <li><a href="/products/view-all">All Products</a></li> 4926 <li><a href="https://unreal-studios-shop.tebex.io/checkout/basket">Basket</a></li> 4927 <li><a href="/account/transactions">Orders</a></li> 4928 <li><a href="/partners">Partners</a></li> 4929 </ul> 4930 </div> 4931 4932 4933 <div class="footer-column"> 4934 <h4>Resources</h4> 4935 4936 <ul> 4937 <li><a href="/documentation">Documentation</a></li> 4938 <li><a href="/support">Support</a></li> 4939 <li><a href="/news">News</a></li> 4940 <li><a href="/about">About Us</a></li> 4941 <li><a href="https://unrealstudios.instatus.com/">Status</a></li> 4942 </ul> 4943 </div> 4944 4945 4946 <div class="footer-column"> 4947 <h4>Community</h4> 4948 4949 <ul> 4950 <li><a href="https://discord.com/invite/WAZe8ruSTm">Discord</a></li> 4951 <li><a href="https://forum.cfx.re/u/itzfuture/summary">Cfx.re</a></li> 4952 <li><a href="https://github.com/Official-Unreal-Studios">GitHub</a></li> 4953 <li><a href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw">YouTube</a></li> 4954 </ul> 4955 </div> 4956 4957 4958 <div class="footer-column"> 4959 <h4>Legal</h4> 4960 4961 <ul> 4962 <li><a href="/terms-of-service">Terms & Conditions</a></li> 4963 <li><a href="/privacy-policy">Privacy Policy</a></li> 4964 <li><a href="https://unreal-studios-shop.tebex.io/terms/checkout">Tebex Terms</a></li> 4965 <li><a href="https://unreal-studios-shop.tebex.io/terms/impressum">Impressum</a></li> 4966 </ul> 4967 </div> 4968 4969 </div> 4970 </div> 4971 4972 4973 <div class="footer-bottom"> 4974 4975 <div class="footer-legal"> 4976 <p> 4977 Copyright © 2026 <strong>Unreal Studios</strong>. This project is not affiliated with or endorsed by Rockstar North, 4978 Take-Two Interactive, Mojang, or other rights holders. 4979 </p> 4980 4981 <p> 4982 Checkout is securely owned and operated by <strong>Tebex Limited</strong>, who handle product fulfilment, 4983 billing support, and refund requests. 4984 </p> 4985 </div> 4986 4987 4988 <div class="footer-socials"> 4989 4990 <a 4991 href="https://discord.com/invite/WAZe8ruSTm" 4992 target="_blank" 4993 rel="noopener noreferrer nofollow" 4994 aria-label="Discord" 4995 > 4996 <i class="fa-brands fa-discord"></i> 4997 </a> 4998 4999 <a 5000 href="https://www.youtube.com/channel/UClyh4g7SBGC59djP1yt2Amw" 5001 target="_blank" 5002 rel="noopener noreferrer nofollow" 5003 aria-label="YouTube" 5004 > 5005 <i class="fa-brands fa-youtube"></i> 5006 </a> 5007 5008 <a 5009 href="https://github.com/Official-Unreal-Studios" 5010 target="_blank" 5011 rel="noopener noreferrer nofollow" 5012 aria-label="GitHub" 5013 > 5014 <i class="fa-brands fa-github"></i> 5015 </a> 5016 5017 </div> 5018 5019 </div> 5020</footer> 5021 5022 5023 <!-- One source of behavior only. No duplicate filter/menu/auth listeners. --> 5024 5025 <!-- Shared header owns authentication/account behavior. --> 5026 5027
5027<script src="/javascript/public/browse-products.js?v=20261004-tebex-live-sale-4"></script>
5027 5028
5028<script src="/javascript/public/products.js?v=20260929-no-date-filter-1"></script>
5028 5029
5029<script src="../javascript/tools/traffic-tracker.js?v=5" defer></script>
5029 5030</body> 5031</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.