body { margin:0; background:#0b0a2c; color:#e9ecfa; font-family:'DM Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased } * { box-sizing:border-box } a { color:#a48fff; text-decoration:none } a:hover { color:#cdbfff } input, textarea, select { font:inherit } input::placeholder, textarea::placeholder { color:#5b6489 } img { display:block } /* Scoped to the view root on purpose: the design assumed had no lang attribute, so a bare [lang] selector used to be safe. The static build sets for SEO and accessibility, and an unscoped rule would hide the whole document. */ [data-view] [lang]{ display:none } [data-view][data-lang="es"] [lang="es"], [data-view][data-lang="en"] [lang="en"]{ display:revert } [data-v],[data-q],[data-t],[data-d],[data-k],[data-m],[data-g],[data-x]{ display:none !important } [data-view="login"] nav, [data-view="login"] footer, [data-view="login"] [data-ck], [data-view="register"] nav, [data-view="register"] footer, [data-view="register"] [data-ck] { display:none !important } [data-view="login"], [data-view="register"]{ height:100vh; overflow:hidden } @media (max-width:1240px){ nav [data-nav-lbl]{ display:none !important } nav [data-nav-lbl-alt]{ display:inline !important } } @media (max-width:1150px){ nav [data-nav-sec]{ display:none !important } } @media (max-width:1040px){ nav [data-dc-lbl]{ display:none !important } } @media (max-width:1040px){ nav [data-nav-hide]{ display:none !important } nav [data-lang-one]{ display:flex !important } } [data-view="home"] [data-v="home"], [data-view="erlc"] [data-v="erlc"], [data-view="fivem"] [data-v="fivem"], [data-view="products"] [data-v="products"], [data-view="discovery"] [data-v="discovery"], [data-view="resources"] [data-v="resources"], [data-view="dl-launcher"] [data-v="dl-launcher"], [data-view="dl-framework"] [data-v="dl-framework"], [data-view="docs"] [data-v="docs"], [data-view="lics"] [data-v="lics"], [data-view="login"] [data-v="login"], [data-view="register"] [data-v="login"], [data-view="api"] [data-v="api"], [data-view="bot"] [data-v="bot"], [data-view="faq"] [data-v="faq"], [data-view="item"] [data-v="item"], [data-view="support"] [data-v="support"], [data-view="status"] [data-v="status"], [data-view="terms"] [data-v="terms"], [data-view="panel"] [data-v="panel"], [data-view="server"] [data-v="server"], [data-term="m"] [data-t="m"], [data-term="q"] [data-t="q"], [data-detail="yes"] [data-q="detail"], [data-tab="srv"] [data-d="srv"], [data-tab="dl"] [data-d="dl"], [data-tab="bill"] [data-d="bill"], [data-tab="lic"] [data-d="lic"], [data-modal="yes"] [data-m="wrap"], [data-rot="yes"] [data-x="rot"], [data-search="yes"] [data-x="search"], [data-step="plan"] [data-m="plan"], [data-step="pay"] [data-m="pay"], [data-step="name"] [data-m="name"], [data-step="guide"] [data-m="guide"], [data-gs="1"] [data-g="1"], [data-gs="2"] [data-g="2"], [data-gs="3"] [data-g="3"], [data-tkd="no"] [data-k="no"], [data-tkd="yes"] [data-k="yes"], [data-plans="yes"] [data-x="plans"], [data-tour="yes"] [data-x="tour"]{ display:var(--d,revert) !important } [data-v]{ animation:up .5s cubic-bezier(.16,.9,.2,1) both } [data-v] > div { animation:rise .62s cubic-bezier(.16,.9,.2,1) both } [data-v] > div:nth-child(2){ animation-delay:.05s } [data-v] > div:nth-child(3){ animation-delay:.1s } [data-v] > div:nth-child(4){ animation-delay:.15s } [data-v] > div:nth-child(5){ animation-delay:.2s } [data-v] > div:nth-child(6){ animation-delay:.25s } [data-m="plan"] > div, [data-m="pay"] > div, [data-m="name"] > div, [data-g] { animation:rise .45s cubic-bezier(.16,.9,.2,1) both } [data-q]{ animation:reveal .34s cubic-bezier(.16,.9,.2,1) both } @keyframes up { from{ opacity:0 } to{ opacity:1 } } @keyframes rise { from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } } @keyframes reveal { from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } } @keyframes pop { from{ opacity:0; transform:translateY(22px) scale(.965) } to{ opacity:1; transform:none } } @keyframes fade { from{ opacity:0 } to{ opacity:1 } } @keyframes glow { 0%,100%{ opacity:.45 } 50%{ opacity:1 } } *{ scrollbar-width:thin; scrollbar-color:rgba(168,143,255,.42) transparent } ::-webkit-scrollbar{ width:11px; height:11px } ::-webkit-scrollbar-track{ background:transparent } ::-webkit-scrollbar-thumb{ background:rgba(168,143,255,.34); border:3px solid transparent; border-radius:99px; background-clip:content-box } ::-webkit-scrollbar-thumb:hover{ background:rgba(190,160,255,.62); border:3px solid transparent; background-clip:content-box } ::-webkit-scrollbar-corner{ background:transparent } @keyframes bar { from{ transform:scaleX(0) } to{ transform:scaleX(1) } } @keyframes grow { 0%{ transform:scaleY(.08); opacity:0 } 62%{ transform:scaleY(1.06); opacity:1 } 100%{ transform:scaleY(1); opacity:1 } } /* --- static build additions ------------------------------------------- */ /* Links generated from the design's click handlers must not inherit the default anchor look. */ a[data-nav]{ color:inherit; text-decoration:none } a[data-nav]:hover{ color:inherit } /* Dropdown menus in the nav are opened by app.js. */ [data-menu-open]{ display:block !important } /* Nothing on the page should depend on JS to be readable. */ .no-js-hidden{ display:none } /* Gradient headings. The prerender runs the design through jsdom, whose CSS parser silently drops background-clip, so the inline style arrives with a gradient background and transparent text but nothing clipping the paint — the heading came out as a solid coloured bar. Restoring it here covers every page at once. !important is required, not sloppiness: the inline style sets the `background` shorthand, which resets background-clip to border-box at inline specificity. */ [style*="color: transparent"][style*="gradient"]{ -webkit-background-clip: text !important; background-clip: text !important; }