html, body {
background-color: rgb(5, 12, 24) !important;
color: rgb(250, 250, 250);
color-scheme: dark;
font-family: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
opacity: 1 !important;
visibility: visible !important;
}
/* Early Geist 700 for card titles (pairs with home font preload; display=swap) */
@font-face {
font-family: Geist;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist@5.2.5/latin-700-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Emergency: never let a stylesheet blank the chrome / main content */
header.kb-site-header,
header.kb-site-header .kb-float-nav,
main.flex-1,
.home-page,
.kingdom-home-hero-wrap,
#kingdom-home-hero,
#store,
#categories-container {
opacity: 1 !important;
visibility: visible !important;
}
header.kb-site-header {
display: block !important;
}
main.flex-1 {
display: block !important;
min-height: 40vh;
}
.reveal-fade-up,
.reveal-fade-up.visible,
.home-trust-card {
opacity: 1;
transform: none;
}
body.kingdom-is-home .home-trust-section,
body.kingdom-is-home .home-trust-card,
body.kingdom-is-home .home-trust-hero {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Home: cards/preços estáveis no 1º paint (anti flash reload) */
body.kingdom-is-home .package-card,
body.kingdom-is-home .package-card__media,
body.kingdom-is-home .package-card__body,
body.kingdom-is-home .package-card__image,
body.kingdom-is-home .package-card__price,
body.kingdom-is-home .package-card__compare,
body.kingdom-is-home .package-card__badge,
body.kingdom-is-home .package-carousel-slide,
body.kingdom-is-home .home-category-block,
body.kingdom-is-home .category-carousel-strip {
opacity: 1 !important;
visibility: visible !important;
}
/* Dimensões finais no critical — evita salto 2/3→3/4 e preço 1rem→1.2rem */
body.kingdom-is-home .home-category-block .package-card__image,
body.kingdom-is-home .category-carousel-strip .package-card__image {
aspect-ratio: 3 / 4;
transition: none !important;
filter: none !important;
transform: none !important;
}
body.kingdom-is-home .home-category-block .package-card__body,
body.kingdom-is-home .category-carousel-strip .package-card__body {
gap: 0.28rem;
padding: 0.48rem 0.62rem 0.52rem;
}
body.kingdom-is-home .home-category-block .package-card__title,
body.kingdom-is-home .category-carousel-strip .package-card__title {
font-size: 0.92rem;
line-height: 1.22;
min-height: calc(1.22em * 2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
overflow-wrap: anywhere;
font-family: Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-weight: 750;
}
body.kingdom-is-home .home-category-block .package-card__price,
body.kingdom-is-home .category-carousel-strip .package-card__price {
font-family: Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-weight: 750;
}
/* Preço pendente já nasce como shimmer (sem "···" solto no 1º paint) */
.package-card__price-skel {
display: inline-block;
width: 5.1rem;
max-width: 100%;
height: 1.05em;
border-radius: 0.35rem;
vertical-align: -0.14em;
color: transparent;
background-color: rgb(255 255 255 / 0.09);
}
@media (min-width: 640px) {
.package-card__price-skel {
width: 6rem;
}
}
body.kingdom-is-home .home-category-block .package-card__footer,
body.kingdom-is-home .category-carousel-strip .package-card__footer {
margin-top: auto;
min-height: 2.7rem;
}
body.kingdom-is-home .home-category-block .package-card__prices,
body.kingdom-is-home .category-carousel-strip .package-card__prices {
min-height: 2.6rem;
justify-content: flex-end;
}
body.kingdom-is-home .home-category-block .package-card__compare,
body.kingdom-is-home .category-carousel-strip .package-card__compare {
font-size: 0.78rem;
}
body.kingdom-is-home .home-category-block .package-card__price,
body.kingdom-is-home .category-carousel-strip .package-card__price {
font-size: 1.28rem;
line-height: 1.08;
}
@media (min-width: 640px) {
body.kingdom-is-home .home-category-block .package-card__title,
body.kingdom-is-home .category-carousel-strip .package-card__title {
font-size: 1.02rem;
}
body.kingdom-is-home .home-category-block .package-card__price,
body.kingdom-is-home .category-carousel-strip .package-card__price {
font-size: 1.42rem;
}
}
/* Coverflow: 1º paint neutro (sem side-transform) até data-kb-cf-ready */
.kb-coverflow-shell.kb-cf-boot .package-card,
.kb-coverflow-shell:not([data-kb-cf-ready]) .package-card,
.kb-coverflow-shell:not([data-kb-cf-ready]) .package-carousel-slide .package-card {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
filter: none !important;
transition: none !important;
box-shadow:
0 0 0 var(--kb-hairline, 1px) rgba(255, 255, 255, 0.12),
0 12px 28px rgb(0 0 0 / 0.35) !important;
}
.kb-coverflow-shell.kb-cf-boot .package-card__image,
.kb-coverflow-shell:not([data-kb-cf-ready]) .package-card__image,
.kb-coverflow-shell:not([data-kb-cf-ready]) .package-carousel-slide .package-card__image {
transform: none !important;
filter: none !important;
transition: none !important;
}
/* Esconde o trilho até o loop estacionar — evita flash de clones / cards “torcidos” */
body.kingdom-is-home .kb-coverflow-shell.kb-cf-boot .package-list,
body.kingdom-is-home .kb-coverflow-shell.kb-cf-boot .kb-coverflow-track,
body.kingdom-is-home .kb-coverflow-shell:not([data-kb-cf-ready]) .package-list,
body.kingdom-is-home .kb-coverflow-shell:not([data-kb-cf-ready]) .kb-coverflow-track {
opacity: 0 !important;
pointer-events: none !important;
}
body.kingdom-is-home .kb-coverflow-shell[data-kb-cf-ready='1'] .package-list,
body.kingdom-is-home .kb-coverflow-shell[data-kb-cf-ready='1'] .kb-coverflow-track {
opacity: 1 !important;
pointer-events: auto !important;
transition: opacity 0.12s ease;
}
/* Após ready: pose coverflow instantânea; animações só com data-kb-cf-hot */
body.kingdom-is-home .kb-coverflow-shell[data-kb-cf-ready='1']:not([data-kb-cf-hot]) .package-card,
body.kingdom-is-home .kb-coverflow-shell[data-kb-cf-ready='1']:not([data-kb-cf-hot]) .package-carousel-slide .package-card,
body.kingdom-is-home .kb-coverflow-shell[data-kb-cf-ready='1']:not([data-kb-cf-hot]) .package-card__image {
transition: none !important;
}
/* PS 16:9 no critical — evita salto 3:4→16:9 quando home-extra chega */
@media (min-width: 768px) {
body.kingdom-is-home [data-ps-trailer-carousel] .package-carousel-slide {
flex: 0 0 min(26rem, 42vw);
width: min(26rem, 42vw);
max-width: none;
}
body.kingdom-is-home [data-ps-trailer-carousel] .package-card__media {
aspect-ratio: 16 / 9;
}
body.kingdom-is-home [data-ps-trailer-carousel] .package-card__image {
aspect-ratio: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Zoom desktop no critical — evita salto quando core.css chega */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
body {
zoom: 0.9;
--kb-page-zoom: 0.9;
--kb-hairline: calc(1px / var(--kb-page-zoom, 1));
}
}
@media (max-width: 1279px), (pointer: coarse), (hover: none) {
body {
zoom: 1 !important;
--kb-page-zoom: 1;
--kb-hairline: 1px;
}
}
/* Offset da nav fixa no 1º paint — topo + safe-area (nav não colada no chrome) */
:root { --kb-safe-top: env(safe-area-inset-top, 0px); }
body:has(header.kb-site-header) {
--kb-header-offset: calc(6.2rem + var(--kb-safe-top, env(safe-area-inset-top, 0px)));
--site-header-sticky-below: var(--kb-header-offset);
padding-top: var(--kb-header-offset);
}
@media (min-width: 640px) {
body:has(header.kb-site-header) { --kb-header-offset: calc(6.35rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 768px) {
body:has(header.kb-site-header) { --kb-header-offset: calc(6.55rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 1024px) {
body:has(header.kb-site-header) { --kb-header-offset: calc(6.75rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
body.kingdom-is-home:has(header.kb-site-header) {
--kb-header-offset: calc(5.9rem + var(--kb-safe-top, env(safe-area-inset-top, 0px)));
--site-header-sticky-below: var(--kb-header-offset);
}
@media (min-width: 640px) {
body.kingdom-is-home:has(header.kb-site-header) { --kb-header-offset: calc(5.9rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 768px) {
body.kingdom-is-home:has(header.kb-site-header) { --kb-header-offset: calc(7.2rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 1024px) {
body.kingdom-is-home:has(header.kb-site-header) { --kb-header-offset: calc(7.5rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
body:has(header.kb-site-header--with-search) {
--kb-header-offset: calc(9.35rem + var(--kb-safe-top, env(safe-area-inset-top, 0px)));
--site-header-sticky-below: var(--kb-header-offset);
}
@media (min-width: 640px) {
body:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.5rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 768px) {
body:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.7rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 1024px) {
body:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.9rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
body.kingdom-is-home:has(header.kb-site-header--with-search) {
--kb-header-offset: calc(9.1rem + var(--kb-safe-top, env(safe-area-inset-top, 0px)));
--site-header-sticky-below: var(--kb-header-offset);
}
@media (min-width: 640px) {
body.kingdom-is-home:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.2rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 768px) {
body.kingdom-is-home:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.85rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
@media (min-width: 1024px) {
body.kingdom-is-home:has(header.kb-site-header--with-search) { --kb-header-offset: calc(10.1rem + var(--kb-safe-top, env(safe-area-inset-top, 0px))); }
}
#top-announce,
.kb-top-announce {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 2.55rem;
margin: 0.95rem 0;
}
@media (min-width: 768px) {
#top-announce, .kb-top-announce { margin: 1.25rem 0; }
}
@media (min-width: 1024px) {
#top-announce, .kb-top-announce { margin: 1.4rem 0; }
}
body:has(header.kb-site-header--with-search).kingdom-show-bogo-promo #top-announce,
body:has(header.kb-site-header--with-search).kingdom-show-bogo-promo .kb-top-announce,
body.kingdom-is-package-immersive.kingdom-show-bogo-promo #top-announce,
body.kingdom-is-package-immersive.kingdom-show-bogo-promo .kb-top-announce {
margin-top: 0.2rem !important;
margin-bottom: 0.65rem !important;
}
/* Faixa BOGO só Steam / Pré-venda Steam — sem flash/gap nas demais páginas */
body:not(.kingdom-show-bogo-promo) #top-announce,
body:not(.kingdom-show-bogo-promo) .kb-top-announce {
display: none !important;
margin: 0 !important;
min-height: 0 !important;
padding: 0 !important;
}
body.kingdom-show-bogo-promo #top-announce,
body.kingdom-show-bogo-promo .kb-top-announce {
display: flex !important;
}
header.kb-site-header .kb-float-nav,
.kb-float-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
min-height: 66px;
border-radius: 1.2rem 0.35rem 1.2rem 0.35rem;
background: rgba(12, 20, 34, 0.52);
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
}
@media (min-width: 768px) {
header.kb-site-header .kb-float-nav,
.kb-float-nav {
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) max-content;
}
}
/* Fixed chrome — all pages (mobile layout fix) */
header.kb-site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 80;
width: 100%;
max-width: 100%;
box-sizing: border-box;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.kb-bottom-nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 55;
display: none !important;
justify-content: center;
align-items: flex-end;
width: 100%;
max-width: 100%;
padding: 0 0.7rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
overflow: visible;
pointer-events: none;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
@media (max-width: 767px) {
.kb-bottom-nav {
display: flex !important;
}
}
@media (min-width: 768px) {
.kb-bottom-nav {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
body:has(header.kb-site-header) {
--kb-header-offset: calc(6.2rem + env(safe-area-inset-top, 0px));
--site-header-sticky-below: var(--kb-header-offset);
padding-top: var(--kb-header-offset);
}
@media (min-width: 640px) {
body:has(header.kb-site-header) { --kb-header-offset: calc(6.35rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) {
body:has(header.kb-site-header) { --kb-header-offset: calc(6.55rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1024px) {
body:has(header.kb-site-header) { --kb-header-offset: calc(6.75rem + env(safe-area-inset-top, 0px)); }
}
body.kingdom-is-home:has(header.kb-site-header) {
--kb-header-offset: calc(5.9rem + env(safe-area-inset-top, 0px));
--site-header-sticky-below: var(--kb-header-offset);
}
@media (min-width: 640px) {
body.kingdom-is-home:has(header.kb-site-header) { --kb-header-offset: calc(5.9rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) {
body.kingdom-is-home:has(header.kb-site-header) { --kb-header-offset: calc(7.2rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1024px) {
body.kingdom-is-home:has(header.kb-site-header) { --kb-header-offset: calc(7.5rem + env(safe-area-inset-top, 0px)); }
}
body:has(header.kb-site-header--with-search) {
--kb-header-offset: calc(9.35rem + env(safe-area-inset-top, 0px));
--site-header-sticky-below: var(--kb-header-offset);
}
@media (min-width: 640px) {
body:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.5rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) {
body:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.7rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1024px) {
body:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.9rem + env(safe-area-inset-top, 0px)); }
}
body.kingdom-is-home:has(header.kb-site-header--with-search) {
--kb-header-offset: calc(9.1rem + env(safe-area-inset-top, 0px));
--site-header-sticky-below: var(--kb-header-offset);
}
@media (min-width: 640px) {
body.kingdom-is-home:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.2rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 768px) {
body.kingdom-is-home:has(header.kb-site-header--with-search) { --kb-header-offset: calc(9.85rem + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1024px) {
body.kingdom-is-home:has(header.kb-site-header--with-search) { --kb-header-offset: calc(10.1rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 767px) {
html {
overflow-x: hidden !important;
overflow-x: clip !important;
width: 100% !important;
max-width: 100% !important;
overscroll-behavior-x: none !important;
scrollbar-gutter: auto !important;
}
body,
body.kingdom-is-home {
overflow-x: hidden !important;
overflow-x: clip !important;
width: 100% !important;
max-width: 100% !important;
overscroll-behavior-x: none !important;
}
/* Home sticky search needs visible ancestors; X still clipped by html */
body.kingdom-is-home {
overflow-x: visible !important;
}
body.kingdom-is-home main.flex-1 {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
max-width: 100% !important;
}
main.flex-1 {
overflow-x: hidden !important;
overflow-x: clip !important;
max-width: 100% !important;
}
.container,
.kb-account,
.kb-order,
.kb-checkout {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body:has(.kb-bottom-nav) {
padding-bottom: calc(6.35rem + env(safe-area-inset-bottom, 0px));
}
.kb-bottom-nav__bar {
width: 100% !important;
max-width: min(100%, 28.5rem) !important;
margin-inline: auto;
border-radius: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(12, 20, 34, 0.88);
box-sizing: border-box;
overflow: visible;
pointer-events: auto;
}
}
/* Navbar critical — evita coluna se kingdom-nav.css atrasar/falhar */
header.kb-site-header .kb-float-nav,
.kb-float-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: 100% !important;
min-height: 66px;
padding: 0.5rem 0.82rem 0.5rem 0.62rem;
box-sizing: border-box;
overflow: visible !important;
border-radius: 1.2rem 0.35rem 1.2rem 0.35rem;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(12, 20, 34, 0.52);
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgb(0 0 0 / 0.22);
}
.kb-float-nav::before {
display: none !important;
}
header.kb-site-header .kb-float-nav__brand,
.kb-float-nav__brand {
display: flex !important;
position: relative;
z-index: 6;
flex: 0 0 auto !important;
order: 0;
visibility: visible !important;
opacity: 1 !important;
}
.kb-float-nav__logo {
height: 3.15rem;
max-height: 3.15rem;
}
.kb-float-nav__start,
.kb-float-nav__end {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex: 0 0 auto !important;
z-index: 5;
}
.kb-float-nav__end {
margin-left: auto;
justify-content: flex-end;
}
header.kb-site-header .kb-float-nav__platforms,
.kb-float-nav__platforms {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
flex: 0 0 auto !important;
justify-content: center !important;
width: max-content;
min-width: max-content;
}
header.kb-site-header .kb-float-nav__platforms-rail,
.kb-float-nav__platforms-rail {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: max-content;
min-width: max-content;
gap: 0.2rem;
min-height: 3.9rem;
padding: 0.36rem 0.56rem;
}
.kb-float-nav__platform {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: max-content;
min-width: 3.6rem;
min-height: 3.6rem;
height: 3.6rem;
gap: 0 !important;
padding: 0 0.82rem !important;
}
.kb-float-nav__platform-icon {
width: 2rem !important;
height: 2rem !important;
}
.kb-float-nav__platform-icon--xbox {
width: 2.05rem !important;
height: 2.05rem !important;
}
.kb-float-nav__platform-label {
display: none !important;
}
.kb-float-nav__actions #profile-button .kb-nav-profile-meta {
display: none !important;
}
header.kb-site-header .kb-float-nav__actions,
.kb-float-nav__actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}
header.kb-site-header .kb-float-nav__socials,
.kb-float-nav__socials {
display: flex !important;
flex-direction: row !important;
}
header.kb-site-header .kb-float-nav__social--desk,
.kb-float-nav__social.kb-float-nav__social--desk,
.kb-float-nav__social--desk {
display: none !important;
}
.kb-float-nav__name--with-logo {
display: none !important;
}
.kb-nav-enter__label {
display: none;
}
@media (min-width: 768px) {
header.kb-site-header .kb-float-nav,
.kb-float-nav {
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) max-content;
align-items: center !important;
justify-content: stretch !important;
column-gap: 0.75rem;
gap: 0 0.75rem;
overflow: visible !important;
}
.kb-float-nav__start,
.kb-float-nav__end {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
flex: 0 0 auto !important;
margin-left: 0;
}
.kb-float-nav__start {
grid-column: 1;
justify-self: start;
}
.kb-float-nav__end {
grid-column: 3;
justify-self: end;
}
header.kb-site-header .kb-float-nav__platforms,
.kb-float-nav__platforms {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
grid-column: 2;
justify-self: center;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
max-width: 100%;
}
header.kb-site-header .kb-float-nav__platforms-rail,
.kb-float-nav__platforms-rail {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem 1.15rem !important;
min-height: 0;
padding: 0;
border: 0;
background: none;
}
.kb-float-nav__platform {
gap: 0.42rem !important;
min-width: 0;
min-height: 2.9rem;
height: auto;
padding: 0.38rem 0.55rem !important;
overflow: visible !important;
align-items: center !important;
}
.kb-float-nav__platform-sep {
display: none !important;
}
.kb-float-nav__platform-label {
display: inline-block !important;
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
font-size: 0.84rem !important;
line-height: 1.2 !important;
color: #fff !important;
white-space: nowrap !important;
}
.kb-float-nav__platform-icon {
width: 2.1rem !important;
height: 2.1rem !important;
flex-shrink: 0;
overflow: visible;
align-self: center;
}
.kb-float-nav__platform-icon--xbox {
width: 2.15rem !important;
height: 2.15rem !important;
}
header.kb-site-header .kb-float-nav__socials--start,
.kb-float-nav__socials.kb-float-nav__socials--start,
.kb-float-nav__socials--start {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
header.kb-site-header .kb-float-nav__brand,
.kb-float-nav__brand {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
header.kb-site-header .kb-float-nav__socials--end,
.kb-float-nav__socials.kb-float-nav__socials--end,
.kb-float-nav__socials--end {
display: flex !important;
visibility: visible !important;
pointer-events: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
header.kb-site-header .kb-float-nav__social--desk,
.kb-float-nav__social.kb-float-nav__social--desk,
.kb-float-nav__socials--end .kb-float-nav__social {
display: inline-flex !important;
visibility: visible !important;
pointer-events: auto !important;
width: 2.52rem !important;
height: 2.52rem !important;
}
header.kb-site-header .kb-float-nav__socials--end .kb-float-nav__social-icon,
.kb-float-nav__socials--end .kb-float-nav__social-icon,
header.kb-site-header .kb-float-nav__socials--end .kb-float-nav__social-lucide,
.kb-float-nav__socials--end .kb-float-nav__social-lucide {
width: 1.2rem;
height: 1.2rem;
}
header.kb-site-header .kb-float-nav__actions,
.kb-float-nav__actions {
display: flex !important;
align-items: center !important;
overflow: visible !important;
}
header.kb-site-header .kb-float-nav__page-link,
.kb-float-nav__page-link {
display: none !important;
}
.kb-nav-enter__label {
display: inline;
}
}
@media (min-width: 1100px) {
.kb-float-nav__name--with-logo {
display: inline-flex !important;
flex-shrink: 0;
min-width: max-content;
max-width: none !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip;
}
}
header.kb-site-header .kb-float-nav__page-link,
.kb-float-nav__page-link {
display: none;
}
@media (max-width: 767px) {
header.kb-site-header .kb-float-nav__socials,
.kb-float-nav__socials {
display: flex !important;
visibility: visible !important;
pointer-events: auto !important;
gap: 0.16rem;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
header.kb-site-header .kb-float-nav__social--desk,
.kb-float-nav__social.kb-float-nav__social--desk,
.kb-float-nav__social--desk {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
header.kb-site-header .kb-float-nav__socials--end,
.kb-float-nav__socials.kb-float-nav__socials--end {
display: flex !important;
visibility: visible !important;
pointer-events: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
header.kb-site-header,
.kb-site-header {
max-width: 100%;
overflow: visible;
padding: calc(1.05rem + env(safe-area-inset-top, 0px)) 0.7rem 0.4rem;
}
header.kb-site-header .kb-float-nav,
.kb-float-nav {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative;
gap: 0.35rem;
min-height: 3.7rem;
padding: 0.36rem 0.65rem;
border-radius: 1.55rem;
}
.kb-float-nav__start,
.kb-float-nav__end {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 0.18rem;
margin: 0 !important;
}
.kb-float-nav__end {
margin-left: auto !important;
}
header.kb-site-header .kb-float-nav__platforms,
.kb-float-nav__platforms {
display: none !important;
}
header.kb-site-header .kb-float-nav__actions,
.kb-float-nav__actions {
display: none !important;
}
header.kb-site-header .kb-float-nav__brand,
.kb-float-nav__brand {
display: flex !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
z-index: 6;
visibility: visible !important;
}
.kb-float-nav__logo {
height: 3.55rem !important;
max-height: 3.55rem !important;
max-width: 4rem;
}
header.kb-site-header .kb-float-nav__page-link,
.kb-float-nav__page-link,
header.kb-site-header .kb-float-nav__page-link--reviews,
.kb-float-nav__page-link--reviews,
header.kb-site-header .kb-float-nav__page-link--terms,
.kb-float-nav__page-link--terms {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
header.kb-site-header .kb-float-nav__socials--start .kb-float-nav__social,
header.kb-site-header .kb-float-nav__socials--end .kb-float-nav__social,
.kb-float-nav__socials--start .kb-float-nav__social,
.kb-float-nav__socials--end .kb-float-nav__social {
width: 2.35rem !important;
height: 2.35rem !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
header.kb-site-header .kb-float-nav__socials--start .kb-float-nav__social-icon,
header.kb-site-header .kb-float-nav__socials--end .kb-float-nav__social-icon,
.kb-float-nav__socials--start .kb-float-nav__social-icon,
.kb-float-nav__socials--end .kb-float-nav__social-icon,
header.kb-site-header .kb-float-nav__socials--start .kb-float-nav__social-lucide,
header.kb-site-header .kb-float-nav__socials--end .kb-float-nav__social-lucide,
.kb-float-nav__socials--start .kb-float-nav__social-lucide,
.kb-float-nav__socials--end .kb-float-nav__social-lucide {
width: 1.35rem;
height: 1.35rem;
}
.kb-float-nav__name--with-logo,
.kb-float-nav__platform-label,
.kb-nav-enter__label {
display: none !important;
}
}
/* Vitrine critical — grid estável no primeiro paint */
.home-steam-spotlight--vitrine {
position: relative;
box-sizing: border-box;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__shell {
overflow: visible;
border-radius: 1.05rem;
background: #0b1220;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__stage {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 1.05rem;
background: #0b1220;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__hero {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 15rem;
background: #05070c;
}
.home-cat-spotlight--presale .home-steam-spotlight__hero-img {
opacity: 1;
}
.home-cat-spotlight--presale .home-steam-spotlight__hero.has-video .home-steam-spotlight__hero-img {
opacity: 0 !important;
}
.home-cat-spotlight--presale .home-steam-spotlight__loading-label {
display: none !important;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__thumbs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
align-content: start;
align-items: start;
gap: 0.35rem;
flex: 0 0 auto;
height: auto;
}
@media (max-width: 767px) {
.home-steam-spotlight--vitrine .home-steam-spotlight__thumbs {
display: none !important;
}
}
@media (min-width: 768px) {
.home-steam-spotlight--vitrine .home-steam-spotlight__thumbs {
flex: 1 1 auto;
grid-template-rows: 1fr 1fr;
align-content: stretch;
align-items: stretch;
gap: 0.4rem;
min-height: 0;
}
}
.home-steam-spotlight--vitrine .home-steam-spotlight__thumb.is-empty {
display: none;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__thumbs:not(:has(.home-steam-spotlight__thumb:not(.is-empty))) {
display: none;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__thumbs:not(:has(.home-steam-spotlight__thumb:not(.is-empty) ~ .home-steam-spotlight__thumb:not(.is-empty))) .home-steam-spotlight__thumb:not(.is-empty) {
grid-column: 1 / -1;
}
@media (min-width: 640px) {
.home-steam-spotlight--vitrine {
padding-inline: 3.35rem;
}
}
@media (min-width: 768px) {
.home-steam-spotlight--vitrine .home-steam-spotlight__stage {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(15.5rem, 30%);
height: clamp(22rem, 32vw, 28.5rem);
min-height: clamp(22rem, 32vw, 28.5rem);
}
.home-steam-spotlight--vitrine .home-steam-spotlight__hero {
grid-column: 1;
aspect-ratio: auto !important;
min-height: 100% !important;
height: 100% !important;
}
.home-steam-spotlight--vitrine .home-steam-spotlight__panel {
grid-column: 2;
height: 100%;
}
}
/* Anti-FOUC: placeholders estáveis até a imagem carregar */
img {
max-width: 100%;
color: transparent;
background-color: transparent;
}
img:not([src]),
img[src=""],
img.kb-img-broken {
visibility: hidden !important;
opacity: 0 !important;
}
img.kb-img-soft {
opacity: 1;
transition: none;
}
img.kb-img-soft.kb-img-ready {
opacity: 1;
}
/* Package pages: never fade hero/media from opacity 0 (anti-FOUC) */
body.kingdom-is-package-immersive .package-page-root #package-image-wrapper,
body.kingdom-is-package-immersive .package-page-root .pkg-showcase-hero-block,
body.kingdom-is-package-immersive .package-page-root .pkg-showcase-main-grid {
opacity: 1 !important;
visibility: visible !important;
}
body.kingdom-is-package-immersive .package-page-root #package-image-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
min-height: clamp(11.5rem, 32vw, 22rem);
max-height: none;
height: auto;
background: #05070c;
border: none !important;
outline: none !important;
border-radius: 1rem;
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
opacity: 1 !important;
visibility: visible !important;
}
/* Black 16:9 hero until trailer ready — solid black, no cover preview */
body.kingdom-is-package-immersive .package-page-root #package-image,
body.kingdom-is-package-immersive .package-page-root #package-image.forza-hero-main-shot {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
body.kingdom-is-package-immersive .package-page-root .package-static-hero-glow {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
.package-wrapper[data-yt-boot-ready='true'] #package-image,
.package-wrapper[data-yt-boot-ready='true'] #package-image.forza-hero-main-shot,
.package-wrapper[data-steam-hero-ready='true'] #package-image,
.package-wrapper[data-steam-hero-ready='true'] #package-image.forza-hero-main-shot,
.package-wrapper[data-cover-broken='true'] #package-image,
.package-wrapper[data-yt-cover-locked='true'] #package-image {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
.package-wrapper[data-pkg-youtube-pending='true']:not([data-yt-boot-ready='true']) #package-hero-video-slot,
.package-wrapper[data-custom-youtube-hero='true']:not([data-yt-boot-ready='true']) #package-hero-video-slot,
.package-wrapper[data-is-steam-category='true']:not([data-steam-hero-ready='true']) #package-hero-video-slot,
.package-wrapper[data-forza-steam-showcase='true']:not([data-steam-hero-ready='true']) #package-hero-video-slot {
z-index: 3 !important;
background: #05070c !important;
pointer-events: none;
}
.package-wrapper[data-is-steam-category='true'][data-steam-hero-ready='true'] #package-hero-video-slot,
.package-wrapper[data-is-steam-category='true'][data-steam-hero-ready='true'] #package-hero-steam-stage {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
#package-hero-steam-stage img,
#package-hero-steam-stage video {
max-width: none !important;
}
#package-image-wrapper img.kb-img-broken,
#package-hero-steam-stage img.kb-img-broken {
display: none !important;
}